@brumaombra/ui-vintage 0.9.1 → 0.9.3

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/components/busy-indicator/BusyIndicator.vue

@@ -4,11 +4,11 @@ import { busyIndicatorState } from './busy-indicator-state';
 </script>
 
 <template>
-    <!-- Busy overlay -->
-    <Busy
-        :show="busyIndicatorState.show"
-        :label="busyIndicatorState.label"
-        :class="busyIndicatorState.class"
-        :overlay-class="busyIndicatorState.overlayClass"
-    />
+	<!-- Busy overlay -->
+	<Busy
+		:show="busyIndicatorState.show"
+		:label="busyIndicatorState.label"
+		:class="busyIndicatorState.class"
+		:overlay-class="busyIndicatorState.overlayClass"
+	/>
 </template>

package/src/components/busy-indicator/busy-indicator-state.ts

@@ -2,16 +2,16 @@ import { h, reactive, render, type HTMLAttributes } from 'vue';
 import { getUiVintageRuntimeMessage } from '../../lib/i18n';
 
 export interface SetBusyOptions {
-    label?: string;
-    class?: HTMLAttributes['class'];
-    overlayClass?: HTMLAttributes['class'];
+	label?: string;
+	class?: HTMLAttributes['class'];
+	overlayClass?: HTMLAttributes['class'];
 }
 
 interface BusyIndicatorState {
-    show: boolean;
-    label: string;
-    class: HTMLAttributes['class'];
-    overlayClass: HTMLAttributes['class'];
+	show: boolean;
+	label: string;
+	class: HTMLAttributes['class'];
+	overlayClass: HTMLAttributes['class'];
 }
 
 const BUSY_INDICATOR_ROOT_ID = 'ui-vintage-busy-indicator-root';
@@ -20,69 +20,69 @@ let busyIndicatorMountPromise: Promise<void> | null = null;
 
 // Shared busy state
 export const busyIndicatorState: BusyIndicatorState = reactive({
-    show: false,
-    label: getUiVintageRuntimeMessage('uiVintage.common.loading.title', 'Loading...'),
-    class: undefined,
-    overlayClass: undefined
+	show: false,
+	label: getUiVintageRuntimeMessage('uiVintage.common.loading.title', 'Loading...'),
+	class: undefined,
+	overlayClass: undefined
 });
 
 // Mount the busy indicator once on demand
 const ensureBusyIndicatorMounted = () => {
-    // Skip mounting during SSR
-    if (typeof document === 'undefined') {
-        return Promise.resolve();
-    }
+	// Skip mounting during SSR
+	if (typeof document === 'undefined') {
+		return Promise.resolve();
+	}
 
-    // Reuse the existing mount root
-    const existingRoot = document.getElementById(BUSY_INDICATOR_ROOT_ID);
-    if (existingRoot) {
-        return Promise.resolve();
-    }
+	// Reuse the existing mount root
+	const existingRoot = document.getElementById(BUSY_INDICATOR_ROOT_ID);
+	if (existingRoot) {
+		return Promise.resolve();
+	}
 
-    // Reuse the in-flight mount
-    if (busyIndicatorMountPromise) {
-        return busyIndicatorMountPromise;
-    }
+	// Reuse the in-flight mount
+	if (busyIndicatorMountPromise) {
+		return busyIndicatorMountPromise;
+	}
 
-    // Start the lazy mount
-    busyIndicatorMountPromise = (async () => {
-        // Load the component only when needed
-        const { default: BusyIndicator } = await import('./BusyIndicator.vue');
+	// Start the lazy mount
+	busyIndicatorMountPromise = (async () => {
+		// Load the component only when needed
+		const { default: BusyIndicator } = await import('./BusyIndicator.vue');
 
-        // Guard against a concurrent mount
-        if (document.getElementById(BUSY_INDICATOR_ROOT_ID)) {
-            return;
-        }
+		// Guard against a concurrent mount
+		if (document.getElementById(BUSY_INDICATOR_ROOT_ID)) {
+			return;
+		}
 
-        // Create the host element and render the component
-        const container = document.createElement('div');
-        container.id = BUSY_INDICATOR_ROOT_ID;
-        document.body.appendChild(container);
-        render(h(BusyIndicator), container);
-    })().finally(() => {
-        busyIndicatorMountPromise = null;
-    });
+		// Create the host element and render the component
+		const container = document.createElement('div');
+		container.id = BUSY_INDICATOR_ROOT_ID;
+		document.body.appendChild(container);
+		render(h(BusyIndicator), container);
+	})().finally(() => {
+		busyIndicatorMountPromise = null;
+	});
 
-    // Let callers await the mount
-    return busyIndicatorMountPromise;
+	// Let callers await the mount
+	return busyIndicatorMountPromise;
 };
 
 // Toggle the global busy overlay
 export const setBusy = (show: boolean, options: SetBusyOptions = {}) => {
-    // Prepare the overlay before showing it
-    if (show) {
-        busyIndicatorState.label = options.label ?? getUiVintageRuntimeMessage('uiVintage.common.loading.title', 'Loading...');
-        busyIndicatorState.class = options.class;
-        busyIndicatorState.overlayClass = options.overlayClass;
-        void ensureBusyIndicatorMounted();
-    }
+	// Prepare the overlay before showing it
+	if (show) {
+		busyIndicatorState.label = options.label ?? getUiVintageRuntimeMessage('uiVintage.common.loading.title', 'Loading...');
+		busyIndicatorState.class = options.class;
+		busyIndicatorState.overlayClass = options.overlayClass;
+		void ensureBusyIndicatorMounted();
+	}
 
-    // Toggle the overlay visibility
-    busyIndicatorState.show = show;
+	// Toggle the overlay visibility
+	busyIndicatorState.show = show;
 
-    // Reset transient styling after hiding
-    if (!show) {
-        busyIndicatorState.class = undefined;
-        busyIndicatorState.overlayClass = undefined;
-    }
+	// Reset transient styling after hiding
+	if (!show) {
+		busyIndicatorState.class = undefined;
+		busyIndicatorState.overlayClass = undefined;
+	}
 };

