@aureuma/svelta 0.0.1

package/src/content/blog/markdown-pipeline-mdsvex-shiki.md

@@ -0,0 +1,39 @@
+---
+title: "A Markdown Pipeline That Looks Like Product UI"
+date: "2026-02-01"
+category: "Engineering"
+author: "alex"
+cover: "/blog/covers/markdown-pipeline.svg"
+tags:
+  - "Markdown"
+  - "Shiki"
+excerpt: "mdsvex gets us Markdown-in-Svelte; Shiki gets us code blocks that don’t look like blogspot."
+summaryAI: "Use mdsvex with `remark-gfm` (tables), `rehype-slug` + `rehype-autolink-headings` (deep links), and `@shikijs/rehype` (syntax highlighting with dual themes). Style `pre.shiki` to match Mintlify’s padding, radius, and line height."
+---
+
+There are two failure modes for Markdown blogs:
+
+1. Everything looks like a generic “prose” template.
+2. Code blocks are unreadable in either light or dark mode.
+
+## Tables (GFM)
+
+| Plugin | Why |
+| --- | --- |
+| `remark-gfm` | tables, strikethrough, task lists |
+
+## Headings you can link to
+
+We add `id`s and autolink headings so every section is shareable.
+
+## Shiki, dual theme
+
+Mintlify-style code blocks use different themes in light vs dark. We do the same.
+
+```js
+// svelte.config.js
+rehypePlugins: [
+  [rehypeShiki, { themes: { light: "one-light", dark: "github-dark-default" } }]
+]
+```
+

package/src/content/blog/rss-feeds-that-actually-work.md

@@ -0,0 +1,25 @@
+---
+title: "RSS Feeds That Actually Work"
+date: "2026-02-04"
+category: "Best practices"
+author: "shawn"
+cover: "/blog/covers/rss.svg"
+tags:
+  - "RSS"
+  - "SEO"
+excerpt: "Generate a real RSS 2.0 feed from your Markdown posts and expose it at /feed.xml."
+summaryAI: "Emit RSS 2.0 with an `atom:link rel=\"self\"`, include `title`, `description`, `link`, `guid`, `pubDate`, and `category` for each post, and set `content-type: application/rss+xml`. Keep descriptions short and safe (use the excerpt)."
+---
+
+If you have a blog, you should have RSS. It’s a low-effort, high-trust feature.
+
+## What we generate
+
+- RSS 2.0
+- `atom:link` self reference
+- Items with title, link, description, pubDate, and category
+
+## A note on HTML
+
+RSS readers vary. Keep the description **plain text** (the excerpt) and let the post page carry the rich formatting.
+

package/src/content/blog/tag-tabs-and-mobile-fade-masks.md

@@ -0,0 +1,25 @@
+---
+title: "Tag Tabs + Mobile Fade Masks"
+date: "2026-02-02"
+category: "Design"
+author: "maria"
+cover: "/blog/covers/design-tokens.svg"
+tags:
+  - "Responsive"
+  - "UI"
+excerpt: "A horizontally scrollable tag bar on mobile, with fade edges so it feels intentional instead of broken."
+summaryAI: "On small screens, render the tag row as `overflow-x-auto` with hidden scrollbar. Add a `mask-image` gradient to fade the left/right edges. On desktop, disable the mask and allow the pills to sit normally."
+---
+
+Pill tabs are easy on desktop, but mobile needs a different treatment.
+
+## The goal
+
+- Horizontal scroll
+- No visible scrollbar
+- Subtle fade at the edges
+
+## CSS mask trick
+
+We apply a `mask-image` gradient to the scrolling container, then remove it on larger screens.
+

package/src/lib/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

package/src/lib/components/site/SiteFooter.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { ThemeSwitcher } from '@aureuma/blogkit/theme';
+	import { theme } from '$lib/stores/theme';
+</script>
+
+<footer class="border-t border-border-soft/10">
+	<div class="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 py-10 md:flex-row md:items-center md:justify-between">
+		<div class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">
+			© {new Date().getFullYear()} svelta
+		</div>
+
+		<div class="flex items-center justify-between gap-6 md:justify-end">
+			<a
+				href="/feed.xml"
+				class="inline-flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px] text-text-sub transition hover:text-text-main"
+			>
+				<span>RSS</span>
+				<span class="inline-block size-1.5 rounded-full bg-brand" aria-hidden="true"></span>
+			</a>
+
+			<ThemeSwitcher controller={theme} />
+		</div>
+	</div>
+</footer>

