@brumaombra/ui-vintage 0.9.1 → 0.9.3

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/BlogPostPage.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { slugify } from './blogPageUtils';
+import type { BlogCategoryData } from './blogPageUtils';
+import BlogContentRenderer from './BlogContentRenderer.vue';
+import BlogFAQSection from './BlogFAQSection.vue';
+import BlogInfoSection from './BlogInfoSection.vue';
+import BlogPostHeader from './BlogPostHeader.vue';
+import BlogSectionTitle from './BlogSectionTitle.vue';
+import BlogViewAllLink from './BlogViewAllLink.vue';
+import CategoryCard from './CategoryCard.vue';
+import PostCard from './PostCard.vue';
+import SocialShareSidebar from './SocialShareSidebar.vue';
+import TableOfContents from './TableOfContents.vue';
+
+// Props (post is the Nuxt Content entry of the blog collection, url its absolute address for sharing)
+const props = withDefaults(defineProps<{
+	post: Record<string, any>;
+	url: string;
+	relatedPosts?: Array<{
+		path: string;
+		title: string;
+		description?: string;
+		image?: string;
+		categoryText?: string;
+	}>;
+	relatedCategories?: BlogCategoryData[];
+}>(), {
+	relatedPosts: () => [],
+	relatedCategories: () => []
+});
+
+const { t } = useI18n();
+
+// Tags of the post as badges (tags that can't produce a URL slug are skipped)
+const postTags = computed(() => ((props.post.tags as string[] | undefined) || [])
+	.map(tag => ({ name: tag, slug: slugify(tag) }))
+	.filter(tag => tag.slug));
+</script>
+
+<template>
+	<div class="mx-auto max-w-4xl">
+		<article>
+			<!-- Article header -->
+			<BlogPostHeader :title="props.post.title"
+				:description="props.post.description"
+				:image="props.post.image"
+				:author="props.post.author"
+				:author-image-url="props.post.authorImageUrl"
+				:date-published="props.post.datePublished"
+				:category-text="props.post.categoryText"
+				:category-slug="props.post.categorySlug"
+				:tags="postTags"
+				:body="props.post.body" />
+
+			<!-- Table of contents -->
+			<TableOfContents :content="props.post" />
+
+			<!-- Social share sidebar -->
+			<SocialShareSidebar :title="props.post.title" :url="props.url" />
+
+			<!-- Article content -->
+			<BlogContentRenderer :value="props.post" />
+
+			<!-- Divider (the app's own ProseHr content component, lazy like the copy Nuxt Content loads for markdown) -->
+			<LazyProseHr />
+
+			<!-- FAQ section -->
+			<BlogFAQSection v-if="props.post.faqs?.length" :faqs="props.post.faqs" />
+
+			<!-- Divider -->
+			<LazyProseHr />
+
+			<!-- Blog info section -->
+			<BlogInfoSection :author="props.post.author"
+				:author-url="props.post.authorUrl"
+				:author-image-url="props.post.authorImageUrl"
+				:date-published="props.post.datePublished"
+				:date-modified="props.post.dateModified" />
+
+			<!-- App content after the article (e.g. a call to action) -->
+			<slot name="after-article" />
+		</article>
+
+		<!-- Related posts -->
+		<section v-if="props.relatedPosts.length" class="mt-16 md:mt-24">
+			<BlogSectionTitle :title="t('uiVintage.blog.readAlso')" />
+			<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+				<NuxtLinkLocale v-for="(relatedPost, index) in props.relatedPosts" :key="relatedPost.path" :to="relatedPost.path" data-aos="blur-up" :data-aos-delay="(index % 2) * 90" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+					<PostCard :image="relatedPost.image"
+						:category="relatedPost.categoryText"
+						:title="relatedPost.title"
+						:description="relatedPost.description"
+						class="h-full" />
+				</NuxtLinkLocale>
+			</div>
+		</section>
+
+		<!-- Related categories -->
+		<section v-if="props.relatedCategories.length" class="mt-16 md:mt-24">
+			<BlogSectionTitle :title="t('uiVintage.blog.exploreCategories')">
+				<template #action>
+					<BlogViewAllLink to="/blog/categories" :label="t('uiVintage.blog.exploreAllCategories')" />
+				</template>
+			</BlogSectionTitle>
+			<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+				<NuxtLinkLocale v-for="(category, index) in props.relatedCategories" :key="category.slug" :to="`/blog/categories/${category.slug}`" data-aos="blur-up" :data-aos-delay="(index % 2) * 90" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+					<CategoryCard :name="category.name"
+						:image="category.image"
+						:count="category.count" />
+				</NuxtLinkLocale>
+			</div>
+		</section>
+	</div>
+</template>

package/src/components/blog/BlogPostsPage.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import News01Icon from '@hugeicons/core-free-icons/News01Icon';
+import { LoadMoreButton } from '../load-more-button';
+import BlogHeaderSection from './BlogHeaderSection.vue';
+import BlogPageBreadcrumbs from './BlogPageBreadcrumbs.vue';
+import PostsList from './PostsList.vue';
+
+// Props (the posts of a category or a tag, their paths already localized)
+const props = withDefaults(defineProps<{
+	section: 'categories' | 'tags';
+	title: string;
+	description: string;
+	posts?: Array<{
+		path: string;
+		title: string;
+		description?: string;
+		image?: string;
+		categoryText?: string;
+	}>;
+	totalPosts?: number;
+	currentPage?: number;
+	postsPerPage?: number;
+	hasMorePosts?: boolean;
+	isLoading?: boolean;
+}>(), {
+	posts: () => [],
+	totalPosts: 0,
+	currentPage: 1,
+	postsPerPage: 9,
+	hasMorePosts: false,
+	isLoading: false
+});
+
+// Emits
+const emit = defineEmits<{
+	'load-more': [];
+}>();
+
+const { t } = useI18n();
+
+// Breadcrumbs: the section list, then the category or tag
+const breadcrumbs = computed(() => [
+	props.section === 'tags' ? { label: t('uiVintage.blog.breadcrumbTags'), to: '/blog/tags' } : { label: t('uiVintage.blog.breadcrumbCategories'), to: '/blog/categories' },
+	{ label: props.title }
+]);
+
+// Number of posts shown under the header
+const headerStats = computed(() => [{ icon: News01Icon, value: props.totalPosts, label: t('uiVintage.blog.stats.posts', props.totalPosts) }]);
+</script>
+
+<template>
+	<div>
+		<!-- Breadcrumbs -->
+		<BlogPageBreadcrumbs :items="breadcrumbs" />
+
+		<!-- Blog header -->
+		<BlogHeaderSection :title="props.title"
+			:highlight="props.title"
+			:description="props.description"
+			:stats="headerStats"
+			class="mb-12 md:mb-16" />
+
+		<!-- Posts -->
+		<PostsList :posts="props.posts" />
+
+		<!-- Load more button -->
+		<LoadMoreButton v-if="props.hasMorePosts" :busy="props.isLoading" :text="t('uiVintage.blog.loadMoreWithNumbers', {
+			current: Math.min(props.currentPage * props.postsPerPage, props.totalPosts),
+			total: props.totalPosts
+		})" @load-more="emit('load-more')" class="mt-8" data-aos="blur-up" />
+	</div>
+</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>