@brumaombra/ui-vintage 0.9.2 → 0.9.4

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, the links localize their paths)
+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/CategoriesList.vue

@@ -18,8 +18,8 @@ const props = withDefaults(defineProps<{
 <template>
 	<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, 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">
+		<NuxtLinkLocale 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>
+		</NuxtLinkLocale>
 	</div>
 </template>

package/src/components/blog/HeaderCarousel.vue

@@ -112,10 +112,10 @@ onUnmounted(() => {
 		<div class="relative h-[28rem] w-full md:h-[32rem]">
 			<div v-for="(post, index) in props.featuredPosts" :id="`${slideIdPrefix}-${index}`" :key="post.path || post.title || index" role="group" aria-roledescription="slide" :aria-label="`${index + 1} / ${slideCount}`" :aria-hidden="currentSlide !== index" :inert="currentSlide !== index || undefined" :class="cn('absolute inset-0 transition-[opacity,scale] duration-700 ease-out-expo', currentSlide === index ? 'z-10 scale-100 opacity-100' : 'z-0 scale-[1.02] opacity-0')">
 				<!-- Slide image with a slow zoom -->
-				<NuxtLink :to="post.path" tabindex="-1" aria-hidden="true" class="absolute inset-0 overflow-hidden">
+				<NuxtLinkLocale :to="post.path" tabindex="-1" aria-hidden="true" class="absolute inset-0 overflow-hidden">
 					<NuxtImg v-if="post.image" :src="post.image" :alt="post.title" width="1200" height="640" format="avif" quality="45" :sizes="{ 480: '480px', 1536: '1152px' }" :loading="index === 0 ? 'eager' : 'lazy'" :fetchpriority="index === 0 ? 'high' : 'auto'" :preload="index === 0" :class="cn('size-full object-cover', currentSlide === index && 'animate-uv-ken-burns')" />
 					<div v-else class="size-full bg-[radial-gradient(circle_at_20%_20%,color-mix(in_oklab,var(--primary)_45%,transparent),transparent_60%)] bg-surface" />
-				</NuxtLink>
+				</NuxtLinkLocale>
 
 				<!-- Legibility shade -->
 				<div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/90 via-black/45 to-black/5" />
@@ -124,16 +124,16 @@ onUnmounted(() => {
 				<!-- Slide content (replays its entrance every time the slide becomes active) -->
 				<div class="absolute inset-x-0 bottom-0 flex flex-col gap-4 p-6 pb-20 text-white md:max-w-3xl md:p-10 md:pb-24">
 					<!-- Category badge -->
-					<NuxtLink v-if="post.categoryText && post.categoryPath" :to="post.categoryPath" :class="cn('w-fit', currentSlide === index && 'animate-uv-fade-up')">
+					<NuxtLinkLocale v-if="post.categoryText && post.categoryPath" :to="post.categoryPath" :class="cn('w-fit', currentSlide === index && 'animate-uv-fade-up')">
 						<Badge :text="post.categoryText" pulse class="border-white/25 bg-white/15 text-white backdrop-blur-md transition-colors hover:bg-white/25" />
-					</NuxtLink>
+					</NuxtLinkLocale>
 
 					<!-- Title -->
-					<NuxtLink :to="post.path" :class="cn('outline-none', currentSlide === index && 'animate-uv-fade-up [animation-delay:90ms]')">
+					<NuxtLinkLocale :to="post.path" :class="cn('outline-none', currentSlide === index && 'animate-uv-fade-up [animation-delay:90ms]')">
 						<h3 class="line-clamp-3 text-2xl leading-tight font-bold tracking-tight text-balance drop-shadow-sm md:text-5xl">
 							{{ post.title }}
 						</h3>
-					</NuxtLink>
+					</NuxtLinkLocale>
 
 					<!-- Description -->
 					<p v-if="post.description" :class="cn('line-clamp-2 max-w-2xl text-xs leading-relaxed text-white/80 md:text-base', currentSlide === index && 'animate-uv-fade-up [animation-delay:180ms]')">
@@ -143,10 +143,10 @@ onUnmounted(() => {
 					<!-- Read post button -->
 					<div :class="cn(currentSlide === index && 'animate-uv-fade-up [animation-delay:260ms]')">
 						<Button as-child size="lg" class="group/cta">
-							<NuxtLink :to="post.path">
+							<NuxtLinkLocale :to="post.path">
 								{{ t('uiVintage.blog.goToPost') }}
 								<HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/cta:translate-x-1" />
-							</NuxtLink>
+							</NuxtLinkLocale>
 						</Button>
 					</div>
 				</div>

package/src/components/blog/PostsList.vue

@@ -19,8 +19,8 @@ const props = withDefaults(defineProps<{
 <template>
 	<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
 		<!-- Post cards rise in row by row as they scroll into view -->
-		<NuxtLink v-for="(post, index) in props.posts" :key="post.path" data-aos="blur-up" :data-aos-delay="(index % 3) * 90" :to="post.path" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+		<NuxtLinkLocale v-for="(post, index) in props.posts" :key="post.path" data-aos="blur-up" :data-aos-delay="(index % 3) * 90" :to="post.path" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
 			<PostCard class="h-full" :image="post.image" :category="post.categoryText" :title="post.title" :description="post.description" />
-		</NuxtLink>
+		</NuxtLinkLocale>
 	</div>
 </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 (the path is the blog category page by default)
+export const buildCategoriesFromPosts = (posts: BlogPostData[], getPath: (slug: string) => string = slug => `/blog/categories/${slug}`): 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/components/dashboard-shell/DashboardShell.vue

@@ -2,7 +2,7 @@
 import { NuxtImg } from '#components';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import type { Component, HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import BackgroundGrid from '../background-grid/BackgroundGrid.vue';
 import { ThemeSelector } from '../theme-selector';
@@ -11,7 +11,7 @@ import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupConte
 import { cn } from '../../lib/utils';
 import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
-// Props
+// Props (item and home paths are localized by the links, external URLs work too)
 const props = withDefaults(defineProps<{
 	appName?: string;
 	appLogo?: string;
@@ -29,13 +29,11 @@ const props = withDefaults(defineProps<{
 			label: string;
 			description?: string;
 			icon?: HugeiconsIconDefinition | null;
-			href?: string;
-			to?: unknown;
+			to: string;
 			active?: boolean;
 			newTab?: boolean;
 		}>;
 	}>;
-	sidebarLinkComponent?: Component | string;
 	showBackground?: boolean;
 	insetClass?: HTMLAttributes['class'];
 	topbarClass?: HTMLAttributes['class'];
@@ -50,26 +48,14 @@ const props = withDefaults(defineProps<{
 	collapsible: 'offcanvas',
 	compact: false,
 	sidebarSections: () => [],
-	sidebarLinkComponent: 'a',
 	showBackground: true
 });
 
-// Resolve link props for sidebar items
+// Get the link props of a sidebar item (new tab links open in a separate, unlinked tab)
 const getSidebarItemLinkProps = (item: NonNullable<typeof props.sidebarSections>[number]['items'][number]) => {
-	const sharedProps = item.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
-
-	// If the link component is an anchor, use href. Otherwise, use to for router links.
-	if (props.sidebarLinkComponent === 'a') {
-		return {
-			href: item.href ?? '#',
-			...sharedProps
-		};
-	}
-
-	// For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
 	return {
-		to: item.to ?? item.href ?? '/',
-		...sharedProps
+		to: item.to,
+		...(item.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})
 	};
 };
 
@@ -93,8 +79,9 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 				<slot name="sidebar-header">
 					<SidebarMenu>
 						<SidebarMenuItem>
+							<!-- Home link (the path is localized) -->
 							<SidebarMenuButton as-child size="lg">
-								<a :href="props.appLinkTo" class="inline-flex items-center gap-2">
+								<NuxtLinkLocale :to="props.appLinkTo" class="inline-flex items-center gap-2">
 									<div class="inline-flex items-center gap-2">
 										<!-- App logo -->
 										<template v-if="lightLogo">
@@ -105,7 +92,7 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 										<!-- App name -->
 										<span v-if="props.appName" class="text-xl font-semibold tracking-tight text-foreground">{{ props.appName }}</span>
 									</div>
-								</a>
+								</NuxtLinkLocale>
 							</SidebarMenuButton>
 						</SidebarMenuItem>
 					</SidebarMenu>
@@ -125,9 +112,9 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 						<SidebarMenu :class="cn('gap-1', props.compact && 'gap-0.5')">
 							<SidebarMenuItem v-for="item in section.items" :key="item.id">
 								<SidebarMenuButton as-child :is-active="item.active" :class="cn('group/nav relative h-auto min-h-11 overflow-hidden rounded px-3 py-2.5 text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground data-[active=true]:bg-primary/10 data-[active=true]:text-foreground sm:px-3.5', 'before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:origin-center before:scale-y-0 before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-[active=true]:before:scale-y-100', item.description ? 'items-start' : 'items-center')">
-									<component :is="props.sidebarLinkComponent" v-bind="getSidebarItemLinkProps(item)" :aria-current="item.active ? 'page' : undefined">
-										<!-- Icon -->
-										<HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('shrink-0 opacity-90 transition-[opacity,color] duration-150 group-hover/nav:opacity-100 group-data-[active=true]/nav:text-primary', item.description ? 'mt-0.5 size-5 sm:h-5 sm:w-5' : 'size-5 self-center sm:h-6 sm:w-6')" />
+									<NuxtLinkLocale v-bind="getSidebarItemLinkProps(item)" :aria-current="item.active ? 'page' : undefined">
+										<!-- Icon, centered on the capitals of the label (or of its first line, 1.25em tall): the line box alone centers it 0.08em too low, because of the space the font keeps for descenders (the size is important: the menu button shrinks its direct svg children to size-4) -->
+										<HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('size-5! shrink-0 opacity-90 transition-[opacity,color] duration-150 group-hover/nav:opacity-100 group-data-[active=true]/nav:text-primary', item.description ? 'mt-[calc((1.25em_-_20px)/2_-_0.08em)]' : 'self-center -translate-y-[0.08em]')" />
 
 										<!-- Label and optional description -->
 										<div :class="cn('min-w-0 flex-1 text-left leading-tight', item.description ? 'grid' : 'flex items-center')">
@@ -139,7 +126,7 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 												{{ item.description }}
 											</span>
 										</div>
-									</component>
+									</NuxtLinkLocale>
 								</SidebarMenuButton>
 							</SidebarMenuItem>
 						</SidebarMenu>

package/src/components/landing/landing-footer/LandingFooter.vue

@@ -2,16 +2,16 @@
 import { NuxtImg } from '#components';
 import FavouriteIcon from '@hugeicons/core-free-icons/FavouriteIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { computed, type Component, type HTMLAttributes } from 'vue';
+import { computed, type HTMLAttributes } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 import type { HeadingLevel } from '../../../lib/common-types';
 
+// Footer link (the path is localized by the link, external URLs work too)
 export interface LandingFooterLink {
 	id: string;
 	label: string;
-	href?: string;
-	to?: unknown;
+	to: string;
 	newTab?: boolean;
 }
 
@@ -30,7 +30,6 @@ const props = withDefaults(defineProps<{
 	logoClass?: HTMLAttributes['class'];
 	appDescription?: string;
 	sections?: LandingFooterSection[];
-	linkComponent?: Component | string;
 	authorName?: string;
 	authorLink?: string;
 	year?: number;
@@ -45,7 +44,6 @@ const props = withDefaults(defineProps<{
 	appLinkTo: '/',
 	appDescription: '',
 	sections: () => [],
-	linkComponent: 'a',
 	authorName: '',
 	authorLink: '',
 	year: () => new Date().getFullYear(),
@@ -57,22 +55,11 @@ const { t } = useI18n();
 const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name: props.appName }) : t('uiVintage.common.home'));
 const hasSingleSection = computed(() => props.sections.length === 1);
 
-// Get link props based on the type of link component and whether the link should open in a new tab
+// Get the link props (new tab links open in a separate, unlinked tab)
 const getLinkProps = (link: LandingFooterLink) => {
-	const sharedProps = link.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
-
-	// If the link component is an anchor, use href. Otherwise, use to for router links.
-	if (props.linkComponent === 'a') {
-		return {
-			href: link.href ?? '#',
-			...sharedProps
-		};
-	}
-
-	// For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
 	return {
-		to: link.to ?? link.href ?? '/',
-		...sharedProps
+		to: link.to,
+		...(link.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})
 	};
 };
 
@@ -88,14 +75,14 @@ const hasDarkLogo = computed(() => darkLogo.value !== lightLogo.value);
 			<div :class="cn('flex flex-col gap-8 md:flex-row md:items-start md:justify-between')">
 				<!-- Brand section -->
 				<div :class="cn('max-w-md flex-1', props.brandClass)">
-					<!-- App logo and name -->
-					<a :href="props.appLinkTo" class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground transition-opacity duration-150 hover:opacity-80">
+					<!-- App logo and name (home link, the path is localized) -->
+					<NuxtLinkLocale :to="props.appLinkTo" class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground transition-opacity duration-150 hover:opacity-80">
 						<template v-if="lightLogo">
 							<NuxtImg :src="lightLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('size-8 shrink-0 object-contain', hasDarkLogo && 'dark:hidden', props.logoClass)" />
 							<NuxtImg v-if="hasDarkLogo" :src="darkLogo" :alt="logoAlt" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('hidden size-8 shrink-0 object-contain dark:block', props.logoClass)" />
 						</template>
 						<span>{{ props.appName }}</span>
-					</a>
+					</NuxtLinkLocale>
 
 					<!-- App description -->
 					<p v-if="props.appDescription" class="max-w-sm text-xs md:text-sm leading-relaxed text-muted-foreground">
@@ -114,9 +101,9 @@ const hasDarkLogo = computed(() => darkLogo.value !== lightLogo.value);
 						<!-- Section links -->
 						<ul class="space-y-3 text-xs sm:text-sm">
 							<li v-for="link in props.sections[0]?.links" :key="link.id">
-								<component :is="props.linkComponent" v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
+								<NuxtLinkLocale v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
 									{{ link.label }}
-								</component>
+								</NuxtLinkLocale>
 							</li>
 						</ul>
 					</div>
@@ -133,9 +120,9 @@ const hasDarkLogo = computed(() => darkLogo.value !== lightLogo.value);
 						<!-- Section links -->
 						<ul class="space-y-3 text-xs sm:text-sm">
 							<li v-for="link in section.links" :key="link.id">
-								<component :is="props.linkComponent" v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
+								<NuxtLinkLocale v-bind="getLinkProps(link)" class="bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary">
 									{{ link.label }}
-								</component>
+								</NuxtLinkLocale>
 							</li>
 						</ul>
 					</div>

package/src/components/landing/landing-navbar/LandingNavbar.vue

@@ -64,7 +64,8 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 				<!-- Left-aligned content -->
 				<div :class="cn('flex items-center', props.leftClass)">
 					<slot name="left">
-						<a v-if="lightLogo || props.appName" :href="props.appLinkTo" class="inline-flex items-center gap-2 transition-opacity duration-150 hover:opacity-80">
+						<!-- Home link (the path is localized) -->
+						<NuxtLinkLocale v-if="lightLogo || props.appName" :to="props.appLinkTo" class="inline-flex items-center gap-2 transition-opacity duration-150 hover:opacity-80">
 							<!-- App logo -->
 							<template v-if="lightLogo">
 								<NuxtImg :src="lightLogo" :alt="logoAlt" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" fetchpriority="high" :class="cn('size-11 sm:size-9 shrink-0 object-contain', hasDarkLogo && 'dark:hidden', props.logoClass)" />
@@ -75,7 +76,7 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 							<span v-if="props.appName" class="hidden sm:inline! text-xl font-semibold tracking-tight text-foreground">
 								{{ props.appName }}
 							</span>
-						</a>
+						</NuxtLinkLocale>
 					</slot>
 				</div>
 

package/src/components/landing/landing-shell/LandingShell.vue

@@ -23,7 +23,8 @@ const hasStructuredSlots = computed(() => {
 </script>
 
 <template>
-	<div :class="cn('relative flex min-h-screen flex-col bg-background text-foreground', props.rootClass)">
+	<!-- Clip the horizontal overflow of decorations (glows, marquees), so the page never scrolls sideways on mobile -->
+	<div :class="cn('relative flex min-h-screen flex-col overflow-x-clip bg-background text-foreground', props.rootClass)">
 		<!-- Background grid -->
 		<BackgroundGrid v-if="props.showBackground" />
 

package/src/components/text-link/TextLink.vue

@@ -1,29 +1,15 @@
 <script setup lang="ts">
-import type { Component } from 'vue';
-
-// Props
-const props = withDefaults(defineProps<{
+// Props (the path is localized by the link, external URLs work too)
+const props = defineProps<{
 	to: string;
 	text: string;
-	linkComponent?: Component | string;
-}>(), {
-	linkComponent: 'a'
-});
+}>();
 
 // Emits
 const emits = defineEmits<{
 	click: [event: MouseEvent];
 }>();
 
-// Get link props based on the type of link component
-const getLinkProps = () => {
-	if (props.linkComponent === 'a') {
-		return { href: props.to };
-	} else {
-		return { to: props.to };
-	}
-};
-
 // Handle click
 const handleClick = (event: MouseEvent) => {
 	emits('click', event);
@@ -31,7 +17,7 @@ const handleClick = (event: MouseEvent) => {
 </script>
 
 <template>
-	<component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-foreground hover:underline" @click="handleClick">
+	<NuxtLinkLocale :to="props.to" class="cursor-pointer font-semibold text-foreground hover:underline" @click="handleClick">
 		{{ props.text }}
-	</component>
+	</NuxtLinkLocale>
 </template>

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": {