@odla-ai/blog 0.0.1

package/src/content.js

@@ -0,0 +1,151 @@
+// Content loading: markdown files + YAML frontmatter → post/page objects.
+import { readdir, readFile } from "node:fs/promises";
+import { join, basename, relative } from "node:path";
+import { pathToFileURL } from "node:url";
+import { parse as parseYaml } from "yaml";
+
+const FRONTMATTER = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
+
+export function parseFrontmatter(raw) {
+  const match = FRONTMATTER.exec(raw);
+  if (!match) return { data: {}, body: raw };
+  return { data: parseYaml(match[1]) ?? {}, body: raw.slice(match[0].length) };
+}
+
+// posts/2026/2026-07-03-hello-world.md → slug "hello-world"
+export function slugFromFilename(filename) {
+  return basename(filename, ".md").replace(/^\d{4}-\d{2}-\d{2}-/, "");
+}
+
+async function markdownFiles(dir) {
+  let entries;
+  try {
+    entries = await readdir(dir, { withFileTypes: true, recursive: true });
+  } catch (err) {
+    if (err.code === "ENOENT") return [];
+    throw err;
+  }
+  return entries
+    .filter((e) => e.isFile() && e.name.endsWith(".md"))
+    .map((e) => join(e.parentPath, e.name))
+    .sort();
+}
+
+// slugFormat "clean" (default) strips the date prefix from filenames;
+// "filename" keeps it — for migrations that must preserve existing URLs.
+export async function loadPosts(
+  postsDir,
+  { now = new Date(), includeDrafts = false, slugFormat = "clean", postsPath = "posts" } = {}
+) {
+  const posts = [];
+  const bySlug = new Map();
+  for (const file of await markdownFiles(postsDir)) {
+    const { data, body } = parseFrontmatter(await readFile(file, "utf8"));
+    const slug = slugFormat === "filename" ? basename(file, ".md") : slugFromFilename(file);
+    if (bySlug.has(slug)) {
+      throw new Error(`Slug collision: "${slug}" from ${file} and ${bySlug.get(slug)}`);
+    }
+    bySlug.set(slug, file);
+    const date = data.date instanceof Date ? data.date : new Date(data.date);
+    if (!data.title || Number.isNaN(date.getTime())) {
+      throw new Error(`${file}: frontmatter needs a title and a valid date`);
+    }
+    const draft = data.draft === true;
+    const scheduled = date > now;
+    if ((draft || scheduled) && !includeDrafts) continue;
+    posts.push({
+      slug,
+      file,
+      title: data.title,
+      description: data.description ?? "",
+      date,
+      tags: Array.isArray(data.tags) ? data.tags.map(String) : [],
+      image: data.image ?? null,
+      draft,
+      scheduled,
+      body,
+      url: `${postsPath}/${slug}/`,
+    });
+  }
+  posts.sort((a, b) => b.date - a.date);
+  return posts;
+}
+
+// Collections: every directory under <site>/collections/ becomes build-time
+// data handed to all templates as collections.<name> — an array of
+// { slug, file, data, body } with raw frontmatter (schema-free) and the
+// unrendered markdown body. Collections are data, not pages; JS pages and
+// templates decide what (if anything) to render from them.
+export async function loadCollections(collectionsDir) {
+  const collections = {};
+  let dirs;
+  try {
+    dirs = (await readdir(collectionsDir, { withFileTypes: true })).filter((e) => e.isDirectory());
+  } catch (err) {
+    if (err.code === "ENOENT") return collections;
+    throw err;
+  }
+  for (const dir of dirs) {
+    const items = [];
+    for (const file of await markdownFiles(join(collectionsDir, dir.name))) {
+      const { data, body } = parseFrontmatter(await readFile(file, "utf8"));
+      items.push({ slug: basename(file, ".md"), file, data, body });
+    }
+    items.sort((a, b) => a.slug.localeCompare(b.slug));
+    collections[dir.name] = items;
+  }
+  return collections;
+}
+
+// JS pages: a page can be a .js module instead of markdown. It exports
+// render(ctx) → string, plus optional title/description. Filenames that
+// still carry an extension after stripping .js (e.g. api/data.json.js)
+// emit raw output at that exact path with no HTML shell.
+export async function loadJsPages(pagesDir) {
+  let entries;
+  try {
+    entries = await readdir(pagesDir, { withFileTypes: true, recursive: true });
+  } catch (err) {
+    if (err.code === "ENOENT") return [];
+    throw err;
+  }
+  const pages = [];
+  for (const entry of entries.filter((e) => e.isFile() && e.name.endsWith(".js")).sort((a, b) => a.name.localeCompare(b.name))) {
+    const file = join(entry.parentPath, entry.name);
+    const rel = relative(pagesDir, file).slice(0, -3); // strip .js
+    const raw = /\.[a-z0-9]+$/i.test(rel);
+    const module = await import(pathToFileURL(file).href);
+    if (typeof module.render !== "function") {
+      throw new Error(`${file}: a JS page must export a render(ctx) function`);
+    }
+    pages.push({
+      file,
+      module,
+      raw,
+      slug: raw ? null : rel,
+      outPath: raw ? rel : join(rel, "index.html"),
+      title: module.title ?? null,
+      description: module.description ?? null,
+      url: raw ? rel : `${rel}/`,
+    });
+  }
+  return pages;
+}
+
+export async function loadPages(pagesDir) {
+  const pages = [];
+  for (const file of await markdownFiles(pagesDir)) {
+    const { data, body } = parseFrontmatter(await readFile(file, "utf8"));
+    const slug = basename(file, ".md");
+    pages.push({
+      slug,
+      file,
+      title: data.title ?? slug,
+      description: data.description ?? "",
+      listTag: data.listTag ?? null,
+      body,
+      url: `${slug}/`,
+    });
+  }
+  return pages;
+}