package/src/lib/components/site/SiteHeader.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	function isActive(path: string) {
+		return $page.url.pathname === path || $page.url.pathname.startsWith(`${path}/`);
+	}
+</script>
+
+<header
+	class="sticky top-0 z-50 border-b border-border-soft/10 bg-background-main/75 backdrop-blur supports-[backdrop-filter]:bg-background-main/55"
+>
+	<div class="mx-auto flex h-16 w-full max-w-5xl items-center justify-between px-6">
+		<a href="/" class="group inline-flex items-center gap-2">
+			<span class="text-sm font-semibold tracking-tight">svelta</span>
+			<span
+				class="rounded-full bg-brand/15 px-2 py-0.5 text-[11px] font-mono uppercase tracking-[0.6px] text-brand"
+			>
+				Blog
+			</span>
+		</a>
+
+		<nav class="flex items-center gap-6 text-sm">
+			<a
+				href="/"
+				class="transition hover:text-text-main {isActive('/') ? 'text-text-main' : 'text-text-sub'}"
+				>Home</a
+			>
+			<a
+				href="/blog"
+				class="transition hover:text-text-main {isActive('/blog') ? 'text-text-main' : 'text-text-sub'}"
+				>Blog</a
+			>
+		</nav>
+	</div>
+</header>
+

package/src/lib/content/authors.ts

@@ -0,0 +1,28 @@
+import type { BlogAuthor } from '$lib/types/blog';
+
+export const AUTHORS: Record<string, BlogAuthor> = {
+	shawn: {
+		id: 'shawn',
+		name: 'Shawn',
+		title: 'Builder at svelta',
+		avatar: '/blog/authors/shawn.svg'
+	},
+	alex: {
+		id: 'alex',
+		name: 'Alex Kim',
+		title: 'Product Engineer',
+		avatar: '/blog/authors/alex.svg'
+	},
+	maria: {
+		id: 'maria',
+		name: 'Maria Santos',
+		title: 'Design Lead',
+		avatar: '/blog/authors/maria.svg'
+	}
+};
+
+export function getAuthor(id: string): BlogAuthor {
+	const author = AUTHORS[id];
+	if (!author) throw new Error(`Unknown author id: ${id}`);
+	return author;
+}

package/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

package/src/lib/server/blog.ts

@@ -0,0 +1,22 @@
+import { createBlog } from '@aureuma/blogkit/server';
+import { getAuthor } from '$lib/content/authors';
+import type { BlogPostFull } from '$lib/types/blog';
+
+type CompiledModule = { default: BlogPostFull['component'] };
+
+const compiledModules = import.meta.glob('/src/content/blog/*.md') as Record<
+	string,
+	() => Promise<CompiledModule>
+>;
+const rawModules = import.meta.glob('/src/content/blog/*.md', {
+	query: '?raw',
+	import: 'default'
+}) as Record<string, () => Promise<string>>;
+
+export const blog = createBlog({
+	compiledModules,
+	rawModules,
+	getAuthor
+});
+
+export const { getAllPosts, getAllPostsFull, getPostBySlug, getCategories, pickHero } = blog;

package/src/lib/server/rss.ts

