@brumaombra/ui-vintage 0.8.1 → 0.9.0

package/src/components/blog/BlogInfoSection.vue

@@ -2,7 +2,9 @@
 import { NuxtImg } from '#components';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Card, CardContent } from '../ui/card';
+import { ArrowUpRight01Icon, Calendar03Icon, RefreshIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card } from '../ui/card';
 import { formatDateLongItalyTimezone } from '../../lib/utils';
 
 // Props
@@ -10,9 +12,11 @@ const props = withDefaults(defineProps<{
     author: string;
     authorUrl: string;
     authorImageUrl: string;
+    authorBio?: string;
     datePublished: string;
     dateModified?: string | null;
 }>(), {
+    authorBio: '',
     dateModified: null
 });
 
@@ -21,52 +25,52 @@ const { t, locale } = useI18n();
 // Formatted dates
 const formattedPublishedDate = computed(() => formatDateLongItalyTimezone(props.datePublished, locale.value));
 const formattedModifiedDate = computed(() => formatDateLongItalyTimezone(props.dateModified, locale.value));
+
+// Only show the update date when it differs from the publication date
+const showModifiedDate = computed(() => Boolean(props.dateModified) && formattedModifiedDate.value !== formattedPublishedDate.value);
 </script>
 
 <template>
     <!-- Author and date information -->
-    <Card data-aos="fade-up">
-        <CardContent>
-            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
-                <!-- Author -->
-                <div class="flex items-center mb-4 sm:mb-0">
-                    <div class="flex items-center">
-                        <!-- Author image -->
-                        <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="rounded me-3 transition-transform duration-300 ease-out hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100">
-                            <NuxtImg :src="props.authorImageUrl" :alt="props.author" height="50" width="50" format="avif" quality="40" :sizes="{ 480: '50px', 1280: '50px' }" loading="lazy" decoding="async" class="object-cover rounded" />
-                        </NuxtLink>
+    <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 -->
-                        <div>
-                            <p class="text-sm text-muted-foreground">{{ t('uiVintage.blog.author') }}</p>
-                            <p class="font-bold text-foreground">
-                                <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="hover:underline">
-                                    {{ props.author }}
-                                </NuxtLink>
-                            </p>
-                        </div>
-                    </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 class="flex flex-col sm:items-end text-xs md:text-sm text-muted-foreground">
-                    <!-- Published date -->
-                    <div v-if="props.datePublished" class="mb-1">
-                        <span class="font-semibold">{{ t('uiVintage.blog.publishedDate') }}:</span>
-                        <time :datetime="props.datePublished" class="ml-1">
-                            {{ formattedPublishedDate }}
-                        </time>
-                    </div>
+            <!-- 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 -->
-                    <div v-if="props.dateModified" class="text-xs">
-                        <span class="font-semibold">{{ t('uiVintage.blog.lastUpdatedDate') }}:</span>
-                        <time :datetime="props.dateModified" class="ml-1">
-                            {{ formattedModifiedDate }}
-                        </time>
-                    </div>
-                </div>
-            </div>
-        </CardContent>
+            <!-- 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>
+</template>

package/src/components/blog/BlogPostHeader.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { NuxtImg } from '#components';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Badge } from '../ui/badge';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../ui/breadcrumb';
+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;
+}>(), {
+    description: '',
+    image: '',
+    author: '',
+    authorImageUrl: '',
+    datePublished: '',
+    categoryText: '',
+    categorySlug: '',
+    tags: () => [],
+    readingMinutes: null,
+    blogPath: '/blog',
+    blogLabel: '',
+    animated: true
+});
+
+const { t, locale } = useI18n();
+
+// Split the title so each word can rise into place on its own
+const titleWords = computed(() => props.title.split(/\s+/).filter(Boolean));
+
+// Long publication date in the current locale
+const formattedDate = computed(() => formatDateLongItalyTimezone(props.datePublished, locale.value));
+
+// 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;
+});
+
+// Links built from the blog base path
+const categoryPath = computed(() => `${props.blogPath}/categories/${props.categorySlug}`);
+const tagPath = (slug: string) => `${props.blogPath}/tags/${slug}`;
+
+// Keep only the entrance classes when animations are enabled
+const enter = (classes: string) => props.animated ? classes : '';
+
+// Whether the category link can be built
+const hasCategory = computed(() => Boolean(props.categoryText && props.categorySlug));
+
+// Whether the details row has any column to show
+const hasDetails = computed(() => Boolean(props.author || formattedDate.value || resolvedReadingMinutes.value || hasCategory.value));
+
+const badgeLinkClasses = 'rounded outline-none transition-opacity duration-150 hover:opacity-80 focus-visible:ring-[3px] focus-visible:ring-ring/45';
+
+// Shared classes for the details cells (exposed to the meta slot)
+const detailCellClasses = 'min-w-0 border-t border-l border-border py-4 pl-4 pr-4';
+const detailLabelClasses = 'text-[11px] font-semibold tracking-wider text-muted-foreground uppercase';
+</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>

package/src/components/blog/BlogProgressBar.vue

