@sirux/md-press 0.1.0 → 0.2.0

package/src/build.js

@@ -1,9 +1,14 @@
 /*
 Turns Markdown text into one self-contained, styled HTML page. No network
 calls and no AI. Markdown is parsed with marked, code blocks are highlighted
-at build time with highlight.js, and the stylesheet and checklist script are
-inlined so every page is a single file that opens anywhere. The only outside
-request is Mermaid, loaded from a CDN only on pages that contain a diagram.
+at build time with highlight.js, and the stylesheet and page script are
+inlined so every page is a single file that opens anywhere. Images next to
+the source are inlined too, so a built page can be sent on its own. The only
+outside request is Mermaid, loaded from a CDN only on pages that contain a
+diagram.
+
+Beyond plain GitHub-flavored Markdown, pages get heading ids for anchor
+links, GitHub-style callouts ("> [!NOTE]"), and footnotes ("[^1]").
 
 The same builder renders pages for md-press serve. There the page script
 saves checkboxes to the Markdown file instead of the browser, and the toolbar
@@ -12,7 +17,8 @@ shows whether the page is live.
 
 const fileSystem = require("fs");
 const path = require("path");
-const { Marked } = require("marked");
+const { Marked, Lexer } = require("marked");
+const markedFootnote = require("marked-footnote");
 const highlighter = require("highlight.js");
 const { splitFrontmatter } = require("./frontmatter.js");
 const { findTaskLines } = require("./tasks.js");
@@ -22,6 +28,19 @@ const pageStyles = fileSystem.readFileSync(path.join(templateFolder, "page.css")
 const pageScript = fileSystem.readFileSync(path.join(templateFolder, "page.js"), "utf8");
 const mermaidScriptUrl = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js";
 
+const inlineImageLimit = 4 * 1024 * 1024;
+const imageTypes = {
+  ".avif": "image/avif",
+  ".gif": "image/gif",
+  ".jpeg": "image/jpeg",
+  ".jpg": "image/jpeg",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+};
+const calloutTitles = { note: "Note", tip: "Tip", important: "Important", warning: "Warning", caution: "Caution" };
+const calloutPattern = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\][ \t]*(?:\n|$)/;
+
 function escapeHtml(text) {
   return String(text)
     .replace(/&/g, "&")
@@ -31,47 +50,172 @@ function escapeHtml(text) {
 }
 
 /*
-Builds a marked instance with one change from the defaults: fenced code gets
-highlighted, and mermaid fences are kept as diagram source for the browser.
+The text of inline tokens with all markup removed, for the page title and
+heading ids. A link keeps its text, an image its alt text, raw HTML nothing.
+*/
+function plainText(tokens) {
+  return (tokens || []).map((token) => {
+    if (token.type === "html" || token.type === "checkbox") return "";
+    if (token.type === "image") return token.text;
+    if (token.tokens) return plainText(token.tokens);
+    if (token.type === "text" || token.type === "escape" || token.type === "codespan") return token.text;
+    return token.raw || "";
+  }).join("");
+}
+
+/*
+GitHub-style heading ids: lowercase, punctuation dropped, spaces to hyphens.
+Letters in any script are kept, so Thai or Japanese headings get ids too.
 */
