markform-cli 1.1.1 → 1.2.2

package/README.md

@@ -1,4 +1,6 @@
-![Markdown Banner](https://github.com/aryan-madan/Markform/blob/main/images/Markform%20|%20Devlog%202%20.png)
+# markform 📝
+
+![Markdown Banner](images/Markform%20|%20Banner.png)
 
 Turn any folder of Markdown files into a beautiful, searchable static site — in one command.
 ```bash
@@ -23,9 +25,9 @@ npm install -g markform-cli
 markform ./my-notes -o ./output
 ```
 
-If it doesn't work (mainly on windows), use:
+If it doesn't work (mainly on Windows), use:
 ```bash
-npx markform-cli ./test -o ./output
+npx markform-cli ./my-notes -o ./output
 ```
 
 **Watch mode** — auto-rebuilds and live-reloads the browser on file changes:
@@ -33,6 +35,24 @@ npx markform-cli ./test -o ./output
 markform ./my-notes -o ./output --watch
 ```
 
+**Create a new page:**
+```bash
+markform --new my-page
+```
+
+This scaffolds a new Markdown file with frontmatter ready to fill in:
+```markdown
+---
+title: My Page
+date: 2026-02-27
+description: 
+---
+
+# My Page
+
+Write something here...
+```
+
 ---
 
 ## (≖_≖ ) Options
@@ -41,7 +61,7 @@ markform ./my-notes -o ./output --watch
 |------|---------|-------------|
 | `-o, --output <dir>` | `./output` | Where to write the site |
 | `-w, --watch` | off | Watch for changes and live reload |
-| `--theme <name>` | `default` | Theme to use |
+| `-n, --new <name>` | — | Scaffold a new Markdown file |
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markform-cli",
-  "version": "1.1.1",
+  "version": "1.2.2",
   "description": "Turn any folder of Markdown files into a beautiful, searchable static site.",
   "main": "src/index.js",
   "bin": {
@@ -17,7 +17,7 @@
   ],
   "author": "Aryan Madan",
   "license": "GPL-3.0-only",
-    "homepage": "https://github.com/yourusername/markform",
+  "homepage": "https://github.com/yourusername/markform",
   "repository": {
     "type": "git",
     "url": "https://github.com/yourusername/markform"
@@ -28,6 +28,8 @@
     "express": "^5.2.1",
     "fs-extra": "^11.3.3",
     "fuse.js": "^7.1.0",
-    "marked": "^17.0.3"
+    "gray-matter": "^4.0.3",
+    "marked": "^17.0.3",
+    "open": "^11.0.0"
   }
 }

package/src/build.js

@@ -2,9 +2,20 @@ const fs = require('fs-extra');
 const path = require('path');
 const { marked } = require('marked');
 const { buildNav } = require('./nav');
+const { buildIndexPage } = require('./index-page');
 const chokidar = require('chokidar');
 const express = require('express');
-const { buildIndexPage } = require('./index-page');
+const { exec } = require('child_process');
+const matter = require('gray-matter');
+
+function openInBrowser(url) {
+  const cmd = process.platform === 'win32'
+    ? `start "" "${url}"`
+    : process.platform === 'darwin'
+      ? `open "${url}"`
+      : `xdg-open "${url}"`;
+  exec(cmd);
+}
 
 async function buildSite(input, options) {
   const inputDir = path.resolve(input);
@@ -16,7 +27,7 @@ async function buildSite(input, options) {
   }
 
   console.log(`⛏ Building site from ${inputDir} to ${outputDir}...`);
-  await compile(inputDir, outputDir, options.watch || false);
+  await compile(inputDir, outputDir, false);
   console.log(`(ˆᗜˆ ) Site built to ${outputDir}`);
 
   if (options.watch) {
@@ -30,19 +41,22 @@ async function buildSite(input, options) {
     });
 
     app.listen(3000, () => {
-      const mdFiles = getMdFiles(inputDir);
-      const firstHref = path.relative(inputDir, mdFiles[0]).replace(/\.md$/, '.html');
-      console.log(`(°ㅁ°) Serving at http://localhost:3000/index.html`);
+      console.log(`(°ㅁ° ) Serving at http://localhost:3000/index.html`);
+      openInBrowser('http://localhost:3000/index.html');
     });
 
     chokidar.watch(inputDir).on('change', async (filePath) => {
       console.log(`↺ Changed: ${filePath}, rebuilding...`);
       await compile(inputDir, outputDir, true);
       shouldReload = true;
-      console.log(`(ˆᗜˆ ) Site rebuilt to ${outputDir}`);
+      console.log(`(ˆᗜˆ ) Site rebuilt.`);
     });
 
     console.log(`(≖_≖ ) Watching for changes...`);
