@brumaombra/ui-vintage 0.9.2 → 0.9.3

package/COMPONENTS.md

@@ -3466,10 +3466,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 +3612,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): 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@brumaombra/ui-vintage",
-	"version": "0.9.2",
+	"version": "0.9.3",
 	"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/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/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>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import News01Icon from '@hugeicons/core-free-icons/News01Icon';
+import Tag01Icon from '@hugeicons/core-free-icons/Tag01Icon';
+import type { BlogTagData } from './blogPageUtils';
+import BlogHeaderSection from './BlogHeaderSection.vue';
+import BlogPageBreadcrumbs from './BlogPageBreadcrumbs.vue';
+import BlogTagsSection from './BlogTagsSection.vue';
+
+// Props
+const props = withDefaults(defineProps<{
+	description: string;
+	tags?: BlogTagData[];
+}>(), {
+	tags: () => []
+});
+
+const { t } = useI18n();
+
+// Tag totals shown under the header
+const headerStats = computed(() => {
+	const tagUses = props.tags.reduce((total, tag) => total + (tag.count || 0), 0);
+	return [
+		{ icon: Tag01Icon, value: props.tags.length, label: t('uiVintage.blog.stats.tags', props.tags.length) },
+		{ icon: News01Icon, value: tagUses, label: t('uiVintage.blog.stats.uses', tagUses) }
+	];
+});
+</script>
+
+<template>
+	<div>
+		<!-- Breadcrumbs -->
+		<BlogPageBreadcrumbs :items="[{ label: t('uiVintage.blog.breadcrumbTags') }]" />
+
+		<!-- Blog header -->
+		<BlogHeaderSection :title="t('uiVintage.blog.tags')"
+			:highlight="t('uiVintage.blog.tags')"
+			:description="props.description"
+			:stats="headerStats"
+			class="mb-12 md:mb-16" />
+
+		<!-- Tags list -->
+		<BlogTagsSection :tags="props.tags" class="justify-center" />
+	</div>
+</template>

package/src/components/blog/BlogViewAllLink.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
+import { HugeiconsIcon } from '@hugeicons/vue';
+
+// Props
+const props = defineProps<{
+	to: string;
+	label: string;
+}>();
+</script>
+
+<template>
+	<!-- Link to the full list of a blog section (the path is localized) -->
+	<NuxtLinkLocale :to="props.to" class="group/view inline-flex items-center gap-1.5 rounded px-1 text-xs font-semibold text-primary outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
+		{{ props.label }}
+		<HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/view:translate-x-1" />
+	</NuxtLinkLocale>
+</template>

package/src/components/blog/blogPageUtils.ts

@@ -0,0 +1,98 @@
+// Post fields read by the blog page helpers (a Nuxt Content blog collection entry)
+export interface BlogPostData {
+	path?: string;
+	title?: string;
+	description?: string;
+	image?: string;
+	categoryText?: string;
+	categorySlug?: string;
+	tags?: string[];
+	[key: string]: unknown;
+}
+
+// Category card data built from the posts
+export interface BlogCategoryData {
+	name: string;
+	slug: string;
+	path: string;
+	count: number;
+	image?: string;
+}
+
+// Tag badge data built from the posts
+export interface BlogTagData {
+	name: string;
+	slug: string;
+	count: number;
+}
+
+// Turn a label into a URL slug (e.g. "Dark Mode" -> "dark-mode")
+export const slugify = (value: unknown) => {
+	return String(value || '')
+		.trim()
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, '-')
+		.replace(/^-+|-+$/g, '');
+};
+
+// Remove the trailing slashes of a route path, since content paths never have one ("/blog/post/" -> "/blog/post")
+export const normalizeContentPath = (path: string) => path.replace(/(.)\/+$/, '$1');
+
+// Build the unique categories of the posts, with their post count and the image of their first post
+export const buildCategoriesFromPosts = (posts: BlogPostData[], getPath: (slug: string) => string): BlogCategoryData[] => {
+	const categoriesList = posts.map(post => post.categorySlug);
+	const uniqueCategories = categoriesList.filter((category, index, self): category is string => !!category && self.indexOf(category) === index);
+
+	// Map unique categories to category data
+	return uniqueCategories.map(category => {
+		const firstPost = posts.find(post => post.categorySlug === category);
+
+		// Return category data
+		return {
+			name: firstPost?.categoryText || category,
+			slug: category,
+			path: getPath(category),
+			count: categoriesList.filter(item => item === category).length,
+			image: firstPost?.image
+		};
+	});
+};
+
+// Build the unique tags of the posts, with their number of uses (the first label wins for tags that share a slug)
+export const buildTagsFromPosts = (posts: BlogPostData[]): BlogTagData[] => {
+	const tagsBySlug = new Map<string, BlogTagData>();
+
+	// Loop through each post and tag
+	for (const post of posts) {
+		for (const tag of post.tags || []) {
+			const slug = slugify(tag);
+			if (!slug) continue; // Skip tags that cannot produce a URL slug
+
+			// Preserve the first label while counting the duplicates
+			const existingTag = tagsBySlug.get(slug);
+			tagsBySlug.set(slug, {
+				name: existingTag?.name || tag,
+				slug,
+				count: (existingTag?.count || 0) + 1
+			});
+		}
+	}
+
+	// Return unique tags with their post counts
+	return [...tagsBySlug.values()];
+};
+
+// Create a deterministic hash for stable related content ordering (FNV-1a: a linear hash would give every seed the same order)
+const hashString = (value: string) => {
+	let hash = 2166136261;
+	for (let index = 0; index < value.length; index++) {
+		hash ^= value.charCodeAt(index);
+		hash = Math.imul(hash, 16777619);
+	}
+	return hash >>> 0;
+};
+
+// Sort a list by a deterministic score derived from a seed (the same post always shows the same related items, on the server and in the browser)
+export const sortByStableSeed = <T>(items: T[], seed: string, getKey: (item: T) => string) => {
+	return [...items].sort((itemA, itemB) => hashString(`${seed}-${getKey(itemA)}`) - hashString(`${seed}-${getKey(itemB)}`));
+};