package/src/excerpt.js

@@ -0,0 +1,66 @@
+// Build-time excerpts: truncate rendered post HTML at top-level block
+// boundaries once a word target is reached, appending a continue-reading
+// link. Replaces the fragile client-side truncation JS the Astro site used.
+const VOID_TAGS = new Set([
+  "area", "base", "br", "col", "embed", "hr", "img", "input",
+  "link", "meta", "param", "source", "track", "wbr",
+]);
+
+function countWords(html) {
+  return html.replace(/<[^>]*>/g, " ").split(/\s+/).filter(Boolean).length;
+}
+
+// Split well-formed HTML (marked output) into top-level blocks by
+// tracking tag depth. No DOM needed.
+function topLevelBlocks(html) {
+  const blocks = [];
+  let depth = 0;
+  let start = 0;
+  const tags = /<\/?([a-zA-Z][a-zA-Z0-9-]*)[^>]*?>/g;
+  let match;
+  while ((match = tags.exec(html))) {
+    const tag = match[1].toLowerCase();
+    const isClose = match[0][1] === "/";
+    const isVoid = VOID_TAGS.has(tag) || match[0].endsWith("/>");
+    if (isClose) {
+      depth--;
+      if (depth === 0) {
+        blocks.push(html.slice(start, tags.lastIndex));
+        start = tags.lastIndex;
+      }
+    } else if (!isVoid) {
+      depth++;
+    } else if (depth === 0) {
+      blocks.push(html.slice(start, tags.lastIndex));
+      start = tags.lastIndex;
+    }
+  }
+  if (start < html.length) blocks.push(html.slice(start));
+  return blocks;
+}
+
+// Footnote refs point at anchors that only exist on the post page, and the
+// footnotes section belongs to the full post — drop both from excerpts.
+function stripFootnotes(html) {
+  return html
+    .replace(/<section class="footnotes">[\s\S]*?<\/section>\n?/g, "")
+    .replace(/<sup class="footnote-ref"[\s\S]*?<\/sup>/g, "");
+}
+
+export function excerpt(html, { minWords = 200, moreUrl } = {}) {
+  const clean = stripFootnotes(html);
+  if (countWords(clean) <= minWords) {
+    return { html: clean, truncated: false };
+  }
+  const kept = [];
+  let words = 0;
+  for (const block of topLevelBlocks(clean)) {
+    kept.push(block);
+    words += countWords(block);
+    if (words >= minWords) break;
+  }
+  const readMore = moreUrl
+    ? `\n<p class="read-more"><a href="${moreUrl}">[continue reading]</a></p>`
+    : "";
+  return { html: kept.join("") + readMore, truncated: true };
+}

package/src/feeds.js

