path: root/_writing/serve.mjs

/* Local writing desk. Serves the split-pane editor, reads and writes post
   files, and renders a real post page for preview. Localhost only — it writes
   to disk and has no auth by design. */

import fs from "node:fs";
import path from "node:path";
import http from "node:http";
import { spawn } from "node:child_process";
import { fileURLToPath } from "node:url";

import { renderPostPage } from "./lib/template.mjs";
import { BLOG_CSS } from "./lib/theme.mjs";
import { BLOG_JS } from "./lib/postjs.mjs";
import {
  loadPosts, findPost, serialize, slugify, todayISO, parseFrontmatter,
  dirFor, ensureDirs, ROOT_DIR, WRITING_DIR,
  COVER_EXTS, findCover, coverOf, coverUrl, removeCover, moveCover,
} from "./lib/posts.mjs";

const PORT = Number(process.env.PORT) || 4000;
const HERE = path.dirname(fileURLToPath(import.meta.url));
const SAFE_SLUG = /^[a-z0-9][a-z0-9-]*$/;

/* Local version history. Drafts are deliberately kept out of git so an
   unfinished post cannot reach the server, which also means git is not there to
   undo a bad edit. Every save that actually changes something leaves a snapshot
   here instead. Never committed, never deployed. */
const HISTORY_DIR = path.join(WRITING_DIR, ".history");
const MAX_SNAPSHOTS = 60;

function stampNow() {
  const d = new Date();
  const p = (n) => String(n).padStart(2, "0");
  return (
    `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}` +
    `-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`
  );
}

const snapshotsFor = (slug) => {
  const dir = path.join(HISTORY_DIR, slug);
  if (!fs.existsSync(dir)) return [];
  return fs.readdirSync(dir).filter((f) => f.endsWith(".md")).sort().reverse();
};

function snapshot(slug, contents) {
  if (!SAFE_SLUG.test(slug)) return;
  const dir = path.join(HISTORY_DIR, slug);
  const newest = snapshotsFor(slug)[0];
  // Autosave fires often and most of those saves are identical, so only a real
  // change earns a snapshot.
  if (newest && fs.readFileSync(path.join(dir, newest), "utf8") === contents) return;

  fs.mkdirSync(dir, { recursive: true });
  let name = `${stampNow()}.md`;
  for (let n = 2; fs.existsSync(path.join(dir, name)); n++) name = `${stampNow()}-${n}.md`;
  fs.writeFileSync(path.join(dir, name), contents);

  const all = snapshotsFor(slug);
  for (const old of all.slice(MAX_SNAPSHOTS)) fs.unlinkSync(path.join(dir, old));
}

// A rename should carry its history with it, or the past disappears the moment
// you change a title.
function moveHistory(from, to) {
  if (!from || from === to || !SAFE_SLUG.test(from) || !SAFE_SLUG.test(to)) return;
  const src = path.join(HISTORY_DIR, from);
  const dest = path.join(HISTORY_DIR, to);
  if (!fs.existsSync(src) || fs.existsSync(dest)) return;
  fs.mkdirSync(HISTORY_DIR, { recursive: true });
  fs.renameSync(src, dest);
}

const MIME = {
  ".html": "text/html; charset=utf-8",
  ".js": "text/javascript; charset=utf-8",
  ".mjs": "text/javascript; charset=utf-8",
  ".css": "text/css; charset=utf-8",
  ".json": "application/json; charset=utf-8",
  ".xml": "application/xml; charset=utf-8",
  ".webp": "image/webp",
  ".png": "image/png",
  ".jpg": "image/jpeg",
  ".jpeg": "image/jpeg",
  ".gif": "image/gif",
  ".svg": "image/svg+xml",
  ".ico": "image/x-icon",
  ".webm": "video/webm",
  ".mp4": "video/mp4",
  ".woff2": "font/woff2",
};

const send = (res, status, body, type = "text/plain; charset=utf-8") => {
  res.writeHead(status, { "Content-Type": type, "Cache-Control": "no-store" });
  res.end(body);
};
const sendJson = (res, status, data) => send(res, status, JSON.stringify(data), MIME[".json"]);

function readBody(req) {
  return new Promise((resolve, reject) => {
    let data = "";
    req.on("data", (c) => {
      data += c;
      if (data.length > 4e6) reject(new Error("payload too large"));
    });
    req.on("end", () => {
      try {
        resolve(data ? JSON.parse(data) : {});
      } catch (err) {
        reject(err);
      }
    });
  });
}

