@aureuma/svelta 0.0.1

package/src/routes/blog/[slug]/+page.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { Avatar, BackLink, Container, ImageLightbox, MorePosts, ShareButtons, SummaryCard } from '@aureuma/blogkit';
+	import type { BlogPost } from '$lib/types/blog';
+
+	let { data } = $props<{
+		data: {
+			post: BlogPost;
+			contentHtml: string;
+			morePosts: BlogPost[];
+			canonicalUrl: string;
+			seo: {
+				title: string;
+				description: string;
+				canonicalUrl: string;
+				og: { title: string; description: string; type: 'article'; url: string };
+			};
+		};
+	}>();
+
+	let lightbox = $state<{ src: string; alt: string } | null>(null);
+	let articleEl = $state<HTMLElement | null>(null);
+
+	$effect(() => {
+		// Re-bind image zoom handlers when content changes (e.g. client-side navigation).
+		const _ = data.contentHtml;
+		if (!articleEl) return;
+
+		const imgs = Array.from(articleEl.querySelectorAll('img'));
+		const onClick = (e: Event) => {
+			const img = e.currentTarget as HTMLImageElement;
+			lightbox = { src: img.currentSrc || img.src, alt: img.alt || data.post.title };
+		};
+
+		for (const img of imgs) img.addEventListener('click', onClick);
+		return () => {
+			for (const img of imgs) img.removeEventListener('click', onClick);
+		};
+	});
+</script>
+
+<svelte:head>
+	<title>{data.seo.title}</title>
+	<meta name="description" content={data.seo.description} />
+	<link rel="canonical" href={data.seo.canonicalUrl} />
+	<meta property="og:title" content={data.seo.og.title} />
+	<meta property="og:description" content={data.seo.og.description} />
+	<meta property="og:type" content={data.seo.og.type} />
+	<meta property="og:url" content={data.seo.og.url} />
+</svelte:head>
+
+<Container size="4xl">
+	<div class="mt-[4.5rem] pb-[7.5rem]">
+		<BackLink />
+
+		<header class="mt-8 border-b border-border-soft/10 pb-8">
+			<div class="flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px]">
+				<span class="text-brand">{data.post.category.label}</span>
+				<span class="text-text-muted" aria-hidden="true">/</span>
+				<span class="text-text-muted">{data.post.readingTimeLong}</span>
+			</div>
+
+			<h1 class="mt-4 text-4xl font-semibold leading-[44px] tracking-[-0.8px] text-text-main">
+				{data.post.title}
+			</h1>
+
+			<p class="mt-4 text-xs font-mono uppercase tracking-[0.6px] text-text-muted">
+				{data.post.dateLong}
+			</p>
+		</header>
+
+		<div class="mt-10 grid grid-cols-1 gap-x-16 md:grid-cols-[minmax(0,628px)_160px]">
+			<div class="min-w-0">
+				<div class="overflow-hidden rounded-3xl border border-border-soft/10 bg-background-soft">
+					<img src={data.post.cover} alt={data.post.title} class="h-[360px] w-full object-cover" />
+				</div>
+
+				{#if data.post.summaryAI}
+					<div class="mt-6">
+						<SummaryCard summary={data.post.summaryAI} />
+					</div>
+				{/if}
+
+				<div class="mt-8 flex flex-col gap-6 md:hidden">
+					<div class="flex items-center gap-3">
+						<Avatar src={data.post.author.avatar} alt={data.post.author.name} size={48} />
+						<div class="leading-tight">
+							<div class="text-sm font-medium tracking-tight text-text-main">
+								{data.post.author.name}
+							</div>
+							<div class="text-xs text-text-muted">{data.post.author.title}</div>
+						</div>
+					</div>
+					<ShareButtons title={data.post.title} url={data.canonicalUrl} testId="blog-share-mobile" />
+				</div>
+
+				<article bind:this={articleEl} class="blog-prose prose mt-10">
+					{@html data.contentHtml}
+				</article>
+
+				<MorePosts posts={data.morePosts} />
+			</div>
+
+			<aside class="sticky top-20 hidden self-start md:flex md:flex-col md:gap-8">
+				<div class="flex items-center gap-3">
+					<Avatar src={data.post.author.avatar} alt={data.post.author.name} size={48} />
+					<div class="leading-tight">
+						<div class="text-sm font-medium tracking-tight text-text-main">{data.post.author.name}</div>
+						<div class="text-xs text-text-muted">{data.post.author.title}</div>
+					</div>
+				</div>
+
+				<ShareButtons title={data.post.title} url={data.canonicalUrl} testId="blog-share-desktop" />
+			</aside>
+		</div>
+	</div>
+</Container>
+
+<ImageLightbox image={lightbox} onClose={() => (lightbox = null)} />

package/src/routes/blog/posts.json/+server.ts

@@ -0,0 +1,32 @@
+import { getAllPosts, getCategories, pickHero } from '$lib/server/blog';
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+const DEFAULT_LIMIT = 8;
+const MAX_LIMIT = 24;
+
+export const GET: RequestHandler = async ({ url }) => {
+	const offset = Math.max(0, Number.parseInt(url.searchParams.get('offset') ?? '0', 10) || 0);
+	const limitRaw =
+		Number.parseInt(url.searchParams.get('limit') ?? String(DEFAULT_LIMIT), 10) || DEFAULT_LIMIT;
+	const limit = Math.min(MAX_LIMIT, Math.max(1, limitRaw));
+
+	const [all, categories] = await Promise.all([getAllPosts(), getCategories()]);
+	const hero = await pickHero(all);
+
+	const requestedCategory = url.searchParams.get('category') ?? '';
+	const category =
+		requestedCategory && categories.some((c) => c.slug === requestedCategory)
+			? requestedCategory
+			: '';
+
+	const rest = all.filter((p) => p.slug !== hero.slug);
+	const filtered = category ? rest.filter((p) => p.category.slug === category) : rest;
+	const posts = filtered.slice(offset, offset + limit);
+
+	return json({
+		posts,
+		hasMore: filtered.length > offset + posts.length
+	});
+};
+

package/src/routes/feed.xml/+server.ts

@@ -0,0 +1,21 @@
+import { getAllPosts } from '$lib/server/blog';
+import { buildRss } from '$lib/server/rss';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ url }) => {
+	const posts = await getAllPosts();
+
+	const rss = buildRss({
+		baseUrl: url,
+		posts,
+		siteTitle: 'svelta Blog',
+		description: 'Engineering, design, and product notes from svelta.'
+	});
+
+	return new Response(rss, {
+		headers: {
+			'content-type': 'application/rss+xml; charset=utf-8',
+			'cache-control': 'max-age=0, s-maxage=3600'
+		}
+	});
+};