package/src/components/blog/index.ts

@@ -13,4 +13,15 @@ export { default as HeaderCarousel } from './HeaderCarousel.vue';
 export { default as PostCard } from './PostCard.vue';
 export { default as PostsList } from './PostsList.vue';
 export { default as SocialShareSidebar } from './SocialShareSidebar.vue';
-export { default as TableOfContents } from './TableOfContents.vue';
+export { default as TableOfContents } from './TableOfContents.vue';
+// Complete blog pages (the app fetches the content and sets the SEO, these render the page)
+export { default as BlogIndexPage } from './BlogIndexPage.vue';
+export { default as BlogPostPage } from './BlogPostPage.vue';
+export { default as BlogCategoriesPage } from './BlogCategoriesPage.vue';
+export { default as BlogTagsPage } from './BlogTagsPage.vue';
+export { default as BlogPostsPage } from './BlogPostsPage.vue';
+export { default as BlogViewAllLink } from './BlogViewAllLink.vue';
+
+// Helpers for the data of the blog pages
+export { slugify, normalizeContentPath, buildCategoriesFromPosts, buildTagsFromPosts, sortByStableSeed } from './blogPageUtils';
+export type { BlogPostData, BlogCategoryData, BlogTagData } from './blogPageUtils';

package/src/i18n/de.json

@@ -108,6 +108,27 @@
 				"telegram": "Auf Telegram teilen",
 				"copy": "Link kopieren",
 				"copied": "Link kopiert"