@@ -0,0 +1,58 @@
+import type { BlogPost } from '$lib/types/blog';
+
+function escapeXml(input: string) {
+	return input
+		.replace(/&/g, '&')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&apos;');
+}
+
+function toPubDate(iso: string) {
+	const d = /^\d{4}-\d{2}-\d{2}$/.test(iso) ? new Date(`${iso}T00:00:00Z`) : new Date(iso);
+	return d.toUTCString();
+}
+
+export function buildRss(opts: {
+	baseUrl: URL;
+	posts: BlogPost[];
+	siteTitle: string;
+	description: string;
+	maxItems?: number;
+}) {
+	const siteLink = new URL('/blog', opts.baseUrl).toString();
+	const selfLink = new URL('/feed.xml', opts.baseUrl).toString();
+	const maxItems = Math.max(1, Math.min(200, opts.maxItems ?? 50));
+
+	const items = opts.posts
+		.slice(0, maxItems)
+		.map((post) => {
+			const link = new URL(`/blog/${post.slug}`, opts.baseUrl).toString();
+			return [
+				'<item>',
+				`<title>${escapeXml(post.title)}</title>`,
+				`<description>${escapeXml(post.excerpt)}</description>`,
+				`<link>${escapeXml(link)}</link>`,
+				`<guid isPermaLink="true">${escapeXml(link)}</guid>`,
+				`<pubDate>${escapeXml(toPubDate(post.date))}</pubDate>`,
+				`<category>${escapeXml(post.category.label)}</category>`,
+				`<author>${escapeXml(post.author.name)}</author>`,
+				'</item>'
+			].join('');
+		})
+		.join('');
+
+	return `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>${escapeXml(opts.siteTitle)}</title>
+    <link>${escapeXml(siteLink)}</link>
+    <atom:link href="${escapeXml(selfLink)}" rel="self" type="application/rss+xml" />
+    <description>${escapeXml(opts.description)}</description>
+    <language>en-us</language>
+    ${items}
+  </channel>
+</rss>`;
+}
+

package/src/lib/server/seo.ts

@@ -0,0 +1,31 @@
+import type { BlogPost } from '$lib/types/blog';
+
+export type PostSeo = {
+	title: string;
+	description: string;
+	canonicalUrl: string;
+	og: {
+		title: string;
+		description: string;
+		type: 'article';
+		url: string;
+	};
+};
+
+export function buildPostSeo(post: BlogPost, canonicalUrl: string): PostSeo {
+	const title = `${post.title} | svelta Blog`;
+	const description = post.excerpt;
+
+	return {
+		title,
+		description,
+		canonicalUrl,
+		og: {
+			title: post.title,
+			description,
+			type: 'article',
+			url: canonicalUrl
+		}
+	};
+}
+

package/src/lib/stores/theme.ts

@@ -0,0 +1,10 @@
+import { createThemeController, type ThemeController, type ThemeMode } from '@aureuma/blogkit/theme';
+
+// Keep the storage key stable for this app (also used in `src/app.html`).
+export const theme: ThemeController = createThemeController({ storageKey: 'svelta-theme' });
+
+export const themeMode = theme.themeMode;
+export const initTheme = theme.initTheme;
+export const setThemeMode = theme.setThemeMode;
+
+export type { ThemeMode };

package/src/lib/types/blog.ts

@@ -0,0 +1 @@
+export type { BlogAuthor, BlogCategory, BlogPost, BlogPostFull } from '@aureuma/blogkit';

package/src/routes/+layout.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import favicon from '$lib/assets/favicon.svg';
+	import '@fontsource/inter/400.css';
+	import '@fontsource/inter/500.css';
+	import '@fontsource/inter/600.css';
+	import '@fontsource/geist-mono/400.css';
+	import '@fontsource/geist-mono/500.css';
+	import '../app.css';
+	import SiteFooter from '$lib/components/site/SiteFooter.svelte';
+	import SiteHeader from '$lib/components/site/SiteHeader.svelte';
+	import { initTheme } from '$lib/stores/theme';
+	import { onMount } from 'svelte';
+
+	let { children } = $props();
+
+	onMount(() => {
+		const cleanup = initTheme();
+		return cleanup;
+	});
+</script>
+
+<svelte:head>
+	<link rel="icon" href={favicon} />
+	<link rel="alternate" type="application/rss+xml" title="svelta Blog" href="/feed.xml" />
+</svelte:head>
+
+<div class="min-h-dvh bg-background-main text-text-main">
+	<SiteHeader />
+	<main class="flex-1">{@render children()}</main>
+	<SiteFooter />
+</div>

package/src/routes/+page.svelte

