@aureuma/svelta 0.0.1

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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,36 @@
+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

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

package/packages/blogkit/tsconfig.json

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

package/playwright.config.ts

@@ -0,0 +1,24 @@
+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

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

package/src/app.css

@@ -0,0 +1,146 @@
+@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

@@ -0,0 +1,13 @@
+// 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

@@ -0,0 +1,26 @@
+<!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

@@ -0,0 +1,32 @@
+---
+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

@@ -0,0 +1,19 @@
+---
+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
+

package/src/content/blog/best-practices-ship-with-checklists.md

@@ -0,0 +1,26 @@
+---
+title: "Best Practices: Ship With Checklists"
+date: "2026-01-25"
+category: "Best practices"
+author: "maria"
+cover: "/blog/covers/rss.svg"
+tags:
+  - "Quality"
+  - "Process"
+excerpt: "If something matters, put it in a checklist. Then automate the boring parts."
+---
+
+Checklists aren’t bureaucracy. They’re a compression format for your standards.
+
+## A tiny publishing checklist
+
+- Title is clear and specific
+- Cover image is present and readable
+- Excerpt is 1–2 sentences
+- Code blocks are highlighted
+- A “more posts” section exists
+
+## Bonus
+
+Use RSS to distribute without algorithms.
+

package/src/content/blog/building-a-mintlify-inspired-blog.md

@@ -0,0 +1,49 @@
+---
+title: "Building a Mintlify-Inspired Blog in SvelteKit"
+date: "2026-02-08"
+category: "Engineering"
+author: "shawn"
+cover: "/blog/covers/mintlify-style.svg"
+featured: true
+tags:
+  - "SvelteKit"
+  - "mdsvex"
+  - "Tailwind"
+excerpt: "A practical blueprint for a Mintlify-inspired blog: proportions, theming, Markdown rendering, reading-time, share widgets, infinite scroll, and RSS."
+summaryAI: "We mirror Mintlify’s blog *system* (not its assets): fixed-width containers, hero+grid index, pill category tabs, a two-column post layout with a sticky author/share rail on desktop, Shiki-highlighted Markdown, reading-time labels, framed images, bottom recommendations, and an RSS feed. The implementation is SvelteKit-first: mdsvex for Markdown, Tailwind tokens for theming, and a JSON pagination endpoint for infinite scroll."
+---
+
+This post documents the structure we’re building: a blog that *feels* like Mintlify’s in layout and typographic rhythm, while remaining our own code + assets.
+
+## What “Mintlify-inspired” means
+
+It’s mainly about **placement and proportions**:
+
+- A large **hero card** on the index, followed by a tag bar and a two-column grid
+- Post pages that use a **narrow reading column** with a sticky right rail (desktop)
+- Small mono uppercase metadata: category + reading-time + date
+
+## The content pipeline
+
+We use Markdown for content, but we want code blocks to look like “real UI”. That means Shiki.
+
+```ts
+// src/lib/server/blog.ts
+import readingTime from "reading-time";
+
+const minutes = Math.max(1, Math.round(readingTime(markdown).minutes));
+```
+
+## A tiny checklist
+
+| Feature | Why it matters |
+| --- | --- |
+| Category pills | Fast scanning |
+| AI summary card | Better “skim” mode |
+| Sticky share rail | Share UX without interrupting reading |
+| RSS feed | Works in every reader |
+
+## Next
+
+In the following posts we’ll break down each part (tabs, infinite scroll, Markdown, RSS) into its own implementation.
+

package/src/content/blog/design-tokens-that-scale.md

@@ -0,0 +1,47 @@
+---
+title: "Design Tokens That Scale (Without Getting Mushy)"
+date: "2026-02-06"
+category: "Design"
+author: "maria"
+cover: "/blog/covers/design-tokens.svg"
+tags:
+  - "Design Systems"
+  - "Theming"
+excerpt: "A small, opinionated token set that keeps contrast crisp across light/dark, while preserving the Mintlify-like quiet UI."
+summaryAI: "Use a tiny set of semantic tokens: `background.main/soft`, `text.main/sub/muted`, `border.soft`, and `brand`. Map them to CSS variables on `html.light`/`html.dark`, then reference them via Tailwind colors. Keep borders extremely subtle and reserve the brand color for metadata accents."
+---
+
+Mintlify’s blog looks “clean” because everything is token-driven and low-noise.
+
+## Token strategy
+
+We intentionally keep the token set small:
+
+- `background.main`, `background.soft`
+- `text.main`, `text.sub`, `text.muted`
+- `border.soft`
+- `brand`
+
+## Why “soft borders” matter
+
+When borders are too strong, the UI becomes a spreadsheet. The goal is to have frames that are visible *only when you’re looking for them*.
+
+## Tailwind mapping
+
+We map CSS variables to Tailwind colors so components stay readable:
+
+```js
+// tailwind.config.cjs
+colors: {
+  background: {
+    main: "rgb(var(--c-background-main) / <alpha-value>)",
+    soft: "rgb(var(--c-background-soft) / <alpha-value>)",
+  },
+}
+```
+
+## In-content images
+
+We frame every in-article image with a subtle 1px border and a 10px radius to match the overall “rounded media” identity:
+
+![Framed example](/blog/covers/design-tokens.svg)