+			},
+			"latestPosts": "Neueste Beiträge",
+			"latestPostsDescription": "Von der Redaktion ausgewählte Beiträge.",
+			"categories": "Kategorien",
+			"categoriesDescription": "Spring direkt zu den Themen, die dich interessieren.",
+			"tags": "Tags",
+			"tagsDescription": "Kleinere Themen, die sich durch alle Kategorien ziehen.",
+			"allPosts": "Alle Beiträge",
+			"allPostsDescription": "Alles, was wir veröffentlicht haben, das Neueste zuerst.",
+			"viewAll": "Alle ansehen",
+			"readAlso": "Lies auch",
+			"exploreCategories": "Kategorien entdecken",
+			"exploreAllCategories": "Alle Kategorien entdecken",
+			"breadcrumbHome": "Startseite",
+			"breadcrumbCategories": "Kategorien",
+			"breadcrumbTags": "Tags",
+			"stats": {
+				"posts": "Beitrag | Beiträge",
+				"categories": "Kategorie | Kategorien",
+				"tags": "Tag | Tags",
+				"uses": "Verwendung | Verwendungen"
 			}
 		},
 		"errorPage": {

package/src/i18n/en.json

@@ -108,6 +108,27 @@
 				"telegram": "Share on Telegram",
 				"copy": "Copy link",
 				"copied": "Link copied"
+			},
+			"latestPosts": "Latest posts",
+			"latestPostsDescription": "Hand-picked stories from the editorial desk.",
+			"categories": "Categories",
+			"categoriesDescription": "Jump straight to the topics you care about.",
+			"tags": "Tags",
+			"tagsDescription": "Smaller threads that run across categories.",
+			"allPosts": "All posts",
+			"allPostsDescription": "Everything we have published, newest first.",
+			"viewAll": "View all",
+			"readAlso": "Read also",
+			"exploreCategories": "Explore categories",
+			"exploreAllCategories": "Explore all categories",
+			"breadcrumbHome": "Home",
+			"breadcrumbCategories": "Categories",
+			"breadcrumbTags": "Tags",
+			"stats": {
+				"posts": "post | posts",
+				"categories": "category | categories",
+				"tags": "tag | tags",
+				"uses": "use | uses"
 			}
 		},
 		"errorPage": {

package/src/i18n/es.json

@@ -108,6 +108,27 @@
 				"telegram": "Compartir en Telegram",
 				"copy": "Copiar enlace",
 				"copied": "Enlace copiado"
+			},
+			"latestPosts": "Últimas publicaciones",
+			"latestPostsDescription": "Una selección de artículos elegidos por la redacción.",
+			"categories": "Categorías",
+			"categoriesDescription": "Ve directo a los temas que te interesan.",
+			"tags": "Etiquetas",
+			"tagsDescription": "Hilos más pequeños que atraviesan las categorías.",
+			"allPosts": "Todas las publicaciones",
+			"allPostsDescription": "Todo lo que hemos publicado, de lo más reciente a lo más antiguo.",
+			"viewAll": "Ver todo",
+			"readAlso": "Lee también",
+			"exploreCategories": "Explora las categorías",
+			"exploreAllCategories": "Explora todas las categorías",
+			"breadcrumbHome": "Inicio",
+			"breadcrumbCategories": "Categorías",
+			"breadcrumbTags": "Etiquetas",
+			"stats": {
+				"posts": "publicación | publicaciones",
+				"categories": "categoría | categorías",
+				"tags": "etiqueta | etiquetas",
+				"uses": "uso | usos"
 			}
 		},
 		"errorPage": {

package/src/i18n/fr.json

@@ -108,6 +108,27 @@
 				"telegram": "Partager sur Telegram",
 				"copy": "Copier le lien",
 				"copied": "Lien copié"
+			},
+			"latestPosts": "Derniers articles",
+			"latestPostsDescription": "Une sélection d'articles choisis par la rédaction.",
+			"categories": "Catégories",
+			"categoriesDescription": "Accédez directement aux sujets qui vous intéressent.",
+			"tags": "Étiquettes",
+			"tagsDescription": "Des fils plus petits qui traversent les catégories.",
+			"allPosts": "Tous les articles",
+			"allPostsDescription": "Tout ce que nous avons publié, du plus récent au plus ancien.",
+			"viewAll": "Tout voir",
+			"readAlso": "À lire aussi",
+			"exploreCategories": "Explorer les catégories",
+			"exploreAllCategories": "Explorer toutes les catégories",
+			"breadcrumbHome": "Accueil",
+			"breadcrumbCategories": "Catégories",
+			"breadcrumbTags": "Étiquettes",
+			"stats": {
+				"posts": "article | articles",
+				"categories": "catégorie | catégories",
+				"tags": "étiquette | étiquettes",
+				"uses": "utilisation | utilisations"
 			}
 		},
 		"errorPage": {

package/src/i18n/it.json

@@ -108,6 +108,27 @@
 				"telegram": "Condividi su Telegram",
 				"copy": "Copia link",
 				"copied": "Link copiato"
+			},
+			"latestPosts": "Ultimi post",
+			"latestPostsDescription": "Una selezione di articoli scelti dalla redazione.",
+			"categories": "Categorie",
+			"categoriesDescription": "Vai dritto agli argomenti che ti interessano.",
+			"tags": "Tag",
+			"tagsDescription": "Fili più piccoli che attraversano le categorie.",
+			"allPosts": "Tutti i post",
+			"allPostsDescription": "Tutto quello che abbiamo pubblicato, dal più recente.",
+			"viewAll": "Vedi tutti",
+			"readAlso": "Leggi anche",
+			"exploreCategories": "Esplora le categorie",
+			"exploreAllCategories": "Esplora tutte le categorie",
+			"breadcrumbHome": "Home",
+			"breadcrumbCategories": "Categorie",
+			"breadcrumbTags": "Tag",
+			"stats": {
+				"posts": "post | post",
+				"categories": "categoria | categorie",
+				"tags": "tag | tag",
+				"uses": "utilizzo | utilizzi"
 			}
 		},
 		"errorPage": {

package/src/i18n/ja.json

@@ -108,6 +108,27 @@
 				"telegram": "Telegram で共有",
 				"copy": "リンクをコピー",
 				"copied": "リンクをコピーしました"
+			},
+			"latestPosts": "最新の記事",
+			"latestPostsDescription": "編集部が選んだ記事です。",
+			"categories": "カテゴリー",
+			"categoriesDescription": "気になるトピックへすぐに移動できます。",
+			"tags": "タグ",
+			"tagsDescription": "カテゴリーを横断する小さなテーマです。",
+			"allPosts": "すべての記事",
+			"allPostsDescription": "これまでに公開したすべての記事を新しい順に。",
+			"viewAll": "すべて見る",
+			"readAlso": "あわせて読みたい",
+			"exploreCategories": "カテゴリーを見る",
+			"exploreAllCategories": "すべてのカテゴリーを見る",
+			"breadcrumbHome": "ホーム",
+			"breadcrumbCategories": "カテゴリー",
+			"breadcrumbTags": "タグ",
+			"stats": {
+				"posts": "件の記事",
+				"categories": "カテゴリー",
+				"tags": "タグ",
+				"uses": "回使用"
 			}
 		},
 		"errorPage": {

package/src/i18n/pt.json

@@ -108,6 +108,27 @@
 				"telegram": "Partilhar no Telegram",
 				"copy": "Copiar link",
 				"copied": "Link copiado"
+			},
+			"latestPosts": "Publicações recentes",
+			"latestPostsDescription": "Uma seleção de artigos escolhidos pela redação.",
+			"categories": "Categorias",
+			"categoriesDescription": "Vá direto aos temas que lhe interessam.",
+			"tags": "Tags",
+			"tagsDescription": "Fios menores que atravessam as categorias.",
+			"allPosts": "Todas as publicações",
+			"allPostsDescription": "Tudo o que publicamos, do mais recente ao mais antigo.",
+			"viewAll": "Ver tudo",
+			"readAlso": "Leia também",
+			"exploreCategories": "Explore as categorias",
+			"exploreAllCategories": "Explore todas as categorias",
+			"breadcrumbHome": "Início",
+			"breadcrumbCategories": "Categorias",
+			"breadcrumbTags": "Tags",
+			"stats": {
+				"posts": "publicação | publicações",
+				"categories": "categoria | categorias",
+				"tags": "tag | tags",
+				"uses": "uso | usos"
 			}
 		},
 		"errorPage": {

package/src/i18n/ru.json

@@ -108,6 +108,27 @@
 				"telegram": "Поделиться в Telegram",
 				"copy": "Копировать ссылку",
 				"copied": "Ссылка скопирована"
+			},
+			"latestPosts": "Последние статьи",
+			"latestPostsDescription": "Подборка статей от редакции.",
+			"categories": "Категории",
+			"categoriesDescription": "Переходите сразу к интересующим вас темам.",
+			"tags": "Теги",
+			"tagsDescription": "Небольшие темы, проходящие через разные категории.",
+			"allPosts": "Все статьи",
+			"allPostsDescription": "Всё, что мы опубликовали, сначала новые.",
+			"viewAll": "Смотреть все",
+			"readAlso": "Читайте также",
+			"exploreCategories": "Исследуйте категории",
+			"exploreAllCategories": "Все категории",
+			"breadcrumbHome": "Главная",
+			"breadcrumbCategories": "Категории",
+			"breadcrumbTags": "Теги",
+			"stats": {
+				"posts": "статья | статей",
+				"categories": "категория | категорий",
+				"tags": "тег | тегов",
+				"uses": "использование | использований"
 			}
 		},
 		"errorPage": {

package/src/i18n/zh.json

@@ -108,6 +108,27 @@
 				"telegram": "分享到 Telegram",
 				"copy": "复制链接",
 				"copied": "链接已复制"
+			},
+			"latestPosts": "最新文章",
+			"latestPostsDescription": "编辑精选的文章。",
+			"categories": "分类",
+			"categoriesDescription": "直接跳转到你关心的主题。",
+			"tags": "标签",
+			"tagsDescription": "贯穿各个分类的小主题。",
+			"allPosts": "全部文章",
+			"allPostsDescription": "我们发布的所有内容，最新的在前。",
+			"viewAll": "查看全部",
+			"readAlso": "延伸阅读",
+			"exploreCategories": "浏览分类",
+			"exploreAllCategories": "浏览全部分类",
+			"breadcrumbHome": "首页",
+			"breadcrumbCategories": "分类",
+			"breadcrumbTags": "标签",
+			"stats": {
+				"posts": "篇文章",
+				"categories": "个分类",
+				"tags": "个标签",
+				"uses": "次使用"
 			}
 		},
 		"errorPage": {