@@ -0,0 +1,44 @@
+<section class="mx-auto w-full max-w-5xl px-6 py-20">
+	<div class="max-w-2xl">
+		<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">svelta</p>
+		<h1 class="mt-3 text-4xl font-semibold leading-[44px] tracking-[-0.8px]">
+			A Mintlify-inspired blog system, built in SvelteKit.
+		</h1>
+		<p class="mt-4 text-base leading-6 text-text-sub">
+			Markdown posts, Shiki code highlighting, tag filtering, infinite scroll, author profiles, share
+			widgets, AI summary cards, and an RSS feed.
+		</p>
+
+		<div class="mt-8 flex items-center gap-3">
+			<a
+				href="/blog"
+				class="inline-flex items-center justify-center rounded-full bg-text-main px-5 py-2 text-sm font-medium text-text-invert transition hover:opacity-90"
+			>
+				Go to Blog
+			</a>
+			<a
+				href="/feed.xml"
+				class="inline-flex items-center justify-center rounded-full border border-border-soft/15 bg-background-soft px-5 py-2 text-sm font-medium text-text-main transition hover:bg-background-main/60"
+			>
+				RSS Feed
+			</a>
+		</div>
+	</div>
+
+	<div class="mt-16 grid grid-cols-1 gap-5 md:grid-cols-2">
+		<div class="rounded-3xl border border-border-soft/10 bg-background-soft p-8">
+			<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">Design</p>
+			<p class="mt-2 text-lg font-medium tracking-tight">Proportions first</p>
+			<p class="mt-2 text-sm leading-6 text-text-sub">
+				Containers, spacing, and typography scale tuned to match the Mintlify blog’s feel.
+			</p>
+		</div>
+		<div class="rounded-3xl border border-border-soft/10 bg-background-soft p-8">
+			<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">Engineering</p>
+			<p class="mt-2 text-lg font-medium tracking-tight">Fast content pipeline</p>
+			<p class="mt-2 text-sm leading-6 text-text-sub">
+				mdsvex + Shiki + reading-time on the server, with incremental loading on the client.
+			</p>
+		</div>
+	</div>
+</section>

package/src/routes/blog/+page.server.ts

@@ -0,0 +1,28 @@
+import { getAllPosts, getCategories, pickHero } from '$lib/server/blog';
+import type { PageServerLoad } from './$types';
+
+const PAGE_SIZE = 8;
+
+export const load: PageServerLoad = async ({ url }) => {
+	const [all, categories] = await Promise.all([getAllPosts(), getCategories()]);
+	const hero = await pickHero(all);
+
+	const selected = url.searchParams.get('category') ?? '';
+	const validSelected = selected && categories.some((c) => c.slug === selected) ? selected : '';
+
+	const rest = all.filter((p) => p.slug !== hero.slug);
+	const filtered = validSelected ? rest.filter((p) => p.category.slug === validSelected) : rest;
+
+	const initialPosts = filtered.slice(0, PAGE_SIZE);
+
+	return {
+		hero,
+		categories,
+		selectedCategory: validSelected,
+		initialPosts,
+		pageSize: PAGE_SIZE,
+		hasMore: filtered.length > initialPosts.length,
+		total: filtered.length
+	};
+};
+

