@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/blog/BlogInfoSection.vue

@@ -11,15 +11,15 @@ import { formatDateLongItalyTimezone } from '../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<{
-    author: string;
-    authorUrl: string;
-    authorImageUrl: string;
-    authorBio?: string;
-    datePublished: string;
-    dateModified?: string | null;
+	author: string;
+	authorUrl: string;
+	authorImageUrl: string;
+	authorBio?: string;
+	datePublished: string;
+	dateModified?: string | null;
 }>(), {
-    authorBio: '',
-    dateModified: null
+	authorBio: '',
+	dateModified: null
 });
 
 const { t, locale } = useI18n();
@@ -33,46 +33,46 @@ const showModifiedDate = computed(() => Boolean(props.dateModified) && formatted
 </script>
 
 <template>
-    <!-- Author and date information -->
-    <Card data-aos="blur-up" class="gap-0! overflow-hidden p-0!">
-        <!-- Author -->
-        <div :class="['flex gap-3 px-5 py-4', props.authorBio ? 'items-start' : 'items-center']">
-            <!-- Author image -->
-            <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="shrink-0 rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
-                <NuxtImg :src="props.authorImageUrl" :alt="props.author" height="44" width="44" format="avif" quality="40" :sizes="{ 480: '44px', 1280: '44px' }" loading="lazy" decoding="async" class="size-11 rounded border border-border object-cover" />
-            </NuxtLink>
+	<!-- Author and date information -->
+	<Card data-aos="blur-up" class="gap-0! overflow-hidden p-0!">
+		<!-- Author -->
+		<div :class="['flex gap-3 px-5 py-4', props.authorBio ? 'items-start' : 'items-center']">
+			<!-- Author image -->
+			<NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="shrink-0 rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+				<NuxtImg :src="props.authorImageUrl" :alt="props.author" height="44" width="44" format="avif" quality="40" :sizes="{ 480: '44px', 1280: '44px' }" loading="lazy" decoding="async" class="size-11 rounded border border-border object-cover" />
+			</NuxtLink>
 
-            <!-- Author name and bio -->
-            <div class="min-w-0 flex-1">
-                <p class="text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">{{ t('uiVintage.blog.author') }}</p>
-                <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="group/link inline-flex items-center gap-1 text-sm font-semibold text-foreground outline-none transition-colors hover:text-primary focus-visible:underline md:text-base">
-                    {{ props.author }}
-                    <HugeiconsIcon :icon="ArrowUpRight01Icon" class="size-4 text-muted-foreground transition-[translate,color] duration-300 ease-spring group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5 group-hover/link:text-primary" />
-                </NuxtLink>
-                <p v-if="props.authorBio" class="mt-1.5 text-xs leading-relaxed text-muted-foreground md:text-sm">
-                    {{ props.authorBio }}
-                </p>
-            </div>
-        </div>
+			<!-- Author name and bio -->
+			<div class="min-w-0 flex-1">
+				<p class="text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">{{ t('uiVintage.blog.author') }}</p>
+				<NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="group/link inline-flex items-center gap-1 text-sm font-semibold text-foreground outline-none transition-colors hover:text-primary focus-visible:underline md:text-base">
+					{{ props.author }}
+					<HugeiconsIcon :icon="ArrowUpRight01Icon" class="size-4 text-muted-foreground transition-[translate,color] duration-300 ease-spring group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5 group-hover/link:text-primary" />
+				</NuxtLink>
+				<p v-if="props.authorBio" class="mt-1.5 text-xs leading-relaxed text-muted-foreground md:text-sm">
+					{{ props.authorBio }}
+				</p>
+			</div>
+		</div>
 
-        <!-- Date information -->
-        <div v-if="props.datePublished || showModifiedDate" class="flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-border bg-surface px-5 py-2.5 text-xs text-muted-foreground">
-            <!-- Published date -->
-            <span v-if="props.datePublished" class="inline-flex items-center gap-2">
-                <HugeiconsIcon :icon="Calendar03Icon" class="size-3.5 shrink-0 text-primary" />
-                {{ t('uiVintage.blog.publishedDate') }}
-                <time :datetime="props.datePublished" class="text-foreground">{{ formattedPublishedDate }}</time>
-            </span>
+		<!-- Date information -->
+		<div v-if="props.datePublished || showModifiedDate" class="flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-border bg-surface px-5 py-2.5 text-xs text-muted-foreground">
+			<!-- Published date -->
+			<span v-if="props.datePublished" class="inline-flex items-center gap-2">
+				<HugeiconsIcon :icon="Calendar03Icon" class="size-3.5 shrink-0 text-primary" />
+				{{ t('uiVintage.blog.publishedDate') }}
+				<time :datetime="props.datePublished" class="text-foreground">{{ formattedPublishedDate }}</time>
+			</span>
 
-            <!-- Divider between the dates (hidden when they wrap on small screens) -->
-            <span v-if="props.datePublished && showModifiedDate" aria-hidden="true" class="hidden h-3.5 w-px bg-border sm:block" />
+			<!-- Divider between the dates (hidden when they wrap on small screens) -->
+			<span v-if="props.datePublished && showModifiedDate" aria-hidden="true" class="hidden h-3.5 w-px bg-border sm:block" />
 
-            <!-- Last updated date -->
-            <span v-if="showModifiedDate" class="inline-flex items-center gap-2">
-                <HugeiconsIcon :icon="RefreshIcon" class="size-3.5 shrink-0 text-primary" />
-                {{ t('uiVintage.blog.lastUpdatedDate') }}
-                <time :datetime="props.dateModified ?? undefined" class="text-foreground">{{ formattedModifiedDate }}</time>
-            </span>
-        </div>
-    </Card>
-</template>
+			<!-- Last updated date -->
+			<span v-if="showModifiedDate" class="inline-flex items-center gap-2">
+				<HugeiconsIcon :icon="RefreshIcon" class="size-3.5 shrink-0 text-primary" />
+				{{ t('uiVintage.blog.lastUpdatedDate') }}
+				<time :datetime="props.dateModified ?? undefined" class="text-foreground">{{ formattedModifiedDate }}</time>
+			</span>
+		</div>
+	</Card>
+</template>

package/src/components/blog/BlogPostHeader.vue

@@ -8,36 +8,36 @@ import { formatDateLongItalyTimezone, getReadingMinutes } from '../../lib/utils'
 
 // Props
 const props = withDefaults(defineProps<{
-    title: string;
-    description?: string;
-    image?: string;
-    author?: string;
-    authorImageUrl?: string;
-    datePublished?: string;
-    categoryText?: string;
-    categorySlug?: string;
-    tags?: Array<{
-        name: string;
-        slug: string;
-    }>;
-    body?: unknown;
-    readingMinutes?: number | null;
-    blogPath?: string;
-    blogLabel?: string;
-    animated?: boolean;
+	title: string;
+	description?: string;
+	image?: string;
+	author?: string;
+	authorImageUrl?: string;
+	datePublished?: string;
+	categoryText?: string;
+	categorySlug?: string;
+	tags?: Array<{
+		name: string;
+		slug: string;
+	}>;
+	body?: unknown;
+	readingMinutes?: number | null;
+	blogPath?: string;
+	blogLabel?: string;
+	animated?: boolean;
 }>(), {
-    description: '',
-    image: '',
-    author: '',
-    authorImageUrl: '',
-    datePublished: '',
-    categoryText: '',
-    categorySlug: '',
-    tags: () => [],
-    readingMinutes: null,
-    blogPath: '/blog',
-    blogLabel: '',
-    animated: true
+	description: '',
+	image: '',
+	author: '',
+	authorImageUrl: '',
+	datePublished: '',
+	categoryText: '',
+	categorySlug: '',
+	tags: () => [],
+	readingMinutes: null,
+	blogPath: '/blog',
+	blogLabel: '',
+	animated: true
 });
 
 const { t, locale } = useI18n();
@@ -50,8 +50,8 @@ const formattedDate = computed(() => formatDateLongItalyTimezone(props.datePubli
 
 // Explicit reading time wins, otherwise estimate it from the body
 const resolvedReadingMinutes = computed(() => {
-    if (props.readingMinutes) return props.readingMinutes;
-    return props.body ? getReadingMinutes(props.body) : null;
+	if (props.readingMinutes) return props.readingMinutes;
+	return props.body ? getReadingMinutes(props.body) : null;
 });
 
 // Links built from the blog base path
@@ -75,107 +75,107 @@ const detailLabelClasses = 'text-[11px] font-semibold tracking-wider text-muted-
 </script>
 
 <template>
-    <header class="relative isolate mb-10 md:mb-14">
-        <!-- Breadcrumbs -->
-        <Breadcrumb :class="enter('animate-uv-fade-up')">
-            <BreadcrumbList>
-                <BreadcrumbItem>
-                    <BreadcrumbLink as-child>
-                        <NuxtLinkLocale :to="props.blogPath">
-                            {{ props.blogLabel || t('uiVintage.blog.breadcrumbBlog') }}
-                        </NuxtLinkLocale>
-                    </BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator />
-                <template v-if="hasCategory">
-                    <BreadcrumbItem>
-                        <BreadcrumbLink as-child>
-                            <NuxtLinkLocale :to="categoryPath">
-                                {{ props.categoryText }}
-                            </NuxtLinkLocale>
-                        </BreadcrumbLink>
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                </template>
-                <BreadcrumbItem class="min-w-0">
-                    <BreadcrumbPage class="truncate">
-                        {{ props.title }}
-                    </BreadcrumbPage>
-                </BreadcrumbItem>
-            </BreadcrumbList>
-        </Breadcrumb>
-
-        <!-- Title and lede, closed by a rule with a primary segment -->
-        <div class="relative mt-8 border-b border-border pb-8">
-            <span aria-hidden="true" :class="['absolute -bottom-px left-0 h-0.5 w-20 origin-left bg-primary', enter('animate-uv-grow-x')]" :style="props.animated ? { animationDelay: '500ms' } : undefined" />
-
-            <!-- Title (each word rises in) -->
-            <h1 class="text-3xl leading-[1.08] font-semibold tracking-tight text-foreground sm:text-4xl md:text-5xl">
-                <template v-for="(word, index) in titleWords" :key="`${word}-${index}`">
-                    <span :class="['inline-block', enter('animate-uv-word-in')]" :style="props.animated ? { animationDelay: `${120 + Math.min(index, 12) * 50}ms` } : undefined">{{ word }}</span>{{ index < titleWords.length - 1 ? ' ' : '' }}
-                </template>
-            </h1>
-
-            <!-- Lede -->
-            <p v-if="props.description" :class="['mt-5 max-w-3xl text-sm leading-relaxed text-muted-foreground md:text-lg', enter('animate-uv-fade-up [animation-delay:450ms]')]">
-                {{ props.description }}
-            </p>
-        </div>
-
-        <!-- Labelled details (columns without data are left out; the meta slot adds more) -->
-        <div v-if="hasDetails || $slots.meta" :class="['overflow-hidden border-b border-border', enter('animate-uv-fade-up [animation-delay:550ms]')]">
-            <dl class="-mt-px -ml-[calc(1rem+1px)] grid grid-cols-2 md:grid-flow-col md:auto-cols-fr md:grid-cols-none">
-                <!-- Author -->
-                <div v-if="props.author" :class="detailCellClasses">
-                    <dt :class="detailLabelClasses">{{ t('uiVintage.blog.author') }}</dt>
-                    <dd class="mt-2 flex min-w-0 items-center gap-2 text-sm font-semibold text-foreground">
-                        <NuxtImg v-if="props.authorImageUrl" :src="props.authorImageUrl" :alt="props.author" width="24" height="24" format="avif" quality="40" class="size-6 shrink-0 rounded border border-border object-cover" />
-                        <span class="truncate">{{ props.author }}</span>
-                    </dd>
-                </div>
-
-                <!-- Publication date -->
-                <div v-if="formattedDate" :class="detailCellClasses">
-                    <dt :class="detailLabelClasses">{{ t('uiVintage.blog.publishedDate') }}</dt>
-                    <dd class="mt-2 text-sm text-foreground">
-                        <time :datetime="props.datePublished">{{ formattedDate }}</time>
-                    </dd>
-                </div>
-
-                <!-- Reading time -->
-                <div v-if="resolvedReadingMinutes" :class="detailCellClasses">
-                    <dt :class="detailLabelClasses">{{ t('uiVintage.blog.readingTime') }}</dt>
-                    <dd class="mt-2 text-sm text-foreground">{{ t('uiVintage.blog.readingTimeValue', { minutes: resolvedReadingMinutes }) }}</dd>
-                </div>
-
-                <!-- Category -->
-                <div v-if="hasCategory" :class="detailCellClasses">
-                    <dt :class="detailLabelClasses">{{ t('uiVintage.blog.category') }}</dt>
-                    <dd class="mt-1.5">
-                        <NuxtLinkLocale :to="categoryPath" :class="['inline-flex', badgeLinkClasses]">
-                            <Badge color="yellow" :text="props.categoryText" pulse />
-                        </NuxtLinkLocale>
-                    </dd>
-                </div>
-
-                <!-- Extra columns from the app (use the same cell structure: a div with a dt and a dd) -->
-                <slot name="meta" :cell-classes="detailCellClasses" :label-classes="detailLabelClasses" />
-            </dl>
-        </div>
-
-        <!-- Tags -->
-        <div v-if="props.tags.length > 0" :class="['mt-4 flex flex-wrap items-center gap-2', enter('animate-uv-fade-up [animation-delay:600ms]')]">
-            <NuxtLinkLocale v-for="tag in props.tags" :key="tag.slug" :to="tagPath(tag.slug)" :class="badgeLinkClasses">
-                <Badge :text="`#${tag.name}`" />
-            </NuxtLinkLocale>
-        </div>
-
-        <!-- Featured image (replaceable through the media slot) -->
-        <slot name="media">
-            <div v-if="props.image" :class="['relative mt-8 aspect-video w-full overflow-hidden rounded border border-border shadow-elevated-xl', enter('animate-uv-fade-up [animation-delay:650ms]')]">
-                <NuxtImg :src="props.image" :alt="props.title" format="avif" quality="50" :sizes="{ 480: '480px', 1536: '896px' }" loading="eager" fetchpriority="high" preload :class="['size-full object-cover', enter('animate-uv-ken-burns')]" />
-                <div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/20 to-transparent" />
-            </div>
-        </slot>
-    </header>
-</template>
+	<header class="relative isolate mb-10 md:mb-14">
+		<!-- Breadcrumbs -->
+		<Breadcrumb :class="enter('animate-uv-fade-up')">
+			<BreadcrumbList>
+				<BreadcrumbItem>
+					<BreadcrumbLink as-child>
+						<NuxtLinkLocale :to="props.blogPath">
+							{{ props.blogLabel || t('uiVintage.blog.breadcrumbBlog') }}
+						</NuxtLinkLocale>
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<template v-if="hasCategory">
+					<BreadcrumbItem>
+						<BreadcrumbLink as-child>
+							<NuxtLinkLocale :to="categoryPath">
+								{{ props.categoryText }}
+							</NuxtLinkLocale>
+						</BreadcrumbLink>
+					</BreadcrumbItem>
+					<BreadcrumbSeparator />
+				</template>
+				<BreadcrumbItem class="min-w-0">
+					<BreadcrumbPage class="truncate">
+						{{ props.title }}
+					</BreadcrumbPage>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+
+		<!-- Title and lede, closed by a rule with a primary segment -->
+		<div class="relative mt-8 border-b border-border pb-8">
+			<span aria-hidden="true" :class="['absolute -bottom-px left-0 h-0.5 w-20 origin-left bg-primary', enter('animate-uv-grow-x')]" :style="props.animated ? { animationDelay: '500ms' } : undefined" />
+
+			<!-- Title (each word rises in) -->
+			<h1 class="text-3xl leading-[1.08] font-semibold tracking-tight text-foreground sm:text-4xl md:text-5xl">
+				<template v-for="(word, index) in titleWords" :key="`${word}-${index}`">
+					<span :class="['inline-block', enter('animate-uv-word-in')]" :style="props.animated ? { animationDelay: `${120 + Math.min(index, 12) * 50}ms` } : undefined">{{ word }}</span>{{ index < titleWords.length - 1 ? ' ' : '' }}
+				</template>
+			</h1>
+
+			<!-- Lede -->
+			<p v-if="props.description" :class="['mt-5 max-w-3xl text-sm leading-relaxed text-muted-foreground md:text-lg', enter('animate-uv-fade-up [animation-delay:450ms]')]">
+				{{ props.description }}
+			</p>
+		</div>
+
+		<!-- Labelled details (columns without data are left out; the meta slot adds more) -->
+		<div v-if="hasDetails || $slots.meta" :class="['overflow-hidden border-b border-border', enter('animate-uv-fade-up [animation-delay:550ms]')]">
+			<dl class="-mt-px -ml-[calc(1rem+1px)] grid grid-cols-2 md:grid-flow-col md:auto-cols-fr md:grid-cols-none">
+				<!-- Author -->
+				<div v-if="props.author" :class="detailCellClasses">
+					<dt :class="detailLabelClasses">{{ t('uiVintage.blog.author') }}</dt>
+					<dd class="mt-2 flex min-w-0 items-center gap-2 text-sm font-semibold text-foreground">
+						<NuxtImg v-if="props.authorImageUrl" :src="props.authorImageUrl" :alt="props.author" width="24" height="24" format="avif" quality="40" class="size-6 shrink-0 rounded border border-border object-cover" />
+						<span class="truncate">{{ props.author }}</span>
+					</dd>
+				</div>
+
+				<!-- Publication date -->
+				<div v-if="formattedDate" :class="detailCellClasses">
+					<dt :class="detailLabelClasses">{{ t('uiVintage.blog.publishedDate') }}</dt>
+					<dd class="mt-2 text-sm text-foreground">
+						<time :datetime="props.datePublished">{{ formattedDate }}</time>
+					</dd>
+				</div>
+
+				<!-- Reading time -->
+				<div v-if="resolvedReadingMinutes" :class="detailCellClasses">
+					<dt :class="detailLabelClasses">{{ t('uiVintage.blog.readingTime') }}</dt>
+					<dd class="mt-2 text-sm text-foreground">{{ t('uiVintage.blog.readingTimeValue', { minutes: resolvedReadingMinutes }) }}</dd>
+				</div>
+
+				<!-- Category -->
+				<div v-if="hasCategory" :class="detailCellClasses">
+					<dt :class="detailLabelClasses">{{ t('uiVintage.blog.category') }}</dt>
+					<dd class="mt-1.5">
+						<NuxtLinkLocale :to="categoryPath" :class="['inline-flex', badgeLinkClasses]">
+							<Badge color="yellow" :text="props.categoryText" pulse />
+						</NuxtLinkLocale>
+					</dd>
+				</div>
+
+				<!-- Extra columns from the app (use the same cell structure: a div with a dt and a dd) -->
+				<slot name="meta" :cell-classes="detailCellClasses" :label-classes="detailLabelClasses" />
+			</dl>
+		</div>
+
+		<!-- Tags -->
+		<div v-if="props.tags.length > 0" :class="['mt-4 flex flex-wrap items-center gap-2', enter('animate-uv-fade-up [animation-delay:600ms]')]">
+			<NuxtLinkLocale v-for="tag in props.tags" :key="tag.slug" :to="tagPath(tag.slug)" :class="badgeLinkClasses">
+				<Badge :text="`#${tag.name}`" />
+			</NuxtLinkLocale>
+		</div>
+
+		<!-- Featured image (replaceable through the media slot) -->
+		<slot name="media">
+			<div v-if="props.image" :class="['relative mt-8 aspect-video w-full overflow-hidden rounded border border-border shadow-elevated-xl', enter('animate-uv-fade-up [animation-delay:650ms]')]">
+				<NuxtImg :src="props.image" :alt="props.title" format="avif" quality="50" :sizes="{ 480: '480px', 1536: '896px' }" loading="eager" fetchpriority="high" preload :class="['size-full object-cover', enter('animate-uv-ken-burns')]" />
+				<div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/20 to-transparent" />
+			</div>
+		</slot>
+	</header>
+</template>

package/src/components/blog/BlogProgressBar.vue

@@ -6,8 +6,8 @@ import { cn } from '../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-    ariaLabel?: string;
+	class?: HTMLAttributes['class'];
+	ariaLabel?: string;
 }>();
 
 const { t } = useI18n();
@@ -17,63 +17,63 @@ let animationFrame = 0;
 
 // Update progress based on scroll position
 const updateProgress = () => {
-    const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
-    progress.value = documentHeight > 0 ? Math.min(100, Math.max(0, (window.scrollY / documentHeight) * 100)) : 100;
+	const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
+	progress.value = documentHeight > 0 ? Math.min(100, Math.max(0, (window.scrollY / documentHeight) * 100)) : 100;
 };
 
 // Handle scroll event with requestAnimationFrame for performance
 const handleScroll = () => {
-    cancelAnimationFrame(animationFrame);
-    animationFrame = requestAnimationFrame(updateProgress);
+	cancelAnimationFrame(animationFrame);
+	animationFrame = requestAnimationFrame(updateProgress);
 };
 
 // On component mounted
 onMounted(() => {
-    updateProgress();
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    window.addEventListener('resize', updateProgress);
+	updateProgress();
+	window.addEventListener('scroll', handleScroll, { passive: true });
+	window.addEventListener('resize', updateProgress);
 });
 
 // On component unmounted
 onUnmounted(() => {
-    cancelAnimationFrame(animationFrame);
-    window.removeEventListener('scroll', handleScroll);
-    window.removeEventListener('resize', updateProgress);
+	cancelAnimationFrame(animationFrame);
+	window.removeEventListener('scroll', handleScroll);
+	window.removeEventListener('resize', updateProgress);
 });
 </script>
 
 <template>
-    <div :class="cn('h-0.5 w-full bg-border/60 landing-navbar-progress', props.class)"
-        role="progressbar"
-        :aria-label="resolvedAriaLabel"
-        aria-valuemin="0"
-        aria-valuemax="100"
-        :aria-valuenow="Math.round(progress)">
-        <!-- Solid fill -->
-        <div class="h-full bg-primary transition-[width] duration-150 ease-out" :style="{ width: `${progress}%` }" />
-    </div>
+	<div :class="cn('h-0.5 w-full bg-border/60 landing-navbar-progress', props.class)"
+		role="progressbar"
+		:aria-label="resolvedAriaLabel"
+		aria-valuemin="0"
+		aria-valuemax="100"
+		:aria-valuenow="Math.round(progress)">
+		<!-- Solid fill -->
+		<div class="h-full bg-primary transition-[width] duration-150 ease-out" :style="{ width: `${progress}%` }" />
+	</div>
 </template>
 
 <style scoped>
 .landing-navbar-progress {
-    animation: landing-navbar-progress-fade linear both;
-    animation-range: 0 160px;
-    animation-timeline: scroll(root);
+	animation: landing-navbar-progress-fade linear both;
+	animation-range: 0 160px;
+	animation-timeline: scroll(root);
 }
 
 @keyframes landing-navbar-progress-fade {
-    from {
-        opacity: 0;
-    }
+	from {
+		opacity: 0;
+	}
 
-    to {
-        opacity: 1;
-    }
+	to {
+		opacity: 1;
+	}
 }
 
 @supports not (animation-timeline: scroll()) {
-    .landing-navbar-progress {
-        opacity: 1;
-    }
+	.landing-navbar-progress {
+		opacity: 1;
+	}
 }
 </style>

package/src/components/blog/BlogSectionTitle.vue

@@ -1,33 +1,33 @@
 <script setup lang="ts">
 // Props
 const props = withDefaults(defineProps<{
-    title: string;
-    description?: string;
+	title: string;
+	description?: string;
 }>(), {
-    description: ''
+	description: ''
 });
 </script>
 
 <template>
-    <div data-aos="blur-up" class="relative mb-6 flex flex-col gap-3 border-b border-border pb-4 sm:flex-row sm:items-end sm:justify-between md:mb-8">
-        <!-- Primary segment at the start of the rule -->
-        <span aria-hidden="true" class="absolute -bottom-px left-0 h-0.5 w-12 bg-primary" />
+	<div data-aos="blur-up" class="relative mb-6 flex flex-col gap-3 border-b border-border pb-4 sm:flex-row sm:items-end sm:justify-between md:mb-8">
+		<!-- Primary segment at the start of the rule -->
+		<span aria-hidden="true" class="absolute -bottom-px left-0 h-0.5 w-12 bg-primary" />
 
-        <div class="min-w-0">
-            <!-- Title -->
-            <h2 class="text-xl font-semibold tracking-tight text-foreground md:text-2xl">
-                {{ props.title }}
-            </h2>
+		<div class="min-w-0">
+			<!-- Title -->
+			<h2 class="text-xl font-semibold tracking-tight text-foreground md:text-2xl">
+				{{ props.title }}
+			</h2>
 
-            <!-- Description -->
-            <p v-if="props.description" class="mt-1 max-w-2xl text-xs leading-6 text-muted-foreground md:text-sm">
-                {{ props.description }}
-            </p>
-        </div>
+			<!-- Description -->
+			<p v-if="props.description" class="mt-1 max-w-2xl text-xs leading-6 text-muted-foreground md:text-sm">
+				{{ props.description }}
+			</p>
+		</div>
 
-        <!-- Optional trailing action (for example a "View all" link) -->
-        <div v-if="$slots.action" class="shrink-0">
-            <slot name="action" />
-        </div>
-    </div>
-</template>
+		<!-- Optional trailing action (for example a "View all" link) -->
+		<div v-if="$slots.action" class="shrink-0">
+			<slot name="action" />
+		</div>
+	</div>
+</template>

package/src/components/blog/BlogTagsSection.vue

@@ -1,34 +1,34 @@
 <script setup lang="ts">
 // Props
 const props = withDefaults(defineProps<{
-    tags?: Array<{
-        name: string;
-        slug: string;
-        count: number;
-    }>;
-    blogPath?: string;
+	tags?: Array<{
+		name: string;
+		slug: string;
+		count: number;
+	}>;
+	blogPath?: string;
 }>(), {
-    tags: () => [],
-    blogPath: '/blog'
+	tags: () => [],
+	blogPath: '/blog'
 });
 </script>
 
 <template>
-    <div v-if="props.tags.length" class="flex flex-wrap gap-2">
-        <!-- Tag chip -->
-        <span v-for="(tag, index) in props.tags" :key="tag.slug" data-aos="blur-up" :data-aos-delay="Math.min(index * 40, 400)" class="inline-flex">
-            <NuxtLinkLocale :to="`${props.blogPath}/tags/${tag.slug}`" class="group/tag inline-flex items-stretch overflow-hidden rounded border border-border text-xs shadow-elevated-sm outline-none transition-colors duration-150 hover:border-primary/40 focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
-                <!-- Name -->
-                <span class="inline-flex items-center gap-1.5 bg-card px-3 py-1.5 font-medium text-foreground transition-colors duration-150 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">
-                    <span aria-hidden="true" class="text-primary">#</span>
-                    {{ tag.name }}
-                </span>
+	<div v-if="props.tags.length" class="flex flex-wrap gap-2">
+		<!-- Tag chip -->
+		<span v-for="(tag, index) in props.tags" :key="tag.slug" data-aos="blur-up" :data-aos-delay="Math.min(index * 40, 400)" class="inline-flex">
+			<NuxtLinkLocale :to="`${props.blogPath}/tags/${tag.slug}`" class="group/tag inline-flex items-stretch overflow-hidden rounded border border-border text-xs shadow-elevated-sm outline-none transition-colors duration-150 hover:border-primary/40 focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
+				<!-- Name -->
+				<span class="inline-flex items-center gap-1.5 bg-card px-3 py-1.5 font-medium text-foreground transition-colors duration-150 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">
+					<span aria-hidden="true" class="text-primary">#</span>
+					{{ tag.name }}
+				</span>
 
-                <!-- Post count -->
-                <span class="inline-flex items-center border-l border-border bg-surface px-2 text-[11px] font-semibold text-muted-foreground tabular-nums transition-colors duration-150 group-hover/tag:border-primary/40 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">
-                    {{ tag.count }}
-                </span>
-            </NuxtLinkLocale>
-        </span>
-    </div>
-</template>
+				<!-- Post count -->
+				<span class="inline-flex items-center border-l border-border bg-surface px-2 text-[11px] font-semibold text-muted-foreground tabular-nums transition-colors duration-150 group-hover/tag:border-primary/40 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">
+					{{ tag.count }}
+				</span>
+			</NuxtLinkLocale>
+		</span>
+	</div>
+</template>