@brumaombra/ui-vintage 0.9.2 → 0.9.4

package/AGENTS.md

@@ -33,6 +33,7 @@ Only build something new when no entry point fits, and compose it from library p
 - Icons are Hugeicons definitions: import each one from its own module (`import Rocket01Icon from '@hugeicons/core-free-icons/Rocket01Icon'`, never the `@hugeicons/core-free-icons` barrel, which makes the build parse the whole icon set) and pass them to `:icon` props, or render them with `HugeiconsIcon` from `@hugeicons/vue`. Both packages are peer dependencies, so the app must list them in its own `package.json`.
 - Form controls use `v-model`. Mark invalid fields with `aria-invalid` and show messages with `FieldError`.
 - Library strings are translated through vue-i18n (`uiVintage.*` keys). App copy belongs in the app's own locale files.
+- Pass links as plain paths (`to: '/settings'`, `app-link-to="/"`), never `localePath()` results: the components render `NuxtLinkLocale`, which adds the language prefix and navigates client-side. External URLs work in the same props. For your own link buttons, use `<Button as-child>` around a `NuxtLinkLocale`.
 
 ## 4. Check your work
 

package/COMPONENTS.md

@@ -255,7 +255,7 @@ import { LoadMoreButton } from '@brumaombra/ui-vintage/load-more-button';
 
 ### `@brumaombra/ui-vintage/text-link`
 
-Inline text link that renders an anchor or a router link component (pass `NuxtLink` as `link-component`).
+Inline text link for an internal path (localized with `NuxtLinkLocale`) or an external URL.
 
 ```ts
 import { TextLink } from '@brumaombra/ui-vintage/text-link';
@@ -267,7 +267,6 @@ import { TextLink } from '@brumaombra/ui-vintage/text-link';
 | --- | --- | --- |
 | `to` *(required)* | `string` |  |
 | `text` *(required)* | `string` |  |
-| `linkComponent` | `Component \| string` | `'a'` |
 
 - **Emits:** `click` (event: MouseEvent).
 
@@ -3057,14 +3056,14 @@ import { BackgroundGrid } from '@brumaombra/ui-vintage/background-grid';
 
 ### `@brumaombra/ui-vintage/dashboard-shell`
 
-Complete dashboard layout: collapsible sidebar built from `sidebar-sections`, mobile sheet, sticky topbar, and grid background. Pass `NuxtLink` as `sidebar-link-component` for client-side navigation.
+Complete dashboard layout: collapsible sidebar built from `sidebar-sections`, mobile sheet, sticky topbar, and grid background. Item `to` paths are localized and navigate client-side (`NuxtLinkLocale`).
 
 ```ts
 import { DashboardShell } from '@brumaombra/ui-vintage/dashboard-shell';
 ```
 
 ```vue
-<DashboardShell title="Projects" :sidebar-sections="sections" :sidebar-link-component="NuxtLink">
+<DashboardShell title="Projects" :sidebar-sections="sections">
     <template #topbar-trailing>
         <ThemeSelector />
     </template>
@@ -3084,8 +3083,7 @@ import { DashboardShell } from '@brumaombra/ui-vintage/dashboard-shell';
 | `description` | `string` | `''` |
 | `collapsible` | `'offcanvas' \| 'icon' \| 'none'` | `'offcanvas'` |
 | `compact` | `boolean` | `false` |
-| `sidebarSections` | `Array<{ id: string; label?: string; items: Array<{ id: string; label: string; description?: string; icon?: HugeiconsIconDefinition \| null; href?: string; to?: unknown; active?: boolean; newTab?: boolean }> }>` | `[]` |
-| `sidebarLinkComponent` | `Component \| string` | `'a'` |
+| `sidebarSections` | `Array<{ id: string; label?: string; items: Array<{ id: string; label: string; description?: string; icon?: HugeiconsIconDefinition \| null; to: string; active?: boolean; newTab?: boolean }> }>` | `[]` |
 | `showBackground` | `boolean` | `true` |
 | `insetClass` | `HTMLAttributes['class']` |  |
 | `topbarClass` | `HTMLAttributes['class']` |  |
@@ -3178,7 +3176,6 @@ import type { LandingFooterLink, LandingFooterSection } from '@brumaombra/ui-vin
 | `logoClass` | `HTMLAttributes['class']` |  |
 | `appDescription` | `string` | `''` |
 | `sections` | `LandingFooterSection[]` | `[]` |
-| `linkComponent` | `Component \| string` | `'a'` |
 | `authorName` | `string` | `''` |
 | `authorLink` | `string` | `''` |
 | `year` | `number` | `new Date().getFullYear()` |
