@aureuma/svelta 0.1.1 → 0.2.0

package/README.md

@@ -1,9 +1,17 @@
 # svelta
 
-A documentation-first blogging system built with SvelteKit (Svelte 5) + Markdown.
+A markdown publishing system for two first-class experiences in SvelteKit (Svelte 5): docs and blog.
+
+## Naming model
+
+- `experience`: content mode (`docs` or `blog`)
+- `appearance`: UI mode (`system`, `light`, `dark`)
 
 ## Routes
 
+- `/` landing page with the selected initial experience
+- `/docs` docs index (section cards + guided entry)
+- `/docs/[slug]` docs page (sidebar + previous/next navigation)
 - `/blog` blog index (hero + category pills + infinite scroll)
 - `/blog/[slug]` blog post page (sticky author/share rail on desktop, folds into header on mobile)
 - `/feed.xml` RSS 2.0 feed
@@ -11,15 +19,28 @@ A documentation-first blogging system built with SvelteKit (Svelte 5) + Markdown
 ## Content
 
 Markdown posts live in `src/content/blog/*.md` (YAML frontmatter required).
+Markdown docs pages live in `src/content/docs/*.md` (YAML frontmatter required).
 
 Static assets (covers/avatars) live in `static/blog/*`.
 
+## Initial experience
+
+Set `PUBLIC_SVELTA_EXPERIENCE=docs` or `PUBLIC_SVELTA_EXPERIENCE=blog`.
+
 ## Development
 
 ```sh
 npm run dev
 ```
 
