@brumaombra/ui-vintage 0.9.1 → 0.9.3

package/src/components/blog/BlogHeaderSection.vue

@@ -11,51 +11,51 @@ import { StatStrip } from '../stat-strip';
 
 // Props
 const props = withDefaults(defineProps<{
-    badges?: Array<{
-        color: ToneColor;
-        text: string;
-    }>;
-    announcement?: {
-        text: string;
-        to: string;
-        label?: string;
-    } | null;
-    title: string;
-    highlight?: string;
-    description: string;
-    stats?: Array<{
-        label: string;
-        value: string | number;
-        icon?: HugeiconsIconDefinition;
-    }>;
-    align?: 'left' | 'center' | 'right';
+	badges?: Array<{
+		color: ToneColor;
+		text: string;
+	}>;
+	announcement?: {
+		text: string;
+		to: string;
+		label?: string;
+	} | null;
+	title: string;
+	highlight?: string;
+	description: string;
+	stats?: Array<{
+		label: string;
+		value: string | number;
+		icon?: HugeiconsIconDefinition;
+	}>;
+	align?: 'left' | 'center' | 'right';
 }>(), {
-    badges: () => [],
-    announcement: null,
-    highlight: '',
-    stats: () => [],
-    align: 'center'
+	badges: () => [],
+	announcement: null,
+	highlight: '',
+	stats: () => [],
+	align: 'center'
 });
 
 const { t } = useI18n();
 
 // Alignment of the whole header: the column, its text, and the rows of badges and stats
 const alignClasses = {
-    left: { header: 'items-start text-left', row: 'justify-start' },
-    center: { header: 'items-center text-center', row: 'justify-center' },
-    right: { header: 'items-end text-right', row: 'justify-end' }
+	left: { header: 'items-start text-left', row: 'justify-start' },
+	center: { header: 'items-center text-center', row: 'justify-center' },
+	right: { header: 'items-end text-right', row: 'justify-end' }
 } as const;
 const alignClass = computed(() => alignClasses[props.align] ?? alignClasses.center);
 
 // Split the title around the highlighted part (when it appears in the title)
 const titleParts = computed(() => {
-    const index = props.highlight ? props.title.indexOf(props.highlight) : -1;
-    if (index === -1) return { before: props.title, highlight: '', after: '' };
-    return {
-        before: props.title.slice(0, index),
-        highlight: props.highlight,
-        after: props.title.slice(index + props.highlight.length)
-    };
+	const index = props.highlight ? props.title.indexOf(props.highlight) : -1;
+	if (index === -1) return { before: props.title, highlight: '', after: '' };
+	return {
+		before: props.title.slice(0, index),
+		highlight: props.highlight,
+		after: props.title.slice(index + props.highlight.length)
+	};
 });
 
 // Words that rise in one by one (the highlight rises in as a single block between them)
@@ -64,8 +64,8 @@ const beforeWords = computed(() => splitWords(titleParts.value.before));
 const afterWords = computed(() => splitWords(titleParts.value.after));
 // Space after a word before the highlight: always between words, and before the highlight only when the title has one there
 const wordGap = (index: number) => {
-    if (index < beforeWords.value.length - 1) return ' ';
-    return titleParts.value.highlight && /\s$/.test(titleParts.value.before) ? ' ' : '';
+	if (index < beforeWords.value.length - 1) return ' ';
+	return titleParts.value.highlight && /\s$/.test(titleParts.value.before) ? ' ' : '';
 };
 const wordDelay = (index: number) => `${120 + Math.min(index, 12) * 55}ms`;
 const highlightDelay = computed(() => wordDelay(beforeWords.value.length));