@@ -0,0 +1,81 @@
+// RSS 2.0 feed + XML sitemap. Hand-rolled: the formats are ~50 lines each
+// and a template dependency would cost more than it saves.
+import { escapeHtml } from "./markdown.js";
+
+function absoluteUrl(config, rel) {
+  const origin = (config.url ?? "").replace(/\/$/, "");
+  return `${origin}${config.basePath ?? "/"}${rel}`;
+}
+
+export function rss({ config, posts, limit = 20 }) {
+  const items = posts
+    .slice(0, limit)
+    .map((post) => {
+      const url = absoluteUrl(config, post.url);
+      return `<item>
+<title>${escapeHtml(post.title)}</title>
+<link>${url}</link>
+<guid>${url}</guid>
+<pubDate>${post.date.toUTCString()}</pubDate>
+${post.description ? `<description>${escapeHtml(post.description)}</description>` : ""}
+</item>`;
+    })
+    .join("\n");
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+<channel>
+<title>${escapeHtml(config.title)}</title>
+<link>${absoluteUrl(config, "")}</link>
+<description>${escapeHtml(config.description ?? "")}</description>
+${items}
+</channel>
+</rss>
+`;
+}
+
+export function atom({ config, posts, limit = 20 }) {
+  const feedUrl = absoluteUrl(config, "atom.xml");
+  const updated = posts.length ? posts[0].date.toISOString() : "1970-01-01T00:00:00.000Z";
+  const entries = posts
+    .slice(0, limit)
+    .map((post) => {
+      const url = absoluteUrl(config, post.url);
+      return `<entry>
+<title>${escapeHtml(post.title)}</title>
+<link href="${url}"/>
+<id>${url}</id>
+<updated>${post.date.toISOString()}</updated>
+${post.description ? `<summary>${escapeHtml(post.description)}</summary>` : ""}
+</entry>`;
+    })
+    .join("\n");
+  return `<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+<title>${escapeHtml(config.title)}</title>
+<link href="${feedUrl}" rel="self"/>
+<link href="${absoluteUrl(config, "")}"/>
+<updated>${updated}</updated>
+<id>${absoluteUrl(config, "")}</id>
+${config.author ? `<author><name>${escapeHtml(config.author)}</name></author>` : ""}
+${entries}
+</feed>
+`;
+}
+
+export function sitemap({ config, posts, pages }) {
+  const urls = [
+    "",
+    "archive/",
+    "tags/",
+    ...pages.map((p) => p.url),
+    ...posts.map((p) => p.url),
+  ];
+  const entries = urls
+    .map((rel) => `<url><loc>${absoluteUrl(config, rel)}</loc></url>`)
+    .join("\n");
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${entries}
+</urlset>
+`;
+}

package/src/index.js

@@ -0,0 +1,5 @@
+export { build, resolveThemeFile } from "./build.js";
+export { loadPosts, loadPages, parseFrontmatter, slugFromFilename } from "./content.js";
+export { renderMarkdown, slugify, escapeHtml } from "./markdown.js";
+export { postList, tagList, tagUrl, formatDate, isoDate } from "./templates/helpers.js";
+export { loadCollections, loadJsPages } from "./content.js";

package/src/markdown.js

