path: root/_writing/lib/markdown.mjs

/* Markdown renderer shared by the build script and the live editor preview.
   Deliberately dependency-free: the site ships as hand-written static files and
   an npm tree in the repo would get rsynced to production along with it. */

const ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
const escapeHtml = (s) => String(s).replace(/[&<>"']/g, (c) => ESCAPES[c]);

const isExternal = (href) => /^https?:\/\//i.test(href) && !/(^|\/\/|\.)ericzou\.dev/i.test(href);

/* ---------- inline ----------
   Sentinels are built from char codes rather than typed literally, so they
   survive escapeHtml, never collide with prose, and don't depend on the source
   file preserving raw control bytes. */

const SENT_CODE = String.fromCharCode(0xe000);
const SENT_LINK = String.fromCharCode(0xe001);
const SENT_END = String.fromCharCode(0xe002);

const RE_CODE_SLOT = new RegExp(SENT_CODE + "(\\d+)" + SENT_CODE, "g");
const RE_LINK_SLOT = new RegExp(SENT_LINK + "(\\d+)" + SENT_LINK + "([\\s\\S]*?)" + SENT_END, "g");

function renderInline(src) {
  const stash = [];
  const hold = (html) => SENT_CODE + (stash.push(html) - 1) + SENT_CODE;
  let s = String(src);

  // Code spans win over everything, so pull them out before any other pass.
  s = s.replace(/(`+)([\s\S]+?)\1/g, (_m, _t, code) => hold(`<code>${escapeHtml(code.trim())}</code>`));

  // Bare URLs become links, but only where a markdown link isn't already doing it.
  s = s.replace(
    /(^|[\s(])(https?:\/\/[^\s<>()]+[^\s<>().,;:!?])/g,
    (_m, pre, url) => `${pre}[${url}](${url})`
  );

  s = s.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, alt, url) =>
    hold(`<img src="${escapeHtml(url)}" alt="${escapeHtml(alt)}" loading="lazy" decoding="async">`)
  );

  // Links are split into open/close markers so the link text still gets emphasis.
  const links = [];
  s = s.replace(/\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, text, href, title) => {
    links.push({ href, title });
    return SENT_LINK + (links.length - 1) + SENT_LINK + text + SENT_END;
  });

  s = escapeHtml(s);

  s = s
    .replace(/\*\*\*([^*]+)\*\*\*/g, "<strong><em>$1</em></strong>")
    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
    .replace(/__([^_]+)__/g, "<strong>$1</strong>")
    .replace(/(^|[^*\w])\*([^*\n]+)\*/g, "$1<em>$2</em>")
    .replace(/(^|[^_\w])_([^_\n]+)_(?!\w)/g, "$1<em>$2</em>")
    .replace(/~~([^~]+)~~/g, "<del>$1</del>");

  s = s.replace(RE_LINK_SLOT, (_m, i, text) => {
    const { href, title } = links[+i];
    const attrs = [
      `href="${escapeHtml(href)}"`,
      title ? `title="${escapeHtml(title)}"` : "",
      isExternal(href) ? 'rel="noopener"' : "",
    ]
      .filter(Boolean)
      .join(" ");
    return `<a ${attrs}>${text}</a>`;
  });

  return s.replace(RE_CODE_SLOT, (_m, i) => stash[+i]);
}

/* ---------- blocks ---------- */

const RE_FENCE = /^\s*(```+|~~~+)\s*([\w+#.-]*)\s*$/;
const RE_HR = /^\s*(?:-{3,}|\*{3,}|_{3,})\s*$/;
const RE_HEADING = /^(#{1,4})\s+(.+?)\s*#*$/;
const RE_BULLET = /^(\s*)([-*+])\s+(.*)$/;
const RE_ORDERED = /^(\s*)(\d+)[.)]\s+(.*)$/;
const RE_IMAGE_LINE = /^!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)$/;
const RE_HTML_BLOCK = /^\s*<(figure|video|iframe|div|table|details|section|aside|pre|blockquote|p|img|hr|ul|ol)\b/i;
const RE_TABLE_SEP = /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)+\|?\s*$/;

function listItemMatch(line) {
  const b = line.match(RE_BULLET);
  if (b) return { indent: b[1].length, ordered: false, text: b[3] };
  const o = line.match(RE_ORDERED);
  if (o) return { indent: o[1].length, ordered: true, text: o[3], start: Number(o[2]) };
  return null;
}

function parseList(lines, start) {
  const first = listItemMatch(lines[start]);
  const baseIndent = first.indent;
  const ordered = first.ordered;
  const items = [];
  let i = start;

  while (i < lines.length) {
    const line = lines[i];

    if (!line.trim()) {
      // A blank line only ends the list if what follows isn't still part of it.
      const next = lines[i + 1];
      const m = next != null ? listItemMatch(next) : null;
      const continues = (m && m.indent >= baseIndent) || (next && /^\s{2,}\S/.test(next));
      if (!continues) break;
      i++;
      continue;
    }

    const m = listItemMatch(line);
    if (m && m.indent <= baseIndent) {
      items.push([m.text]);
      i++;
      continue;
    }
    if (!items.length) break;
    if (m || /^\s{2,}\S/.test(line)) {
      items[items.length - 1].push(line.slice(baseIndent + 2));
      i++;
      continue;
    }
    break;
  }

  const html = items
    .map((chunk) => {
      const [head, ...rest] = chunk;
      const nested = rest.join("\n").trim();
      return `<li>${renderInline(head)}${nested ? renderBlocks(nested.split("\n")) : ""}</li>`;
    })
    .join("\n");

  const tag = ordered ? "ol" : "ul";
  const startAttr = ordered && first.start !== 1 ? ` start="${first.start}"` : "";
  return { html: `<${tag}${startAttr}>\n${html}\n</${tag}>`, next: i };
}

function parseTable(lines, start) {
  const cells = (row) => row.replace(/^\s*\|/, "").replace(/\|\s*$/, "").split("|").map((c) => c.trim());
  const aligns = cells(lines[start + 1]).map((c) =>
    c.startsWith(":") && c.endsWith(":") ? "center" : c.endsWith(":") ? "right" : "left"
  );
  const head = cells(lines[start])
    .map((c, n) => `<th style="text-align:${aligns[n] || "left"}">${renderInline(c)}</th>`)
    .join("");

  const body = [];
  let i = start + 2;
  while (i < lines.length && lines[i].trim() && lines[i].includes("|")) {
    const row = cells(lines[i])
      .map((c, n) => `<td style="text-align:${aligns[n] || "left"}">${renderInline(c)}</td>`)
      .join("");
    body.push(`<tr>${row}</tr>`);
    i++;
  }

  return {
    html:
      `<div class="tablewrap"><table><thead><tr>${head}</tr></thead>` +
      `<tbody>${body.join("")}</tbody></table></div>`,
    next: i,
  };
}

function renderBlocks(lines) {
  const out = [];
  let i = 0;

  while (i < lines.length) {
    const line = lines[i];
    if (!line.trim()) {
      i++;
      continue;
    }

    const fence = line.match(RE_FENCE);
    if (fence) {
      const marker = fence[1];
      const lang = fence[2];
      const body = [];
      i++;
      while (i < lines.length && !lines[i].trim().startsWith(marker)) body.push(lines[i++]);
      i++;
      const label = lang ? `<span class="code__lang">${escapeHtml(lang)}</span>` : "";
      out.push(`<div class="code">${label}<pre><code>${escapeHtml(body.join("\n"))}</code></pre></div>`);
      continue;
    }

    if (RE_HR.test(line)) {
      out.push("<hr>");
      i++;
      continue;
    }

    const heading = line.match(RE_HEADING);
    if (heading) {
      const level = heading[1].length;
      out.push(`<h${level}>${renderInline(heading[2])}</h${level}>`);
      i++;
      continue;
    }

    if (/^\s*>/.test(line)) {
      const body = [];
      while (i < lines.length && /^\s*>/.test(lines[i])) body.push(lines[i++].replace(/^\s*>\s?/, ""));
      out.push(`<blockquote>${renderBlocks(body)}</blockquote>`);
      continue;
    }

    if (lines[i + 1] && line.includes("|") && RE_TABLE_SEP.test(lines[i + 1])) {
      const table = parseTable(lines, i);
      out.push(table.html);
      i = table.next;
      continue;
    }

    if (listItemMatch(line)) {
      const list = parseList(lines, i);
      out.push(list.html);
      i = list.next;
      continue;
    }

    // A line that is nothing but an image becomes a real figure, and the
    // optional markdown title turns into the caption.
    const img = line.trim().match(RE_IMAGE_LINE);
    if (img) {
      const [, alt, src, caption] = img;
      const media = /\.(mp4|webm|mov)$/i.test(src)
        ? `<video src="${escapeHtml(src)}" controls playsinline preload="metadata"></video>`
        : `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" loading="lazy" decoding="async">`;
      out.push(`<figure>${media}${caption ? `<figcaption>${escapeHtml(caption)}</figcaption>` : ""}</figure>`);
      i++;
      continue;
    }

    if (RE_HTML_BLOCK.test(line)) {
      const body = [];
      while (i < lines.length && lines[i].trim()) body.push(lines[i++]);
      out.push(body.join("\n"));
      continue;
    }

    const para = [];
    while (
      i < lines.length &&
      lines[i].trim() &&
      !RE_FENCE.test(lines[i]) &&
      !RE_HR.test(lines[i]) &&
      !RE_HEADING.test(lines[i]) &&
      !/^\s*>/.test(lines[i]) &&
      !listItemMatch(lines[i]) &&
      !RE_HTML_BLOCK.test(lines[i]) &&
      !RE_IMAGE_LINE.test(lines[i].trim())
    ) {
      para.push(lines[i++]);
    }
    if (para.length) out.push(`<p>${renderInline(para.join("\n").replace(/\s+$/, ""))}</p>`);
    else i++;
  }

  return out.join("\n");
}

export function renderMarkdown(src) {
  return renderBlocks(String(src).replace(/\r\n?/g, "\n").split("\n"));
}

/* ---------- derived metadata ---------- */

export function plainText(src) {
  return String(src)
    .replace(/```[\s\S]*?```/g, " ")
    .replace(/!\[[^\]]*\]\([^)]*\)/g, " ")
    .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
    .replace(/[#>*_`~|-]/g, " ")
    .replace(/\s+/g, " ")
    .trim();
}

export function readingTime(src) {
  const words = plainText(src).split(" ").filter(Boolean).length;
  return Math.max(1, Math.round(words / 200));
}

export function excerpt(src, limit = 160) {
  const text = plainText(src);
  if (text.length <= limit) return text;
  const cut = text.lastIndexOf(" ", limit);
  return text.slice(0, cut > 0 ? cut : limit).replace(/[.,;:]$/, "") + "…";
}

export { escapeHtml };