@@ -3196,8 +3193,7 @@ import type { LandingFooterLink, LandingFooterSection } from '@brumaombra/ui-vin
 interface LandingFooterLink {
     id: string;
     label: string;
-    href?: string;
-    to?: unknown;
+    to: string;
     newTab?: boolean;
 }
 interface LandingFooterSection {
@@ -3244,7 +3240,6 @@ import type { LandingFooterLink, LandingFooterSection } from '@brumaombra/ui-vin
 | `logoClass` | `HTMLAttributes['class']` |  |
 | `appDescription` | `string` | `''` |
 | `sections` | `LandingFooterSection[]` | `[]` |
-| `linkComponent` | `Component \| string` | `'a'` |
 | `authorName` | `string` | `''` |
 | `authorLink` | `string` | `''` |
 | `year` | `number` | `new Date().getFullYear()` |
@@ -3262,8 +3257,7 @@ import type { LandingFooterLink, LandingFooterSection } from '@brumaombra/ui-vin
 interface LandingFooterLink {
     id: string;
     label: string;
-    href?: string;
-    to?: unknown;
+    to: string;
     newTab?: boolean;
 }
 interface LandingFooterSection {
@@ -3466,10 +3460,11 @@ Components for Nuxt Content pages and a complete blog.
 
 ### `@brumaombra/ui-vintage/blog`
 
-Blog building blocks: an animated hero header, a post header (breadcrumbs, category and tags, title, author line, and featured image), a full-bleed featured carousel, post and category cards, tags, table of contents, reading progress, FAQ, share sidebar, and the content renderer. Scroll entrances use AOS: install `aos` in the app and initialize it (the components carry `data-aos="blur-up"`, and the library stylesheet defines that animation). Without AOS the content simply renders without entrances.
+Complete blog pages and their building blocks. The page components (`BlogIndexPage`, `BlogPostPage`, `BlogCategoriesPage`, `BlogTagsPage`, `BlogPostsPage` for the posts of a category or a tag) render the whole design: the app keeps one thin file per route that queries Nuxt Content, sets the SEO and passes the data and its own copy (titles and descriptions), with the helpers (`slugify`, `normalizeContentPath`, `buildCategoriesFromPosts`, `buildTagsFromPosts`, `sortByStableSeed`) shaping the data. The post page renders the app's `ProseHr` content component as divider and has an `after-article` slot for a call to action. The building blocks: an animated hero header, a post header (breadcrumbs, category and tags, title, author line, and featured image), a full-bleed featured carousel, post and category cards, tags, table of contents, reading progress, FAQ, share sidebar, and the content renderer. Scroll entrances use AOS: install `aos` in the app and initialize it (the components carry `data-aos="blur-up"`, and the library stylesheet defines that animation). Without AOS the content simply renders without entrances.
 
 ```ts
-import { AllPostsSection, BlogContentRenderer, BlogFAQSection, BlogInfoSection, BlogPostHeader, BlogHeaderSection, BlogSectionTitle, BlogTagsSection, CategoriesList, CategoriesSection, CategoryCard, HeaderCarousel, PostCard, PostsList, SocialShareSidebar, TableOfContents } from '@brumaombra/ui-vintage/blog';
+import { AllPostsSection, BlogContentRenderer, BlogFAQSection, BlogInfoSection, BlogPostHeader, BlogHeaderSection, BlogSectionTitle, BlogTagsSection, CategoriesList, CategoriesSection, CategoryCard, HeaderCarousel, PostCard, PostsList, SocialShareSidebar, TableOfContents, BlogIndexPage, BlogPostPage, BlogCategoriesPage, BlogTagsPage, BlogPostsPage, BlogViewAllLink, slugify, normalizeContentPath, buildCategoriesFromPosts, buildTagsFromPosts, sortByStableSeed } from '@brumaombra/ui-vintage/blog';
+import type { BlogPostData, BlogCategoryData, BlogTagData } from '@brumaombra/ui-vintage/blog';
 ```
 
 #### `AllPostsSection`
@@ -3611,6 +3606,105 @@ import { AllPostsSection, BlogContentRenderer, BlogFAQSection, BlogInfoSection,
 | --- | --- | --- |
 | `content` *(required)* | `{ body?: { toc?: { links?: BlogTocLink[] } }; toc?: { links?: BlogTocLink[] } }` |  |
 
+#### `BlogIndexPage`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `title` *(required)* | `string` |  |
+| `highlight` | `string` | `''` |
+| `description` *(required)* | `string` |  |
+| `featuredPosts` | `BlogListPost[]` | `[]` |
+| `categories` | `BlogCategoryData[]` | `[]` |
+| `tags` | `BlogTagData[]` | `[]` |
+| `posts` | `BlogListPost[]` | `[]` |
+| `totalPosts` | `number` | `0` |
+| `currentPage` | `number` | `1` |
+| `postsPerPage` | `number` | `9` |
+| `hasMorePosts` | `boolean` | `false` |
+| `isLoading` | `boolean` | `false` |
+
+- **Emits:** `load-more`.
+
+#### `BlogPostPage`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `post` *(required)* | `Record<string, any>` |  |
+| `url` *(required)* | `string` |  |
+| `relatedPosts` | `Array<{ path: string; title: string; description?: string; image?: string; categoryText?: string }>` | `[]` |
+| `relatedCategories` | `BlogCategoryData[]` | `[]` |
+
+- **Slots:** `after-article`.
+
+#### `BlogCategoriesPage`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `description` *(required)* | `string` |  |
+| `categories` | `BlogCategoryData[]` | `[]` |
+
+#### `BlogTagsPage`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `description` *(required)* | `string` |  |
+| `tags` | `BlogTagData[]` | `[]` |
+
+#### `BlogPostsPage`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `section` *(required)* | `'categories' \| 'tags'` |  |
+| `title` *(required)* | `string` |  |
+| `description` *(required)* | `string` |  |
+| `posts` | `Array<{ path: string; title: string; description?: string; image?: string; categoryText?: string }>` | `[]` |
+| `totalPosts` | `number` | `0` |
+| `currentPage` | `number` | `1` |
+| `postsPerPage` | `number` | `9` |
+| `hasMorePosts` | `boolean` | `false` |
+| `isLoading` | `boolean` | `false` |
+
+- **Emits:** `load-more`.
+
+#### `BlogViewAllLink`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `to` *(required)* | `string` |  |
+| `label` *(required)* | `string` |  |
+
+#### Functions, constants, and types
+
+```ts
+function slugify(value: unknown)
+function normalizeContentPath(path: string)
+function buildCategoriesFromPosts(posts: BlogPostData[], getPath: (slug: string) => string = slug => `/blog/categories/${slug}`): BlogCategoryData[]
+function buildTagsFromPosts(posts: BlogPostData[]): BlogTagData[]
+function sortByStableSeed(items: T[], seed: string, getKey: (item: T) => string)
+interface BlogPostData {
+    path?: string;
+    title?: string;
+    description?: string;
+    image?: string;
+    categoryText?: string;
+    categorySlug?: string;
+    tags?: string[];
+    [key: string]: unknown;
+}
+interface BlogCategoryData {
+    name: string;
+    slug: string;
+    path: string;
+    count: number;
+    image?: string;
+}
+interface BlogTagData {
+    name: string;
+    slug: string;
+    count: number;
+}
+```
+
 ---
 
 ### `@brumaombra/ui-vintage/content`

package/README.md

@@ -140,7 +140,7 @@ if (confirmed) {
 
 ### Build a layout
 
-Shells own the layout and responsive behavior; your app owns the navigation data and the content:
+Shells own the layout and responsive behavior; your app owns the navigation data and the content. Links take plain paths (`to: '/settings'`): the components render `NuxtLinkLocale`, which adds the current language prefix and navigates client-side, and leaves external URLs as they are:
 
 ```vue
 <script setup>
@@ -151,8 +151,8 @@ const sidebarSections = [{
     id: 'workspace',
     label: 'Workspace',
     items: [
-        { id: 'overview', label: 'Overview', href: '/', active: true },
-        { id: 'settings', label: 'Settings', href: '/settings' }
+        { id: 'overview', label: 'Overview', to: '/', active: true },
+        { id: 'settings', label: 'Settings', to: '/settings' }
     ]
 }];
 </script>
@@ -402,7 +402,7 @@ New entry points need an export in `package.json` and a description and category
 - Nuxt 4 and Vue 3.5 or newer.
 - Tailwind CSS v4 with `@tailwindcss/vite` registered in `vite.plugins`.
 - `@hugeicons/core-free-icons` 4.3 or newer and `@hugeicons/vue` 1 (the icons you pass to `:icon` props, and the ones the components render). Import each icon from its own module, as in the example above: the package barrel makes the build parse the whole icon set.
-- `vue-i18n` 9, 10, or 11 with an i18n setup, such as `@nuxtjs/i18n` (the components call `useI18n()`).
+- `@nuxtjs/i18n` 10 (the components call `useI18n()`, and every link renders `NuxtLinkLocale`).
 - `@nuxt/image` 2 for image components (the module installs it when needed).
 - `@nuxt/content` 3, only for the `blog` and `content` components.
 
@@ -411,7 +411,7 @@ New entry points need an export in `package.json` and a description and category
 - **Components can't resolve Nuxt imports:** check that the app runs Nuxt 4 and that `@brumaombra/ui-vintage` is registered in `nuxt.config`.
 - **Styles are missing:** register the module once, add `tailwindcss()` from `@tailwindcss/vite` to `vite.plugins`, and restart the dev server after changing `nuxt.config`.
 - **`NuxtImg` is unavailable:** install `@nuxt/image`, or let the module install it during setup.
-- **`useI18n` errors or missing translations:** register `@nuxtjs/i18n` (or install Vue I18n yourself); the components need an i18n composer, and the library messages are merged into it.
+- **`useI18n` errors, missing translations, or `NuxtLinkLocale` failing to resolve:** register `@nuxtjs/i18n`; the components need its composer and link component, and the library messages are merged into it.
 - **An import fails:** use the public subpath from `package.json`, such as `@brumaombra/ui-vintage/button`, never an internal `src/` path.
 
 ## License

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@brumaombra/ui-vintage",
-	"version": "0.9.2",
+	"version": "0.9.4",
 	"description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
 	"private": false,
 	"author": "Mauro Brambilla",

package/src/components/blog/BlogCategoriesPage.vue

@@ -0,0 +1,46 @@
+<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 type { BlogCategoryData } from './blogPageUtils';
+import BlogHeaderSection from './BlogHeaderSection.vue';
+import BlogPageBreadcrumbs from './BlogPageBreadcrumbs.vue';
+import CategoriesList from './CategoriesList.vue';
+
+// Props
+const props = withDefaults(defineProps<{
+	description: string;
+	categories?: BlogCategoryData[];
+}>(), {
+	categories: () => []
+});
+
+const { t } = useI18n();
+
+// Category totals shown under the header
+const headerStats = computed(() => {
+	const postCount = props.categories.reduce((total, category) => total + category.count, 0);
+	return [
+		{ icon: FolderLibraryIcon, value: props.categories.length, label: t('uiVintage.blog.stats.categories', props.categories.length) },
+		{ icon: News01Icon, value: postCount, label: t('uiVintage.blog.stats.posts', postCount) }
+	];
+});
+</script>
+
+<template>
+	<div>
+		<!-- Breadcrumbs -->
+		<BlogPageBreadcrumbs :items="[{ label: t('uiVintage.blog.breadcrumbCategories') }]" />
+
+		<!-- Blog header -->
+		<BlogHeaderSection :title="t('uiVintage.blog.categories')"
+			:highlight="t('uiVintage.blog.categories')"
+			:description="props.description"
+			:stats="headerStats"
+			class="mb-12 md:mb-16" />
+
+		<!-- Categories section -->
+		<CategoriesList :categories="props.categories" />
+	</div>
+</template>

package/src/components/blog/BlogHeaderSection.vue

@@ -81,7 +81,7 @@ const underlineDelay = computed(() => `${beforeWords.value.length * 55 + 600}ms`
 <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">
+		<NuxtLinkLocale 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" />
@@ -91,7 +91,7 @@ const underlineDelay = computed(() => `${beforeWords.value.length * 55 + 600}ms`
 				<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>
+		</NuxtLinkLocale>
 
 		<!-- Badges -->
 		<div v-if="props.badges.length > 0" :class="cn('flex flex-wrap gap-2', alignClass.row)">

package/src/components/blog/BlogIndexPage.vue

@@ -0,0 +1,124 @@
+<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 (the links localize the paths)
+type BlogListPost = {
+	path: string;
+	title: string;
+	description?: string;
+	image?: string;
+	categoryText?: string;
+	categorySlug?: 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();
+
+// Featured posts with the link to their category page
+const carouselPosts = computed(() => props.featuredPosts.map(post => ({
+	...post,
+	categoryPath: post.categorySlug ? `/blog/categories/${post.categorySlug}` : undefined
+})));
+
+// 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="carouselPosts" />
+		</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

@@ -38,17 +38,17 @@ const showModifiedDate = computed(() => Boolean(props.dateModified) && formatted
 		<!-- 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">
+			<NuxtLinkLocale :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>
+			</NuxtLinkLocale>
 
 			<!-- 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">
+				<NuxtLinkLocale :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>
+				</NuxtLinkLocale>
 				<p v-if="props.authorBio" class="mt-1.5 text-xs leading-relaxed text-muted-foreground md:text-sm">
 					{{ props.authorBio }}
 				</p>

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>

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>