peekmd 1.1.0 → 2.0.0

package/README.md

@@ -12,9 +12,11 @@ A CLI tool to preview markdown files with GitHub-style rendering in your browser
 - GitHub Flavored Markdown (GFM) rendering
 - Syntax highlighting for code blocks
 - GitHub-style alerts (`[!NOTE]`, `[!TIP]`, `[!WARNING]`, `[!IMPORTANT]`, `[!CAUTION]`)
+- Mermaid diagram rendering
 - Task lists with checkboxes
 - Anchor links on headings
 - File tree sidebar
+- Dark mode support
 - Opens in your default browser automatically
 - Auto-closes when you close the browser tab
 - Cross-platform: macOS, Linux, Windows
@@ -161,6 +163,24 @@ bun run format
 bun run compile
 ```
 
+## Testing
+
+```bash
+# Run all tests
+bun test
+
+# Run visual regression tests
+bun test:visual
+
+# Update visual baselines (after intentional UI changes)
+bun test:visual:update
+
+# Run visual tests without GitHub gist comparison (faster)
+bun test:visual:local
+```
+
+Visual regression tests capture screenshots across multiple viewports (desktop, tablet, mobile) and color modes (light, dark) to ensure consistent rendering.
+
 ## Why Bun?
 
 peekmd uses Bun's built-in HTTP server (`Bun.serve()`) for its simplicity and performance. This means:

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "peekmd",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Quick markdown file previewer that looks like your GitHub README. Requires Bun.",
   "type": "module",
-  "main": "./index.ts",
+  "main": "./src/index.ts",
   "bin": {
-    "peekmd": "./cli.ts"
+    "peekmd": "src/cli.ts"
   },
   "files": [
-    "cli.ts",
-    "index.ts"
+    "src"
   ],
   "scripts": {
-    "dev": "bun run ./cli.ts README.md",
-    "compile": "bun build ./cli.ts --compile --outfile peekmd",
+    "dev": "bun run ./src/cli.ts README.md",
+    "test:manual": "bun run ./src/cli.ts tests/fixtures/kitchen-sink.md",
+    "compile": "bun build ./src/cli.ts --compile --minify --bytecode --outfile peekmd",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
+    "test:coverage": "bun test --coverage",
+    "test:visual": "bun test tests/visual/",
+    "test:visual:update": "UPDATE_BASELINES=true bun test tests/visual/",
+    "test:visual:local": "SKIP_GIST_COMPARISON=true bun test tests/visual/",
     "format": "bunx prettier --write .",
     "sort": "bunx sort-package-json"
   },
@@ -38,9 +44,14 @@
   "homepage": "https://github.com/HelgeSverre/peekmd#readme",
   "dependencies": {
     "highlight.js": "^11.11.1",
-    "marked": "^17.0.1"
+    "markdown-it": "^14.0.0",
+    "markdown-it-footnote": "^4.0.0"
   },
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "latest",
+    "@types/pixelmatch": "^5.2.6",
+    "pixelmatch": "^6.0.0",
+    "playwright": "^1.50.0",
+    "pngjs": "^7.0.0"
   }
 }

package/src/cli.ts

@@ -0,0 +1,63 @@
+#!/usr/bin/env bun
+import { existsSync } from "fs";
+import { extname, dirname, resolve, sep } from "path";
+import { createServer, type ServerState } from "./server/index.ts";
+import { showToast, openBrowser } from "./utils/browser.ts";
+import { getDirName, getRelativePath, getFilename } from "./utils/paths.ts";
+
+export async function main(): Promise<void> {
+  const args = process.argv.slice(2);
+
+  if (args.length === 0) {
+    console.log("Usage: peekmd <file.md>");
+    console.log(
+      "  Opens a GitHub-style preview of a markdown file in your default browser.",
+    );
+    process.exit(1);
+  }
+
+  const filePath = resolve(args[0]);
+
+  if (!existsSync(filePath)) {
+    console.error(`Error: File not found: ${filePath}`);
+    process.exit(1);
+  }
+
+  const ext = extname(filePath).toLowerCase();
+  if (ext !== ".md" && ext !== ".markdown" && ext !== ".mdown") {
+    console.warn(`Warning: File '${filePath}' may not be a markdown file.`);
+  }
+
+  const content = await Bun.file(filePath).text();
+  const filename = getFilename(filePath);
+  const repoName = getDirName(filePath);
+  const dirPath = getRelativePath(filePath) || "";
+  const markdownDir = dirname(filePath);
+
+  const port = 3456;
+  const state: ServerState = { server: null, isOpen: false };
+
+  const server = createServer(
+    {
+      port,
+      filename,
+      content,
+      repoName,
+      dirPath,
+      markdownDir,
+    },
+    state,
+  );
+
+  const url = `http://localhost:${port}`;
+  showToast(`Serving ${filename} at ${url}`);
+  showToast("Press ESC or close this window to exit.");
+
+  await openBrowser(url);
+  state.isOpen = true;
+}
+
+main().catch((err) => {
+  console.error("Error:", err);
+  process.exit(1);
+});