package/src/components/card-grid/CardGrid.vue

@@ -7,55 +7,55 @@ import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    items?: T[];
-    busy?: boolean;
-    loadMoreBusy?: boolean;
-    hasMore?: boolean;
-    emptyMessage: string;
-    emptyIcon?: HugeiconsIconDefinition;
+	items?: T[];
+	busy?: boolean;
+	loadMoreBusy?: boolean;
+	hasMore?: boolean;
+	emptyMessage: string;
+	emptyIcon?: HugeiconsIconDefinition;
 }>(), {
-    items: () => [],
-    busy: false,
-    loadMoreBusy: false,
-    hasMore: false,
-    emptyIcon: () => PackageIcon
+	items: () => [],
+	busy: false,
+	loadMoreBusy: false,
+	hasMore: false,
+	emptyIcon: () => PackageIcon
 });
 
 // Emits
 const emits = defineEmits<{
-    'load-more': [];
+	'load-more': [];
 }>();
 
 // Slots
 defineSlots<{
-    card(props: { item: T; key?: PropertyKey }): unknown;
+	card(props: { item: T; key?: PropertyKey }): unknown;
 }>();
 
 // Handle load more
 const handleLoadMore = () => {
-    emits('load-more');
+	emits('load-more');
 };
 </script>
 
 <template>
-    <div>
-        <!-- Busy state for initial loading -->
-        <LoadingStateCard v-if="props.busy" />
-
-        <!-- Empty state -->
-        <EmptyStateCard v-else-if="props.items.length === 0"
-            :description="props.emptyMessage"
-            :icon="props.emptyIcon" />
-
-        <!-- Cards grid -->
-        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 xl:gap-4">
-            <slot name="card" v-for="item in props.items" :item="item" :key="item.id" />
-        </div>
-
-        <!-- Load more button (only under a grid, never under the loading or empty state) -->
-        <div v-if="!props.busy && props.items.length > 0 && (props.hasMore || props.loadMoreBusy)" class="flex justify-center mt-6">
-            <LoadMoreButton :busy="props.loadMoreBusy"
-                @load-more="handleLoadMore" />
-        </div>
-    </div>
+	<div>
+		<!-- Busy state for initial loading -->
+		<LoadingStateCard v-if="props.busy" />
+
+		<!-- Empty state -->
+		<EmptyStateCard v-else-if="props.items.length === 0"
+			:description="props.emptyMessage"
+			:icon="props.emptyIcon" />
+
+		<!-- Cards grid -->
+		<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 xl:gap-4">
+			<slot name="card" v-for="item in props.items" :item="item" :key="item.id" />
+		</div>
+
+		<!-- Load more button (only under a grid, never under the loading or empty state) -->
+		<div v-if="!props.busy && props.items.length > 0 && (props.hasMore || props.loadMoreBusy)" class="flex justify-center mt-6">
+			<LoadMoreButton :busy="props.loadMoreBusy"
+				@load-more="handleLoadMore" />
+		</div>
+	</div>
 </template>

