site/markdown.ts

Functions

Imports

It imports no other module of this repo. Imported by site/data.ts, site/main.tsx, site/views.tsx.

Source

1// A small Markdown renderer for the repo's own doc pages: headings, paragraphs, lists,
2// tables, fenced code, inline code, bold, italics and links. Every character is escaped
3// first, so the output holds only the markup this file writes.
4
5const escape = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
6
7function inline(s: string): string {
8  const codes: string[] = [];
9  let out = escape(s).replace(/`([^`]+)`/g, (_, c: string) => {
10    codes.push(`<code>${c}</code>`);
11    return `\u0000${codes.length - 1}\u0000`;
12  });
13  out = out
14    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
15    .replace(/(^|[\s(])\*([^*\s][^*]*)\*/g, "$1<em>$2</em>")
16    .replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_, text: string, href: string) => {
17      const safe = /^(https?:|#|\.{0,2}\/)/.test(href) ? href : "#";
18      return `<a href="${safe}">${text}</a>`;
19    });
20  return out.replace(/\u0000(\d+)\u0000/g, (_, i: string) => codes[Number(i)] ?? "");
21}
22
23const cells = (row: string) =>
24  row
25    .trim()
26    .replace(/^\||\|$/g, "")
27    .split("|")
28    .map((c) => c.trim());
29
30// headingOffset shifts heading levels, so a doc page's "#" sits under the site's own h1.
31export function renderMarkdown(src: string, headingOffset = 1): string {
32  const lines = src.replace(/\r\n/g, "\n").split("\n");
33  const out: string[] = [];
34  let i = 0;
35  while (i < lines.length) {
36    const line = lines[i] ?? "";
37    if (/^```/.test(line)) {
38      const body: string[] = [];
39      i++;
40      while (i < lines.length && !/^```/.test(lines[i] ?? "")) body.push(lines[i++] ?? "");
41      i++;
42      out.push(`<pre class="site-code"><code>${escape(body.join("\n"))}</code></pre>`);
43      continue;
44    }
45    const h = line.match(/^(#{1,6})\s+(.*)$/);
46    if (h) {
47      const level = Math.min(6, (h[1]?.length ?? 1) + headingOffset);
48      const text = h[2] ?? "";
49      const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
50      out.push(`<h${level} id="doc-${id}">${inline(text)}</h${level}>`);
51      i++;
52      continue;
53    }
54    if (/^\|/.test(line) && /^\|?\s*:?-{3,}/.test(lines[i + 1] ?? "")) {
55      const head = cells(line);
56      i += 2;
57      const rows: string[][] = [];
58      while (i < lines.length && /^\|/.test(lines[i] ?? "")) rows.push(cells(lines[i++] ?? ""));
59      out.push(
60        `<div class="cap-table-wrap" role="region" tabindex="0" aria-label="Table"><table class="cap-table"><thead><tr>${head.map((c) => `<th scope="col">${inline(c)}</th>`).join("")}</tr></thead><tbody>${rows
61          .map((r) => `<tr>${r.map((c) => `<td>${inline(c)}</td>`).join("")}</tr>`)
62          .join("")}</tbody></table></div>`,
63      );
64      continue;
65    }
66    if (/^\s*[-*]\s+/.test(line) || /^\s*\d+\.\s+/.test(line)) {
67      const ordered = /^\s*\d+\./.test(line);
68      const items: string[] = [];
69      while (i < lines.length && (/^\s*[-*]\s+/.test(lines[i] ?? "") || /^\s*\d+\.\s+/.test(lines[i] ?? "") || /^\s{2,}\S/.test(lines[i] ?? ""))) {
70        const l = lines[i++] ?? "";
71        if (/^\s{2,}\S/.test(l) && !/^\s*([-*]|\d+\.)\s+/.test(l) && items.length) items[items.length - 1] += " " + l.trim();
72        else items.push(l.replace(/^\s*([-*]|\d+\.)\s+/, ""));
73      }
74      const tag = ordered ? "ol" : "ul";
75      out.push(`<${tag}>${items.map((it) => `<li>${inline(it)}</li>`).join("")}</${tag}>`);
76      continue;
77    }
78    if (line.trim() === "") {
79      i++;
80      continue;
81    }
82    const para: string[] = [];
83    while (i < lines.length && (lines[i] ?? "").trim() !== "" && !/^(#{1,6}\s|```|\||\s*[-*]\s|\s*\d+\.\s)/.test(lines[i] ?? "")) para.push(lines[i++] ?? "");
84    out.push(`<p>${inline(para.join(" "))}</p>`);
85  }
86  return out.join("\n");
87}
88
89// Doc-page frontmatter: `key: value`, `key: [a, b]`, and `key:` followed by `- item` lines.
90export function frontmatter(src: string): { data: Record<string, string | string[]>; body: string } {
91  const m = src.replace(/\r\n/g, "\n").match(/^---\n([\s\S]*?)\n---\n?/);
92  if (!m) return { data: {}, body: src };
93  const data: Record<string, string | string[]> = {};
94  let key = "";
95  for (const raw of (m[1] ?? "").split("\n")) {
96    const item = raw.match(/^\s+-\s+(.*)$/);
97    if (item && key) {
98      const list = Array.isArray(data[key]) ? (data[key] as string[]) : [];
99      list.push(unquote(item[1] ?? ""));
100      data[key] = list;
101      continue;
102    }
103    const kv = raw.match(/^([\w-]+):\s*(.*)$/);
104    if (!kv) continue;
105    key = kv[1] ?? "";
106    const v = (kv[2] ?? "").trim();
107    if (v.startsWith("[") && v.endsWith("]")) data[key] = v.slice(1, -1).split(",").map((s) => unquote(s.trim())).filter(Boolean);
108    else data[key] = v === "" ? [] : unquote(v);
109  }
110  return { data, body: src.slice(m[0].length) };
111}
112
113const unquote = (s: string) => s.replace(/^(['"])(.*)\1$/, "$2");