@ewanc26/ui 0.1.0

package/src/lib/components/ui/InternalCard.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		href?: string;
+		target?: string;
+		rel?: string;
+		onclick?: () => void;
+		class?: string;
+		ariaLabel?: string;
+		children?: Snippet;
+	}
+
+	let {
+		href,
+		target = '_blank',
+		rel = 'noopener noreferrer',
+		onclick,
+		class: customClass = '',
+		ariaLabel,
+		children
+	}: Props = $props();
+
+	const baseClasses =
+		'flex items-start gap-3 rounded-lg bg-canvas-200 p-4 transition-colors hover:bg-canvas-300 dark:bg-canvas-800 dark:hover:bg-canvas-700 self-start';
+	let combinedClasses = $derived(`${baseClasses} ${customClass}`);
+</script>
+
+{#if href}
+	<a {href} {target} {rel} class={combinedClasses} aria-label={ariaLabel}>
+		{#if children}{@render children()}{/if}
+	</a>
+{:else if onclick}
+	<button type="button" {onclick} class={combinedClasses} aria-label={ariaLabel}>
+		{#if children}{@render children()}{/if}
+	</button>
+{:else}
+	<div class={combinedClasses} role={ariaLabel ? 'region' : undefined} aria-label={ariaLabel}>
+		{#if children}{@render children()}{/if}
+	</div>
+{/if}

package/src/lib/components/ui/Pagination.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+
+	interface Props {
+		currentPage: number;
+		totalPages: number;
+		totalItems: number;
+		itemsPerPage: number;
+		onPageChange: (page: number) => void;
+	}
+
+	let { currentPage, totalPages, totalItems, itemsPerPage, onPageChange }: Props = $props();
+
+	function getPageNumbers(current: number, total: number): (number | string)[] {
+		if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+		const pages: (number | string)[] = [1];
+		if (current > 3) pages.push('...');
+		const start = Math.max(2, current - 1);
+		const end = Math.min(total - 1, current + 1);
+		for (let i = start; i <= end; i++) pages.push(i);
+		if (current < total - 2) pages.push('...');
+		if (total > 1) pages.push(total);
+		return pages;
+	}
+
+	const pageNumbers = $derived(getPageNumbers(currentPage, totalPages));
+	const startItem = $derived((currentPage - 1) * itemsPerPage + 1);
+	const endItem = $derived(Math.min(currentPage * itemsPerPage, totalItems));
+</script>
+
+{#if totalPages > 1}
+	<nav class="mt-12" aria-label="Pagination navigation">
+		<div class="flex items-center justify-center gap-2" role="navigation">
+			<button
+				onclick={() => currentPage > 1 && onPageChange(currentPage - 1)}
+				disabled={currentPage === 1}
+				class="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-canvas-300 bg-canvas-100 text-ink-700 transition-colors hover:bg-canvas-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-canvas-700 dark:bg-canvas-900 dark:text-ink-200 dark:hover:bg-canvas-800"
+				aria-label="Go to previous page"
+			>
+				<ChevronLeft class="h-5 w-5" aria-hidden="true" />
+			</button>
+
+			{#each pageNumbers as page}
+				{#if page === '...'}
+					<span class="px-2 text-ink-500 dark:text-ink-400" aria-hidden="true">...</span>
+				{:else}
+					<button
+						onclick={() => onPageChange(page as number)}
+						class="flex h-10 min-w-[2.5rem] items-center justify-center rounded-lg border-2 px-3 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 {currentPage === page
+							? 'border-primary-500 bg-primary-500 text-white dark:border-primary-400 dark:bg-primary-400'
+							: 'border-canvas-300 bg-canvas-100 text-ink-700 hover:bg-canvas-200 dark:border-canvas-700 dark:bg-canvas-900 dark:text-ink-200 dark:hover:bg-canvas-800'}"
+						aria-label="Go to page {page}"
+						aria-current={currentPage === page ? 'page' : undefined}
+					>
+						{page}
+					</button>
+				{/if}
+			{/each}
+
+			<button
+				onclick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
+				disabled={currentPage === totalPages}
+				class="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-canvas-300 bg-canvas-100 text-ink-700 transition-colors hover:bg-canvas-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-canvas-700 dark:bg-canvas-900 dark:text-ink-200 dark:hover:bg-canvas-800"
+				aria-label="Go to next page"
+			>
+				<ChevronRight class="h-5 w-5" aria-hidden="true" />
+			</button>
+		</div>
+		<p class="mt-4 text-center text-sm text-ink-600 dark:text-ink-300" role="status" aria-live="polite" aria-atomic="true">
+			Page {currentPage} of {totalPages} &middot; Showing {startItem}–{endItem} of {totalItems}
+			{totalItems === 1 ? 'item' : 'items'}
+		</p>
+	</nav>
+{/if}

package/src/lib/components/ui/PostsGroupedView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { BlogPost } from '@ewanc26/atproto';
+	import BlogPostCard from './BlogPostCard.svelte';
+	import { getUserLocale } from '../../utils/locale.js';
+	import { groupPostsByDate, getSortedMonths, getSortedYears } from '../../helper/posts.js';
+
+	interface Props { posts: BlogPost[]; locale?: string; filterYear?: string | null; }
+	let { posts, locale, filterYear }: Props = $props();
+	let userLocale = $derived(locale || getUserLocale());
+	const groupedPosts = $derived(groupPostsByDate(posts, userLocale));
+	const sortedYears = $derived(
+		filterYear && filterYear !== 'all'
+			? [parseInt(filterYear)].filter((year) => groupedPosts.has(year))
+			: getSortedYears(groupedPosts)
+	);
+</script>
+
+<div class="space-y-12">
+	{#each sortedYears as year}
+		{@const yearGroup = groupedPosts.get(year)}
+		{#if yearGroup}
+			{@const sortedMonths = getSortedMonths(yearGroup)}
+			<section>
+				<h2 class="mb-6 text-3xl font-bold text-ink-900 dark:text-ink-50">{year}</h2>
+				<div class="space-y-8">
+					{#each sortedMonths as [_, monthData]}
+						<div>
+							<h3 class="mb-4 text-xl font-semibold text-ink-800 dark:text-ink-100">{monthData.monthName}</h3>
+							<div class="space-y-3">
+								{#each monthData.posts as post}
+									<BlogPostCard {post} locale={userLocale} />
+								{/each}
+							</div>
+						</div>
+					{/each}
+				</div>
+			</section>
+		{/if}
+	{/each}
+</div>

package/src/lib/components/ui/SearchBar.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Search } from '@lucide/svelte';
+	interface Props { value: string; placeholder?: string; resultCount?: number; }
+	let { value = $bindable(), placeholder = 'Search...', resultCount }: Props = $props();
+</script>
+
+<div role="search">
+	<label for="search-input" class="sr-only">Search</label>
+	<div class="relative">
+		<Search class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-ink-500 dark:text-ink-400" aria-hidden="true" />
+		<input
+			id="search-input"
+			type="search"
+			{placeholder}
+			bind:value
+			class="w-full rounded-lg border-2 border-canvas-300 bg-canvas-100 py-3 pr-4 pl-11 text-ink-900 placeholder-ink-500 transition-colors focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none dark:border-canvas-700 dark:bg-canvas-900 dark:text-ink-50 dark:placeholder-ink-400 dark:focus:border-primary-400"
+			aria-label="Search"
+			autocomplete="off"
+		/>
+	</div>
+	{#if value && resultCount !== undefined}
+		<p class="mt-2 text-sm text-ink-600 dark:text-ink-300" role="status" aria-live="polite">
+			Found {resultCount} {resultCount === 1 ? 'result' : 'results'}
+		</p>
+	{/if}
+</div>

package/src/lib/components/ui/Tabs.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	interface Tab { id: string; label: string; }
+	interface Props { tabs: Tab[]; activeTab: string; onTabChange: (tabId: string) => void; }
+	let { tabs, activeTab, onTabChange }: Props = $props();
+</script>
+
+<div class="mb-8" role="tablist" aria-label="Content tabs">
+	<div class="flex flex-wrap gap-2">
+		{#each tabs as tab}
+			<button
+				onclick={() => onTabChange(tab.id)}
+				role="tab"
+				aria-selected={activeTab === tab.id}
+				aria-controls="{tab.id}-panel"
+				id="{tab.id}-tab"
+				tabindex={activeTab === tab.id ? 0 : -1}
+				class="rounded-full px-4 py-2 text-sm font-medium transition-all focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 {activeTab === tab.id
+					? 'bg-primary-500 text-white shadow-md dark:bg-primary-400'
+					: 'bg-canvas-200 text-ink-700 hover:bg-canvas-300 dark:bg-canvas-800 dark:text-ink-200 dark:hover:bg-canvas-700'}"
+			>
+				{tab.label}
+			</button>
+		{/each}
+	</div>
+</div>

package/src/lib/components/ui/index.ts

@@ -0,0 +1,10 @@
+export { default as Card } from './Card.svelte';
+export { default as InternalCard } from './InternalCard.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as SearchBar } from './SearchBar.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as PostsGroupedView } from './PostsGroupedView.svelte';
+export { default as DocumentCard } from './DocumentCard.svelte';
+/** @deprecated Use DocumentCard instead */
+export { default as BlogPostCard } from './BlogPostCard.svelte';

package/src/lib/config/themes.config.ts

@@ -0,0 +1,130 @@
+/**
+ * Central theme configuration
+ * Add new themes here and they'll automatically appear in the dropdown and type system
+ */
+
+export interface ThemeDefinition {
+	value: string;
+	label: string;
+	description: string;
+	color: string;
+	category: 'neutral' | 'warm' | 'cool' | 'vibrant';
+}
+
+export const THEMES: readonly ThemeDefinition[] = [
+	// Neutral themes
+	{
+		value: 'sage',
+		label: 'Sage',
+		description: 'Calm green-blue',
+		color: 'oklch(77.77% 0.182 127.42)',
+		category: 'neutral'
+	},
+	{
+		value: 'monochrome',
+		label: 'Monochrome',
+		description: 'Pure greyscale',
+		color: 'oklch(78% 0 0)',
+		category: 'neutral'
+	},
+	{
+		value: 'slate',
+		label: 'Slate',
+		description: 'Blue-grey',
+		color: 'oklch(78.5% 0.095 230)',
+		category: 'neutral'
+	},
+	// Warm themes
+	{
+		value: 'ruby',
+		label: 'Ruby',
+		description: 'Bold red',
+		color: 'oklch(81.5% 0.228 10)',
+		category: 'warm'
+	},
+	{
+		value: 'coral',
+		label: 'Coral',
+		description: 'Orange-pink',
+		color: 'oklch(81.8% 0.212 20)',
+		category: 'warm'
+	},
+	{
+		value: 'sunset',
+		label: 'Sunset',
+		description: 'Warm orange',
+		color: 'oklch(80.5% 0.208 45)',
+		category: 'warm'
+	},
+	{
+		value: 'amber',
+		label: 'Amber',
+		description: 'Bright yellow',
+		color: 'oklch(82.8% 0.195 85)',
+		category: 'warm'
+	},
+	// Cool themes
+	{
+		value: 'forest',
+		label: 'Forest',
+		description: 'Natural green',
+		color: 'oklch(79.5% 0.195 145)',
+		category: 'cool'
+	},
+	{
+		value: 'teal',
+		label: 'Teal',
+		description: 'Blue-green',
+		color: 'oklch(79% 0.205 195)',
+		category: 'cool'
+	},
+	{
+		value: 'ocean',
+		label: 'Ocean',
+		description: 'Deep blue',
+		color: 'oklch(78.2% 0.188 240)',
+		category: 'cool'
+	},
+	// Vibrant themes
+	{
+		value: 'lavender',
+		label: 'Lavender',
+		description: 'Soft purple',
+		color: 'oklch(82% 0.215 295)',
+		category: 'vibrant'
+	},
+	{
+		value: 'rose',
+		label: 'Rose',
+		description: 'Pink-red',
+		color: 'oklch(83.5% 0.230 350)',
+		category: 'vibrant'
+	}
+] as const;
+
+export type ColorTheme = (typeof THEMES)[number]['value'];
+export const DEFAULT_THEME: ColorTheme = 'slate';
+
+export const CATEGORY_LABELS = {
+	neutral: 'Neutral',
+	warm: 'Warm',
+	cool: 'Cool',
+	vibrant: 'Vibrant'
+} as const;
+
+export const getThemesByCategory = () => {
+	const grouped: Record<ThemeDefinition['category'], ThemeDefinition[]> = {
+		neutral: [],
+		warm: [],
+		cool: [],
+		vibrant: []
+	};
+	THEMES.forEach((theme) => {
+		grouped[theme.category].push(theme);
+	});
+	return grouped;
+};
+
+export const getTheme = (value: string): ThemeDefinition | undefined => {
+	return THEMES.find((theme) => theme.value === value);
+};

package/src/lib/helper/badges.ts

@@ -0,0 +1,44 @@
+import type { BlogPost } from '@ewanc26/atproto';
+
+export interface PostBadge {
+	text: string;
+	color: 'mint' | 'sage' | 'jade' | 'ink';
+	variant: 'soft' | 'solid';
+}
+
+export function getPostBadges(post: BlogPost): PostBadge[] {
+	const badges: PostBadge[] = [];
+	badges.push({ text: 'Standard.site', color: 'jade', variant: 'solid' });
+	if (post.publicationName) {
+		badges.push({ text: post.publicationName, color: 'jade', variant: 'soft' });
+	}
+	return badges;
+}
+
+export function getBadgeClasses(badge: PostBadge): string {
+	const baseStyle =
+		badge.variant === 'soft'
+			? 'px-2 py-0.5 text-xs font-medium rounded'
+			: 'px-2 py-0.5 text-xs font-semibold uppercase rounded';
+
+	const colorClasses = {
+		mint:
+			badge.variant === 'soft'
+				? 'bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-200'
+				: 'bg-secondary-500 text-white dark:bg-secondary-600',
+		sage:
+			badge.variant === 'soft'
+				? 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200'
+				: 'bg-primary-500 text-white dark:bg-primary-600',
+		jade:
+			badge.variant === 'soft'
+				? 'bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200'
+				: 'bg-accent-500 text-white dark:bg-accent-600',
+		ink:
+			badge.variant === 'soft'
+				? 'bg-ink-100 text-ink-800 dark:bg-ink-800 dark:text-ink-100'
+				: 'bg-ink-700 text-white dark:bg-ink-300 dark:text-ink-900'
+	};
+
+	return `${baseStyle} ${colorClasses[badge.color]}`;
+}

package/src/lib/helper/posts.ts

@@ -0,0 +1,63 @@
+import type { BlogPost } from '@ewanc26/atproto';
+import { getUserLocale } from '../utils/locale.js';
+
+export interface MonthData {
+	monthName: string;
+	posts: BlogPost[];
+}
+
+export type GroupedPosts = Map<number, Map<number, MonthData>>;
+
+export function filterPosts(posts: BlogPost[], query: string): BlogPost[] {
+	if (!query.trim()) return posts;
+	const lowerQuery = query.toLowerCase();
+	return posts.filter((post) => {
+		const titleMatch = post.title.toLowerCase().includes(lowerQuery);
+		const descMatch = post.description?.toLowerCase().includes(lowerQuery);
+		const platformMatch = post.platform.toLowerCase().includes(lowerQuery);
+		const pubMatch = post.publicationName?.toLowerCase().includes(lowerQuery);
+		const tagsMatch = post.tags?.some((tag: string) => tag.toLowerCase().includes(lowerQuery));
+		return titleMatch || descMatch || platformMatch || pubMatch || tagsMatch;
+	});
+}
+
+export function groupPostsByDate(posts: BlogPost[], locale?: string): GroupedPosts {
+	const userLocale = locale || getUserLocale();
+	const grouped: GroupedPosts = new Map();
+
+	posts.forEach((post) => {
+		const date = new Date(post.createdAt);
+		const year = date.getFullYear();
+		const month = date.getMonth();
+		const monthName = date.toLocaleString(userLocale, { month: 'long' });
+
+		if (!grouped.has(year)) grouped.set(year, new Map());
+		const yearGroup = grouped.get(year)!;
+		if (!yearGroup.has(month)) yearGroup.set(month, { monthName, posts: [] });
+		yearGroup.get(month)!.posts.push(post);
+	});
+
+	grouped.forEach((yearGroup) => {
+		yearGroup.forEach((monthData) => {
+			monthData.posts.sort(
+				(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+			);
+		});
+	});
+
+	return grouped;
+}
+
+export function getSortedMonths(yearGroup: Map<number, MonthData>): [number, MonthData][] {
+	return Array.from(yearGroup.entries()).sort((a, b) => b[0] - a[0]);
+}
+
+export function getSortedYears(groupedPosts: GroupedPosts): number[] {
+	return Array.from(groupedPosts.keys()).sort((a, b) => b - a);
+}
+
+export function getAllTags(items: Array<{ tags?: string[] }>): string[] {
+	const tagsSet = new Set<string>();
+	items.forEach((item) => item.tags?.forEach((tag) => tagsSet.add(tag.toLowerCase())));
+	return Array.from(tagsSet).sort();
+}

package/src/lib/index.ts

@@ -0,0 +1,32 @@
+// ─── Stores ───────────────────────────────────────────────────────────────────
+export { wolfMode, colorThemeDropdownOpen, happyMacStore, colorTheme } from './stores/index.js';
+export type { ColorTheme } from './stores/index.js';
+
+// ─── Config ───────────────────────────────────────────────────────────────────
+export { THEMES, DEFAULT_THEME, CATEGORY_LABELS, getThemesByCategory, getTheme } from './config/themes.config.js';
+export type { ThemeDefinition } from './config/themes.config.js';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+export type { SiteMetadata, NavItem } from './types/index.js';
+
+// ─── Helper ───────────────────────────────────────────────────────────────────
+export { filterPosts, groupPostsByDate, getSortedMonths, getSortedYears, getAllTags } from './helper/posts.js';
+export type { MonthData, GroupedPosts } from './helper/posts.js';
+export { getPostBadges, getBadgeClasses } from './helper/badges.js';
+export type { PostBadge } from './helper/badges.js';
+
+// ─── Layout toggles ───────────────────────────────────────────────────────────
+export { default as ThemeToggle } from './components/layout/ThemeToggle.svelte';
+export { default as WolfToggle } from './components/layout/WolfToggle.svelte';
+
+// ─── Layout main ──────────────────────────────────────────────────────────────
+export { DynamicLinks, ScrollToTop, TangledRepos } from './components/layout/main/index.js';
+
+// ─── Cards ────────────────────────────────────────────────────────────────────
+export { LinkCard, ProfileCard, PostCard, BlueskyPostCard, TangledRepoCard, MusicStatusCard, KibunStatusCard } from './components/layout/main/card/index.js';
+
+// ─── SEO ──────────────────────────────────────────────────────────────────────
+export { MetaTags } from './components/seo/index.js';
+
+// ─── UI primitives ────────────────────────────────────────────────────────────
+export { Card, InternalCard, Dropdown, Pagination, SearchBar, Tabs, PostsGroupedView, DocumentCard, BlogPostCard } from './components/ui/index.js';

package/src/lib/stores/colorTheme.ts

@@ -0,0 +1,44 @@
+import { writable } from 'svelte/store';
+import { DEFAULT_THEME, type ColorTheme } from '../config/themes.config.js';
+
+const browser = typeof window !== 'undefined';
+
+interface ColorThemeState {
+	current: ColorTheme;
+	mounted: boolean;
+}
+
+const STORAGE_KEY = 'color-theme';
+
+function createColorThemeStore() {
+	const { subscribe, set, update } = writable<ColorThemeState>({
+		current: DEFAULT_THEME,
+		mounted: false
+	});
+
+	return {
+		subscribe,
+		init: () => {
+			if (!browser) return;
+			const stored = localStorage.getItem(STORAGE_KEY) as ColorTheme | null;
+			const theme = stored || DEFAULT_THEME;
+			update((state) => ({ ...state, current: theme, mounted: true }));
+			const currentTheme = document.documentElement.getAttribute('data-color-theme');
+			if (currentTheme !== theme) applyTheme(theme);
+		},
+		setTheme: (theme: ColorTheme) => {
+			if (!browser) return;
+			localStorage.setItem(STORAGE_KEY, theme);
+			update((state) => ({ ...state, current: theme }));
+			applyTheme(theme);
+		}
+	};
+}
+
+function applyTheme(theme: ColorTheme) {
+	if (!browser) return;
+	document.documentElement.setAttribute('data-color-theme', theme);
+}
+
+export const colorTheme = createColorThemeStore();
+export type { ColorTheme };

package/src/lib/stores/dropdownState.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const colorThemeDropdownOpen = writable(false);

package/src/lib/stores/happyMac.ts

@@ -0,0 +1,28 @@
+import { writable } from 'svelte/store';
+
+interface HappyMacState {
+	clickCount: number;
+	isTriggered: boolean;
+}
+
+function createHappyMacStore() {
+	const { subscribe, set, update } = writable<HappyMacState>({
+		clickCount: 0,
+		isTriggered: false
+	});
+
+	return {
+		subscribe,
+		incrementClick: () =>
+			update((state) => {
+				const newCount = state.clickCount + 1;
+				if (newCount === 24) {
+					return { clickCount: newCount, isTriggered: true };
+				}
+				return { ...state, clickCount: newCount };
+			}),
+		reset: () => set({ clickCount: 0, isTriggered: false })
+	};
+}
+
+export const happyMacStore = createHappyMacStore();

package/src/lib/stores/index.ts

@@ -0,0 +1,5 @@
+export { wolfMode } from './wolfMode.js';
+export { colorThemeDropdownOpen } from './dropdownState.js';
+export { happyMacStore } from './happyMac.js';
+export { colorTheme } from './colorTheme.js';
+export type { ColorTheme } from './colorTheme.js';