package/static/blog/authors/alex.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#fb7185"/>
+      <stop offset="1" stop-color="#f59e0b"/>
+    </linearGradient>
+  </defs>
+  <rect width="128" height="128" rx="64" fill="url(#g)"/>
+  <circle cx="64" cy="58" r="22" fill="rgba(255,255,255,0.23)"/>
+  <path d="M26 116c10-22 26-32 38-32s28 10 38 32" fill="rgba(255,255,255,0.23)"/>
+  <text x="64" y="76" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="700" fill="rgba(255,255,255,0.92)">A</text>
+</svg>
+

package/static/blog/authors/maria.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#a78bfa"/>
+      <stop offset="1" stop-color="#22c55e"/>
+    </linearGradient>
+  </defs>
+  <rect width="128" height="128" rx="64" fill="url(#g)"/>
+  <circle cx="64" cy="58" r="22" fill="rgba(255,255,255,0.23)"/>
+  <path d="M26 116c10-22 26-32 38-32s28 10 38 32" fill="rgba(255,255,255,0.23)"/>
+  <text x="64" y="76" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="700" fill="rgba(255,255,255,0.92)">M</text>
+</svg>
+

package/static/blog/authors/shawn.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#22c55e"/>
+      <stop offset="1" stop-color="#0ea5e9"/>
+    </linearGradient>
+  </defs>
+  <rect width="128" height="128" rx="64" fill="url(#g)"/>
+  <circle cx="64" cy="58" r="22" fill="rgba(255,255,255,0.25)"/>
+  <path d="M26 116c10-22 26-32 38-32s28 10 38 32" fill="rgba(255,255,255,0.25)"/>
+  <text x="64" y="76" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="700" fill="rgba(255,255,255,0.92)">S</text>
+</svg>
+