@@ -79,52 +79,52 @@ const underlineDelay = computed(() => `${beforeWords.value.length * 55 + 600}ms`
 </script>
 
 <template>
-    <header :class="cn('relative flex flex-col gap-6 pt-6 md:pt-12', alignClass.header)">
-        <!-- Announcement (links to something new, such as the latest post) -->
-        <NuxtLink v-if="props.announcement" :to="props.announcement.to" class="group/announce max-w-full animate-uv-fade-up rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
-            <span class="inline-flex max-w-full items-center gap-2 rounded border border-warning/35 bg-warning/10 px-3 py-1 text-xs text-foreground transition-colors duration-150 group-hover/announce:border-warning/70">
-                <span aria-hidden="true" class="relative flex size-1.5 shrink-0 text-warning">
-                    <span class="absolute inline-flex size-full animate-uv-ping-soft rounded-full bg-current opacity-60" />
-                    <span class="relative inline-flex size-1.5 rounded-full bg-current" />
-                </span>
-                <span class="shrink-0 font-semibold">{{ props.announcement.label || t('uiVintage.blog.new') }}</span>
-                <span class="truncate opacity-80">{{ props.announcement.text }}</span>
-                <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5 shrink-0 transition-transform duration-300 ease-spring group-hover/announce:translate-x-0.5" />
-            </span>
-        </NuxtLink>
+	<header :class="cn('relative flex flex-col gap-6 pt-6 md:pt-12', alignClass.header)">
+		<!-- Announcement (links to something new, such as the latest post) -->
+		<NuxtLink v-if="props.announcement" :to="props.announcement.to" class="group/announce max-w-full animate-uv-fade-up rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+			<span class="inline-flex max-w-full items-center gap-2 rounded border border-warning/35 bg-warning/10 px-3 py-1 text-xs text-foreground transition-colors duration-150 group-hover/announce:border-warning/70">
+				<span aria-hidden="true" class="relative flex size-1.5 shrink-0 text-warning">
+					<span class="absolute inline-flex size-full animate-uv-ping-soft rounded-full bg-current opacity-60" />
+					<span class="relative inline-flex size-1.5 rounded-full bg-current" />
+				</span>
+				<span class="shrink-0 font-semibold">{{ props.announcement.label || t('uiVintage.blog.new') }}</span>
+				<span class="truncate opacity-80">{{ props.announcement.text }}</span>
+				<HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5 shrink-0 transition-transform duration-300 ease-spring group-hover/announce:translate-x-0.5" />
+			</span>
+		</NuxtLink>
 
-        <!-- Badges -->
-        <div v-if="props.badges.length > 0" :class="cn('flex flex-wrap gap-2', alignClass.row)">
-            <Badge v-for="(badge, index) in props.badges"
-                :key="`${badge.color}-${badge.text}`"
-                :color="badge.color"
-                :text="badge.text"
-                :pulse="index === 0 && !props.announcement"
-                class="animate-uv-fade-up"
-                :style="{ animationDelay: `${index * 70}ms` }" />
-        </div>
+		<!-- Badges -->
+		<div v-if="props.badges.length > 0" :class="cn('flex flex-wrap gap-2', alignClass.row)">
+			<Badge v-for="(badge, index) in props.badges"
+				:key="`${badge.color}-${badge.text}`"
+				:color="badge.color"
+				:text="badge.text"
+				:pulse="index === 0 && !props.announcement"
+				class="animate-uv-fade-up"
+				:style="{ animationDelay: `${index * 70}ms` }" />
+		</div>
 
-        <!-- Title (each word rises in with a spring, the highlight gets a hand-drawn underline) -->
-        <h1 class="max-w-4xl text-4xl leading-[1.05] font-semibold tracking-tight text-foreground sm:text-5xl md:text-6xl">
-            <template v-for="(word, index) in beforeWords" :key="`before-${word}-${index}`">
-                <span class="inline-block animate-uv-word-in" :style="{ animationDelay: wordDelay(index) }">{{ word }}</span>{{ wordGap(index) }}
-            </template>
-            <!-- The text and the underline sit on one line so no stray space ends up inside the highlight -->
-            <span v-if="titleParts.highlight" class="relative inline-block animate-uv-word-in text-primary" :style="{ animationDelay: highlightDelay }">{{ titleParts.highlight }}<svg class="absolute -bottom-2 left-0 h-3 w-full text-primary/60" viewBox="0 0 200 12" fill="none" preserveAspectRatio="none" aria-hidden="true">
-                    <path d="M2 9C40 3 80 2 198 7" stroke="currentColor" stroke-width="4" stroke-linecap="round" pathLength="1" class="animate-uv-draw [stroke-dasharray:1]" :style="{ animationDelay: underlineDelay }" />
-                </svg>
-            </span>
-            <template v-for="(word, index) in afterWords" :key="`after-${word}-${index}`">
-                {{ index === 0 && !/^\s/.test(titleParts.after) ? '' : ' ' }}<span class="inline-block animate-uv-word-in" :style="{ animationDelay: afterDelay(index) }">{{ word }}</span>
-            </template>
-        </h1>
+		<!-- Title (each word rises in with a spring, the highlight gets a hand-drawn underline) -->
+		<h1 class="max-w-4xl text-4xl leading-[1.05] font-semibold tracking-tight text-foreground sm:text-5xl md:text-6xl">
+			<template v-for="(word, index) in beforeWords" :key="`before-${word}-${index}`">
+				<span class="inline-block animate-uv-word-in" :style="{ animationDelay: wordDelay(index) }">{{ word }}</span>{{ wordGap(index) }}
+			</template>
+			<!-- The text and the underline sit on one line so no stray space ends up inside the highlight -->
+			<span v-if="titleParts.highlight" class="relative inline-block animate-uv-word-in text-primary" :style="{ animationDelay: highlightDelay }">{{ titleParts.highlight }}<svg class="absolute -bottom-2 left-0 h-3 w-full text-primary/60" viewBox="0 0 200 12" fill="none" preserveAspectRatio="none" aria-hidden="true">
+					<path d="M2 9C40 3 80 2 198 7" stroke="currentColor" stroke-width="4" stroke-linecap="round" pathLength="1" class="animate-uv-draw [stroke-dasharray:1]" :style="{ animationDelay: underlineDelay }" />
+				</svg>
+			</span>
+			<template v-for="(word, index) in afterWords" :key="`after-${word}-${index}`">
+				{{ index === 0 && !/^\s/.test(titleParts.after) ? '' : ' ' }}<span class="inline-block animate-uv-word-in" :style="{ animationDelay: afterDelay(index) }">{{ word }}</span>
+			</template>
+		</h1>
 
-        <!-- Description -->
-        <p class="max-w-2xl animate-uv-fade-up text-sm leading-7 text-muted-foreground sm:text-base" :style="{ animationDelay: descriptionDelay }">
-            {{ props.description }}
-        </p>
+		<!-- Description -->
+		<p class="max-w-2xl animate-uv-fade-up text-sm leading-7 text-muted-foreground sm:text-base" :style="{ animationDelay: descriptionDelay }">
+			{{ props.description }}
+		</p>
 
-        <!-- Stats strip -->
-        <StatStrip :items="props.stats" :class="cn('animate-uv-fade-up', alignClass.row)" :style="{ animationDelay: statsDelay }" />
-    </header>
-</template>
+		<!-- Stats strip -->
+		<StatStrip :items="props.stats" :class="cn('animate-uv-fade-up', alignClass.row)" :style="{ animationDelay: statsDelay }" />
+	</header>
+</template>

package/src/components/blog/BlogIndexPage.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FolderLibraryIcon from '@hugeicons/core-free-icons/FolderLibraryIcon';
+import News01Icon from '@hugeicons/core-free-icons/News01Icon';
+import Tag01Icon from '@hugeicons/core-free-icons/Tag01Icon';
+import type { BlogCategoryData, BlogTagData } from './blogPageUtils';
+import AllPostsSection from './AllPostsSection.vue';
+import BlogHeaderSection from './BlogHeaderSection.vue';
+import BlogSectionTitle from './BlogSectionTitle.vue';
+import BlogTagsSection from './BlogTagsSection.vue';
+import BlogViewAllLink from './BlogViewAllLink.vue';
+import CategoriesSection from './CategoriesSection.vue';
+import HeaderCarousel from './HeaderCarousel.vue';
+
+// Post shown in the carousel and in the list (paths already localized)
+type BlogListPost = {
+	path: string;
+	title: string;
+	description?: string;
+	image?: string;
+	categoryText?: string;
+	categoryPath?: string;
+};
+
+// Props
+const props = withDefaults(defineProps<{
+	title: string;
+	highlight?: string;
+	description: string;
+	featuredPosts?: BlogListPost[];
+	categories?: BlogCategoryData[];
+	tags?: BlogTagData[];
+	posts?: BlogListPost[];
+	totalPosts?: number;
+	currentPage?: number;
+	postsPerPage?: number;
+	hasMorePosts?: boolean;
+	isLoading?: boolean;
+}>(), {
+	highlight: '',
+	featuredPosts: () => [],
+	categories: () => [],
+	tags: () => [],
+	posts: () => [],
+	totalPosts: 0,
+	currentPage: 1,
+	postsPerPage: 9,
+	hasMorePosts: false,
+	isLoading: false
+});
+
+// Emits
+const emit = defineEmits<{
+	'load-more': [];
+}>();
+
+const { t } = useI18n();
+
+// Announce the latest post in the header
+const headerAnnouncement = computed(() => props.featuredPosts[0] ? { text: props.featuredPosts[0].title, to: props.featuredPosts[0].path } : null);
+
+// Blog totals shown under the header
+const headerStats = computed(() => [
+	{ icon: News01Icon, value: props.totalPosts, label: t('uiVintage.blog.stats.posts', props.totalPosts) },
+	{ icon: FolderLibraryIcon, value: props.categories.length, label: t('uiVintage.blog.stats.categories', props.categories.length) },
+	{ icon: Tag01Icon, value: props.tags.length, label: t('uiVintage.blog.stats.tags', props.tags.length) }
+]);
+</script>
+
+<template>
+	<div class="space-y-16 md:space-y-24">
+		<!-- Header section -->
+		<BlogHeaderSection :announcement="headerAnnouncement"
+			:title="props.title"
+			:highlight="props.highlight"
+			:description="props.description"
+			:stats="headerStats" />
+
+		<!-- Header carousel -->
+		<section>
+			<BlogSectionTitle :title="t('uiVintage.blog.latestPosts')" :description="t('uiVintage.blog.latestPostsDescription')" />
+			<HeaderCarousel :featured-posts="props.featuredPosts" />
+		</section>
+
+		<!-- Categories section -->
+		<section>
+			<BlogSectionTitle :title="t('uiVintage.blog.categories')" :description="t('uiVintage.blog.categoriesDescription')">
+				<template #action>
+					<BlogViewAllLink to="/blog/categories" :label="t('uiVintage.blog.viewAll')" />
+				</template>
+			</BlogSectionTitle>
+			<CategoriesSection :categories="props.categories" />
+		</section>
+
+		<!-- Tags section -->
+		<section v-if="props.tags.length">
+			<BlogSectionTitle :title="t('uiVintage.blog.tags')" :description="t('uiVintage.blog.tagsDescription')">
+				<template #action>
+					<BlogViewAllLink to="/blog/tags" :label="t('uiVintage.blog.viewAll')" />
+				</template>
+			</BlogSectionTitle>
+			<BlogTagsSection :tags="props.tags" />
+		</section>
+
+		<!-- All posts section -->
+		<section>
+			<BlogSectionTitle :title="t('uiVintage.blog.allPosts')" :description="t('uiVintage.blog.allPostsDescription')" />
+			<AllPostsSection :posts="props.posts"
+				:current-page="props.currentPage"
+				:posts-per-page="props.postsPerPage"
+				:total-posts="props.totalPosts"
+				:has-more-posts="props.hasMorePosts"
+				:is-loading="props.isLoading"
+				@load-more="emit('load-more')" />
+		</section>
+	</div>
+</template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../ui/breadcrumb';
+
+// Props (the trail always starts with Home and Blog, the last item is the current page)
+const props = defineProps<{
+	items: Array<{
+		label: string;
+		to?: string;
+	}>;
+}>();
+
+const { t } = useI18n();
+
+// Full trail of the page
+const trail = computed(() => [
+	{ label: t('uiVintage.blog.breadcrumbHome'), to: '/' },
+	{ label: t('uiVintage.blog.breadcrumbBlog'), to: '/blog' },
+	...props.items
+]);
+</script>
+
+<template>
+	<!-- Breadcrumbs of a blog listing page (the paths are localized) -->
+	<Breadcrumb class="mb-2 flex animate-uv-fade-up justify-center">
+		<BreadcrumbList>
+			<template v-for="(item, index) in trail" :key="item.label">
+				<BreadcrumbSeparator v-if="index > 0" />
+				<BreadcrumbItem>
+					<BreadcrumbLink v-if="item.to && index < trail.length - 1" as-child>
+						<NuxtLinkLocale :to="item.to">
+							{{ item.label }}
+						</NuxtLinkLocale>
+					</BreadcrumbLink>
+					<BreadcrumbPage v-else>
+						{{ item.label }}
+					</BreadcrumbPage>
+				</BreadcrumbItem>
+			</template>
+		</BreadcrumbList>
+	</Breadcrumb>
+</template>