+  } else {
+    const indexPath = path.join(outputDir, 'index.html');
+    console.log(`(°ㅁ° ) Opening ${indexPath}`);
+    openInBrowser(indexPath);
   }
 }
 
@@ -51,22 +65,37 @@ async function compile(inputDir, outputDir, watch = false) {
 
   const mdFiles = getMdFiles(inputDir);
   const nav = buildNav(mdFiles, inputDir);
+  const searchIndex = buildSearchIndex(mdFiles, inputDir);
+  const searchIndexJson = JSON.stringify(searchIndex);
+
   const template = fs.readFileSync(
     path.join(__dirname, '../themes/default.html'), 'utf-8'
   );
 
-  await buildSearchIndex(mdFiles, inputDir, outputDir);
-
   for (const filePath of mdFiles) {
-    const content = fs.readFileSync(filePath, 'utf-8');
+    const raw = fs.readFileSync(filePath, 'utf-8');
+    const { content, data: frontmatter } = matter(raw);
     const htmlContent = marked(content);
     const relativePath = path.relative(inputDir, filePath);
     const outputPath = path.join(outputDir, relativePath.replace(/\.md$/, '.html'));
 
+    const title = frontmatter.title || path.basename(filePath, '.md').replace(/-/g, ' ');
+    const description = frontmatter.description || '';
+    const date = frontmatter.date || '';
+
+    let metaHtml = '';
+    if (date || description) {
+      metaHtml = `<div class="page-meta">
+        ${date ? `<span class="page-date">${date}</span>` : ''}
+        ${description ? `<p class="page-description">${description}</p>` : ''}
+      </div>`;
+    }
+
     let html = template
-      .replace('{{content}}', htmlContent)
+      .replace('{{content}}', metaHtml + htmlContent)
       .replace('{{nav}}', nav)
-      .replace('{{title}}', path.basename(filePath, '.md'));
+      .replace('{{title}}', title)
+      .replace('{{search_index}}', searchIndexJson);
 
     if (watch) {
       html = html.replace('</body>', `
@@ -80,12 +109,12 @@ async function compile(inputDir, outputDir, watch = false) {
 </body>`);
     }
 
-    const indexHtml = buildIndexPage(mdFiles, inputDir, template);
-    await fs.writeFile(path.join(outputDir, 'index.html'), indexHtml);
-
     await fs.ensureDir(path.dirname(outputPath));
     await fs.writeFile(outputPath, html);
   }
+
+  const indexHtml = buildIndexPage(mdFiles, inputDir, template, searchIndexJson);
+  await fs.writeFile(path.join(outputDir, 'index.html'), indexHtml);
 }
 
 function getMdFiles(dir) {
@@ -102,27 +131,24 @@ function getMdFiles(dir) {
   return results;
 }
 
-async function buildSearchIndex(mdFiles, inputDir, outputDir) {
-  const index = mdFiles.map((filePath) => {
+function buildSearchIndex(mdFiles, inputDir) {
+  return mdFiles.map((filePath) => {
     const raw = fs.readFileSync(filePath, 'utf-8');
-    const content = raw
-      .replace(/#{1,6}\s/g, '')        // headings
-      .replace(/\*\*|__|\*|_/g, '')    // bold/italic
-      .replace(/`{1,3}[^`]*`{1,3}/g, '') // code
-      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // links
-      .replace(/^\s*[-*+]\s/gm, '')    // list items
-      .replace(/\n+/g, ' ')            // newlines
+    const { content, data: frontmatter } = matter(raw);
+    const cleaned = content
+      .replace(/#{1,6}\s/g, '')
+      .replace(/\*\*|__|\*|_/g, '')
+      .replace(/`{1,3}[^`]*`{1,3}/g, '')
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+      .replace(/^\s*[-*+]\s/gm, '')
+      .replace(/\n+/g, ' ')
       .trim();
+
     const relativePath = path.relative(inputDir, filePath);
     const href = relativePath.replace(/\.md$/, '.html');
-    const title = path.basename(filePath, '.md').replace(/-/g, ' ');
-    return { title, href, content };
+    const title = frontmatter.title || path.basename(filePath, '.md').replace(/-/g, ' ');
+    return { title, href, content: cleaned };
   });
-
-  await fs.writeFile(
-    path.join(outputDir, 'search-index.json'),
-    JSON.stringify(index, null, 2)
-  );
 }
 
 module.exports = { buildSite };

package/src/index-page.js

@@ -1,6 +1,6 @@
 const path = require('path');
 
-function buildIndexPage(mdFiles, inputDir, template) {
+function buildIndexPage(mdFiles, inputDir, template, searchIndexJson) {
   const cards = mdFiles.map((filePath) => {
     const relativePath = path.relative(inputDir, filePath);
     const href = relativePath.replace(/\.md$/, '.html');
@@ -8,19 +8,26 @@ function buildIndexPage(mdFiles, inputDir, template) {
     const folder = path.dirname(relativePath) === '.' ? 'root' : path.dirname(relativePath);
 
     return `
-      <a href="/${href}" class="card">
+      <a href="${href}" class="card">
         <span class="card-folder">${folder}</span>
         <span class="card-title">${title}</span>
       </a>`;
   }).join('\n');
 
+  const content = `
+    <div class="index-header">
+      <h1>markform</h1>
+      <p>${mdFiles.length} page${mdFiles.length !== 1 ? 's' : ''}</p>
+    </div>
+    <div class="card-grid">${cards}</div>
+  `;
+
   return template
-    .replace('{{content}}', `
-      <h1>All Pages</h1>
-      <div class="card-grid">${cards}</div>
-    `)
+    .replace('{{content}}', content)
     .replace('{{nav}}', '')
-    .replace('{{title}}', 'Home');
+    .replace('{{title}}', 'Home')
+    .replace('{{search_index}}', searchIndexJson)
+    .replace('<body>', '<body data-page="index">');
 }
 
 module.exports = { buildIndexPage };

package/src/index.js

@@ -2,16 +2,24 @@
 
 const { program } = require('commander');
 const { buildSite } = require('./build');
+const { createNewPage } = require('./new');
 
 program
     .name('markform')
-    .description('Turn any folder of Markdown files into a beautiful, searchable static site.')
-    .version('1.0.0')
-    .argument('<input>', 'folder of Markdown files')
+    .description('Turn any folder of Markdown files into a beautiful, searchable static site')
+    .version('1.2.2')
+    .argument('[input]', 'folder of Markdown files')
     .option('-o, --output <dir>', 'output directory', './output')
     .option('-w, --watch', 'watch for changes and rebuild')
+    .option('-n, --new <name>', 'create a new markdown file')
     .action((input, options) => {
-        buildSite(input, options);
+        if (options.new) {
+            createNewPage(options.new);
+        } else if (input) {
+            buildSite(input, options);
+        } else {
+            program.help();
+        }
     });
 
 program.parse();

package/src/new.js

@@ -0,0 +1,35 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+function createNewPage(name) {
+    const filename = name.endsWith('.md') ? name : `${name}.md`;
+    const filepath = path.resolve(filename);
+
+    if (fs.existsSync(filepath)) {
+        console.error(`(˙◠˙ ) File already exists: ${filepath}`);
+        process.exit(1);
+    }
+
+    const title = name
+        .replace(/-/g, ' ')
+        .replace(/\.md$/, '')
+        .replace(/\b\w/g, c => c.toUpperCase());
+
+    const date = new Date().toISOString().split('T')[0];
+
+    const content = `---
+title: ${title}
+date: ${date}
+description: 
+---
+
+# ${title}
+
+Write something here...
+`;
+
+    fs.writeFileSync(filepath, content);
+    console.log(`(ˆᗜˆ ) Created ${filepath}`);
+}
+
+module.exports = { createNewPage };

package/test/post.md

@@ -0,0 +1,9 @@
+---
+title: Post
+date: 2026-02-27
+description: 
+---
+
+# Post
+
+Write something here...

package/themes/default.html

@@ -2,282 +2,450 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{{title}}</title>
-    <style>
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-            display: flex;
-            min-height: 100vh;
-            background: #f9f9f9;
-            color: #1a1a1a;
-        }
-
-        nav {
-            width: 240px;
-            min-height: 100vh;
-            background: #1e1e2e;
-            padding: 2rem 1.5rem;
-            position: sticky;
-            top: 0;
-        }
-
-        nav h2 {
-            color: #cdd6f4;
-            font-size: 1rem;
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-            margin-bottom: 1rem;
-        }
-
-        #search {
-            width: 100%;
-            padding: 0.5rem 0.75rem;
-            margin-bottom: 1.25rem;
-            border-radius: 6px;
-            border: none;
-            background: #313244;
-            color: #cdd6f4;
-            font-size: 0.9rem;
-            outline: none;
-        }
-
-        #search::placeholder {
-            color: #6c7086;
-        }
-
-        nav ul {
-            list-style: none;
-        }
-
-        nav ul li {
-            margin-bottom: 0.6rem;
-        }
-
-        nav ul li a {
-            color: #a6adc8;
-            text-decoration: none;
-            font-size: 0.95rem;
-            transition: color 0.2s;
-            text-transform: capitalize;
-        }
-
-        nav ul li a:hover {
-            color: #cdd6f4;
-        }
-
-        main {
-            flex: 1;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 3rem 2rem;
-        }
-
-        h1,
-        h2,
-        h3 {
-            margin: 1.5rem 0 0.75rem;
-            line-height: 1.3;
-        }
-
-        h1 {
-            font-size: 2rem;
-        }
-
-        h2 {
-            font-size: 1.5rem;
-        }
-
-        h3 {
-            font-size: 1.2rem;
-        }
-
-        p {
-            line-height: 1.75;
-            margin-bottom: 1rem;
-            color: #333;
-        }
-
-        code {
-            background: #ececec;
-            padding: 0.2em 0.4em;
-            border-radius: 4px;
-            font-size: 0.9em;
-            font-family: 'Fira Code', monospace;
-        }
-
-        pre {
-            background: #1e1e2e;
-            color: #cdd6f4;
-            padding: 1.25rem;
-            border-radius: 8px;
-            overflow-x: auto;
-            margin-bottom: 1.25rem;
-        }
-
-        pre code {
-            background: none;
-            color: inherit;
-            padding: 0;
-        }
-
-        blockquote {
-            border-left: 4px solid #cdd6f4;
-            padding-left: 1rem;
-            color: #666;
-            margin: 1rem 0;
-            font-style: italic;
-        }
-
-        a {
-            color: #7287fd;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        img {
-            max-width: 100%;
-            border-radius: 6px;
-            margin: 1rem 0;
-        }
-
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-bottom: 1rem;
-        }
-
-        th,
-        td {
-            padding: 0.6rem 1rem;
-            border: 1px solid #ddd;
-            text-align: left;
-        }
-
-        th {
-            background: #f0f0f0;
-        }
-
-        .card-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 1rem;
-            margin-top: 1.5rem;
-        }
-
-        .card {
-            display: flex;
-            flex-direction: column;
-            padding: 1.25rem;
-            background: #fff;
-            border: 1px solid #e0e0e0;
-            border-radius: 10px;
-            text-decoration: none;
-            transition: box-shadow 0.2s, transform 0.2s;
-        }
-
-        .card:hover {
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-            transform: translateY(-2px);
-        }
-
-        .card-folder {
-            font-size: 0.75rem;
-            color: #888;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-bottom: 0.4rem;
-        }
-
-        .card-title {
-            font-size: 1rem;
-            font-weight: 600;
-            color: #1a1a1a;
-            text-transform: capitalize;
-        }
-    </style>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{title}}</title>
+  <style>
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    :root {
+      --bg: #0e0e0e;
+      --surface: #161616;
+      --border: #222222;
+      --text: #e2e2e2;
+      --muted: #444;
+      --muted-light: #777;
+      --nav-width: 240px;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      display: flex;
+      min-height: 100vh;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.7;
+    }
+
+    /* ── NAV ── */
+    nav {
+      width: var(--nav-width);
+      min-height: 100vh;
+      background: var(--surface);
+      border-right: 1px solid var(--border);
+      padding: 1.75rem 1rem;
+      position: sticky;
+      top: 0;
+      height: 100vh;
+      overflow-y: auto;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    nav.hidden {
+      display: none;
+    }
+
+    .nav-logo {
+      font-size: 0.65rem;
+      font-weight: 800;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      color: var(--muted-light);
+      text-decoration: none;
+      padding: 0 0.5rem;
+      margin-bottom: 0.75rem;
+      display: block;
+    }
+
+    .nav-logo:hover {
+      color: var(--text);
+    }
+
+    .nav-divider {
+      height: 1px;
+      background: var(--border);
+      margin: 0.5rem 0;
+    }
+
+    #search {
+      width: 100%;
+      padding: 0.5rem 0.6rem;
+      border: 1px solid var(--border);
+      background: var(--bg);
+      color: var(--text);
+      font-size: 0.8rem;
+      outline: none;
+      font-family: inherit;
+      margin-bottom: 0.5rem;
+    }
+
+    #search:focus {
+      border-color: #444;
+    }
+
+    #search::placeholder {
+      color: var(--muted);
+    }
+
+    .nav-section-label {
+      font-size: 0.6rem;
+      font-weight: 700;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      color: var(--muted);
+      padding: 0 0.5rem;
+      margin: 0.75rem 0 0.35rem;
+    }
+
+    #nav-list {
+      list-style: none;
+    }
+
+    #nav-list li a {
+      color: var(--muted-light);
+      text-decoration: none;
+      font-size: 0.82rem;
+      display: block;
+      padding: 0.3rem 0.5rem;
+      text-transform: capitalize;
+      border-left: 2px solid transparent;
+    }
+
+    #nav-list li a:hover {
+      color: var(--text);
+      border-left-color: var(--muted);
+    }
+
+    #search-results {
+      list-style: none;
+    }
+
+    #search-results li {
+      padding: 0.6rem 0.5rem;
+      border-bottom: 1px solid var(--border);
+    }
+
+    #search-results a {
+      font-size: 0.82rem;
+      font-weight: 600;
+      color: var(--text);
+      text-decoration: none;
+      text-transform: capitalize;
+      display: block;
+      margin-bottom: 0.15rem;
+    }
+
+    #search-results a:hover {
+      color: #fff;
+    }
+
+    #search-results p {
+      color: var(--muted-light);
+      font-size: 0.72rem;
+      line-height: 1.5;
+      margin: 0;
+    }
+
+    /* ── MAIN ── */
+    main {
+      flex: 1;
+      max-width: 700px;
+      margin: 0 auto;
+      padding: 4rem 2.5rem;
+    }
+
+    /* index page gets full width */
+    body.index-page main {
+      max-width: 900px;
+    }
+
+    /* ── TYPOGRAPHY ── */
+    h1 {
+      font-size: 1.75rem;
+      font-weight: 700;
+      margin-bottom: 0.75rem;
+      line-height: 1.2;
+    }
+
+    h2 {
+      font-size: 1.2rem;
+      font-weight: 600;
+      margin: 2.25rem 0 0.5rem;
+    }
+
+    h3 {
+      font-size: 1rem;
+      font-weight: 600;
+      margin: 1.5rem 0 0.4rem;
+    }
+
+    p {
+      margin-bottom: 1rem;
+      color: #aaa;
+    }
+
+    a {
+      color: var(--text);
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+
+    a:hover {
+      color: #fff;
+    }
+
+    code {
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      font-size: 0.82em;
+      background: var(--surface);
+      color: #ccc;
+      padding: 0.15em 0.4em;
+      border: 1px solid var(--border);
+    }
+
+    pre {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      padding: 1.25rem 1.5rem;
+      overflow-x: auto;
+      margin-bottom: 1.25rem;
+      font-size: 0.82rem;
+      line-height: 1.7;
+    }
+
+    pre code {
+      background: none;
+      color: #ccc;
+      padding: 0;
+      border: none;
+      font-size: inherit;
+    }
+
+    blockquote {
+      border-left: 2px solid var(--border);
+      padding: 0.4rem 0 0.4rem 1rem;
+      color: var(--muted-light);
+      margin: 1.25rem 0;
+      font-style: italic;
+    }
+
+    hr {
+      border: none;
+      border-top: 1px solid var(--border);
+      margin: 2rem 0;
+    }
+
+    img {
+      max-width: 100%;
+      margin: 1rem 0;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-bottom: 1.25rem;
+      font-size: 0.875rem;
+    }
+
+    th,
+    td {
+      padding: 0.6rem 0.875rem;
+      border: 1px solid var(--border);
+      text-align: left;
+    }
+
+    th {
+      background: var(--surface);
+      font-weight: 600;
+      color: var(--text);
+    }
+
+    td {
+      color: #aaa;
+    }
+
+    ul,
+    ol {
+      padding-left: 1.5rem;
+      margin-bottom: 1rem;
+      color: #aaa;
+    }
+
+    li {
+      margin-bottom: 0.25rem;
+    }
+
+    /* ── INDEX PAGE ── */
+    .index-header {
+      margin-bottom: 3rem;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 2rem;
+    }
+
+    .index-header h1 {
+      font-size: 2rem;
+      margin-bottom: 0.4rem;
+    }
+
+    .index-header p {
+      color: var(--muted-light);
+      font-size: 0.9rem;
+      margin: 0;
+    }
+
+    .card-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      gap: 1px;
+      background: var(--border);
+      border: 1px solid var(--border);
+    }
+
+    .card {
+      display: flex;
+      flex-direction: column;
+      padding: 1.25rem;
+      background: var(--bg);
+      text-decoration: none;
+      transition: background 0.1s;
+    }
+
+    .card:hover {
+      background: var(--surface);
+    }
+
+    .card-folder {
+      font-size: 0.6rem;
+      color: var(--muted);
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      margin-bottom: 0.4rem;
+    }
+
+    .card-title {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--text);
+      text-transform: capitalize;
+    }
+
+    /* ── SEARCH HIGHLIGHT ── */
+    mark {
+      background: #2a2a2a;
+      color: #fff;
+      padding: 0 2px;
+    }
+
+    .page-meta {
+      margin-bottom: 2rem;
+      padding-bottom: 1.25rem;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .page-date {
+      font-size: 0.75rem;
+      color: var(--muted-light);
+      letter-spacing: 0.05em;
+      display: block;
+      margin-bottom: 0.4rem;
+    }
+
+    .page-description {
+      color: var(--muted-light) !important;
+      font-size: 0.9rem;
+      margin: 0 !important;
+    }
+  </style>
 </head>
 
 <body>
-    <nav>
-        <h2>markform</h2>
-        <input id="search" type="text" placeholder="Search..." />
-        <ul id="nav-list">{{nav}}</ul>
-        <ul id="search-results" style="list-style:none; display:none;"></ul>
-    </nav>
-    <main>
-        {{content}}
-    </main>
-
-    <script src="https://cdn.jsdelivr.net/npm/fuse.js@7/dist/fuse.min.js"></script>
-    <script>
-        let fuse;
-
-        fetch('/search-index.json')
-            .then(r => r.json())
-            .then(data => {
-                fuse = new Fuse(data, {
-                    keys: ['title', 'content'],
-                    threshold: 0.1,
-                    includeScore: true,
-                    ignoreLocation: true,
-                    minMatchCharLength: 3,
-                });
-            });
-
-        function highlight(text, query) {
-            if (!query) return text;
-            const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
-            return text.replace(regex, '<mark style="background:#f9e2af;color:#1e1e2e;border-radius:3px;padding:0 2px;">$1</mark>');
-        }
-
-        function getSnippet(content, query) {
-            const idx = content.toLowerCase().indexOf(query.toLowerCase());
-            if (idx === -1) return content.slice(0, 100) + '...';
-            const start = Math.max(0, idx - 40);
-            const end = Math.min(content.length, idx + 80);
-            return (start > 0 ? '...' : '') + content.slice(start, end) + (end < content.length ? '...' : '');
-        }
-
-        document.getElementById('search').addEventListener('input', function () {
-            const query = this.value.trim();
-            const navList = document.getElementById('nav-list');
-            const results = document.getElementById('search-results');
-
-            if (!query || !fuse || query.length < 2) {
-                navList.style.display = '';
-                results.style.display = 'none';
-                results.innerHTML = '';
-                return;
-            }
-
-            const matches = fuse.search(query).slice(0, 8);
-            navList.style.display = 'none';
-            results.style.display = '';
-            results.innerHTML = matches.length
-                ? matches.map(m => {
-                    const snippet = getSnippet(m.item.content, query);
-                    return `<li style="margin-bottom:1rem">
-            <a href="/${m.item.href}" style="color:#cdd6f4;text-decoration:none;font-size:0.95rem;text-transform:capitalize;font-weight:600;">
-              ${highlight(m.item.title, query)}
-            </a>
-            <p style="color:#6c7086;font-size:0.8rem;margin-top:0.25rem;line-height:1.4;">
-              ${highlight(snippet, query)}
-            </p>
-          </li>`;
-                }).join('')
-                : `<li style="color:#6c7086;font-size:0.9rem">No results found.</li>`;
-        });
-    </script>
+  <nav id="sidebar">
+    <a class="nav-logo" href="index.html">markform</a>
+    <div class="nav-divider"></div>
+    <input id="search" type="text" placeholder="Search..." />
+    <span class="nav-section-label">Pages</span>
+    <ul id="nav-list">{{nav}}</ul>
+    <ul id="search-results" style="display:none;"></ul>
+  </nav>
+  <main>
+    {{content}}
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/fuse.js@7/dist/fuse.min.js"></script>
+  <script>
+    const searchData = {{ search_index }};
+
+    if (document.body.dataset.page === 'index') {
+      document.getElementById('sidebar').classList.add('hidden');
+      document.body.classList.add('index-page');
+    }
+
+    const fuse = new Fuse(searchData, {
+      keys: ['title', 'content'],
+      threshold: 0.1,
+      includeScore: true,
+      ignoreLocation: true,
+      minMatchCharLength: 3,
+    });
+
+    function highlight(text, query) {
+      if (!query) return text;
+      const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+      return text.replace(regex, '<mark>$1</mark>');
+    }
+
+    function getSnippet(content, query) {
+      const idx = content.toLowerCase().indexOf(query.toLowerCase());
+      if (idx === -1) return content.slice(0, 120) + '...';
+      const start = Math.max(0, idx - 40);
+      const end = Math.min(content.length, idx + 100);
+      return (start > 0 ? '...' : '') + content.slice(start, end) + (end < content.length ? '...' : '');
+    }
+
+    function resolveHref(href) {
+      const isFile = window.location.protocol === 'file:';
+      if (!isFile) return '/' + href;
+      const parts = window.location.pathname.split('/');
+      parts.pop();
+      return 'file://' + parts.join('/') + '/' + href;
+    }
+
+    const searchEl = document.getElementById('search');
+    if (searchEl) {
+      searchEl.addEventListener('input', function () {
+        const query = this.value.trim();
+        const navList = document.getElementById('nav-list');
+        const results = document.getElementById('search-results');
+
+        if (!query || query.length < 2) {
+          navList.style.display = '';
+          results.style.display = 'none';
+          results.innerHTML = '';
+          return;
+        }
+
+        const matches = fuse.search(query).slice(0, 8);
+        navList.style.display = 'none';
+        results.style.display = '';
+        results.innerHTML = matches.length
+          ? matches.map(m => `
+              <li>
+                <a href="${resolveHref(m.item.href)}">${highlight(m.item.title, query)}</a>
+                <p>${highlight(getSnippet(m.item.content, query), query)}</p>
+              </li>`).join('')
+          : `<li><p>No results found.</p></li>`;
+      });
+    }
+  </script>
 </body>
 
 </html>