package/static/blog/covers/ai-summary.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0b1220"/>
+      <stop offset="1" stop-color="#111827"/>
+    </linearGradient>
+    <radialGradient id="g1" cx="50%" cy="40%" r="60%">
+      <stop offset="0" stop-color="rgba(167,139,250,0.50)"/>
+      <stop offset="1" stop-color="rgba(167,139,250,0)"/>
+    </radialGradient>
+    <radialGradient id="g2" cx="20%" cy="80%" r="60%">
+      <stop offset="0" stop-color="rgba(34,197,94,0.45)"/>
+      <stop offset="1" stop-color="rgba(34,197,94,0)"/>
+    </radialGradient>
+  </defs>
+
+  <rect width="1600" height="900" fill="url(#bg)"/>
+  <rect width="1600" height="900" fill="url(#g1)"/>
+  <rect width="1600" height="900" fill="url(#g2)"/>
+
+  <rect x="260" y="220" width="1080" height="460" rx="48" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.18)"/>
+
+  <g>
+    <rect x="320" y="280" width="180" height="30" rx="15" fill="rgba(255,255,255,0.14)"/>
+    <rect x="320" y="330" width="520" height="16" rx="8" fill="rgba(255,255,255,0.22)"/>
+    <rect x="320" y="360" width="720" height="16" rx="8" fill="rgba(255,255,255,0.18)"/>
+    <rect x="320" y="390" width="640" height="16" rx="8" fill="rgba(255,255,255,0.18)"/>
+    <rect x="320" y="450" width="900" height="14" rx="7" fill="rgba(255,255,255,0.14)"/>
+    <rect x="320" y="476" width="820" height="14" rx="7" fill="rgba(255,255,255,0.14)"/>
+    <rect x="320" y="502" width="740" height="14" rx="7" fill="rgba(255,255,255,0.14)"/>
+  </g>
+
+  <g opacity="0.9">
+    <circle cx="1200" cy="320" r="54" fill="rgba(255,255,255,0.08)"/>
+    <path d="M1186 320h28M1200 306v28" stroke="rgba(255,255,255,0.55)" stroke-width="6" stroke-linecap="round"/>
+  </g>
+</svg>
+

package/static/blog/covers/design-tokens.svg

@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#f8fafc"/>
+      <stop offset="1" stop-color="#eef2ff"/>
+    </linearGradient>
+    <linearGradient id="chip" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#22c55e"/>
+      <stop offset="1" stop-color="#a78bfa"/>
+    </linearGradient>
+  </defs>
+
+  <rect width="1600" height="900" fill="url(#bg)"/>
+
+  <g opacity="0.18">
+    <circle cx="420" cy="260" r="220" fill="#22c55e"/>
+    <circle cx="1250" cy="520" r="320" fill="#a78bfa"/>
+  </g>
+
+  <g>
+    <rect x="220" y="210" width="520" height="420" rx="36" fill="rgba(15,23,42,0.06)"/>
+    <rect x="860" y="270" width="520" height="360" rx="36" fill="rgba(15,23,42,0.06)"/>
+  </g>
+
+  <g fill="rgba(15,23,42,0.10)">
+    <rect x="270" y="260" width="220" height="44" rx="22"/>
+    <rect x="270" y="320" width="280" height="14" rx="7"/>
+    <rect x="270" y="350" width="320" height="14" rx="7"/>
+    <rect x="270" y="380" width="250" height="14" rx="7"/>
+
+    <rect x="910" y="320" width="260" height="44" rx="22" fill="url(#chip)"/>
+    <rect x="910" y="385" width="340" height="14" rx="7"/>
+    <rect x="910" y="415" width="300" height="14" rx="7"/>
+    <rect x="910" y="445" width="220" height="14" rx="7"/>
+  </g>
+</svg>
+