package/src/routes/blog/+page.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { BlogCard, BlogHeroCard, Container, TagTabs } from '@aureuma/blogkit';
+	import type { BlogPost } from '$lib/types/blog';
+	import { onMount } from 'svelte';
+
+	let { data } = $props<{
+		data: {
+			hero: BlogPost;
+			categories: { label: string; slug: string }[];
+			selectedCategory: string;
+			initialPosts: BlogPost[];
+			pageSize: number;
+			hasMore: boolean;
+			total: number;
+		};
+	}>();
+
+	let posts = $state<BlogPost[]>([]);
+	let offset = $state(0);
+	let hasMore = $state(false);
+	let loading = $state(false);
+	let sentinel: HTMLDivElement | null = $state(null);
+
+	$effect(() => {
+		posts = data.initialPosts;
+		offset = data.initialPosts.length;
+		hasMore = data.hasMore;
+		loading = false;
+	});
+
+	function selectCategory(slug: string) {
+		const u = new URL($page.url);
+		if (!slug) u.searchParams.delete('category');
+		else u.searchParams.set('category', slug);
+		goto(`${u.pathname}${u.searchParams.toString() ? `?${u.searchParams.toString()}` : ''}`);
+	}
+
+	async function loadMore() {
+		if (!hasMore || loading) return;
+		loading = true;
+
+		const u = new URL('/blog/posts.json', $page.url.origin);
+		u.searchParams.set('offset', String(offset));
+		u.searchParams.set('limit', String(data.pageSize));
+		if (data.selectedCategory) u.searchParams.set('category', data.selectedCategory);
+
+		const res = await fetch(u);
+		if (!res.ok) {
+			loading = false;
+			return;
+		}
+
+		const payload = (await res.json()) as { posts: BlogPost[]; hasMore: boolean };
+		posts = [...posts, ...payload.posts];
+		offset += payload.posts.length;
+		hasMore = payload.hasMore;
+		loading = false;
+	}
+
+	onMount(() => {
+		if (!sentinel) return;
+		const io = new IntersectionObserver(
+			(entries) => {
+				if (entries.some((e) => e.isIntersecting)) loadMore();
+			},
+			{ rootMargin: '800px 0px' }
+		);
+		io.observe(sentinel);
+		return () => io.disconnect();
+	});
+</script>
+
+<Container>
+	<BlogHeroCard post={data.hero} />
+
+	<div class="flex items-center justify-between gap-4">
+		<div class="min-w-0 flex-1">
+			<TagTabs
+				categories={data.categories}
+				selected={data.selectedCategory}
+				onSelect={selectCategory}
+			/>
+		</div>
+
+		<a
+			href="/feed.xml"
+			class="inline-flex size-9 shrink-0 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"
+			aria-label="RSS feed"
+		>
+			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+				<path
+					fill="currentColor"
+					d="M6.18 17.82a2.18 2.18 0 1 1 0 4.36 2.18 2.18 0 0 1 0-4.36ZM2 8.5v3.1c5.7 0 10.4 4.7 10.4 10.4h3.1C15.5 14.6 9.4 8.5 2 8.5Zm0-6v3.1c9.1 0 16.4 7.3 16.4 16.4H22C22 11.2 12.8 2 2 2Z"
+				/>
+			</svg>
+		</a>
+	</div>
+
+	<section class="pb-32 pt-8">
+		<div class="grid grid-cols-1 gap-x-5 gap-y-12 md:grid-cols-2">
+			{#if posts.length === 0}
+				<p class="text-sm leading-6 text-text-sub">No posts in this category yet.</p>
+			{:else}
+				{#each posts as post (post.slug)}
+					<BlogCard post={post} />
+				{/each}
+			{/if}
+		</div>
+
+		<div class="mt-16 flex items-center justify-center">
+			<div bind:this={sentinel} class="h-10 w-full" aria-hidden="true"></div>
+		</div>
+
+		{#if loading}
+			<p class="mt-6 text-center text-xs font-mono uppercase tracking-[0.6px] text-text-muted">
+				Loading…
+			</p>
+		{/if}
+	</section>
+</Container>

package/src/routes/blog/[slug]/+page.server.ts

@@ -0,0 +1,39 @@
+import { getAllPosts, getPostBySlug } from '$lib/server/blog';
+import { buildPostSeo } from '$lib/server/seo';
+import { error } from '@sveltejs/kit';
+import { render } from 'svelte/server';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params, url }) => {
+	const found = await getPostBySlug(params.slug);
+	if (!found) throw error(404, 'Post not found');
+
+	const { component, ...post } = found;
+	const rendered = render(component);
+
+	const all = await getAllPosts();
+	const candidates = all.filter((p) => p.slug !== post.slug);
+
+	const sameCategory = candidates.filter((p) => p.category.slug === post.category.slug);
+	const morePosts: typeof candidates = [];
+
+	for (const p of sameCategory) {
+		if (morePosts.length >= 2) break;
+		morePosts.push(p);
+	}
+	for (const p of candidates) {
+		if (morePosts.length >= 2) break;
+		if (morePosts.some((x) => x.slug === p.slug)) continue;
+		morePosts.push(p);
+	}
+
+	const canonicalUrl = new URL(`/blog/${post.slug}`, url).toString();
+
+	return {
+		post,
+		contentHtml: rendered.html,
+		morePosts,
+		canonicalUrl,
+		seo: buildPostSeo(post, canonicalUrl)
+	};
+};