package/src/content/blog/for-founders-why-speed-matters.md

@@ -0,0 +1,23 @@
+---
+title: "For Founders: Why Speed Matters More Than You Think"
+date: "2026-01-28"
+category: "For founders"
+author: "alex"
+cover: "/blog/covers/infinite-scroll.svg"
+tags:
+  - "Product"
+  - "Strategy"
+excerpt: "Shipping faster isn’t about heroics. It’s about removing friction everywhere: tooling, content, and communication."
+summaryAI: "Speed compounds when you remove tiny blockers: slow builds, unclear docs, non-skimmable posts, and missing distribution channels like RSS. A blog that’s easy to publish and easy to read reduces context-switch costs for your team and your audience."
+---
+
+If you’re building a product, your blog isn’t “marketing”. It’s a leverage tool.
+
+## The compounding effect
+
+Small improvements in clarity and publishing speed add up:
+
+- fewer repeated explanations
+- faster onboarding
+- better customer self-serve
+

package/src/content/blog/infinite-scroll-with-intersection-observer.md

@@ -0,0 +1,37 @@
+---
+title: "Infinite Scroll With IntersectionObserver (Without Jank)"
+date: "2026-02-05"
+category: "Engineering"
+author: "alex"
+cover: "/blog/covers/infinite-scroll.svg"
+tags:
+  - "Performance"
+  - "Svelte"
+excerpt: "Mintlify-style content loading: a paginated JSON endpoint plus a sentinel at the bottom of the grid."
+summaryAI: "Render the first page on the server for SEO, then append pages on the client using an `IntersectionObserver` watching a sentinel div. The endpoint should accept `offset`, `limit`, and `category`, and it should exclude the hero post to avoid duplicates."
+---
+
+The Mintlify blog index loads more cards as you scroll. There’s no “Load more” button.
+
+## The shape of the API
+
+We keep it simple:
+
+```http
+GET /blog/posts.json?offset=8&limit=8&category=engineering
+```
+
+## The sentinel pattern
+
+```ts
+const io = new IntersectionObserver(([entry]) => {
+  if (entry.isIntersecting) loadMore();
+});
+
+io.observe(sentinel);
+```
+
+## Optional: virtualization
+
+If you ever have thousands of posts, add virtualization. Until then, pagination is enough.
+

package/src/content/blog/markdown-kitchen-sink.md

@@ -0,0 +1,101 @@
+---
+title: "Markdown Kitchen Sink (Rendering QA)"
+date: "2026-02-08"
+category: "Engineering"
+author: "alex"
+cover: "/blog/covers/kitchen-sink.svg"
+tags:
+  - "Markdown"
+  - "QA"
+excerpt: "A deliberately dense post to validate typography, spacing, tables, lists, code blocks, images, and edge cases in our Markdown renderer."
+summaryAI: "This post exists to stress-test Markdown rendering: tables should scroll on mobile, code blocks should be readable in light/dark mode, headings should get anchors, and images should look framed and open in the lightbox."
+---
+
+This post is intentionally packed. It is here to catch layout regressions before real content does.
+
+## Headings and anchors
+
+If you hover headings on desktop, you should see a subtle `#` anchor indicator.
+
+### A smaller heading
+
+Anchors should not shift layout, and scroll margins should land nicely below the sticky header.
+
+## Lists (including nesting)
+
+- One
+- Two
+  - Two.A
+  - Two.B
+- Three
+
+1. First
+2. Second
+   1. Second.A
+   2. Second.B
+3. Third
+
+Task list (GFM):
+
+- [x] Basic list spacing
+- [x] Nested list spacing
+- [ ] Task lists render correctly
+
+## Blockquotes
+
+> A blockquote should feel like a callout: a soft left border, readable spacing, and no weird quote marks.
+>
+> Multiple paragraphs should keep the border and spacing intact.
+
+## Inline formatting
+
+This has **bold**, *italic*, ~~strikethrough~~, and `inline code`.
+
+Long URL wrapping should not overflow:
+https://example.com/a/really/really/really/really/really/really/really/long/path?with=query&and=more
+
+## Tables (GFM)
+
+| Column | Description | Notes |
+| --- | --- | --- |
+| Tags | Category pills on `/blog` | Scrollable on mobile |
+| RSS | `/feed.xml` | Auto-discoverable via `<link rel="alternate">` |
+| Share | X / LinkedIn / Facebook / Copy | Sticky rail on desktop |
+
+Tables should be horizontally scrollable on narrow screens.
+
+## Code blocks (Shiki)
+
+```ts
+type PostFrontmatter = {
+  title: string;
+  date: string; // YYYY-MM-DD
+  category: string;
+  author: string;
+  cover: string;
+  excerpt?: string;
+  summaryAI?: string;
+  tags?: string[];
+  featured?: boolean;
+};
+```
+
+```svelte
+{#if post.summaryAI}
+  <SummaryCard summary={post.summaryAI} />
+{/if}
+```
+
+## Images (frame + lightbox)
+
+Click the image to open the lightbox.
+
+![RSS cover used as an in-article graphic](/blog/covers/rss.svg)
+
+## Horizontal rule
+
+---
+
+## Final note
+
+If something looks wrong here, it will look wrong everywhere. Fix it here first.