package/static/blog/covers/infinite-scroll.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0f172a"/>
+      <stop offset="1" stop-color="#0b1220"/>
+    </linearGradient>
+    <linearGradient id="acc" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#22c55e"/>
+      <stop offset="1" stop-color="#38bdf8"/>
+    </linearGradient>
+  </defs>
+
+  <rect width="1600" height="900" fill="url(#bg)"/>
+
+  <g opacity="0.18">
+    <circle cx="420" cy="260" r="240" fill="#22c55e"/>
+    <circle cx="1220" cy="680" r="280" fill="#38bdf8"/>
+  </g>
+
+  <g fill="rgba(255,255,255,0.10)">
+    <rect x="260" y="200" width="1080" height="84" rx="42"/>
+    <rect x="260" y="320" width="1080" height="84" rx="42"/>
+    <rect x="260" y="440" width="1080" height="84" rx="42"/>
+    <rect x="260" y="560" width="1080" height="84" rx="42"/>
+    <rect x="260" y="680" width="1080" height="84" rx="42"/>
+  </g>
+
+  <g>
+    <rect x="300" y="236" width="420" height="12" rx="6" fill="rgba(255,255,255,0.22)"/>
+    <rect x="300" y="356" width="560" height="12" rx="6" fill="rgba(255,255,255,0.22)"/>
+    <rect x="300" y="476" width="520" height="12" rx="6" fill="rgba(255,255,255,0.22)"/>
+    <rect x="300" y="596" width="680" height="12" rx="6" fill="rgba(255,255,255,0.22)"/>
+    <rect x="300" y="716" width="460" height="12" rx="6" fill="rgba(255,255,255,0.22)"/>
+  </g>
+
+  <path d="M1240 240c0 0-20 110-140 120s-160 120-160 120" fill="none" stroke="url(#acc)" stroke-width="10" stroke-linecap="round" opacity="0.75"/>
+</svg>
+

package/static/blog/covers/kitchen-sink.svg

@@ -0,0 +1,36 @@
+<svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1200" y2="630" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0B1020"/>
+      <stop offset="1" stop-color="#0F2A1B"/>
+    </linearGradient>
+    <linearGradient id="card" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.10"/>
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.04"/>
+    </linearGradient>
+    <filter id="shadow" x="-30" y="-30" width="1260" height="690" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="18" stdDeviation="24" flood-color="#000000" flood-opacity="0.35"/>
+    </filter>
+  </defs>
+
+  <rect width="1200" height="630" fill="url(#bg)"/>
+
+  <g filter="url(#shadow)">
+    <rect x="120" y="126" width="960" height="378" rx="36" fill="url(#card)" stroke="#FFFFFF" stroke-opacity="0.12"/>
+  </g>
+
+  <circle cx="240" cy="252" r="48" fill="#34D399" fill-opacity="0.22"/>
+  <circle cx="316" cy="280" r="14" fill="#34D399" fill-opacity="0.55"/>
+
+  <path d="M240 360H960" stroke="#FFFFFF" stroke-opacity="0.10" stroke-width="2"/>
+  <path d="M240 400H840" stroke="#FFFFFF" stroke-opacity="0.08" stroke-width="2"/>
+  <path d="M240 440H900" stroke="#FFFFFF" stroke-opacity="0.06" stroke-width="2"/>
+
+  <text x="240" y="332" fill="#FFFFFF" fill-opacity="0.92" font-family="ui-sans-serif, system-ui" font-size="54" font-weight="700" letter-spacing="-0.8">
+    Markdown Kitchen Sink
+  </text>
+  <text x="240" y="520" fill="#FFFFFF" fill-opacity="0.70" font-family="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" font-size="18" letter-spacing="0.6">
+    tables • lists • code • quotes • images
+  </text>
+</svg>
+

