davide
809b60d85e
The interface was translated in en/it/es/fr via @nuxtjs/i18n. Drop the module, the locale files, and the language switcher: the UI is now static Italian text, with translation for foreign visitors left to the Google Translate browser extension instead of the app.
92 lines
1.9 KiB
Vue
92 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { ArticleSummary } from '#shared/types/blog'
|
|
|
|
const props = defineProps<{ article: ArticleSummary }>()
|
|
|
|
const mediaUrl = useMediaUrl()
|
|
const cover = computed(() => mediaUrl(props.article.cover))
|
|
</script>
|
|
|
|
<template>
|
|
<article class="card">
|
|
<!-- No placeholder box when there is no cover: an empty grey rectangle
|
|
reads as a broken image rather than as a deliberate choice. -->
|
|
<NuxtLink
|
|
v-if="cover"
|
|
class="cover-link"
|
|
:to="`/blog/${article.slug}`"
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
>
|
|
<img
|
|
class="cover"
|
|
:src="cover"
|
|
:alt="article.cover?.alternativeText ?? ''"
|
|
:width="article.cover?.width ?? undefined"
|
|
:height="article.cover?.height ?? undefined"
|
|
loading="lazy"
|
|
>
|
|
</NuxtLink>
|
|
|
|
<p v-if="article.category" class="kicker">{{ article.category.name }}</p>
|
|
|
|
<h2>
|
|
<NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
|
|
</h2>
|
|
|
|
<p class="kicker date">
|
|
<time :datetime="isoDate(article.publishedAt)">
|
|
{{ formatDate(article.publishedAt) }}
|
|
</time>
|
|
</p>
|
|
</article>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cover-link {
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cover {
|
|
width: 100%;
|
|
aspect-ratio: 4 / 5;
|
|
object-fit: cover;
|
|
background: var(--color-surface);
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.cover-link:hover .cover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Without a cover the kicker leads the card, so it needs no offset. */
|
|
.cover-link + .kicker,
|
|
.cover-link + h2 {
|
|
margin-top: 1.1rem;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0.5rem;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
h2 a {
|
|
text-decoration: none;
|
|
background-image: linear-gradient(var(--color-ink), var(--color-ink));
|
|
background-size: 0 1px;
|
|
background-position: 0 100%;
|
|
background-repeat: no-repeat;
|
|
transition: background-size 0.3s ease;
|
|
}
|
|
|
|
h2 a:hover {
|
|
background-size: 100% 1px;
|
|
}
|
|
|
|
.date {
|
|
margin-top: 0.6rem;
|
|
font-weight: 400;
|
|
}
|
|
</style>
|