davide
c08f53ca69
The interface is translated through @nuxtjs/i18n: strings live in i18n/locales/*.json, routes are prefixed except for the default English, and useLocaleHead emits the lang attribute, the hreflang alternates and og:locale. The switcher is a native select rather than a custom dropdown: keyboard support, the platform picker on mobile and correct labelling come for free. Article content stays single-language — this translates the site chrome only.
94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { ArticleSummary } from '#shared/types/blog'
|
|
|
|
const props = defineProps<{ article: ArticleSummary }>()
|
|
|
|
const { locale } = useI18n()
|
|
const mediaUrl = useMediaUrl()
|
|
const cover = computed(() => mediaUrl(props.article.cover))
|
|
</script>
|
|
|
|
<template>
|
|
<article class="card">
|
|
<NuxtLinkLocale
|
|
class="cover-link"
|
|
:to="`/blog/${article.slug}`"
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
>
|
|
<img
|
|
v-if="cover"
|
|
class="cover"
|
|
:src="cover"
|
|
:alt="article.cover?.alternativeText ?? ''"
|
|
:width="article.cover?.width ?? undefined"
|
|
:height="article.cover?.height ?? undefined"
|
|
loading="lazy"
|
|
>
|
|
<span v-else class="cover placeholder" />
|
|
</NuxtLinkLocale>
|
|
|
|
<p v-if="article.category" class="kicker">{{ article.category.name }}</p>
|
|
|
|
<h2>
|
|
<NuxtLinkLocale :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLinkLocale>
|
|
</h2>
|
|
|
|
<p class="kicker date">
|
|
<time :datetime="isoDate(article.publishedAt)">
|
|
{{ formatDate(article.publishedAt, locale) }}
|
|
</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);
|
|
}
|
|
|
|
.placeholder {
|
|
display: block;
|
|
}
|
|
|
|
.kicker {
|
|
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>
|