@@ -0,0 +1,148 @@
+// Markdown → HTML: marked with heading anchors, GFM footnotes, and
+// build-time syntax highlighting via highlight.js. Output uses hljs-*
+// classes so each theme colors code for light AND dark mode with plain
+// CSS variables.
+import { Marked } from "marked";
+import hljs from "highlight.js/lib/common";
+
+export function escapeHtml(text) {
+  return text
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+export function slugify(text) {
+  return text
+    .toLowerCase()
+    .replace(/<[^>]*>/g, "")
+    .replace(/&#?\w+;/g, "")
+    .replace(/[^a-z0-9\s-]/g, "")
+    .trim()
+    .replace(/\s+/g, "-");
+}
+
+// ── GFM footnotes ────────────────────────────────────────────────
+// marked has no built-in footnote support. [^id] references become
+// numbered superscript links; [^id]: definitions collect into a
+// <section class="footnotes"> appended after the content. Numbering
+// follows first-reference order. State is per-parse; renderMarkdown
+// is synchronous, so module-level state is safe.
+let footnoteNumbers = new Map(); // id → number, in first-reference order
+let footnoteBodies = new Map(); // id → rendered inline HTML
+
+const footnotes = {
+  hooks: {
+    preprocess(markdown) {
+      footnoteNumbers = new Map();
+      footnoteBodies = new Map();
+      // Number by first reference (definitions like "[^id]:" excluded).
+      for (const match of markdown.matchAll(/\[\^([^\]\s]+)\](?!:)/g)) {
+        if (!footnoteNumbers.has(match[1])) {
+          footnoteNumbers.set(match[1], footnoteNumbers.size + 1);
+        }
+      }
+      return markdown;
+    },
+    postprocess(html) {
+      const items = [...footnoteNumbers.entries()]
+        .filter(([id]) => footnoteBodies.has(id))
+        .map(
+          ([id, n]) =>
+            `<li id="fn-${n}"><p>${footnoteBodies.get(id)} <a href="#fnref-${n}" class="footnote-backref" aria-label="Back to reference ${n}">↩</a></p></li>`
+        );
+      if (!items.length) return html;
+      return `${html}<section class="footnotes"><ol>\n${items.join("\n")}\n</ol></section>\n`;
+    },
+  },
+  extensions: [
+    {
+      name: "footnoteDef",
+      level: "block",
+      tokenizer(src) {
+        // "[^id]: text" plus continuation lines indented ≥2 spaces.
+        const match = /^\[\^([^\]\s]+)\]:[ \t]*([^\n]*(?:\n[ \t]{2,}[^\n]*)*)/.exec(src);
+        if (!match) return;
+        const text = match[2].replace(/\n[ \t]+/g, " ").trim();
+        return {
+          type: "footnoteDef",
+          raw: match[0],
+          id: match[1],
+          tokens: this.lexer.inlineTokens(text),
+        };
+      },
+      renderer(token) {
+        if (footnoteNumbers.has(token.id)) {
+          footnoteBodies.set(token.id, this.parser.parseInline(token.tokens));
+        }
+        return "";
+      },
+    },
+    {
+      name: "footnoteRef",
+      level: "inline",
+      start(src) {
+        return src.indexOf("[^");
+      },
+      tokenizer(src) {
+        const match = /^\[\^([^\]\s]+)\](?!:)/.exec(src);
+        if (match && footnoteNumbers.has(match[1])) {
+          return { type: "footnoteRef", raw: match[0], id: match[1] };
+        }
+      },
+      renderer(token) {
+        const n = footnoteNumbers.get(token.id);
+        return `<sup class="footnote-ref" id="fnref-${n}"><a href="#fn-${n}">${n}</a></sup>`;
+      },
+    },
+  ],
+};
+
+// Smart typography on plain-text leaves only (never code, never inside
+// tags): -- and --- become em dashes, straight quotes curl. Idempotent —
+// the patterns only match straight/ASCII characters.
+export function smarten(text) {
+  return text
+    .replace(/---/g, "—")
+    .replace(/(^|[^-])--(?!-)/g, "$1—")
+    // Opening quotes need BOTH an opening context (start/space/bracket) and
+    // word-ish content after — a leaf like `", "` right after a link starts
+    // with a CLOSING quote and must not curl open.
+    .replace(/(^|[\s([{<‘“])"(?=[\w'‘“])/g, "$1“")
+    .replace(/(^|[\s([{<‘“])"$/, "$1“") // leaf ends at an inline element (e.g. a link): opening
+    .replace(/"/g, "”")
+    .replace(/(^|[\s([{<“])'(?=[\w"“])/g, "$1‘")
+    .replace(/(^|[\s([{<“])'$/, "$1‘")
+    .replace(/'/g, "’");
+}
+
+const marked = new Marked(
+  {
+    gfm: true,
+    renderer: {
+      text(token) {
+        if (token.tokens) return this.parser.parseInline(token.tokens);
+        return token.escaped ? smarten(token.text) : escapeHtml(smarten(token.text));
+      },
+      code({ text, lang }) {
+        const language = lang && hljs.getLanguage(lang) ? lang : null;
+        const body = language
+          ? hljs.highlight(text, { language }).value
+          : escapeHtml(text);
+        const cls = language ? `hljs language-${language}` : "hljs";
+        return `<pre><code class="${cls}">${body}</code></pre>\n`;
+      },
+      heading({ tokens, depth }) {
+        const text = this.parser.parseInline(tokens);
+        const id = slugify(text);
+        return `<h${depth} id="${id}">${text}</h${depth}>\n`;
+      },
+    },
+  },
+  footnotes
+);
+
+export function renderMarkdown(source) {
+  return marked.parse(source);
+}

package/src/templates/archive.js

@@ -0,0 +1,31 @@
+// Archive: every post grouped by year, newest year first.
+import { escapeHtml, formatDate, isoDate } from "./helpers.js";
+
+export function archive({ config, posts }) {
+  const base = config.basePath ?? "/";
+  const byYear = new Map();
+  for (const post of posts) {
+    const year = post.date.getUTCFullYear();
+    if (!byYear.has(year)) byYear.set(year, []);
+    byYear.get(year).push(post);
+  }
+  const years = [...byYear.keys()].sort((a, b) => b - a);
+  const sections = years
+    .map((year) => {
+      const items = byYear
+        .get(year)
+        .map(
+          (p) => `<li class="archive-item">
+<time datetime="${isoDate(p.date)}">${formatDate(p.date)}</time>
+<a href="${base}${p.url}">${escapeHtml(p.title)}</a>
+</li>`
+        )
+        .join("\n");
+      return `<section>
+<h2 class="archive-year" id="${year}">${year}</h2>
+<ul class="archive-list">\n${items}\n</ul>
+</section>`;
+    })
+    .join("\n");
+  return `<h1 class="page-title">Archive</h1>\n${sections}`;
+}

package/src/templates/base.js

@@ -0,0 +1,153 @@
+// Outer HTML shell shared by every page: head (canonical + OpenGraph +
+// Twitter meta, feeds, favicon), sticky nav bar with scroll indicator and
+// light/dark toggle (no-flash), optional recent-posts sidebar, footer.
+// Themes restyle it; they rarely need to replace it.
+import { escapeHtml } from "./helpers.js";
+
+const NO_FLASH = `(function(){try{var t=localStorage.getItem("theme");if(t)document.documentElement.setAttribute("data-theme",t)}catch(e){}})();`;
+
+const TOGGLE = `document.querySelector(".theme-toggle").addEventListener("click",function(){var r=document.documentElement;var d=r.getAttribute("data-theme")==="dark"||(!r.getAttribute("data-theme")&&matchMedia("(prefers-color-scheme: dark)").matches);var n=d?"light":"dark";r.setAttribute("data-theme",n);try{localStorage.setItem("theme",n)}catch(e){}});
+(function(){var line=document.querySelector(".scroll-line"),dot=document.querySelector(".scroll-dot");if(!line)return;function upd(){var h=document.documentElement.scrollHeight-window.innerHeight;var p=h>0?(window.scrollY/h)*100:0;line.style.width=p+"%";if(dot)dot.style.left=p+"%"}addEventListener("scroll",upd,{passive:true});addEventListener("resize",upd);upd()})();`;
+
+const sidebarDate = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+  timeZone: "UTC",
+});
+
+function absolutize(config, url) {
+  if (!url) return null;
+  if (/^[a-z]+:/.test(url)) return url;
+  return (config.url ?? "").replace(/\/$/, "") + (url.startsWith("/") ? url : `${config.basePath ?? "/"}${url}`);
+}
+
+// Head metadata for a page. `path` is the site-relative path ("" for home,
+// "posts/slug/"...); `image` an OG image URL (site-relative or absolute).
+function headMeta(config, { fullTitle, description, path, image }) {
+  const base = config.basePath ?? "/";
+  const pageUrl = absolutize(config, `${base}${path ?? ""}`);
+  const ogImage = absolutize(config, image ?? null);
+  const lines = [
+    `<title>${escapeHtml(fullTitle)}</title>`,
+    `<meta name="title" content="${escapeHtml(fullTitle)}">`,
+  ];
+  if (description) lines.push(`<meta name="description" content="${escapeHtml(description)}">`);
+  if (pageUrl) lines.push(`<link rel="canonical" href="${pageUrl}">`);
+  if (config.favicon) lines.push(`<link rel="icon" href="${base}${config.favicon}">`);
+  lines.push(
+    `<link rel="sitemap" href="${base}sitemap.xml">`,
+    `<link rel="alternate" type="application/rss+xml" title="${escapeHtml(config.title)}" href="${base}rss.xml">`,
+    `<link rel="alternate" type="application/atom+xml" title="${escapeHtml(config.title)}" href="${base}atom.xml">`,
+    `<meta property="og:type" content="website">`,
+    `<meta property="og:title" content="${escapeHtml(fullTitle)}">`,
+    `<meta property="twitter:card" content="summary_large_image">`,
+    `<meta property="twitter:title" content="${escapeHtml(fullTitle)}">`
+  );
+  if (pageUrl) {
+    lines.push(
+      `<meta property="og:url" content="${pageUrl}">`,
+      `<meta property="twitter:url" content="${pageUrl}">`
+    );
+  }
+  if (description) {
+    lines.push(
+      `<meta property="og:description" content="${escapeHtml(description)}">`,
+      `<meta property="twitter:description" content="${escapeHtml(description)}">`
+    );
+  }
+  if (ogImage) {
+    lines.push(
+      `<meta property="og:image" content="${ogImage}">`,
+      `<meta property="twitter:image" content="${ogImage}">`
+    );
+  }
+  return lines.join("\n");
+}
+
+// Recent-posts column, enabled by config.sidebarRecentPosts > 0.
+// config.recentPosts is stashed by the build.
+function sidebar(config) {
+  const posts = config.recentPosts ?? [];
+  if (!posts.length) return "";
+  const base = config.basePath ?? "/";
+  const links = posts
+    .map(
+      (p) => `<a href="${base}${p.url}" class="post-link">
+<span class="post-title">${escapeHtml(p.title)}</span>
+<span class="post-date">${sidebarDate.format(p.date)}</span>
+</a>`
+    )
+    .join("\n");
+  return `<aside class="recent-posts-sidebar">
+<h3 class="section-title">Recent Posts</h3>
+<div class="recent-posts">
+${links}
+</div>
+</aside>`;
+}
+
+// Footer: optional links (config.footerLinks) • © year links to the archive,
+// author, optional config.copyright suffix. config.years is computed by the
+// build from the posts.
+function footerContent(config, base) {
+  const parts = [];
+  for (const link of config.footerLinks ?? []) {
+    const href = /^[a-z]+:/.test(link.href) ? link.href : base + link.href.replace(/^\//, "");
+    parts.push(`<a href="${href}">${escapeHtml(link.label)}</a>`);
+  }
+  const years = (config.years ?? [])
+    .map((y) => `<a href="${base}archive/#${y}">${y}</a>`)
+    .join(", ");
+  const author = escapeHtml(config.author ?? config.title);
+  const suffix = config.copyright ? ` ${escapeHtml(config.copyright)}` : "";
+  parts.push(`<span class="copyright">© ${years ? years + " " : ""}${author}.${suffix}</span>`);
+  return parts.join(' <span class="separator">•</span> ');
+}
+
+export function base({ config, title, description, path, image, content }) {
+  const base = config.basePath ?? "/";
+  const fullTitle = title ? `${title} · ${config.title}` : config.title;
+  // config.nav overrides the automatic Archive/Tags/pages navigation.
+  const nav = config.nav
+    ? config.nav.map((n) => ({
+        label: n.label,
+        href: /^[a-z]+:/.test(n.href) ? n.href : base + n.href.replace(/^\//, ""),
+      }))
+    : [
+        { label: "Archive", href: `${base}archive/` },
+        { label: "Tags", href: `${base}tags/` },
+        ...(config.pages ?? []).map((p) => ({ label: p.title, href: `${base}${p.url}` })),
+      ];
+  return `<!doctype html>
+<html lang="${config.lang ?? "en"}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+${headMeta(config, { fullTitle, description, path, image })}
+<link rel="stylesheet" href="${base}assets/styles.css">
+<script>${NO_FLASH}</script>
+</head>
+<body${(config.recentPosts ?? []).length ? ' class="has-sidebar"' : ""}>
+<header class="site-header">
+<a class="site-title" href="${base}">${escapeHtml(config.title)}</a>
+<nav class="site-nav">
+${nav.map((n) => `<a href="${n.href}">${escapeHtml(n.label)}</a>`).join("\n")}
+<button class="theme-toggle" aria-label="Toggle dark mode"><span class="theme-toggle-icon" aria-hidden="true"></span></button>
+</nav>
+<div class="scroll-indicator" aria-hidden="true"><div class="scroll-line"></div><div class="scroll-dot"></div></div>
+</header>
+<div class="content-wrapper">
+<main>
+${content}
+</main>
+${sidebar(config)}
+</div>
+<footer class="site-footer">
+<p>${footerContent(config, base)}</p>
+</footer>
+<script>${TOGGLE}</script>
+</body>
+</html>
+`;
+}