/* Raw bytes, for image uploads. Past the limit the rest of the body is drained
   and dropped rather than buffered. */
function readRaw(req, limit = 25e6) {
  return new Promise((resolve, reject) => {
    const chunks = [];
    let size = 0;
    req.on("data", (c) => {
      size += c.length;
      if (size <= limit) chunks.push(c);
    });
    req.on("end", () => (size > limit ? reject(new Error("image too large")) : resolve(Buffer.concat(chunks))));
    req.on("error", reject);
  });
}

/* Serves real site files so images and fonts resolve the same way they will in
   production. Paths are resolved and then checked to stay under the root. */
function serveStatic(res, urlPath) {
  let target = path.resolve(ROOT_DIR, "." + decodeURIComponent(urlPath));
  if (!target.startsWith(ROOT_DIR) || target.startsWith(WRITING_DIR)) return send(res, 403, "forbidden");
  // Post pages are directories with an index.html, the same shape a static host
  // serves them at. Resolve that here so /blog/<slug>/ works locally too.
  if (fs.existsSync(target) && fs.statSync(target).isDirectory()) target = path.join(target, "index.html");
  if (!fs.existsSync(target) || !fs.statSync(target).isFile()) return send(res, 404, "not found");
  res.writeHead(200, { "Content-Type": MIME[path.extname(target)] || "application/octet-stream" });
  fs.createReadStream(target).pipe(res);
}

const listPosts = () =>
  loadPosts({ includeDrafts: true }).map((p) => ({
    slug: p.slug, title: p.title, date: p.date, status: p.status,
    minutes: p.minutes, tags: p.tags, description: p.description,
    cover: coverUrl(p.slug, p.cover),
  }));

function filePath(slug, status) {
  if (!SAFE_SLUG.test(slug)) throw new Error(`unsafe slug: ${slug}`);
  return path.join(dirFor(status), `${slug}.md`);
}

/* A save never lands on a file that belongs to a different post. A draft steps
   aside to slug-2, slug-3… and also avoids published slugs, so it can go live
   later without a clash. A publish refuses outright, because quietly moving it
   would ship a URL nobody chose. ownFile is the post's own current file, which
   it is always free to overwrite. */
function claimSlug(slug, status, ownFile) {
  const statuses = status === "draft" ? ["draft", "published"] : ["published"];
  const taken = (s) => statuses.some((st) => {
    const f = filePath(s, st);
    return f !== ownFile && fs.existsSync(f);
  });
  if (!taken(slug)) return slug;
  if (status !== "draft") throw new Error(`/blog/${slug}/ already belongs to another post — give this one a different slug`);
  let n = 2;
  while (taken(`${slug}-${n}`)) n++;
  return `${slug}-${n}`;
}

/* Returns the slug actually written, which claimSlug may have changed. */
function savePost({ slug, status, title, date, description, tags, body, previousSlug, previousStatus }) {
  ensureDirs();
  const old = previousSlug && SAFE_SLUG.test(previousSlug) ? filePath(previousSlug, previousStatus || status) : null;
  slug = claimSlug(slug, status, old);
  const target = filePath(slug, status);
  const contents = serialize({ title, date, description, tags, body });
  fs.writeFileSync(target, contents);

  // A rename or a status change leaves the old file behind, so remove it once
  // the new one is safely on disk.
  if (old) {
    if (old !== target && fs.existsSync(old)) fs.unlinkSync(old);
    moveCover(dirFor(previousStatus || status), previousSlug, dirFor(status), slug);
    moveHistory(previousSlug, slug);
  }

  snapshot(slug, contents);
  return slug;
}

function run(cmd, args) {
  return new Promise((resolve) => {
    const child = spawn(cmd, args, { cwd: ROOT_DIR });
    let out = "";
    child.stdout.on("data", (d) => (out += d));
    child.stderr.on("data", (d) => (out += d));
    child.on("close", (code) => resolve({ code, out: out.trim() }));
  });
}

const runBuild = (args = []) => run(process.execPath, [path.join(HERE, "build.mjs"), ...args]);
const runGit = (args) => run("git", args);

/* The server deploys whatever lands on master, so "publish" is only real once
   the change is committed and pushed. Only the site's own files are staged —
   anything else sitting in the working tree stays out of the deploy commit. */
const SITE_PATHS = ["blog", "feed.xml", "index.html", "assets", "_writing/posts"];

