markform-cli 1.0.1 → 1.2.1

package/README.md

@@ -1,4 +1,4 @@
-![Markdown Banner](https://github.com/aryan-madan/Markform/blob/main/images/Markform%20|%20Devlog%202%20.png)
+![Markdown Banner](images/Markform%20|%20Banner.png)
 
 Turn any folder of Markdown files into a beautiful, searchable static site — in one command.
 ```bash
@@ -23,6 +23,11 @@ npm install -g markform-cli
 markform ./my-notes -o ./output
 ```
 
+If it doesn't work (mainly on windows), use:
+```bash
+npx markform-cli ./test -o ./output
+```
+
 **Watch mode** — auto-rebuilds and live-reloads the browser on file changes:
 ```bash
 markform ./my-notes -o ./output --watch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markform-cli",
-  "version": "1.0.1",
+  "version": "1.2.1",
   "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,7 @@
     "express": "^5.2.1",
     "fs-extra": "^11.3.3",
     "fuse.js": "^7.1.0",
-    "marked": "^17.0.3"
+    "marked": "^17.0.3",
+    "open": "^11.0.0"
   }
 }

package/src/build.js

@@ -2,9 +2,19 @@ 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');
+
+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 +26,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 +40,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,12 +64,13 @@ 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 htmlContent = marked(content);
@@ -66,7 +80,8 @@ async function compile(inputDir, outputDir, watch = false) {
     let html = template
       .replace('{{content}}', htmlContent)
       .replace('{{nav}}', nav)
-      .replace('{{title}}', path.basename(filePath, '.md'));
+      .replace('{{title}}', path.basename(filePath, '.md'))
+      .replace('{{search_index}}', searchIndexJson);
 
     if (watch) {
       html = html.replace('</body>', `
@@ -80,12 +95,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,19 +117,23 @@ function getMdFiles(dir) {
   return results;
 }
 
-async function buildSearchIndex(mdFiles, inputDir, outputDir) {
-  const index = mdFiles.map((filePath) => {
-    const content = fs.readFileSync(filePath, 'utf-8');
+function buildSearchIndex(mdFiles, inputDir) {
+  return mdFiles.map((filePath) => {
+    const raw = fs.readFileSync(filePath, 'utf-8');
+    const content = raw
+      .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 };
   });
-
-  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,25 @@ 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);
 }
 
 module.exports = { buildIndexPage };

package/test/hello.md

@@ -1,3 +1,3 @@
 # Hello World
 
-This is my first note.
+This is my first note.

package/themes/default.html

@@ -1,262 +1,328 @@
 <!DOCTYPE html>
 <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; }
+  </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.4,
-                });
-            });
-
-        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) {
-                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 style="margin-bottom:0.6rem">
-              <a href="/${m.item.href}" style="color:#a6adc8;text-decoration:none;font-size:0.95rem;text-transform:capitalize;">
-                ${m.item.title}
-              </a>
-            </li>`
-                ).join('')
-                : `<li style="color:#6c7086;font-size:0.9rem">No results found.</li>`;
-        });
-    </script>
-</body>
+  <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}};
+
+    // Hide sidebar on index page
+    if (document.title === 'Home') {
+      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>