package/static/blog/covers/markdown-pipeline.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0b1220"/>
+      <stop offset="1" stop-color="#0f172a"/>
+    </linearGradient>
+    <linearGradient id="acc" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#38bdf8"/>
+      <stop offset="1" stop-color="#22c55e"/>
+    </linearGradient>
+  </defs>
+
+  <rect width="1600" height="900" fill="url(#bg)"/>
+  <g opacity="0.18">
+    <circle cx="460" cy="520" r="320" fill="#38bdf8"/>
+    <circle cx="1180" cy="300" r="260" fill="#22c55e"/>
+  </g>
+
+  <g>
+    <rect x="260" y="250" width="520" height="400" rx="40" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.16)"/>
+    <rect x="820" y="250" width="520" height="400" rx="40" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.16)"/>
+    <path d="M820 450h-40c-40 0-60-20-60-60v-20c0-40-20-60-60-60h-60" fill="none" stroke="url(#acc)" stroke-width="10" stroke-linecap="round" opacity="0.85"/>
+  </g>
+
+  <g fill="rgba(255,255,255,0.20)">
+    <rect x="320" y="320" width="240" height="16" rx="8"/>
+    <rect x="320" y="352" width="360" height="16" rx="8"/>
+    <rect x="320" y="384" width="320" height="16" rx="8"/>
+    <rect x="320" y="450" width="420" height="12" rx="6" opacity="0.8"/>
+    <rect x="320" y="474" width="380" height="12" rx="6" opacity="0.8"/>
+  </g>
+
+  <g fill="rgba(255,255,255,0.20)">
+    <rect x="880" y="320" width="260" height="16" rx="8"/>
+    <rect x="880" y="352" width="360" height="16" rx="8"/>
+    <rect x="880" y="384" width="280" height="16" rx="8"/>
+    <rect x="880" y="450" width="420" height="12" rx="6" opacity="0.8"/>
+    <rect x="880" y="474" width="340" height="12" rx="6" opacity="0.8"/>
+  </g>
+</svg>
+

package/static/blog/covers/mintlify-style.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0b1220"/>
+      <stop offset="0.55" stop-color="#0f172a"/>
+      <stop offset="1" stop-color="#052e1b"/>
+    </linearGradient>
+    <radialGradient id="glow" cx="30%" cy="20%" r="60%">
+      <stop offset="0" stop-color="rgba(52,211,153,0.55)"/>
+      <stop offset="1" stop-color="rgba(52,211,153,0)"/>
+    </radialGradient>
+    <radialGradient id="glow2" cx="80%" cy="70%" r="60%">
+      <stop offset="0" stop-color="rgba(56,189,248,0.45)"/>
+      <stop offset="1" stop-color="rgba(56,189,248,0)"/>
+    </radialGradient>
+  </defs>
+
+  <rect width="1600" height="900" fill="url(#bg)"/>
+  <rect width="1600" height="900" fill="url(#glow)"/>
+  <rect width="1600" height="900" fill="url(#glow2)"/>
+
+  <g opacity="0.35" stroke="rgba(255,255,255,0.35)">
+    <path d="M120 220c220-110 420-110 640 0s420 110 640 0" fill="none" stroke-width="2"/>
+    <path d="M120 280c220-110 420-110 640 0s420 110 640 0" fill="none" stroke-width="2" opacity="0.7"/>
+    <path d="M120 340c220-110 420-110 640 0s420 110 640 0" fill="none" stroke-width="2" opacity="0.5"/>
+  </g>
+
+  <g opacity="0.22">
+    <rect x="240" y="520" width="1120" height="180" rx="36" fill="rgba(255,255,255,0.08)"/>
+    <rect x="300" y="570" width="420" height="18" rx="9" fill="rgba(255,255,255,0.20)"/>
+    <rect x="300" y="610" width="680" height="12" rx="6" fill="rgba(255,255,255,0.14)"/>
+    <rect x="300" y="636" width="520" height="12" rx="6" fill="rgba(255,255,255,0.14)"/>
+  </g>
+</svg>
+