package/src/index.ts

@@ -0,0 +1,39 @@
+// Public API exports
+export {
+  renderMarkdown,
+  createParser,
+  extractDescription,
+  extractTopics,
+} from "./markdown/parser.ts";
+export {
+  processAlerts,
+  ALERT_ICONS,
+  type AlertType,
+} from "./markdown/plugins/alerts.ts";
+export { slugify } from "./markdown/plugins/anchors.ts";
+export { highlightCode } from "./markdown/plugins/highlight.ts";
+
+export {
+  getFileTree,
+  renderFileTree,
+  formatSize,
+  type FileNode,
+} from "./utils/file-tree.ts";
+export {
+  getDirName,
+  getRelativePath,
+  getFilename,
+  isMarkdownFile,
+  getContentType,
+  resolveAssetPath,
+} from "./utils/paths.ts";
+export { showToast, openBrowser } from "./utils/browser.ts";
+
+export {
+  createServer,
+  type ServerOptions,
+  type ServerState,
+} from "./server/index.ts";
+export { getHtml, type TemplateData } from "./template/html.ts";
+
+export { main } from "./cli.ts";

package/src/markdown/parser.ts

@@ -0,0 +1,95 @@
+import MarkdownIt from "markdown-it";
+import footnotePlugin from "markdown-it-footnote";
+import { createHighlightPlugin } from "./plugins/highlight.ts";
+import { createAnchorsPlugin } from "./plugins/anchors.ts";
+import { createMermaidPlugin } from "./plugins/mermaid.ts";
+import { createTaskListPlugin } from "./plugins/tasks.ts";
+import { createStrikethroughPlugin } from "./plugins/strikethrough.ts";
+import { processAlerts } from "./plugins/alerts.ts";
+
+export interface ParserOptions {
+  html?: boolean;
+  linkify?: boolean;
+  typographer?: boolean;
+}
+
+export function createParser(options: ParserOptions = {}): MarkdownIt {
+  const md = new MarkdownIt({
+    html: options.html ?? true,
+    linkify: options.linkify ?? true,
+    typographer: options.typographer ?? false,
+    breaks: false,
+  });
+
+  // Apply plugins
+  md.use(createHighlightPlugin());
+  md.use(createMermaidPlugin());
+  md.use(createTaskListPlugin());
+  md.use(createStrikethroughPlugin());
+  md.use(footnotePlugin);
+  md.use(createAnchorsPlugin());
+
+  return md;
+}
+
+export function renderMarkdown(
+  content: string,
+  options?: ParserOptions,
+): string {
+  const md = createParser(options);
+  let html = md.render(content);
+  html = processAlerts(html);
+  return html;
+}
+
+export function extractDescription(content: string): string {
+  const lines = content.split("\n");
+  let foundHeading = false;
+  let description = "";
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith("#")) {
+      foundHeading = true;
+      continue;
+    }
+    // Skip non-text content
+    if (
+      !foundHeading ||
+      !trimmed ||
+      trimmed.startsWith("#") ||
+      trimmed.startsWith("-") ||
+      trimmed.startsWith("*") ||
+      trimmed.startsWith("`") ||
+      trimmed.startsWith("!") || // Images
+      trimmed.startsWith("|") || // Tables
+      trimmed.startsWith(">") || // Blockquotes
+      trimmed.startsWith("[!") || // Alerts
+      /^\d+\./.test(trimmed) || // Ordered lists
+      /^</.test(trimmed) || // HTML tags
+      /^\[.*\]:/.test(trimmed) // Reference links
+    ) {
+      continue;
+    }
+
+    // Found a text paragraph - extract it
+    description = trimmed
+      .replace(/!\[([^\]]*)\]\([^)]+\)/g, "") // Remove images
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1") // Convert links to text
+      .replace(/\*\*([^*]+)\*\*/g, "$1") // Remove bold
+      .replace(/\*([^*]+)\*/g, "$1") // Remove italic
+      .replace(/`([^`]+)`/g, "$1") // Remove inline code
+      .replace(/\s+/g, " ") // Normalize whitespace
+      .trim();
+
+    if (description) {
+      break;
+    }
+  }
+
+  return description || "No description provided.";
+}
+
+export function extractTopics(_repoName: string): string[] {
+  return ["markdown", "preview", "documentation"];
+}

package/src/markdown/plugins/alerts.ts

@@ -0,0 +1,42 @@
+export type AlertType = "note" | "tip" | "important" | "warning" | "caution";
+
+export const ALERT_ICONS: Record<AlertType, string> = {
+  note: '<svg viewBox="0 0 16 16" width="16" height="16"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>',
+  tip: '<svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>',
+  important:
+    '<svg viewBox="0 0 16 16" width="16" height="16"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',
+  warning:
+    '<svg viewBox="0 0 16 16" width="16" height="16"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',
+  caution:
+    '<svg viewBox="0 0 16 16" width="16" height="16"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>',
+};
+
+const ALERT_TYPES = ["note", "tip", "important", "warning", "caution"] as const;
+
+export function processAlerts(html: string): string {
+  const alertBlockRegex = /<blockquote>([\s\S]*?)<\/blockquote>/gi;
+  const alertPrefixRegex =
+    /^\s*<p>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\](?:<br\s*\/?>(?:\s*)?|\s)*/i;
+
+  return html.replace(alertBlockRegex, (match, inner) => {
+    const prefixMatch = inner.match(alertPrefixRegex);
+    if (!prefixMatch) {
+      return match;
+    }
+
+    const typeKey = prefixMatch[1].toLowerCase() as AlertType;
+    const icon = ALERT_ICONS[typeKey] || "";
+    const title =
+      prefixMatch[1].charAt(0) + prefixMatch[1].slice(1).toLowerCase();
+    const cleanedContent = inner.replace(alertPrefixRegex, "<p>").trim();
+
+    return `<div class="markdown-alert markdown-alert-${typeKey}">
+      <p class="markdown-alert-title">${icon}${title}</p>
+      ${cleanedContent}
+    </div>`;
+  });
+}
+
+export function isAlertType(type: string): type is AlertType {
+  return ALERT_TYPES.includes(type as AlertType);
+}

package/src/markdown/plugins/anchors.ts

@@ -0,0 +1,51 @@
+import type MarkdownIt from "markdown-it";
+import type StateCore from "markdown-it/lib/rules_core/state_core.mjs";
+import type Token from "markdown-it/lib/token.mjs";
+
+export function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/<[^>]*>/g, "")
+    .replace(/[^\w\s-]/g, "")
+    .replace(/\s+/g, "-");
+}
+
+const ANCHOR_ICON = `<svg class="octicon" viewBox="0 0 16 16" width="16" height="16"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg>`;
+
+export function createAnchorsPlugin(): (md: MarkdownIt) => void {
+  return (md: MarkdownIt) => {
+    md.core.ruler.push("github_anchors", (state: StateCore) => {
+      const tokens = state.tokens;
+
+      for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        if (token.type === "heading_open") {
+          const inlineToken = tokens[i + 1];
+          if (inlineToken && inlineToken.type === "inline") {
+            const text = getHeadingText(inlineToken.children || []);
+            const slug = slugify(text);
+
+            // Add id to heading
+            token.attrSet("id", slug);
+
+            // Prepend anchor link to content
+            const anchorHtml = `<a class="anchor" href="#${slug}">${ANCHOR_ICON}</a>`;
+            if (inlineToken.children && inlineToken.children.length > 0) {
+              const anchorToken = new state.Token("html_inline", "", 0);
+              anchorToken.content = anchorHtml;
+              inlineToken.children.unshift(anchorToken);
+            }
+          }
+        }
+      }
+    });
+  };
+}
+
+function getHeadingText(tokens: Token[]): string {
+  return tokens
+    .filter((t) => t.type === "text" || t.type === "code_inline")
+    .map((t) => t.content)
+    .join("");
+}

package/src/markdown/plugins/highlight.ts

@@ -0,0 +1,21 @@
+import hljs from "highlight.js";
+import type MarkdownIt from "markdown-it";
+
+export function highlightCode(code: string, language: string): string {
+  if (language && hljs.getLanguage(language)) {
+    try {
+      return hljs.highlight(code, { language }).value;
+    } catch {
+      // Fall through to auto-highlight
+    }
+  }
+  return hljs.highlightAuto(code).value;
+}
+
+export function createHighlightPlugin(): (md: MarkdownIt) => void {
+  return (md: MarkdownIt) => {
+    md.options.highlight = (code: string, lang: string): string => {
+      return highlightCode(code, lang);
+    };
+  };
+}

package/src/markdown/plugins/mermaid.ts

@@ -0,0 +1,33 @@
+import type MarkdownIt from "markdown-it";
+
+export function createMermaidPlugin(): (md: MarkdownIt) => void {
+  return (md: MarkdownIt) => {
+    const defaultFence =
+      md.renderer.rules.fence ||
+      ((tokens, idx, options, env, self) =>
+        self.renderToken(tokens, idx, options));
+
+    md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+      const token = tokens[idx];
+      const info = token.info.trim();
+
+      if (info === "mermaid") {
+        // Don't escape mermaid content - it's parsed by mermaid.js, not rendered as HTML
+        // The content is plain text diagram definitions (arrows like --> would break if escaped)
+        const code = token.content.trim();
+        return `<pre class="mermaid">${code}</pre>\n`;
+      }
+
+      return defaultFence(tokens, idx, options, env, self);
+    };
+  };
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}

package/src/markdown/plugins/strikethrough.ts

@@ -0,0 +1,96 @@
+import type MarkdownIt from "markdown-it";
+import type StateInline from "markdown-it/lib/rules_inline/state_inline.mjs";
+
+export function createStrikethroughPlugin(): (md: MarkdownIt) => void {
+  return (md: MarkdownIt) => {
+    md.inline.ruler.before("emphasis", "strikethrough", strikethroughTokenize);
+    md.inline.ruler2.before(
+      "emphasis",
+      "strikethrough",
+      strikethroughPostProcess,
+    );
+  };
+}
+
+function strikethroughTokenize(state: StateInline, silent: boolean): boolean {
+  const start = state.pos;
+  const max = state.posMax;
+  const marker = state.src.charCodeAt(start);
+
+  if (marker !== 0x7e /* ~ */) return false;
+  if (start + 1 >= max || state.src.charCodeAt(start + 1) !== 0x7e)
+    return false;
+
+  if (silent) return false;
+
+  const scanned = state.scanDelims(start, true);
+  if (scanned.length < 2) return false;
+
+  const count = scanned.length;
+  const token = state.push("text", "", 0);
+  token.content = "~".repeat(count);
+
+  state.delimiters.push({
+    marker: 0x7e,
+    length: count,
+    token: state.tokens.length - 1,
+    end: -1,
+    open: scanned.can_open,
+    close: scanned.can_close,
+  });
+
+  state.pos += count;
+  return true;
+}
+
+function strikethroughPostProcess(state: StateInline): boolean {
+  const delimiters = state.delimiters;
+  const max = delimiters.length;
+
+  // Find matching pairs
+  for (let i = max - 1; i >= 0; i--) {
+    const startDelim = delimiters[i];
+    if (startDelim.marker !== 0x7e || !startDelim.open) continue;
+
+    for (let j = i + 1; j < max; j++) {
+      const endDelim = delimiters[j];
+      if (endDelim.marker !== 0x7e || !endDelim.close || endDelim.end !== -1)
+        continue;
+
+      // Found a pair
+      const startToken = state.tokens[startDelim.token];
+      const endToken = state.tokens[endDelim.token];
+
+      startToken.type = "s_open";
+      startToken.tag = "s";
+      startToken.nesting = 1;
+      startToken.markup = "~~";
+      startToken.content = "";
+
+      endToken.type = "s_close";
+      endToken.tag = "s";
+      endToken.nesting = -1;
+      endToken.markup = "~~";
+      endToken.content = "";
+
+      // Handle extra tildes
+      if (startDelim.length > 2) {
+        startToken.content = "~".repeat(startDelim.length - 2);
+        state.tokens.splice(startDelim.token, 0, {
+          ...startToken,
+          type: "text",
+          tag: "",
+          nesting: 0,
+          markup: "",
+          content: "~".repeat(startDelim.length - 2),
+        } as any);
+      }
+
+      startDelim.end = j;
+      endDelim.end = i;
+      break;
+    }
+  }
+
+  return true;
+}

package/src/markdown/plugins/tasks.ts

@@ -0,0 +1,88 @@
+import type MarkdownIt from "markdown-it";
+
+export function createTaskListPlugin(): (md: MarkdownIt) => void {
+  return (md: MarkdownIt) => {
+    md.core.ruler.after("inline", "task_list", (state) => {
+      const tokens = state.tokens;
+
+      for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+
+        if (token.type === "bullet_list_open") {
+          processTaskList(tokens, i);
+        }
+      }
+    });
+  };
+}
+
+function processTaskList(tokens: MarkdownIt.Token[], listIdx: number): void {
+  let hasTaskItem = false;
+  let depth = 0;
+
+  for (let i = listIdx; i < tokens.length; i++) {
+    const token = tokens[i];
+
+    if (token.type === "bullet_list_open") {
+      depth++;
+    } else if (token.type === "bullet_list_close") {
+      depth--;
+      if (depth === 0) break;
+    }
+
+    if (depth === 1 && token.type === "list_item_open") {
+      const inlineIdx = findInlineToken(tokens, i);
+      if (inlineIdx !== -1) {
+        const inlineToken = tokens[inlineIdx];
+        const result = processTaskItem(inlineToken);
+        if (result) {
+          hasTaskItem = true;
+          token.attrSet("class", "task-list-item");
+        }
+      }
+    }
+  }
+
+  if (hasTaskItem) {
+    tokens[listIdx].attrJoin("class", "contains-task-list");
+  }
+}
+
+function findInlineToken(tokens: MarkdownIt.Token[], startIdx: number): number {
+  for (let i = startIdx + 1; i < tokens.length; i++) {
+    if (tokens[i].type === "inline") return i;
+    if (tokens[i].type === "list_item_close") return -1;
+  }
+  return -1;
+}
+
+function processTaskItem(
+  inlineToken: MarkdownIt.Token,
+): { checked: boolean } | null {
+  if (!inlineToken.children || inlineToken.children.length === 0) {
+    return null;
+  }
+
+  const firstChild = inlineToken.children[0];
+  if (firstChild.type !== "text") return null;
+
+  const match = firstChild.content.match(/^\[([ xX])\]\s*/);
+  if (!match) return null;
+
+  const checked = match[1].toLowerCase() === "x";
+  firstChild.content = firstChild.content.slice(match[0].length);
+
+  // Insert checkbox token at the beginning
+  const checkboxToken = new (inlineToken.constructor as any)(
+    "html_inline",
+    "",
+    0,
+  );
+  checkboxToken.content = checked
+    ? '<input type="checkbox" class="task-list-item-checkbox" checked disabled>'
+    : '<input type="checkbox" class="task-list-item-checkbox" disabled>';
+
+  inlineToken.children.unshift(checkboxToken);
+
+  return { checked };
+}

package/src/server/assets.ts

@@ -0,0 +1,58 @@
+import { dirname } from "path";
+import { resolveAssetPath, getContentType } from "../utils/paths.ts";
+
+const ASSETS_PREFIX = "/__assets__/";
+
+export function isAssetRequest(pathname: string): boolean {
+  return pathname.startsWith(ASSETS_PREFIX);
+}
+
+export function extractAssetPath(pathname: string): string {
+  return decodeURIComponent(pathname.slice(ASSETS_PREFIX.length));
+}
+
+export async function serveAsset(
+  assetPath: string,
+  markdownDir: string,
+): Promise<Response | null> {
+  const resolvedPath = resolveAssetPath(assetPath, markdownDir);
+
+  if (!resolvedPath) {
+    return new Response("Asset not found", { status: 404 });
+  }
+
+  try {
+    const file = Bun.file(resolvedPath);
+    const exists = await file.exists();
+
+    if (!exists) {
+      return new Response("Asset not found", { status: 404 });
+    }
+
+    const contentType = getContentType(resolvedPath);
+
+    return new Response(file, {
+      headers: {
+        "Content-Type": contentType,
+        "Cache-Control": "public, max-age=31536000",
+      },
+    });
+  } catch {
+    return new Response("Error serving asset", { status: 500 });
+  }
+}
+
+export function rewriteAssetUrls(html: string, _markdownDir: string): string {
+  // Rewrite relative image src attributes to use the asset proxy
+  // Matches: src="./path" src="../path" src="path" (not http:// or data:)
+  return html.replace(
+    /(<img[^>]*\ssrc=["'])(?!https?:\/\/|data:|\/\/)([^"']+)(["'][^>]*>)/gi,
+    (match, prefix, src, suffix) => {
+      // Skip if already proxied
+      if (src.startsWith(ASSETS_PREFIX)) {
+        return match;
+      }
+      return `${prefix}${ASSETS_PREFIX}${encodeURIComponent(src)}${suffix}`;
+    },
+  );
+}