@aureuma/svelta 0.0.1 → 0.1.0

package/packages/blogkit/src/lib/server/blog.ts

@@ -1,264 +0,0 @@
-import type { BlogAuthor, BlogCategory, BlogPost, BlogPostFull } from '../types/blog';
-import { DEV } from 'esm-env';
-import matter from 'gray-matter';
-import readingTime from 'reading-time';
-import { z } from 'zod';
-
-const frontmatterSchema = z.object({
-	title: z.string(),
-	date: z.string(),
-	category: z.string(),
-	author: z.string(),
-	cover: z.string(),
-	excerpt: z.string().optional(),
-	summaryAI: z.string().optional(),
-	tags: z.array(z.string()).optional(),
-	featured: z.boolean().optional(),
-	draft: z.boolean().optional()
-});
-
-export type BlogFrontmatter = z.infer<typeof frontmatterSchema>;
-
-export type BlogFrontmatterAdapter = (args: {
-	data: unknown;
-	content: string;
-	slug: string;
-	path: string;
-}) => BlogFrontmatter;
-
-type CompiledModule = {
-	default: BlogPostFull['component'];
-};
-
-export type BlogCreateConfig = {
-	compiledModules: Record<string, () => Promise<CompiledModule>>;
-	rawModules: Record<string, () => Promise<string>>;
-	getAuthor: (id: string) => BlogAuthor;
-	categoryOrder?: string[];
-	// Optional adapter for apps with existing frontmatter schemas.
-	mapFrontmatter?: BlogFrontmatterAdapter;
-};
-
-const DEFAULT_CATEGORY_ORDER = [
-	'all',
-	'ai-trends',
-	'announcements',
-	'for-founders',
-	'engineering',
-	'design',
-	'best-practices'
-];
-
-function slugify(input: string): string {
-	return input
-		.toLowerCase()
-		.trim()
-		.replace(/['"]/g, '')
-		.replace(/[^a-z0-9]+/g, '-')
-		.replace(/^-+|-+$/g, '');
-}
-
-function normalizeCategory(label: string): BlogCategory {
-	const slug = slugify(label);
-	return { label, slug };
-}
-
-function parseISODate(date: string): Date {
-	// Prefer stable UTC parsing for YYYY-MM-DD.
-	if (/^\\d{4}-\\d{2}-\\d{2}$/.test(date)) {
-		const d = new Date(`${date}T00:00:00Z`);
-		if (!Number.isNaN(d.getTime())) return d;
-	}
-	const d = new Date(date);
-	if (Number.isNaN(d.getTime())) throw new Error(`Invalid date: ${date}`);
-	return d;
-}
-
-const fmtLong = new Intl.DateTimeFormat('en-US', {
-	month: 'long',
-	day: 'numeric',
-	year: 'numeric',
-	timeZone: 'UTC'
-});
-const fmtShort = new Intl.DateTimeFormat('en-US', {
-	month: 'short',
-	day: 'numeric',
-	year: 'numeric',
-	timeZone: 'UTC'
-});
-
-function stripForExcerpt(markdown: string): string {
-	return (
-		markdown
-			// remove fenced code blocks
-			.replace(/```[\s\S]*?```/g, '')
-			// remove images
-			.replace(/!\[[^\]]*\]\([^)]*\)/g, '')
-			// remove links but keep text
-			.replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
-			// remove headings markers
-			.replace(/^#{1,6}\s+/gm, '')
-			// remove blockquote markers
-			.replace(/^>\s+/gm, '')
-			// remove emphasis markers
-			.replace(/[*_`]/g, '')
-			// collapse whitespace
-			.replace(/\s+/g, ' ')
-			.trim()
-	);
-}
-
-function excerptFromContent(content: string): string {
-	const text = stripForExcerpt(content);
-	if (!text) return '';
-	return text.length > 180 ? `${text.slice(0, 177).trimEnd()}...` : text;
-}
-
-function minutesToLabels(minutes: number) {
-	const m = Math.max(1, Math.round(minutes));
-	const unit = m === 1 ? 'minute' : 'minutes';
-	return {
-		minutes: m,
-		short: `${m} min read`,
-		long: `${m} ${unit} read`
-	};
-}
-
-export function createBlog(config: BlogCreateConfig) {
-	const categoryOrder = config.categoryOrder ?? DEFAULT_CATEGORY_ORDER;
-
-	let cachedMetaIndex: BlogPost[] | null = null;
-	let cachedFullIndex: BlogPostFull[] | null = null;
-	let cachedSlugToPath: Map<string, string> | null = null;
-
-	function getSlugToPath(): Map<string, string> {
-		if (!DEV && cachedSlugToPath) return cachedSlugToPath;
-
-		const m = new Map<string, string>();
-		const paths = Object.keys(config.rawModules).sort();
-		for (const path of paths) {
-			const file = path.split('/').pop();
-			const slug = file?.replace(/\.md(?:\?.*)?$/, '');
-			if (!slug) continue;
-			m.set(slug, path);
-		}
-
-		if (!DEV) cachedSlugToPath = m;
-		return m;
-	}
-
-	async function buildMetaIndex(): Promise<BlogPost[]> {
-		if (!DEV && cachedMetaIndex) return cachedMetaIndex;
-
-		const posts: BlogPost[] = [];
-		const paths = Object.keys(config.rawModules).sort();
-
-		for (const path of paths) {
-			const file = path.split('/').pop();
-			// Glob keys can include query strings depending on bundler usage; normalize aggressively.
-			const slug = file?.replace(/\.md(?:\?.*)?$/, '');
-			if (!slug) continue;
-
-			const rawFn = config.rawModules[path];
-			if (!rawFn) continue;
-
-			const raw = await rawFn();
-
-			const { data, content } = matter(raw);
-			const metadata: BlogFrontmatter = config.mapFrontmatter
-				? config.mapFrontmatter({ data, content, slug, path })
-				: frontmatterSchema.parse(data);
-			if (metadata.draft) continue;
-
-			const dateObj = parseISODate(metadata.date);
-			const rt = minutesToLabels(readingTime(content).minutes);
-			const category = normalizeCategory(metadata.category);
-			const excerpt = metadata.excerpt?.trim() || excerptFromContent(content);
-
-			posts.push({
-				slug,
-				title: metadata.title.trim(),
-				excerpt,
-				category,
-				tags: metadata.tags ?? [],
-				author: config.getAuthor(metadata.author),
-				date: metadata.date,
-				dateLong: fmtLong.format(dateObj),
-				dateShort: fmtShort.format(dateObj),
-				readingMinutes: rt.minutes,
-				readingTimeShort: rt.short,
-				readingTimeLong: rt.long,
-				cover: metadata.cover,
-				summaryAI: metadata.summaryAI,
-				featured: Boolean(metadata.featured)
-			});
-		}
-
-		posts.sort((a, b) => parseISODate(b.date).getTime() - parseISODate(a.date).getTime());
-
-		if (!DEV) cachedMetaIndex = posts;
-		return posts;
-	}
-
-	async function getAllPosts(): Promise<BlogPost[]> {
-		return buildMetaIndex();
-	}
-
-	async function getAllPostsFull(): Promise<BlogPostFull[]> {
-		if (!DEV && cachedFullIndex) return cachedFullIndex;
-
-		const meta = await buildMetaIndex();
-		const slugToPath = getSlugToPath();
-
-		const full: BlogPostFull[] = [];
-		for (const post of meta) {
-			const path = slugToPath.get(post.slug);
-			const compiledFn = path ? config.compiledModules[path] : undefined;
-			if (!compiledFn) continue;
-			const compiled = await compiledFn();
-			full.push({ ...post, component: compiled.default });
-		}
-
-		if (!DEV) cachedFullIndex = full;
-		return full;
-	}
-
-	async function getPostBySlug(slug: string): Promise<BlogPostFull | null> {
-		const meta = await buildMetaIndex();
-		const post = meta.find((p) => p.slug === slug) ?? null;
-		if (!post) return null;
-
-		const path = getSlugToPath().get(slug);
-		const compiledFn = path ? config.compiledModules[path] : undefined;
-		if (!compiledFn) return null;
-
-		const compiled = await compiledFn();
-		return { ...post, component: compiled.default };
-	}
-
-	async function getCategories(): Promise<BlogCategory[]> {
-		const posts = await getAllPosts();
-		const map = new Map<string, string>();
-
-		for (const p of posts) map.set(p.category.slug, p.category.label);
-
-		return Array.from(map.entries())
-			.map(([slug, label]) => ({ slug, label }))
-			.sort((a, b) => {
-				const ai = categoryOrder.indexOf(a.slug);
-				const bi = categoryOrder.indexOf(b.slug);
-				if (ai === -1 && bi === -1) return a.label.localeCompare(b.label);
-				if (ai === -1) return 1;
-				if (bi === -1) return -1;
-				return ai - bi;
-			});
-	}
-
-	async function pickHero(posts?: BlogPost[]): Promise<BlogPost> {
-		const list = posts ?? (await getAllPosts());
-		const featured = list.filter((p) => p.featured);
-		return (featured[0] ?? list[0])!;
-	}
-
-	return { getAllPosts, getAllPostsFull, getPostBySlug, getCategories, pickHero };
-}

package/packages/blogkit/src/lib/server/index.ts

@@ -1,2 +0,0 @@
-export { createBlog, type BlogCreateConfig } from './blog';
-

package/packages/blogkit/src/lib/theme/ThemeSwitcher.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import type { ThemeController, ThemeMode } from './store';
-
-	export let controller: ThemeController;
-
-	const options: { id: ThemeMode; 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 themeMode = controller.themeMode;
-	$: currentMode = $themeMode;
-</script>
-
-<div class="flex items-center gap-2">
-	<span class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">Theme</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.setThemeMode(opt.id)}
-				aria-pressed={currentMode === opt.id}
-			>
-				{opt.label}
-			</button>
-		{/each}
-	</div>
-</div>
-

package/packages/blogkit/src/lib/theme/index.ts

@@ -1,3 +0,0 @@
-export { createThemeController, type ThemeController, type ThemeMode } from './store';
-export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';
-

package/packages/blogkit/src/lib/theme/store.ts

@@ -1,64 +0,0 @@
-import { BROWSER } from 'esm-env';
-import { writable, type Writable } from 'svelte/store';
-
-export type ThemeMode = 'system' | 'light' | 'dark';
-
-export type ThemeController = {
-	storageKey: string;
-	themeMode: Writable<ThemeMode>;
-	initTheme: () => void | (() => void);
-	setThemeMode: (mode: ThemeMode) => void;
-};
-
-function resolve(mode: ThemeMode): 'light' | 'dark' {
-	if (mode === 'light' || mode === 'dark') return mode;
-	const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false;
-	return prefersDark ? 'dark' : 'light';
-}
-
-function apply(mode: ThemeMode) {
-	const resolved = resolve(mode);
-	document.documentElement.classList.remove('light', 'dark');
-	document.documentElement.classList.add(resolved);
-	document.documentElement.dataset.theme = mode;
-}
-
-export function createThemeController(opts?: { storageKey?: string; defaultMode?: ThemeMode }): ThemeController {
-	const storageKey = opts?.storageKey ?? 'blogkit-theme';
-	const defaultMode = opts?.defaultMode ?? 'system';
-	const themeMode = writable<ThemeMode>(defaultMode);
-
-	function readStored(): ThemeMode {
-		const v = localStorage.getItem(storageKey);
-		if (v === 'light' || v === 'dark' || v === 'system') return v;
-		return defaultMode;
-	}
-
-	function initTheme() {
-		if (!BROWSER) return;
-
-		const mode = readStored();
-		themeMode.set(mode);
-		apply(mode);
-
-		const mq = window.matchMedia?.('(prefers-color-scheme: dark)');
-		const onChange = () => {
-			let current: ThemeMode = mode;
-			const unsub = themeMode.subscribe((v) => (current = v));
-			unsub();
-			if (current === 'system') apply('system');
-		};
-
-		mq?.addEventListener?.('change', onChange);
-		return () => mq?.removeEventListener?.('change', onChange);
-	}
-
-	function setThemeMode(mode: ThemeMode) {
-		themeMode.set(mode);
-		if (!BROWSER) return;
-		localStorage.setItem(storageKey, mode);
-		apply(mode);
-	}
-
-	return { storageKey, themeMode, initTheme, setThemeMode };
-}

package/packages/blogkit/src/lib/types/blog.ts

@@ -1,36 +0,0 @@
-import type { ComponentType } from 'svelte';
-
-export type BlogCategory = {
-	label: string;
-	slug: string; // "engineering"
-};
-
-export type BlogAuthor = {
-	id: string;
-	name: string;
-	title: string;
-	avatar: string; // public path under /static
-};
-
-export type BlogPost = {
-	slug: string;
-	title: string;
-	excerpt: string;
-	category: BlogCategory;
-	tags: string[];
-	author: BlogAuthor;
-	date: string; // ISO (YYYY-MM-DD)
-	dateLong: string; // "February 8, 2026"
-	dateShort: string; // "Feb 8, 2026"
-	readingMinutes: number;
-	readingTimeShort: string; // "5 min read"
-	readingTimeLong: string; // "5 minutes read"
-	cover: string; // public path under /static
-	summaryAI?: string;
-	featured: boolean;
-};
-
-export type BlogPostFull = BlogPost & {
-	component: ComponentType;
-};
-

package/packages/blogkit/svelte.config.js

@@ -1,8 +0,0 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	preprocess: vitePreprocess()
-};
-
-export default config;

package/packages/blogkit/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["src/**/*.ts", "src/**/*.svelte"],
-  "exclude": ["dist/**"]
-}

package/playwright.config.ts

@@ -1,24 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-	testDir: './tests',
-	timeout: 30_000,
-	expect: {
-		timeout: 10_000
-	},
-	use: {
-		baseURL: 'http://localhost:4173',
-		trace: 'on-first-retry'
-	},
-	webServer: {
-		command: 'npm run build && npm run preview -- --port 4173',
-		port: 4173,
-		reuseExistingServer: !process.env.CI
-	},
-	projects: [
-		{
-			name: 'chromium',
-			use: { ...devices['Desktop Chrome'] }
-		}
-	]
-});

package/postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-	plugins: {
-		'@tailwindcss/postcss': {},
-		autoprefixer: {}
-	}
-};

package/src/app.css

@@ -1,146 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Theme tokens (Mintlify-inspired, not copied) */
-html.light {
-	color-scheme: light;
-	--c-background-main: 252 252 252;
-	--c-background-soft: 245 246 248;
-	--c-background-invert: 8 12 20;
-	--c-text-main: 12 18 28;
-	--c-text-sub: 71 85 105;
-	--c-text-muted: 100 116 139;
-	--c-text-invert: 248 250 252;
-	--c-border-soft: 15 23 42;
-	--c-brand: 34 197 94;
-	--c-brand-soft: 220 252 231;
-}
-
-html.dark {
-	color-scheme: dark;
-	--c-background-main: 9 12 18;
-	--c-background-soft: 14 19 28;
-	--c-background-invert: 250 250 252;
-	--c-text-main: 238 242 247;
-	--c-text-sub: 148 163 184;
-	--c-text-muted: 100 116 139;
-	--c-text-invert: 10 12 16;
-	--c-border-soft: 148 163 184;
-	--c-brand: 52 211 153;
-	--c-brand-soft: 5 46 22;
-}
-
-html {
-	background: rgb(var(--c-background-main));
-	color: rgb(var(--c-text-main));
-	font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
-		Apple Color Emoji, Segoe UI Emoji;
-	text-rendering: geometricPrecision;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-body {
-	min-height: 100dvh;
-}
-
-/* Utilities */
-.no-scrollbar {
-	-ms-overflow-style: none;
-	scrollbar-width: none;
-}
-.no-scrollbar::-webkit-scrollbar {
-	display: none;
-}
-
-/* For the mobile tag bar fade edges */
-.fade-mask-x {
-	-webkit-mask-image: linear-gradient(
-		to right,
-		transparent 0,
-		black 24px,
-		black calc(100% - 24px),
-		transparent 100%
-	);
-	mask-image: linear-gradient(
-		to right,
-		transparent 0,
-		black 24px,
-		black calc(100% - 24px),
-		transparent 100%
-	);
-}
-
-/* Shiki blocks (Mintlify-like proportions) */
-pre.shiki {
-	border-radius: 6px;
-	padding: 12px 16px;
-	line-height: 24px;
-	font-size: 14px;
-	overflow-x: auto;
-	border: 1px solid rgb(var(--c-border-soft) / 0.12);
-	/* Shiki provides inline light theme styles; we keep a soft fallback. */
-	background: rgb(var(--c-background-soft));
-}
-
-html.dark pre.shiki {
-	border-color: rgb(var(--c-border-soft) / 0.2);
-	background: var(--shiki-dark-bg) !important;
-	color: var(--shiki-dark) !important;
-}
-
-html.dark pre.shiki span {
-	color: var(--shiki-dark, inherit) !important;
-	font-style: var(--shiki-dark-font-style, inherit) !important;
-}
-
-pre.shiki code {
-	background: transparent !important;
-	padding: 0 !important;
-	border-radius: 0 !important;
-}
-
-/* Give in-article images the “frame” + zoom affordance */
-.blog-prose img {
-	cursor: zoom-in;
-}
-
-/* Mintlify-like heading anchors (subtle + only on hover) */
-.blog-prose .heading-anchor {
-	color: inherit;
-	text-decoration: none;
-}
-.blog-prose .heading-anchor::after {
-	content: '#';
-	margin-left: 8px;
-	font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-		'Courier New', monospace;
-	font-size: 12px;
-	opacity: 0;
-	color: rgb(var(--c-text-muted));
-	transition: opacity 120ms ease;
-}
-.blog-prose h2:hover .heading-anchor::after,
-.blog-prose h3:hover .heading-anchor::after {
-	opacity: 1;
-}
-
-/* Restore spacing around Shiki blocks (we zeroed out base `pre` in typography) */
-.blog-prose pre.shiki {
-	margin: 24px 0;
-}
-
-/* Markdown edge-case hardening */
-.blog-prose {
-	overflow-wrap: anywhere;
-}
-.blog-prose table {
-	display: block;
-	max-width: 100%;
-	overflow-x: auto;
-	-webkit-overflow-scrolling: touch;
-}
-.blog-prose table thead th {
-	white-space: nowrap;
-}

package/src/app.d.ts

@@ -1,13 +0,0 @@
-// See https://svelte.dev/docs/kit/types#app.d.ts
-// for information about these interfaces
-declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
-	}
-}
-
-export {};

package/src/app.html

@@ -1,26 +0,0 @@
-<!doctype html>
-<html lang="en" class="light">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<script>
-			(() => {
-				try {
-					const stored = localStorage.getItem('svelta-theme') || 'system';
-					const prefersDark =
-						window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-					const resolved = stored === 'system' ? (prefersDark ? 'dark' : 'light') : stored;
-					document.documentElement.classList.remove('light', 'dark');
-					document.documentElement.classList.add(resolved);
-					document.documentElement.dataset.theme = stored;
-				} catch {
-					document.documentElement.classList.add('light');
-				}
-			})();
-		</script>
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>

package/src/content/blog/ai-summary-cards-with-frontmatter.md

@@ -1,32 +0,0 @@
----
-title: "AI Summary Cards With Frontmatter"
-date: "2026-02-03"
-category: "AI trends"
-author: "maria"
-cover: "/blog/covers/ai-summary.svg"
-tags:
-  - "UX"
-  - "Content"
-excerpt: "A skimmable summary card that appears near the top of the post, controlled by a single frontmatter field."
-summaryAI: "Add an optional `summaryAI` field in frontmatter. If present, render a soft card after the hero image with a mono uppercase label (“AI SUMMARY”) and a short paragraph. If absent, omit the card entirely (Mintlify does this on some posts)."
----
-
-Readers don’t always want the whole story. They often want the gist, then decide.
-
-## Placement
-
-The summary works best **after the hero image** and **before the article body**.
-
-## Implementation idea
-
-```md
-summaryAI: "One paragraph that makes the post skimmable."
-```
-
-Then in the post page:
-
-```svelte
-{#if post.summaryAI}
-  <SummaryCard summary={post.summaryAI} />
-{/if}
-```

package/src/content/blog/announcing-svelta-blog.md

@@ -1,19 +0,0 @@
----
-title: "Announcing the svelta Blog"
-date: "2026-01-30"
-category: "Announcements"
-author: "shawn"
-cover: "/blog/covers/mintlify-style.svg"
-tags:
-  - "Launch"
-excerpt: "A small, fast blog system that feels like product documentation: clean, structured, and easy to skim."
----
-
-We’re publishing more of the thinking behind svelta: engineering decisions, design constraints, and practical patterns.
-
-## What you’ll see here
-
-- Implementation notes (with real code)
-- Design systems that stay crisp in dark mode
-- Product-focused writing, not marketing fluff
-