async function deploy(message) {
  await runGit(["add", "-A", "--", ...SITE_PATHS]);
  const commit = await runGit(["commit", "-m", message, "--", ...SITE_PATHS]);
  if (commit.code !== 0) {
    if (/nothing to commit|no changes added/i.test(commit.out)) {
      return { ok: true, msg: "already live — nothing new to ship" };
    }
    return { ok: false, msg: `built, but commit failed: ${commit.out}` };
  }
  const push = await runGit(["push"]);
  if (push.code !== 0) {
    // The commit survives, so a retry (or a manual `git push`) ships it.
    return { ok: false, msg: `committed, but push failed — check the connection and publish again` };
  }
  return { ok: true, msg: "live on the site" };
}

/* Build then ship, folding both into one line the editor can flash. */
async function buildAndShip(message) {
  const build = await runBuild();
  if (build.code !== 0) return { ok: false, log: build.out || "build failed" };
  const ship = await deploy(message);
  return { ok: ship.ok, log: ship.msg };
}

const routes = {
  async "GET /api/list"(req, res) {
    sendJson(res, 200, { posts: listPosts(), today: todayISO() });
  },

  async "GET /api/post"(req, res, url) {
    const post = findPost(url.searchParams.get("slug") || "");
    if (!post) return sendJson(res, 404, { error: "not found" });
    sendJson(res, 200, {
      slug: post.slug, title: post.title, date: post.date, status: post.status,
      description: post.description, tags: post.tags, body: post.body,
      cover: coverUrl(post.slug, post.cover),
    });
  },

  /* The image arrives as the raw request body. It is written straight to the
     post's source dir, the same as a save: a published post's live page only
     picks it up on the next rebuild. */
  async "POST /api/cover"(req, res, url) {
    const slug = String(url.searchParams.get("slug") || "");
    const status = url.searchParams.get("status") === "published" ? "published" : "draft";
    const ext = String(url.searchParams.get("ext") || "").toLowerCase();
    if (!COVER_EXTS.includes(ext)) return sendJson(res, 400, { error: `use one of: ${COVER_EXTS.join(", ")}` });
    if (!fs.existsSync(filePath(slug, status))) return sendJson(res, 404, { error: "save the post first" });
    const bytes = await readRaw(req);
    if (!bytes.length) return sendJson(res, 400, { error: "empty image" });
    const dir = dirFor(status);
    removeCover(dir, slug);
    fs.writeFileSync(path.join(dir, `${slug}.cover.${ext}`), bytes);
    sendJson(res, 200, { ok: true, cover: coverUrl(slug, coverOf(dir, slug)), posts: listPosts() });
  },

  async "POST /api/cover/remove"(req, res) {
    const { slug, status } = await readBody(req);
    filePath(slug, status); // validates the slug
    removeCover(dirFor(status), slug);
    sendJson(res, 200, { ok: true, posts: listPosts() });
  },

  async "POST /api/save"(req, res) {
    const data = await readBody(req);
    const slug = savePost({ ...data, slug: slugify(data.slug || data.title || "untitled") });
    sendJson(res, 200, { ok: true, slug, posts: listPosts() });
  },

  async "POST /api/publish"(req, res) {
    const data = await readBody(req);
    const slug = savePost({
      ...data,
      slug: slugify(data.slug || data.title || "untitled"),
      status: "published",
      previousStatus: data.previousStatus || "draft",
    });
    const verb = data.previousStatus === "published" ? "Update" : "Publish";
    const ship = await buildAndShip(`${verb} "${data.title || slug}"`);
    sendJson(res, 200, { ok: ship.ok, slug, log: ship.log, posts: listPosts() });
  },

  async "POST /api/unpublish"(req, res) {
    const data = await readBody(req);
    const slug = savePost({ ...data, slug: slugify(data.slug || ""), status: "draft", previousStatus: "published" });
    const ship = await buildAndShip(`Unpublish "${data.title || slug}"`);
    sendJson(res, 200, { ok: ship.ok, slug, log: ship.log, posts: listPosts() });
  },

  async "POST /api/delete"(req, res) {
    const { slug, status, title } = await readBody(req);
    const target = filePath(slugify(slug), status);
    if (fs.existsSync(target)) fs.unlinkSync(target);
    removeCover(dirFor(status), slugify(slug));
    if (status !== "published") return sendJson(res, 200, { ok: true, posts: listPosts() });
    const ship = await buildAndShip(`Remove "${title || slug}"`);
    sendJson(res, 200, { ok: ship.ok, log: ship.log, posts: listPosts() });
  },

  async "GET /api/history"(req, res, url) {
    const slug = slugify(url.searchParams.get("slug") || "");
    const dir = path.join(HISTORY_DIR, slug);
    const entries = snapshotsFor(slug).map((file) => {
      const m = file.match(/^(\d{4})(\d{2})(\d{2})-(\d{2})(\d{2})(\d{2})/);
      return {
        stamp: path.basename(file, ".md"),
        // Pre-formatted here so the client never has to parse the filename.
        label: m ? `${m[2]}/${m[3]} ${m[4]}:${m[5]}:${m[6]}` : file,
        bytes: fs.statSync(path.join(dir, file)).size,
      };
    });
    sendJson(res, 200, { entries });
  },

  async "GET /api/history/entry"(req, res, url) {
    const slug = slugify(url.searchParams.get("slug") || "");
    const stamp = String(url.searchParams.get("stamp") || "");
    if (!/^[\d-]+$/.test(stamp)) return sendJson(res, 400, { error: "bad stamp" });
    const file = path.join(HISTORY_DIR, slug, `${stamp}.md`);
    if (!fs.existsSync(file)) return sendJson(res, 404, { error: "not found" });
    const { data, body } = parseFrontmatter(fs.readFileSync(file, "utf8"));
    sendJson(res, 200, {
      title: data.title || "",
      date: data.date || "",
      description: data.description || "",
      tags: Array.isArray(data.tags) ? data.tags : data.tags ? [data.tags] : [],
      body,
    });
  },

  async "POST /api/build"(req, res) {
    const build = await runBuild();
    sendJson(res, 200, { ok: build.code === 0, log: build.out, posts: listPosts() });
  },
};