-function createParser(documentState) {
+function slugify(text) {
+  return text.toLowerCase().trim().replace(/[^\p{L}\p{N}\p{M}\s_-]/gu, "").replace(/\s/g, "-");
+}
+
+function isRelativeUrl(href) {
+  return Boolean(href) && !/^[a-z][a-z0-9+.-]*:/i.test(href) && !href.startsWith("/") && !href.startsWith("#");
+}
+
+/*
+Reads an image next to the source file and returns it as a data URL, or null
+when it should stay a link: not an image type, missing, or too large.
+*/
+function inlineImage(href, folder, warn) {
+  const [filePart] = href.split(/[?#]/);
+  let filePath;
+  try {
+    filePath = path.resolve(folder, decodeURIComponent(filePart));
+  } catch (_error) {
+    return null;
+  }
+  const contentType = imageTypes[path.extname(filePath).toLowerCase()];
+  if (!contentType) return null;
+  let stats;
+  try {
+    stats = fileSystem.statSync(filePath);
+  } catch (_error) {
+    warn(`image not found: ${filePart}`);
+    return null;
+  }
+  if (!stats.isFile()) return null;
+  if (stats.size > inlineImageLimit) {
+    warn(`left ${filePart} as a link: ${(stats.size / 1048576).toFixed(1)} MB is over the ${inlineImageLimit / 1048576} MB limit for inlining`);
+    return null;
+  }
+  return `data:${contentType};base64,${fileSystem.readFileSync(filePath).toString("base64")}`;
+}
+
+/*
+Turns a blockquote whose first line is "[!NOTE]" (or TIP, IMPORTANT, WARNING,
+CAUTION) into a callout token, the way GitHub renders it. The marker is
+removed from the first paragraph; the rest of the quote is the callout body.
+*/
+function markCallout(token) {
+  const paragraph = token.tokens[0];
+  if (!paragraph || !["paragraph", "text"].includes(paragraph.type) || !paragraph.tokens) return;
+  const match = paragraph.text.match(calloutPattern);
+  const firstInline = paragraph.tokens[0];
+  if (!match || !firstInline || firstInline.type !== "text" || !calloutPattern.test(firstInline.text)) return;
+  token.type = "callout";
+  token.calloutType = match[1].toLowerCase();
+  paragraph.text = paragraph.text.replace(calloutPattern, "");
+  firstInline.text = firstInline.text.replace(calloutPattern, "");
+  firstInline.raw = firstInline.text;
+  if (firstInline.text === "") paragraph.tokens.shift();
+  if (paragraph.tokens.length === 0) token.tokens.shift();
+}
+
+/*
+Builds a marked instance for one document. Fenced code is highlighted and
+mermaid fences are kept as diagram source. Headings get ids. Task items are
+marked on their <li> and their checkboxes rendered live, so the page script
+can find and save them. On built pages, relative links to other Markdown
+files point at the pages they become, and images are inlined.
+*/
+function createParser(documentState, options) {
   const markdownParser = new Marked();
+  const slugCounts = new Map();
+  markdownParser.use(markedFootnote());
   markdownParser.use({
+    hooks: {
+      processAllTokens(tokens) {
+        documentState.tokens = tokens;
+        return tokens;
+      },
+    },
+    walkTokens(token) {
+      if (token.type === "blockquote") markCallout(token);
+      if (token.type === "link" && options.rewriteMarkdownLinks && isRelativeUrl(token.href)) {
+        token.href = token.href.replace(/\.(?:md|markdown)(?=$|[#?])/i, ".html");
+      }
+      if (token.type === "image" && options.inlineImagesFrom && isRelativeUrl(token.href)) {
+        const dataUrl = inlineImage(token.href, options.inlineImagesFrom, options.warn);
+        if (dataUrl) token.href = dataUrl;
+      }
+    },
+    extensions: [{
+      name: "callout",
+      renderer(token) {
+        const title = calloutTitles[token.calloutType];
+        return `<div class="callout callout-${token.calloutType}" role="note"><p class="callout-title">${title}</p>\n${this.parser.parse(token.tokens)}</div>\n`;
+      },
+    }],
     renderer: {
+      heading({ tokens, depth }) {
+        const slug = slugify(plainText(tokens));
+        const seen = slugCounts.get(slug) || 0;
+        slugCounts.set(slug, seen + 1);
+        const id = seen === 0 ? slug : `${slug}-${seen}`;
+        return `<h${depth}${id ? ` id="${escapeHtml(id)}"` : ""}>${this.parser.parseInline(tokens)}</h${depth}>\n`;
+      },
       code({ text, lang }) {
         const language = (lang || "").trim().split(/\s+/)[0];
         if (language === "mermaid") {
           documentState.hasMermaid = true;
           return `<pre class="mermaid">${escapeHtml(text)}</pre>\n`;
         }
+        documentState.codeBlockCount += 1;
         const highlighted = language && highlighter.getLanguage(language)
           ? highlighter.highlight(text, { language }).value
           : escapeHtml(text);
         const languageLabel = language ? ` data-language="${escapeHtml(language)}"` : "";
         return `<pre${languageLabel}><code class="hljs">${highlighted}</code></pre>\n`;
       },
+      listitem(item) {
+        return `<li${item.task ? ' class="task-item"' : ""}>${this.parser.parse(item.tokens)}</li>\n`;
+      },
+      checkbox({ checked }) {
+        documentState.taskCount += 1;
+        return `<input type="checkbox" class="task"${checked ? " checked" : ""}> `;
+      },
     },
   });
   return markdownParser;
 }
 
 /*
-marked renders task list items as disabled checkboxes. This swaps them for
-live ones the inlined page script can save, and counts them so the page only
-gets the progress bar and script when it needs them.
+The title comes from frontmatter, then the first level-one heading, then the
+first heading of any level, then the file name. Headings are read from the
+parsed tokens, so a "#" inside a code block is never mistaken for one and
+setext headings (underlined with =) count too.
 */
-function enableTaskCheckboxes(html, documentState) {
-  return html.replace(/<input (checked="" )?disabled="" type="checkbox">/g, (_fullMatch, checkedAttribute) => {
-    documentState.taskCount += 1;
-    return `<input type="checkbox" class="task"${checkedAttribute ? " checked" : ""}>`;
-  });
+function findTitle(metadata, tokens, fallback) {
+  if (metadata.title) return metadata.title;
+  const headings = tokens.filter((token) => token.type === "heading");
+  const heading = headings.find((token) => token.depth === 1) || headings[0];
+  return (heading && plainText(heading.tokens).trim()) || fallback;
 }
 
-function findTitle(metadata, body, sourceName) {
-  if (metadata.title) return metadata.title;
-  const heading = body.match(/^#\s+(.+)$/m);
-  if (heading) return heading[1].replace(/[*_`]/g, "").trim();
-  return path.basename(sourceName, path.extname(sourceName));
+/*
+The date shown in the footer of a built page: the source file's last change,
+in local time, so rebuilding an unchanged file gives an identical page.
+SOURCE_DATE_EPOCH, the convention for reproducible builds, overrides it.
+*/
+function formatSourceDate(date) {
+  const epoch = process.env.SOURCE_DATE_EPOCH;
+  if (epoch && /^\d+$/.test(epoch)) return new Date(Number(epoch) * 1000).toISOString().slice(0, 10);
+  if (!(date instanceof Date) || Number.isNaN(date.getTime())) return "";
+  const pad = (number) => String(number).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 }
 
 /*
@@ -92,45 +236,57 @@ function renderToolbar(taskCount, live) {
 }
 
 /*
-Assembles the final page from Markdown text. The source name sets the
-fallback title, the footer, and the checklist storage key, which is based on
-the file name so saved progress survives edits and rebuilds of the same file.
+Renders Markdown text into a page and reports what it found. The source name
+sets the fallback title, the footer, and the checklist storage key, which is
+based on the file name so saved progress survives edits and rebuilds of the
+same file. A source name of "-" means standard input, with no file to name.
+
+Options:
+  live             { version } renders a page for md-press serve. It is only
+                   writable when the task scanner finds exactly as many tasks
+                   as the page rendered, so a checkbox can never be saved to
+                   the wrong line. Live pages keep links to .md files as they
+                   are; built pages point them at .html.
+  inlineImagesFrom Folder to read relative images from and inline them.
+  sourceModified   Date of the source file's last change, for the footer.
+  onWarning        Called with a message for each image that could not be
+                   inlined.
 
-Passing options.live with the file's version renders a page for md-press
-serve. It is only writable when the task scanner finds exactly as many tasks
-as the page rendered, so a checkbox can never be saved to the wrong line.
+Returns { html, title, taskCount, scannedTaskCount, writable }.
 */
-function renderPage(sourceText, sourceName = "document.md", options = {}) {
+function renderDocument(sourceText, sourceName = "document.md", options = {}) {
   const { metadata, body } = splitFrontmatter(sourceText);
-  const documentState = { hasMermaid: false, taskCount: 0 };
-  const markdownParser = createParser(documentState);
-  const content = enableTaskCheckboxes(markdownParser.parse(body), documentState);
-  const title = findTitle(metadata, body, sourceName);
-  const baseName = path.basename(sourceName);
-  const generatedDate = new Date().toISOString().slice(0, 10);
+  const documentState = { hasMermaid: false, taskCount: 0, codeBlockCount: 0, tokens: [] };
+  const markdownParser = createParser(documentState, {
+    rewriteMarkdownLinks: !options.live,
+    inlineImagesFrom: options.inlineImagesFrom,
+    warn: options.onWarning || (() => {}),
+  });
+  const content = markdownParser.parse(body);
+  const baseName = sourceName === "-" ? "" : path.basename(sourceName);
+  const stem = baseName ? path.basename(baseName, path.extname(baseName)) : "";
+  const title = findTitle(metadata, documentState.tokens, stem || "Untitled");
+  const scannedTaskCount = findTaskLines(sourceText).length;
 
   const live = options.live
-    ? {
-        version: options.live.version,
-        fileName: baseName,
-        writable: findTaskLines(sourceText).length === documentState.taskCount,
-      }
+    ? { version: options.live.version, fileName: baseName, writable: scannedTaskCount === documentState.taskCount }
     : null;
   const pageSettings = {
-    storageKey: "md-press:" + path.basename(sourceName, path.extname(sourceName)),
+    storageKey: "md-press:" + (stem || slugify(title) || "untitled"),
     live,
   };
-  const needsPageScript = documentState.taskCount > 0 || live;
+  const needsPageScript = documentState.taskCount > 0 || documentState.codeBlockCount > 0 || live;
   const scripts = [
     needsPageScript ? `<script>const mdPress = ${JSON.stringify(pageSettings).replace(/</g, "\\u003c")};\n${pageScript}</script>` : "",
     documentState.hasMermaid ? `<script src="${mermaidScriptUrl}"></script><script>if (window.mermaid) mermaid.initialize({ startOnLoad: true, theme: matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "neutral" });</script>` : "",
   ].filter(Boolean).join("\n");
+  const sourceDate = formatSourceDate(options.sourceModified);
   const footerText = live
     ? `Serving ${escapeHtml(baseName)} with md-press`
-    : `Generated ${generatedDate} from ${escapeHtml(baseName)} with md-press`;
+    : `Generated${baseName ? ` from ${escapeHtml(baseName)}` : ""} with md-press.${sourceDate ? ` Source last changed ${sourceDate}.` : ""}`;
 
-  return `<!doctype html>
-<html lang="en">
+  const html = `<!doctype html>
+<html lang="${escapeHtml(metadata.lang || "en")}">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
@@ -148,18 +304,35 @@ ${scripts}
 </body>
 </html>
 `;
+  return { html, title, taskCount: documentState.taskCount, scannedTaskCount, writable: live ? live.writable : true };
+}
+
+function renderPage(sourceText, sourceName, options) {
+  return renderDocument(sourceText, sourceName, options).html;
 }
 
 /*
 Reads one Markdown file and writes its page next to it, or into the output
-folder when one is given. Returns the path of the page it wrote.
+folder when one is given, or to options.outputPath. Images next to the file
+are inlined. Returns the path of the page it wrote.
 */
-function buildFile(sourcePath, outputFolder) {
+function buildFile(sourcePath, outputFolder, options = {}) {
   const sourceText = fileSystem.readFileSync(sourcePath, "utf8");
   const outputName = path.basename(sourcePath, path.extname(sourcePath)) + ".html";
-  const outputPath = path.join(outputFolder || path.dirname(sourcePath), outputName);
-  fileSystem.writeFileSync(outputPath, renderPage(sourceText, sourcePath));
+  const outputPath = options.outputPath || path.join(outputFolder || path.dirname(sourcePath), outputName);
+  const { html } = renderDocument(sourceText, sourcePath, {
+    inlineImagesFrom: path.dirname(path.resolve(sourcePath)),
+    sourceModified: fileSystem.statSync(sourcePath).mtime,
+    onWarning: options.onWarning,
+  });
+  fileSystem.mkdirSync(path.dirname(outputPath), { recursive: true });
+  fileSystem.writeFileSync(outputPath, html);
   return outputPath;
 }
 
-module.exports = { renderPage, buildFile, splitFrontmatter, escapeHtml };
+/* The plain text of a line of inline Markdown, with markup removed. */
+function markdownToText(markdown) {
+  return plainText(Lexer.lexInline(markdown)).trim();
+}
+
+module.exports = { renderPage, renderDocument, buildFile, splitFrontmatter, escapeHtml, markdownToText, slugify };

package/src/frontmatter.js

@@ -1,21 +1,29 @@
 /*
 Reads the optional frontmatter block at the top of a Markdown file. Only
-simple "key: value" lines are supported, which covers title and description.
-Values wrapped in matching quotes lose those quotes; quotes inside a value
-are kept. Shared by the page builder and the task scanner so both agree on
-where the Markdown body starts.
+simple "key: value" lines are supported, which covers title, description,
+and lang. Values wrapped in matching quotes lose those quotes; quotes inside
+a value are kept. A byte order mark before the block, which some Windows
+editors write, is tolerated and dropped from the body. Shared by the page
+builder and the task scanner so both agree on where the Markdown body starts.
 */
 
 const frontmatterPattern = /^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/;
 
+function byteOrderMarkLength(sourceText) {
+  return sourceText.charCodeAt(0) === 0xfeff ? 1 : 0;
+}
+
+/* Length of the byte order mark and frontmatter block, so the body can be found. */
 function frontmatterLength(sourceText) {
-  const match = sourceText.match(frontmatterPattern);
-  return match ? match[0].length : 0;
+  const markLength = byteOrderMarkLength(sourceText);
+  const match = sourceText.slice(markLength).match(frontmatterPattern);
+  return markLength + (match ? match[0].length : 0);
 }
 
 function splitFrontmatter(sourceText) {
-  const match = sourceText.match(frontmatterPattern);
-  if (!match) return { metadata: {}, body: sourceText };
+  const text = sourceText.slice(byteOrderMarkLength(sourceText));
+  const match = text.match(frontmatterPattern);
+  if (!match) return { metadata: {}, body: text };
   const metadata = {};
   for (const line of match[1].split(/\r?\n/)) {
     const separatorIndex = line.indexOf(":");
@@ -24,7 +32,7 @@ function splitFrontmatter(sourceText) {
     const value = line.slice(separatorIndex + 1).trim().replace(/^(["'])(.*)\1$/, "$2");
     if (key) metadata[key] = value;
   }
-  return { metadata, body: sourceText.slice(match[0].length) };
+  return { metadata, body: text.slice(match[0].length) };
 }
 
-module.exports = { splitFrontmatter, frontmatterLength };
+module.exports = { splitFrontmatter, frontmatterLength, byteOrderMarkLength };

package/src/index.js

@@ -0,0 +1,10 @@
+/*
+Everything md-press exports for use from code: the page builder, the board
+parser and editors, and the task scanner they share.
+*/
+
+module.exports = {
+  ...require("./build.js"),
+  ...require("./board.js"),
+  ...require("./tasks.js"),
+};

package/src/serve.js

@@ -1,7 +1,9 @@
 /*
-Serves one Markdown file as a live page on localhost. The file stays the
-source of truth: people, editors, and agents can change it while the page is
-open, and the page reloads to match.
+Serves one Markdown file as a live page, or as a live Kanban board, on
+localhost. The file stays the source of truth: people, editors, and agents
+can change it while the page is open, and the page reloads to match. Both
+views are always available: / shows the one the command asked for, /page
+and /board show the other.
 
 Writes are guarded three ways. Every save carries the version (a hash of the
 file) that the page was built from, and is refused with 409 if the file has
@@ -9,6 +11,10 @@ changed since. Each write goes to a temporary file that is then renamed over
 the original, so the file is never left half written. Only the character
 between a task's brackets changes, through setTaskState.
 
+When a page opens read-only, because the task scanner and the page disagree
+on how many tasks the file has, the reason is printed once per file version
+so the user can fix the file.
+
 The server binds to 127.0.0.1 and answers only requests addressed to
 localhost, which blocks DNS rebinding. Saves must be JSON, which a page on
 another site cannot send without a CORS preflight that this server never
@@ -21,8 +27,9 @@ const fileSystemPromises = require("fs/promises");
 const http = require("http");
 const path = require("path");
 const crypto = require("crypto");
-const { renderPage } = require("./build.js");
+const { renderDocument } = require("./build.js");
 const { setTaskState, findTaskLines } = require("./tasks.js");
+const { renderBoard, moveCard, addCard } = require("./board.js");
 
 const maximumRequestBytes = 64 * 1024;
 const allowedHostNames = new Set(["localhost", "127.0.0.1"]);
@@ -109,6 +116,51 @@ async function handleTaskSave(request, response, sourcePath) {
   return send(response, 200, { version: versionOf(updatedText) });
 }
 
+/*
+Applies one board change: moving a card between or within columns, or
+adding a card. Guarded the same way as a checkbox save: JSON only, the
+version must match, and the write is atomic.
+*/
+async function handleBoardChange(request, response, sourcePath) {
+  if (!(request.headers["content-type"] || "").startsWith("application/json")) {
+    return send(response, 415, { error: "Expected application/json" });
+  }
+  let payload;
+  try {
+    payload = JSON.parse(await readRequestBody(request));
+  } catch (error) {
+    return send(response, error.status || 400, { error: error.status ? error.message : "Invalid JSON" });
+  }
+  const { action, version } = payload || {};
+  if (typeof version !== "string") return send(response, 400, { error: "Expected a version" });
+
+  const currentText = fileSystem.readFileSync(sourcePath, "utf8");
+  const currentVersion = versionOf(currentText);
+  if (currentVersion !== version) {
+    return send(response, 409, { error: "The file changed on disk. Reload to see it.", version: currentVersion });
+  }
+  let updatedText;
+  try {
+    if (action === "move") {
+      const { from, to } = payload;
+      const isPosition = (value) => value && Number.isInteger(value.column) && value.column >= 0 && (Number.isInteger(value.index) || value.index === null) ;
+      if (!isPosition(from) || !isPosition(to) || from.index === null) return send(response, 400, { error: "Expected from and to as { column, index }" });
+      updatedText = moveCard(currentText, from, { column: to.column, index: to.index === null ? Infinity : to.index });
+    } else if (action === "add") {
+      const { column, text } = payload;
+      if (!Number.isInteger(column) || column < 0 || typeof text !== "string") return send(response, 400, { error: "Expected column and text" });
+      updatedText = addCard(currentText, column, text);
+    } else {
+      return send(response, 400, { error: "Expected action move or add" });
+    }
+  } catch (error) {
+    if (error instanceof RangeError) return send(response, 400, { error: error.message });
+    throw error;
+  }
+  if (updatedText !== currentText) writeFileAtomically(sourcePath, updatedText);
+  return send(response, 200, { version: versionOf(updatedText) });
+}
+
 /*
 Serves a file from the Markdown file's folder. The resolved path must stay
 inside that folder, and any path segment starting with a dot is refused so
@@ -137,9 +189,26 @@ async function handleFolderFile(response, sourceFolder, requestPath) {
   }
 }
 
-function createServeHandler(sourcePath) {
+function createServeHandler(sourcePath, mode = "page") {
   const resolvedSourcePath = path.resolve(sourcePath);
   const sourceFolder = path.dirname(resolvedSourcePath);
+  let warnedVersion = null;
+
+  function renderLivePage(response) {
+    const text = fileSystem.readFileSync(resolvedSourcePath, "utf8");
+    const version = versionOf(text);
+    const page = renderDocument(text, resolvedSourcePath, { live: { version } });
+    if (!page.writable && warnedVersion !== version) {
+      warnedVersion = version;
+      console.error(`${path.basename(resolvedSourcePath)} opened read-only: the file has ${page.scannedTaskCount} task lines but the page shows ${page.taskCount} checkboxes. A task inside a code block, raw HTML, or a comment is the usual cause.`);
+    }
+    return send(response, 200, page.html, "text/html; charset=utf-8");
+  }
+
+  function renderLiveBoard(response) {
+    const text = fileSystem.readFileSync(resolvedSourcePath, "utf8");
+    return send(response, 200, renderBoard(text, resolvedSourcePath, { live: { version: versionOf(text) } }), "text/html; charset=utf-8");
+  }
 
   return async function handleRequest(request, response) {
     const hostName = (request.headers.host || "").replace(/:\d+$/, "").replace(/^\[|\]$/g, "");
@@ -148,8 +217,12 @@ function createServeHandler(sourcePath) {
     try {
       const url = new URL(request.url, "http://localhost");
       if (request.method === "GET" && (url.pathname === "/" || url.pathname === "/index.html")) {
-        const text = fileSystem.readFileSync(resolvedSourcePath, "utf8");
-        return send(response, 200, renderPage(text, resolvedSourcePath, { live: { version: versionOf(text) } }), "text/html; charset=utf-8");
+        return mode === "board" ? renderLiveBoard(response) : renderLivePage(response);
+      }
+      if (request.method === "GET" && url.pathname === "/page") return renderLivePage(response);
+      if (request.method === "GET" && url.pathname === "/board") return renderLiveBoard(response);
+      if (request.method === "POST" && url.pathname === "/api/board") {
+        return await handleBoardChange(request, response, resolvedSourcePath);
       }
       if (request.method === "GET" && url.pathname === "/api/version") {
         return send(response, 200, { version: versionOf(fileSystem.readFileSync(resolvedSourcePath, "utf8")) });
@@ -167,10 +240,11 @@ function createServeHandler(sourcePath) {
 
 /*
 Starts the server on the first free port, beginning at the requested one and
-trying the next nine. Resolves with the server and its address.
+trying the next nine. mode is "page" or "board" and picks what / shows.
+Resolves with the server and its address.
 */
-function startServer(sourcePath, { port = 5180, attempts = 10 } = {}) {
-  const server = http.createServer(createServeHandler(sourcePath));
+function startServer(sourcePath, { port = 5180, attempts = 10, mode = "page" } = {}) {
+  const server = http.createServer(createServeHandler(sourcePath, mode));
   return new Promise((resolve, reject) => {
     let attemptPort = port;
     let remainingAttempts = attempts;