@aureuma/svelta 0.0.1 → 0.1.1

package/packages/blogkit/src/lib/components/blog/ShareButtons.svelte

@@ -1,113 +0,0 @@
-<script lang="ts">
-	import { BROWSER } from 'esm-env';
-
-	export let title: string;
-	export let url: string;
-	export let label: string = 'Share this article';
-	export let testId: string | undefined = undefined;
-
-	let copied = false;
-
-	function openShare(href: string) {
-		if (!BROWSER) return;
-		window.open(href, '_blank', 'noopener,noreferrer');
-	}
-
-	async function copyLink() {
-		if (!BROWSER) return;
-		try {
-			await navigator.clipboard.writeText(url);
-			copied = true;
-			window.setTimeout(() => (copied = false), 1200);
-		} catch {
-			// Fallback for older browsers.
-			const ta = document.createElement('textarea');
-			ta.value = url;
-			ta.style.position = 'fixed';
-			ta.style.opacity = '0';
-			document.body.appendChild(ta);
-			ta.select();
-			document.execCommand('copy');
-			document.body.removeChild(ta);
-			copied = true;
-			window.setTimeout(() => (copied = false), 1200);
-		}
-	}
-
-	$: encodedUrl = encodeURIComponent(url);
-	$: encodedTitle = encodeURIComponent(title);
-</script>
-
-<div data-testid={testId}>
-	<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">{label}</p>
-	<div class="mt-3 flex flex-wrap gap-2">
-		<button
-			type="button"
-			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
-			on:click={() =>
-				openShare(`https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`)}
-			aria-label="Share on X"
-		>
-			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
-				<path
-					fill="currentColor"
-					d="M18.9 2H22l-6.8 7.8L23 22h-6.8l-5.3-6.9L4.9 22H2l7.4-8.6L1.5 2h7l4.8 6.2L18.9 2Zm-1.2 18h1.7L7.8 3.9H6.1L17.7 20Z"
-				/>
-			</svg>
-		</button>
-
-		<button
-			type="button"
-			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
-			on:click={() =>
-				openShare(`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`)}
-			aria-label="Share on LinkedIn"
-		>
-			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
-				<path
-					fill="currentColor"
-					d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM0.5 23.5h4V7.98h-4V23.5ZM8 7.98h3.84v2.12h.05c.53-1 1.83-2.12 3.77-2.12 4.03 0 4.78 2.65 4.78 6.1v9.42h-4v-8.36c0-1.99-.03-4.55-2.77-4.55-2.77 0-3.2 2.16-3.2 4.4v8.5H8V7.98Z"
-				/>
-			</svg>
-		</button>
-
-		<button
-			type="button"
-			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
-			on:click={() => openShare(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`)}
-			aria-label="Share on Facebook"
-		>
-			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
-				<path
-					fill="currentColor"
-					d="M13.5 22v-8h2.7l.4-3H13.5V9.1c0-.9.3-1.6 1.7-1.6h1.6V4.8c-.3 0-1.4-.1-2.7-.1-2.7 0-4.5 1.6-4.5 4.6V11H7v3h2.6v8h3.9Z"
-				/>
-			</svg>
-		</button>
-
-		<button
-			type="button"
-			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
-			on:click={copyLink}
-			aria-label="Copy link"
-		>
-			<svg
-				viewBox="0 0 24 24"
-				class="size-4"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				aria-hidden="true"
-			>
-				<path d="M10 13a5 5 0 0 1 0-7l1-1a5 5 0 0 1 7 7l-1 1" />
-				<path d="M14 11a5 5 0 0 1 0 7l-1 1a5 5 0 0 1-7-7l1-1" />
-			</svg>
-		</button>
-	</div>
-
-	{#if copied}
-		<p class="mt-2 text-xs font-mono uppercase tracking-[0.6px] text-brand">Copied</p>
-	{/if}
-</div>

package/packages/blogkit/src/lib/components/blog/SummaryCard.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	export let summary: string;
-</script>
-
-<section
-	class="rounded-2xl border border-border-soft/10 bg-background-soft p-4"
-	data-testid="blog-summary"
->
-	<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">AI SUMMARY</p>
-	<p class="mt-2 text-sm leading-6 text-text-sub">{summary}</p>
-</section>

package/packages/blogkit/src/lib/components/blog/TagTabs.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import type { BlogCategory } from '../../types/blog';
-
-	export let categories: BlogCategory[];
-	export let selected: string; // "" means all
-	export let onSelect: (slug: string) => void;
-	$: items = [{ label: 'All articles', slug: '' }, ...categories];
-</script>
-
-<div class="relative" data-testid="blog-tags">
-	<div
-		class="fade-mask-x no-scrollbar flex gap-2 overflow-x-auto py-2 md:flex-wrap md:overflow-visible md:[-webkit-mask-image:none] md:[mask-image:none]"
-		role="tablist"
-		aria-label="Blog categories"
-	>
-		{#each items as item (item.slug)}
-			<button
-				type="button"
-				role="tab"
-				aria-selected={selected === item.slug}
-				class="h-[31px] whitespace-nowrap rounded-full border px-3 text-xs font-mono uppercase tracking-[0.6px] transition
-					hover:bg-background-main/60
-					{selected === item.slug
-						? 'border-border-soft/15 bg-background-main text-text-main'
-						: 'border-border-soft/10 bg-background-soft text-text-sub'}"
-				on:click={() => onSelect(item.slug)}
-			>
-				{item.label}
-			</button>
-		{/each}
-	</div>
-</div>

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

@@ -1,15 +0,0 @@
-// Components
-export { default as Avatar } from './components/blog/Avatar.svelte';
-export { default as BackLink } from './components/blog/BackLink.svelte';
-export { default as BlogCard } from './components/blog/BlogCard.svelte';
-export { default as BlogHeroCard } from './components/blog/BlogHeroCard.svelte';
-export { default as Container } from './components/blog/Container.svelte';
-export { default as ImageLightbox } from './components/blog/ImageLightbox.svelte';
-export { default as MorePosts } from './components/blog/MorePosts.svelte';
-export { default as ShareButtons } from './components/blog/ShareButtons.svelte';
-export { default as SummaryCard } from './components/blog/SummaryCard.svelte';
-export { default as TagTabs } from './components/blog/TagTabs.svelte';
-
-// Types
-export type { BlogAuthor, BlogCategory, BlogPost, BlogPostFull } from './types/blog';
-

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: {}
-	}
-};