const server = http.createServer(async (req, res) => {
  const url = new URL(req.url, `http://localhost:${PORT}`);
  const route = routes[`${req.method} ${url.pathname}`];

  try {
    if (route) return await route(req, res, url);

    // The desk lives at the root only. /index.html stays the real site page, so
    // the blog index can be checked without leaving the server.
    if (url.pathname === "/") {
      return send(res, 200, fs.readFileSync(path.join(HERE, "editor.html"), "utf8"), MIME[".html"]);
    }

    if (url.pathname === "/lib/markdown.mjs") {
      return send(res, 200, fs.readFileSync(path.join(HERE, "lib", "markdown.mjs"), "utf8"), MIME[".mjs"]);
    }

    // Served from the same strings the build writes to disk, so the preview and
    // the published page can never drift apart.
    if (url.pathname === "/blog.css") return send(res, 200, BLOG_CSS, MIME[".css"]);
    if (url.pathname === "/blog.js") return send(res, 200, BLOG_JS, MIME[".js"]);

    // Full-page preview of any post, draft included, rendered by the exact
    // template the build uses.
    const preview = url.pathname.match(/^\/preview\/([a-z0-9-]+)\/?$/);
    if (preview) {
      const posts = loadPosts({ includeDrafts: true });
      const i = posts.findIndex((p) => p.slug === preview[1]);
      if (i === -1) return send(res, 404, "no such post");
      const index = posts.map((p) => ({ slug: p.slug, title: p.title, date: p.date, minutes: p.minutes }));
      const html = renderPostPage({
        post: posts[i],
        prev: posts[i + 1] || null,
        next: posts[i - 1] || null,
        index,
        isDraft: posts[i].status === "draft",
      });
      return send(res, 200, html, MIME[".html"]);
    }

    // Covers resolve from source rather than from blog/, so a draft's cover (or
    // a published post's new one, before the rebuild) shows in the preview.
    const coverReq = url.pathname.match(/^\/blog\/([a-z0-9-]+)\/cover\.[a-z]+$/);
    if (coverReq) {
      const cover = findCover(dirFor("draft"), coverReq[1]) || findCover(dirFor("published"), coverReq[1]);
      if (cover) return send(res, 200, fs.readFileSync(cover.file), MIME[`.${cover.ext}`]);
    }

    return serveStatic(res, url.pathname);
  } catch (err) {
    send(res, 500, String(err && err.message ? err.message : err));
  }
});

server.listen(PORT, "127.0.0.1", () => {
  const url = `http://localhost:${PORT}`;
  console.log(`writing desk  ${url}`);
  if (process.env.NO_OPEN) return;
  const opener =
    process.platform === "win32" ? ["cmd", ["/c", "start", "", url]]
    : process.platform === "darwin" ? ["open", [url]]
    : ["xdg-open", [url]];
  try {
    spawn(opener[0], opener[1], { detached: true, stdio: "ignore" }).unref();
  } catch {
    /* opening a browser is a convenience, not a requirement */
  }
});