package/src/components/chip/Chip.vue

@@ -9,12 +9,12 @@ import { cn } from '../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<{
-    text: string;
-    color?: ToneColor;
-    removeLabel?: string;
-    class?: HTMLAttributes['class'];
+	text: string;
+	color?: ToneColor;
+	removeLabel?: string;
+	class?: HTMLAttributes['class'];
 }>(), {
-    color: 'gray'
+	color: 'gray'
 });
 
 const { t } = useI18n();
@@ -22,23 +22,23 @@ const resolvedRemoveLabel = computed(() => props.removeLabel || t('uiVintage.but
 
 // Emits
 const emits = defineEmits<{
-    remove: []
+	remove: []
 }>();
 
 // Handle remove button click
 const handleRemove = () => {
-    emits('remove');
+	emits('remove');
 };
 </script>
 
 <template>
-    <div data-slot="chip" :class="cn('inline-flex items-center gap-2 rounded border px-3 py-2 text-sm font-semibold transition-colors duration-150', getSurfaceToneClasses(props.color), props.class)">
-        <!-- Text content -->
-        <span class="leading-none">{{ props.text }}</span>
+	<div data-slot="chip" :class="cn('inline-flex items-center gap-2 rounded border px-3 py-2 text-sm font-semibold transition-colors duration-150', getSurfaceToneClasses(props.color), props.class)">
+		<!-- Text content -->
+		<span class="leading-none">{{ props.text }}</span>
 
-        <!-- Remove button -->
-        <button type="button" :aria-label="resolvedRemoveLabel" class="group/remove inline-flex size-4 cursor-pointer items-center justify-center rounded-sm opacity-70 [transition:opacity_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20 active:scale-75 dark:hover:bg-white/10" @click="handleRemove">
-            <HugeiconsIcon :icon="Cancel01Icon" class="size-3 transition-transform duration-300 ease-spring group-hover/remove:rotate-90" />
-        </button>
-    </div>
+		<!-- Remove button -->
+		<button type="button" :aria-label="resolvedRemoveLabel" class="group/remove inline-flex size-4 cursor-pointer items-center justify-center rounded-sm opacity-70 [transition:opacity_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20 active:scale-75 dark:hover:bg-white/10" @click="handleRemove">
+			<HugeiconsIcon :icon="Cancel01Icon" class="size-3 transition-transform duration-300 ease-spring group-hover/remove:rotate-90" />
+		</button>
+	</div>
 </template>

package/src/components/confirm-dialog/ConfirmDialog.vue

@@ -11,66 +11,66 @@ const pendingAction = ref<'confirm' | 'cancel' | null>(null);
 
 // Run an action while showing a spinner on the button that triggered it
 const runAction = async (action: 'confirm' | 'cancel') => {
-    // Ignore clicks while another action is still running
-    if (pendingAction.value) {
-        return;
-    }
+	// Ignore clicks while another action is still running
+	if (pendingAction.value) {
+		return;
+	}
 
-    pendingAction.value = action;
-    try {
-        await (action === 'confirm' ? confirmActiveDialog() : cancelActiveConfirmDialog());
-    } finally {
-        pendingAction.value = null;
-    }
+	pendingAction.value = action;
+	try {
+		await (action === 'confirm' ? confirmActiveDialog() : cancelActiveConfirmDialog());
+	} finally {
+		pendingAction.value = null;
+	}
 };
 
 // Close the dialog when the shell requests it
 const handleOpenChange = (open: boolean) => {
-    if (!open) {
-        closeConfirmDialog();
-    }
+	if (!open) {
+		closeConfirmDialog();
+	}
 };
 </script>
 
 <template>
-    <!-- Dialog shell -->
-    <AlertDialog :open="confirmDialogState.isOpen" @update:open="handleOpenChange">
-        <!-- Dialog content -->
-        <AlertDialogContent v-if="currentDialog">
-            <div class="px-5 pb-5 pt-5 sm:px-6 sm:pb-4 sm:pt-6">
-                <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
-                    <!-- Dialog icon -->
-                    <div class="flex size-12 shrink-0 self-center items-center justify-center rounded border border-primary/30 bg-primary/10 sm:size-10 sm:self-start">
-                        <HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 animate-uv-pop text-primary [animation-delay:140ms]" />
-                        <HugeiconsIcon v-else :icon="InformationCircleIcon" :stroke-width="1.8" class="size-6 animate-uv-pop text-primary [animation-delay:140ms]" />
-                    </div>
+	<!-- Dialog shell -->
+	<AlertDialog :open="confirmDialogState.isOpen" @update:open="handleOpenChange">
+		<!-- Dialog content -->
+		<AlertDialogContent v-if="currentDialog">
+			<div class="px-5 pb-5 pt-5 sm:px-6 sm:pb-4 sm:pt-6">
+				<div class="flex flex-col gap-4 sm:flex-row sm:items-start">
+					<!-- Dialog icon -->
+					<div class="flex size-12 shrink-0 self-center items-center justify-center rounded border border-primary/30 bg-primary/10 sm:size-10 sm:self-start">
+						<HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 animate-uv-pop text-primary [animation-delay:140ms]" />
+						<HugeiconsIcon v-else :icon="InformationCircleIcon" :stroke-width="1.8" class="size-6 animate-uv-pop text-primary [animation-delay:140ms]" />
+					</div>
 
-                    <!-- Dialog header -->
-                    <AlertDialogHeader class="sm:pt-0">
-                        <AlertDialogTitle>
-                            {{ currentDialog.options.title }}
-                        </AlertDialogTitle>
-                        <AlertDialogDescription>
-                            {{ currentDialog.options.message }}
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                </div>
-            </div>
+					<!-- Dialog header -->
+					<AlertDialogHeader class="sm:pt-0">
+						<AlertDialogTitle>
+							{{ currentDialog.options.title }}
+						</AlertDialogTitle>
+						<AlertDialogDescription>
+							{{ currentDialog.options.message }}
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+				</div>
+			</div>
 
-            <!-- Dialog actions -->
-            <AlertDialogFooter>
-                <!-- Cancel button -->
-                <Button :variant="currentDialog.options.cancelButtonType" :disabled="confirmDialogState.busy && pendingAction !== 'cancel'" :loading="pendingAction === 'cancel'" @click="runAction('cancel')">
-                    <HugeiconsIcon v-if="currentDialog.options.cancelButtonIcon" :icon="currentDialog.options.cancelButtonIcon" class="size-4" />
-                    {{ currentDialog.options.cancelText }}
-                </Button>
+			<!-- Dialog actions -->
+			<AlertDialogFooter>
+				<!-- Cancel button -->
+				<Button :variant="currentDialog.options.cancelButtonType" :disabled="confirmDialogState.busy && pendingAction !== 'cancel'" :loading="pendingAction === 'cancel'" @click="runAction('cancel')">
+					<HugeiconsIcon v-if="currentDialog.options.cancelButtonIcon" :icon="currentDialog.options.cancelButtonIcon" class="size-4" />
+					{{ currentDialog.options.cancelText }}
+				</Button>
 
-                <!-- Confirm button -->
-                <Button :variant="currentDialog.options.confirmButtonType" :disabled="confirmDialogState.busy && pendingAction !== 'confirm'" :loading="pendingAction === 'confirm'" @click="runAction('confirm')">
-                    <HugeiconsIcon v-if="currentDialog.options.confirmButtonIcon" :icon="currentDialog.options.confirmButtonIcon" class="size-4" />
-                    {{ currentDialog.options.confirmText }}
-                </Button>
-            </AlertDialogFooter>
-        </AlertDialogContent>
-    </AlertDialog>
+				<!-- Confirm button -->
+				<Button :variant="currentDialog.options.confirmButtonType" :disabled="confirmDialogState.busy && pendingAction !== 'confirm'" :loading="pendingAction === 'confirm'" @click="runAction('confirm')">
+					<HugeiconsIcon v-if="currentDialog.options.confirmButtonIcon" :icon="currentDialog.options.confirmButtonIcon" class="size-4" />
+					{{ currentDialog.options.confirmText }}
+				</Button>
+			</AlertDialogFooter>
+		</AlertDialogContent>
+	</AlertDialog>
 </template>