@@ -43,13 +43,14 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div :class="cn('relative h-1 w-full border-t border-(--border-light) bg-(--bg-selected-light) dark:border-(--border-dark) dark:bg-(--bg-selected-dark) landing-navbar-progress', props.class)"
+    <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)">
-        <div class="h-full origin-left bg-primary transition-[width] duration-150 ease-out" :style="{ width: `${progress}%` }" />
+        <!-- Solid fill -->
+        <div class="h-full bg-primary transition-[width] duration-150 ease-out" :style="{ width: `${progress}%` }" />
     </div>
 </template>
 

package/src/components/blog/BlogSectionTitle.vue

@@ -1,12 +1,33 @@
 <script setup lang="ts">
 // Props
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     title: string;
-}>();
+    description?: string;
+}>(), {
+    description: ''
+});
 </script>
 
 <template>
-    <h2 class="text-xl md:text-2xl font-bold text-foreground mb-5">
-        {{ props.title }}
-    </h2>
-</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 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>
+
+        <!-- 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,6 +1,4 @@
 <script setup lang="ts">
-import { Badge } from '../ui/badge';
-
 // Props
 const props = withDefaults(defineProps<{
     tags?: Array<{
@@ -8,15 +6,29 @@ const props = withDefaults(defineProps<{
         slug: string;
         count: number;
     }>;
+    blogPath?: string;
 }>(), {
-    tags: () => []
+    tags: () => [],
+    blogPath: '/blog'
 });
 </script>
 
 <template>
-    <div v-if="props.tags.length" class="flex flex-wrap gap-3">
-        <NuxtLinkLocale v-for="(tag, index) in props.tags" :key="tag.slug" :to="`/blog/tags/${tag.slug}`" data-aos="fade-up" :data-aos-delay="Math.min(index * 100, 500)">
-            <Badge color="gray" :text="`${tag.name} (${tag.count})`" class="transition-transform duration-200 ease-out hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100" />
-        </NuxtLinkLocale>
+    <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>
+</template>

package/src/components/blog/CategoriesList.vue

@@ -16,9 +16,9 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 md:gap-6">
+    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4">
         <!-- Category card -->
-        <NuxtLink v-for="(category, i) in props.categories" :key="category.path || category.slug" :to="category.path" class="block h-full" data-aos="fade-up" :data-aos-delay="(i % 4) * 200">
+        <NuxtLink v-for="(category, index) in props.categories" :key="category.path || category.slug" data-aos="blur-up" :data-aos-delay="(index % 4) * 80" :to="category.path" 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" />
         </NuxtLink>
     </div>

package/src/components/blog/CategoryCard.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
-import { Badge } from '../ui/badge';
-import { Card, CardContent } from '../ui/card';
+import { ArrowRight01Icon, Folder01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card } from '../ui/card';
 
 // Props
 const props = withDefaults(defineProps<{
@@ -14,23 +15,26 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-    <Card class="p-0! overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
-        <CardContent class="gap-0 p-0!">
-            <!-- Background Image -->
-            <div v-if="props.image" class="relative w-full h-36 overflow-hidden">
-                <NuxtImg :src="props.image" :alt="props.name" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
-            </div>
-
-            <!-- Content -->
-            <div class="p-4 flex items-center justify-between">
-                <!-- Name -->
-                <span class="text-sm font-bold text-foreground truncate mr-3">
-                    {{ props.name }}
-                </span>
+    <Card class="group/category h-full gap-0! overflow-hidden p-0! transition-[translate,box-shadow] duration-300 ease-out-expo hover:-translate-y-0.5 hover:shadow-elevated-md">
+        <!-- Image -->
+        <div class="h-32 w-full overflow-hidden border-b border-border bg-surface">
+            <NuxtImg v-if="props.image" :src="props.image" :alt="props.name" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="size-full object-cover transition-[scale] duration-700 ease-out-expo group-hover/category:scale-[1.03]" />
 
-                <!-- Count -->
-                <Badge color="gray" :text="String(props.count)" />
+            <!-- Fallback when there is no image -->
+            <div v-else aria-hidden="true" class="flex size-full items-center justify-center text-primary/60">
+                <HugeiconsIcon :icon="Folder01Icon" class="size-8" />
             </div>
-        </CardContent>
+        </div>
+
+        <!-- Name, post count and arrow -->
+        <div class="flex grow items-center gap-3 bg-surface px-4 py-3 transition-colors duration-200 group-hover/category:bg-primary/10">
+            <span class="min-w-0 flex-1 truncate text-sm font-semibold text-foreground transition-colors duration-200 group-hover/category:text-primary">
+                {{ props.name }}
+            </span>
+            <span class="shrink-0 rounded border border-primary/30 px-1.5 text-[11px] font-semibold leading-5 text-primary tabular-nums">
+                {{ props.count }}
+            </span>
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 shrink-0 text-muted-foreground transition-[translate,color] duration-300 ease-spring group-hover/category:translate-x-1 group-hover/category:text-primary" />
+        </div>
     </Card>
-</template>
+</template>