package/static/blog/covers/rss.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#fff7ed"/>
+      <stop offset="1" stop-color="#f0fdf4"/>
+    </linearGradient>
+    <linearGradient id="acc" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#f97316"/>
+      <stop offset="1" stop-color="#22c55e"/>
+    </linearGradient>
+  </defs>
+
+  <rect width="1600" height="900" fill="url(#bg)"/>
+  <g opacity="0.12">
+    <circle cx="400" cy="220" r="260" fill="#f97316"/>
+    <circle cx="1220" cy="620" r="320" fill="#22c55e"/>
+  </g>
+
+  <rect x="300" y="220" width="1000" height="460" rx="48" fill="rgba(15,23,42,0.06)"/>
+  <g transform="translate(420 340)">
+    <circle cx="60" cy="300" r="36" fill="url(#acc)"/>
+    <path d="M60 210c84 0 150 66 150 150" fill="none" stroke="url(#acc)" stroke-width="24" stroke-linecap="round"/>
+    <path d="M60 120c134 0 240 106 240 240" fill="none" stroke="url(#acc)" stroke-width="24" stroke-linecap="round" opacity="0.8"/>
+  </g>
+
+  <g fill="rgba(15,23,42,0.12)">
+    <rect x="780" y="330" width="420" height="16" rx="8"/>
+    <rect x="780" y="362" width="340" height="16" rx="8"/>
+    <rect x="780" y="420" width="460" height="14" rx="7"/>
+    <rect x="780" y="446" width="520" height="14" rx="7"/>
+    <rect x="780" y="472" width="480" height="14" rx="7"/>
+  </g>
+</svg>
+

package/static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

package/svelte.config.js

@@ -0,0 +1,70 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { mdsvex } from 'mdsvex';
+import remarkGfm from 'remark-gfm';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
+import rehypeShiki from '@shikijs/rehype';
+
+/** @type {import('unified').Plugin} */
+function rehypeStripPreTabindex() {
+	/** @param {any} node */
+	function walk(node) {
+		if (!node || typeof node !== 'object') return;
+		if (node.type === 'element' && node.tagName === 'pre' && node.properties) {
+			delete node.properties.tabindex;
+			delete node.properties.tabIndex;
+		}
+		if (Array.isArray(node.children)) node.children.forEach(walk);
+	}
+
+	return (tree) => walk(tree);
+}
+
+/** @type {import('mdsvex').MdsvexOptions} */
+const mdsvexConfig = {
+	extensions: ['.md'],
+	frontmatter: {
+		marker: '-',
+		type: 'yaml',
+		parse: () => undefined
+	},
+	highlight: false,
+	remarkPlugins: [remarkGfm],
+	rehypePlugins: [
+		rehypeSlug,
+		[
+			rehypeAutolinkHeadings,
+			{
+				behavior: 'wrap',
+				properties: {
+					className: ['heading-anchor']
+				}
+			}
+		],
+		[
+			rehypeShiki,
+			{
+				themes: {
+					light: 'one-light',
+					dark: 'github-dark-default'
+				}
+			}
+		],
+		rehypeStripPreTabindex
+	]
+};
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	extensions: ['.svelte', '.md'],
+	preprocess: [mdsvex(mdsvexConfig), vitePreprocess()],
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;