+## Internal Hosting (Pre-deploy)
+
+```sh
+npm run host:internal
+```
+
+This serves the built site on `0.0.0.0:4173` for internal network validation.
+
 ## Typecheck
 
 ```sh

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@aureuma/svelta",
 	"private": false,
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"type": "module",
 	"files": [
 		"packages/core/dist",
@@ -20,10 +20,14 @@
 			"types": "./packages/core/dist/server/index.d.ts",
 			"default": "./packages/core/dist/server/index.js"
 		},
-		"./theme": {
-			"types": "./packages/core/dist/theme/index.d.ts",
-			"svelte": "./packages/core/dist/theme/index.js",
-			"default": "./packages/core/dist/theme/index.js"
+		"./appearance": {
+			"types": "./packages/core/dist/appearance/index.d.ts",
+			"svelte": "./packages/core/dist/appearance/index.js",
+			"default": "./packages/core/dist/appearance/index.js"
+		},
+		"./experience": {
+			"types": "./packages/core/dist/experience/index.d.ts",
+			"default": "./packages/core/dist/experience/index.js"
 		}
 	},
 	"types": "./packages/core/dist/index.d.ts",
@@ -39,6 +43,7 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
+		"host:internal": "npm run build && npm run preview -- --host 0.0.0.0 --port 4173",
 		"prepare": "svelte-kit sync || echo ''",
 		"postinstall": "npm -w @aureuma/svelta-core run build",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -53,6 +58,8 @@
 	"devDependencies": {
 		"@changesets/changelog-github": "^0.5.2",
 		"@changesets/cli": "^2.29.8",
+		"@internationalized/date": "^3.11.0",
+		"@lucide/svelte": "^0.561.0",
 		"@playwright/test": "^1.58.2",
 		"@shikijs/rehype": "^3.22.0",
 		"@sveltejs/adapter-auto": "^7.0.0",
@@ -63,6 +70,8 @@
 		"@tailwindcss/typography": "^0.5.19",
 		"@types/node": "^25.2.2",
 		"autoprefixer": "^10.4.24",
+		"bits-ui": "^2.16.2",
+		"clsx": "^2.1.1",
 		"mdsvex": "^0.12.6",
 		"postcss": "^8.5.6",
 		"rehype-autolink-headings": "^7.1.0",
@@ -72,14 +81,17 @@
 		"svelte": "^5.49.2",
 		"svelte-check": "^4.3.6",
 		"svelte2tsx": "^0.7.47",
+		"tailwind-merge": "^3.5.0",
+		"tailwind-variants": "^3.2.2",
 		"tailwindcss": "^4.1.18",
+		"tw-animate-css": "^1.4.0",
 		"typescript": "^5.9.3",
 		"vite": "^7.3.1"
 	},
 	"dependencies": {
-		"esm-env": "^1.2.2",
 		"@fontsource/geist-mono": "^5.2.7",
 		"@fontsource/inter": "^5.2.8",
+		"esm-env": "^1.2.2",
 		"gray-matter": "^4.0.3",
 		"marked": "^12.0.2",
 		"reading-time": "^1.5.0",

package/packages/core/dist/appearance/AppearanceSwitcher.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { AppearanceController, AppearanceMode } from './store';
+
+	export let controller: AppearanceController;
+
+	const options: { id: AppearanceMode; label: string }[] = [
+		{ id: 'system', label: 'System' },
+		{ id: 'light', label: 'Light' },
+		{ id: 'dark', label: 'Dark' }
+	];
+
+	// Store auto-subscriptions only work on identifiers, so alias it.
+	const appearanceMode = controller.appearanceMode;
+	const appearancePalette = controller.appearancePalette;
+	$: currentMode = $appearanceMode;
+	$: currentPalette = $appearancePalette;
+</script>
+
+<div class="flex flex-col gap-3">
+	<div class="flex items-center gap-2">
+		<span class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">Appearance</span>
+		<div class="inline-flex rounded-full border border-border-soft/10 bg-background-soft p-1">
+			{#each options as opt (opt.id)}
+				<button
+					type="button"
+					class="rounded-full px-3 py-1 text-xs font-mono uppercase tracking-[0.6px] transition
+						hover:bg-background-main/60
+						{(currentMode === opt.id && 'bg-background-main shadow-sm') || 'text-text-sub'}"
+					onclick={() => controller.setAppearanceMode(opt.id)}
+					aria-pressed={currentMode === opt.id}
+				>
+					{opt.label}
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	<div class="flex items-center gap-2">
+		<span class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">Palette</span>
+		<div class="flex flex-wrap gap-1.5">
+			{#each controller.palettes as palette (palette.id)}
+				<button
+					type="button"
+					class="inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] font-mono uppercase tracking-[0.6px] transition
+						{currentPalette === palette.id
+							? 'border-border-soft/20 bg-background-main text-text-main'
+							: 'border-border-soft/10 bg-background-soft text-text-sub hover:bg-background-main/60'}"
+					onclick={() => controller.setAppearancePalette(palette.id)}
+					aria-pressed={currentPalette === palette.id}
+					aria-label={`Use ${palette.label} palette`}
+				>
+					<span>{palette.element}</span>
+					<span>{palette.label}</span>
+				</button>
+			{/each}
+		</div>
+	</div>
+</div>

package/packages/core/dist/appearance/AppearanceSwitcher.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { AppearanceController } from './store';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AppearanceSwitcher: $$__sveltets_2_IsomorphicComponent<{
+    controller: AppearanceController;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AppearanceSwitcher = InstanceType<typeof AppearanceSwitcher>;
+export default AppearanceSwitcher;

package/packages/core/dist/appearance/index.d.ts

@@ -0,0 +1,3 @@
+export { createAppearanceController, type AppearanceController, type AppearanceMode } from './store';
+export { default as AppearanceSwitcher } from './AppearanceSwitcher.svelte';
+export { APPEARANCE_PALETTES, DEFAULT_APPEARANCE_PALETTE, isAppearancePalette, type AppearancePalette, type AppearancePaletteId } from './palettes';

package/packages/core/dist/appearance/index.js

@@ -0,0 +1,3 @@
+export { createAppearanceController } from './store';
+export { default as AppearanceSwitcher } from './AppearanceSwitcher.svelte';
+export { APPEARANCE_PALETTES, DEFAULT_APPEARANCE_PALETTE, isAppearancePalette } from './palettes';

package/packages/core/dist/appearance/palettes.d.ts

@@ -0,0 +1,10 @@
+export type AppearancePaletteId = 'argon' | 'copper' | 'cobalt' | 'selenium' | 'neon';
+export type AppearancePalette = {
+    id: AppearancePaletteId;
+    label: string;
+    element: string;
+    note: string;
+};
+export declare const APPEARANCE_PALETTES: readonly AppearancePalette[];
+export declare const DEFAULT_APPEARANCE_PALETTE: AppearancePaletteId;
+export declare function isAppearancePalette(value: string | null | undefined): value is AppearancePaletteId;

package/packages/core/dist/appearance/palettes.js

@@ -0,0 +1,36 @@
+export const APPEARANCE_PALETTES = [
+    {
+        id: 'argon',
+        label: 'Argon',
+        element: 'Ar',
+        note: 'Neutral blue-gray with calm emerald accents'
+    },
+    {
+        id: 'copper',
+        label: 'Copper',
+        element: 'Cu',
+        note: 'Warm metal palette with amber highlights'
+    },
+    {
+        id: 'cobalt',
+        label: 'Cobalt',
+        element: 'Co',
+        note: 'Deep technical blues with cool contrast'
+    },
+    {
+        id: 'selenium',
+        label: 'Selenium',
+        element: 'Se',
+        note: 'Editorial crimson spectrum with dark ink'
+    },
+    {
+        id: 'neon',
+        label: 'Neon',
+        element: 'Ne',
+        note: 'High-energy lime/cyan futuristic signal'
+    }
+];
+export const DEFAULT_APPEARANCE_PALETTE = 'argon';
+export function isAppearancePalette(value) {
+    return APPEARANCE_PALETTES.some((palette) => palette.id === value);
+}

package/packages/core/dist/appearance/store.d.ts

@@ -0,0 +1,20 @@
+import { type Writable } from 'svelte/store';
+import { type AppearancePalette, type AppearancePaletteId } from './palettes';
+export type AppearanceMode = 'system' | 'light' | 'dark';
+export type AppearanceController = {
+    storageKey: string;
+    paletteStorageKey: string;
+    palettes: readonly AppearancePalette[];
+    appearanceMode: Writable<AppearanceMode>;
+    appearancePalette: Writable<AppearancePaletteId>;
+    initAppearance: () => void | (() => void);
+    setAppearanceMode: (mode: AppearanceMode) => void;
+    setAppearancePalette: (palette: AppearancePaletteId) => void;
+};
+export declare function createAppearanceController(opts?: {
+    storageKey?: string;
+    paletteStorageKey?: string;
+    defaultMode?: AppearanceMode;
+    defaultPalette?: AppearancePaletteId;
+    palettes?: readonly AppearancePalette[];
+}): AppearanceController;

package/packages/core/dist/appearance/store.js

@@ -0,0 +1,87 @@
+import { BROWSER } from 'esm-env';
+import { writable } from 'svelte/store';
+import { APPEARANCE_PALETTES, DEFAULT_APPEARANCE_PALETTE, isAppearancePalette } from './palettes';
+function resolve(mode) {
+    if (mode === 'light' || mode === 'dark')
+        return mode;
+    const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false;
+    return prefersDark ? 'dark' : 'light';
+}
+function apply(mode) {
+    const resolved = resolve(mode);
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(resolved);
+    document.documentElement.dataset.appearance = mode;
+}
+function applyPalette(palette) {
+    document.documentElement.dataset.palette = palette;
+}
+export function createAppearanceController(opts) {
+    const storageKey = opts?.storageKey ?? 'svelta-appearance';
+    const paletteStorageKey = opts?.paletteStorageKey ?? 'svelta-appearance-palette';
+    const defaultMode = opts?.defaultMode ?? 'system';
+    const palettes = opts?.palettes ?? APPEARANCE_PALETTES;
+    const defaultPalette = opts?.defaultPalette ?? DEFAULT_APPEARANCE_PALETTE;
+    const appearanceMode = writable(defaultMode);
+    const appearancePalette = writable(defaultPalette);
+    function readStored() {
+        const v = localStorage.getItem(storageKey);
+        if (v === 'light' || v === 'dark' || v === 'system')
+            return v;
+        return defaultMode;
+    }
+    function readStoredPalette() {
+        const stored = localStorage.getItem(paletteStorageKey);
+        if (isAppearancePalette(stored) && palettes.some((palette) => palette.id === stored))
+            return stored;
+        if (palettes.some((palette) => palette.id === defaultPalette))
+            return defaultPalette;
+        return palettes[0]?.id ?? DEFAULT_APPEARANCE_PALETTE;
+    }
+    function initAppearance() {
+        if (!BROWSER)
+            return;
+        const mode = readStored();
+        const palette = readStoredPalette();
+        appearanceMode.set(mode);
+        appearancePalette.set(palette);
+        apply(mode);
+        applyPalette(palette);
+        const mq = window.matchMedia?.('(prefers-color-scheme: dark)');
+        const onChange = () => {
+            let current = mode;
+            const unsub = appearanceMode.subscribe((v) => (current = v));
+            unsub();
+            if (current === 'system')
+                apply('system');
+        };
+        mq?.addEventListener?.('change', onChange);
+        return () => mq?.removeEventListener?.('change', onChange);
+    }
+    function setAppearanceMode(mode) {
+        appearanceMode.set(mode);
+        if (!BROWSER)
+            return;
+        localStorage.setItem(storageKey, mode);
+        apply(mode);
+    }
+    function setAppearancePalette(palette) {
+        if (!palettes.some((item) => item.id === palette))
+            return;
+        appearancePalette.set(palette);
+        if (!BROWSER)
+            return;
+        localStorage.setItem(paletteStorageKey, palette);
+        applyPalette(palette);
+    }
+    return {
+        storageKey,
+        paletteStorageKey,
+        palettes,
+        appearanceMode,
+        appearancePalette,
+        initAppearance,
+        setAppearanceMode,
+        setAppearancePalette
+    };
+}

package/packages/core/dist/components/blog/BackLink.svelte

@@ -5,19 +5,22 @@
 
 <a
 	href={href}
-	class="inline-flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px] text-text-sub transition hover:text-text-main"
+	class="group inline-flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px] text-text-muted transition-colors hover:text-text-main"
 >
 	<svg
-		class="size-4"
+		class="size-4 transition-colors"
 		viewBox="0 0 24 24"
 		fill="none"
 		stroke="currentColor"
-		stroke-width="2"
+		stroke-width="1.7"
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		aria-hidden="true"
 	>
-		<path d="M15 18l-6-6 6-6" />
+		<path
+			class="fill-transparent transition-[fill,stroke] duration-200 group-hover:fill-current"
+			d="M20 11H7.83l4.58-4.59L11 5l-7 7 7 7 1.41-1.41L7.83 13H20v-2Z"
+		/>
 	</svg>
 	<span>{label}</span>
 </a>

package/packages/core/dist/components/blog/BlogCard.svelte

@@ -4,34 +4,47 @@
 
 	export let post: BlogPost;
 	export let variant: 'default' | 'suggestion' = 'default';
-	$: thumbHeight = variant === 'suggestion' ? 'h-[190px]' : 'h-[280px]';
+	$: thumbHeight = variant === 'suggestion' ? 'h-[170px]' : 'h-[236px]';
+	$: primaryTag = post.tags[0] ?? post.category.label;
+	$: showAuthor = variant === 'default';
 </script>
 
 <a href={`/blog/${post.slug}`} class="group block" data-testid="blog-card">
-	<div class="relative overflow-hidden rounded-2xl border border-border-soft/10 bg-background-soft {thumbHeight}">
+	<div class="relative overflow-hidden rounded-2xl {thumbHeight}">
 		<img
 			src={post.cover}
 			alt={post.title}
 			class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
 			loading="lazy"
 		/>
+
+		<div
+			class="pointer-events-none absolute inset-x-0 bottom-0 h-[68%] bg-gradient-to-t from-black/58 via-black/22 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+		></div>
 	</div>
 
 	<div class="mt-4">
-		<p class="text-xs font-mono uppercase tracking-[0.6px] text-brand">{post.category.label}</p>
+		<p class="text-[10px] font-mono uppercase tracking-[0.7px] text-brand">{primaryTag}</p>
 		<h3
-			class="mt-1 text-xl font-medium leading-[30px] tracking-tight underline-offset-[6px] decoration-border-soft/30 group-hover:underline"
+			class="mt-1 text-[19px] font-medium leading-7 tracking-tight underline-offset-[6px] decoration-border-soft/30 group-hover:underline"
 		>
 			{post.title}
 		</h3>
 		<p class="mt-2 text-sm leading-6 text-text-sub">{post.excerpt}</p>
+		<p class="mt-3 text-[11px] font-mono uppercase tracking-[0.65px] text-text-muted">
+			{post.dateShort}
+			<span class="mx-2 text-text-muted/50" aria-hidden="true">|</span>
+			{post.readingTimeShort}
+		</p>
 
-		<div class="mt-4 flex items-center gap-3">
-			<Avatar src={post.author.avatar} alt={post.author.name} size={24} />
-			<div class="leading-tight">
-				<div class="text-sm font-medium tracking-tight text-text-main">{post.author.name}</div>
-				<div class="text-xs text-text-muted">{post.author.title}</div>
+		{#if showAuthor}
+			<div class="mt-4 flex items-center gap-3">
+				<Avatar src={post.author.avatar} alt={post.author.name} size={24} />
+				<div class="leading-tight">
+					<div class="text-sm font-medium tracking-tight text-text-main">{post.author.name}</div>
+					<div class="text-xs text-text-muted">{post.author.title}</div>
+				</div>
 			</div>
-		</div>
+		{/if}
 	</div>
 </a>

package/packages/core/dist/components/blog/BlogHeroCard.svelte

@@ -1,36 +1,52 @@
 <script lang="ts">
 	import type { BlogPost } from '../../types/blog';
+	import Avatar from './Avatar.svelte';
 
 	export let post: BlogPost;
+	$: primaryTag = post.tags[0] ?? post.category.label;
 </script>
 
 <a
 	href={`/blog/${post.slug}`}
 	data-testid="blog-hero"
-	class="group relative my-12 block h-[480px] overflow-hidden rounded-3xl shadow-drop-md"
+	class="group relative my-10 block overflow-hidden rounded-[22px]"
 >
 	<img
 		src={post.cover}
 		alt={post.title}
-		class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
+		class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
 		loading="eager"
 	/>
 
-	<div class="absolute inset-0 bg-gradient-to-t from-black/65 via-black/25 to-black/0"></div>
+	<div
+		class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/72 via-black/28 to-black/0 transition-opacity duration-300 group-hover:opacity-95"
+	></div>
 
-	<div class="relative flex h-full flex-col justify-end p-8">
-		<p class="text-xs font-mono uppercase tracking-[0.6px] text-brand">{post.category.label}</p>
-		<h2
-			class="mt-2 max-w-3xl text-3xl font-semibold leading-tight tracking-[-0.8px] text-white md:text-4xl"
-		>
-			{post.title}
-		</h2>
-		<p class="mt-3 max-w-2xl text-base leading-6 text-white/80">{post.excerpt}</p>
+	<div class="relative aspect-[16/9] min-h-[320px] w-full md:min-h-[420px]">
+		<div class="relative flex h-full flex-col justify-end p-6 md:p-8">
+			<p class="text-xs font-mono uppercase tracking-[0.6px] text-brand">{primaryTag}</p>
+			<h2
+				class="mt-2 max-w-3xl text-3xl font-semibold leading-tight tracking-[-0.8px] text-white md:text-4xl"
+			>
+				{post.title}
+			</h2>
+			<p class="mt-3 max-w-2xl text-sm leading-6 text-white/82 md:text-base">{post.excerpt}</p>
 
-		<div class="mt-6 flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px] text-white/70">
-			<span>{post.dateShort}</span>
-			<span class="text-white/35" aria-hidden="true">•</span>
-			<span>{post.readingTimeShort}</span>
+			<div
+				class="mt-6 flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px] text-white/70"
+			>
+				<span>{post.dateShort}</span>
+				<span class="text-white/35" aria-hidden="true">•</span>
+				<span>{post.readingTimeShort}</span>
+			</div>
+
+			<div class="mt-4 flex items-center gap-3">
+				<Avatar src={post.author.avatar} alt={post.author.name} size={26} />
+				<div class="leading-tight">
+					<div class="text-sm font-medium tracking-tight text-white">{post.author.name}</div>
+					<div class="text-xs text-white/70">{post.author.title}</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </a>

package/packages/core/dist/components/blog/Container.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	export let size: '4xl' | '5xl' = '5xl';
-	$: max = size === '4xl' ? 'max-w-4xl' : 'max-w-5xl';
+	export let size: '4xl' | '5xl' | '6xl' = '5xl';
+	$: max =
+		size === '4xl' ? 'max-w-4xl' : size === '6xl' ? 'max-w-6xl' : 'max-w-5xl';
 </script>
 
 <div class="mx-auto w-full {max} px-6">

package/packages/core/dist/components/blog/Container.svelte.d.ts

@@ -17,7 +17,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
     children?: any;
 } : {});
 declare const Container: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    size?: "4xl" | "5xl";
+    size?: "4xl" | "5xl" | "6xl";
 }, {
     default: {};
 }>, {

package/packages/core/dist/components/blog/MorePosts.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <section class="mt-16" data-testid="blog-more-posts">
-	<h2 class="text-lg font-medium tracking-tight text-text-main">More blog posts to read</h2>
+	<h2 class="text-lg font-medium tracking-tight text-text-main">More posts to read</h2>
 	<div class="mt-8 grid grid-cols-1 gap-x-5 gap-y-12 md:grid-cols-2">
 		{#each posts as post (post.slug)}
 			<BlogCard post={post} variant="suggestion" />