benjivers/notes Public Public: anyone can read this; nobody can change it.

// Markdown, the vault's flavour of it, in one file that runs in two places:

// the server imports it to render the first paint, and the browser loads

// it to render the live preview while you type. One renderer, so what you

// see while writing is what the page shows afterwards.

//

// Safe by construction: the text is escaped first, and every tag comes

// from a pattern matched on the escaped text — nothing a note says can

// open a tag the renderer did not write. Links go only to http(s), mailto

// and this site's own paths.

//

// Beyond CommonMark's everyday core: [[wikilinks]] (with |alias and

// #heading), #tags, ==highlights==, ~~strikes~~, - [ ] tasks, tables,

// and Obsidian's callouts (> [!note] Title).

const ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };

const UNESC = { "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"', "&#39;": "'" };

/** @param {string} s */

export const escapeHtml = (s) => s.replace(/[&<>"']/g, (c) => ESC[c] ?? c);

/** @param {string} s */

const unescapeHtml = (s) => s.replace(/&(?:amp|lt|gt|quot|#39);/g, (e) => UNESC[e] ?? e);

/** A heading's anchor: lower case, words joined by dashes. @param {string} s */

export const slug = (s) =>

  s

    .toLowerCase()

    .replace(/[^\p{L}\p{N}\s-]/gu, "")

    .trim()

    .replace(/\s+/g, "-");

/** The text with fenced code and inline code removed, for finding links and tags. @param {string} md */

const prose = (md) => md.replace(/^(```|~~~)[^\n]*\n[\s\S]*?(?:^\1[^\n]*$|(?![\s\S]))/gm, "").replace(/`[^`\n]*`/g, "");

const WIKI = /(!?)\[\[([^\[\]\n|]+?)(?:\|([^\[\]\n]+?))?\]\]/g;

const TAG = /(^|[\s(])#([\p{L}\p{N}_/-]*[\p{L}_/-][\p{L}\p{N}_/-]*)/gu;

/** The note titles a note links to, in order, once each (no #heading). @param {string} md */

export function links(md) {

  const seen = new Set();

  const out = [];

  for (const m of prose(md).matchAll(WIKI)) {

    const target = m[2].split("#")[0].trim();

    const key = target.toLowerCase();

    if (target !== "" && !seen.has(key)) {

      seen.add(key);

      out.push(target);

    }

  }

  return out;

}

/**

 * A note's properties: the YAML-ish block between `---` lines at the very

 * top, the way Obsidian (and every static-site generator) writes it. Only

 * what a person reads is understood — `key: value`, `key: [a, b]` and a

 * key followed by `- item` lines — and the rest of the note is its body.

 * @param {string} md

 * @returns {{ props: [string, string[]][], body: string } | null}

 */

export function frontmatter(md) {

  const m = /^---[ \t]*\r?\n([\s\S]*?)\r?\n---[ \t]*(?:\r?\n|$)/.exec(md);

  if (!m) return null;

  /** @type {[string, string[]][]} */

  const props = [];

  for (const line of m[1].split(/\r?\n/)) {

    const item = /^\s+-\s+(.*)$/.exec(line);

    if (item && props.length > 0) {

      props[props.length - 1][1].push(unquote(item[1]));

      continue;

    }

    const kv = /^([\w][\w .-]*?)\s*:\s*(.*)$/.exec(line);

    if (!kv) continue;

    const value = kv[2].trim();

    const listed = /^\[(.*)\]$/.exec(value);

    props.push([kv[1], listed ? listed[1].split(",").map(unquote).filter((v) => v !== "") : value === "" ? [] : [unquote(value)]]);

  }

  return { props, body: md.slice(m[0].length) };

}

/** @param {string} s */

const unquote = (s) => s.trim().replace(/^(["'])(.*)\1$/, "$2");

/** The tags a note carries, lower-cased, once each, without the #: in its words and in its `tags` property. @param {string} md */

export function tags(md) {

  const out = new Set();

  const fm = frontmatter(md);

  for (const [key, values] of fm?.props ?? [])

    if (/^tags?$/i.test(key))

      for (const v of values.flatMap((v) => v.split(/[\s,]+/))) {

        const tag = v.replace(/^#/, "").toLowerCase();

        if (/^[\p{L}\p{N}_/-]*[\p{L}_/-][\p{L}\p{N}_/-]*$/u.test(tag)) out.add(tag);

      }

  for (const m of prose(fm?.body ?? md).matchAll(TAG)) out.add(m[2].toLowerCase());

  return [...out];

}

/** The note's headings, for an outline. @param {string} md */

export function headings(md) {

  const out = [];

  for (const m of prose(md).matchAll(/^(#{1,6})[ \t]+(.*?)[ \t]*#*[ \t]*$/gm)) {

    const level = m[1].length;

    const text = m[2].trim();

    if (text === "") continue;

    out.push({ level, text, id: slug(text) });

  }

  return out;

}

const SAFE_URL = /^(?:https?:\/\/|mailto:|\/(?!\/)|#)/i;

/**

 * One line's inline marks, on text that is already escaped.

 * @param {string} text escaped

 * @param {Options} o

 */

function inline(text, o) {

  // Code spans first: what is inside them is no mark.

  const parts = text.split(/(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/);

  let out = "";

  for (let i = 0; i < parts.length; i++) {

    if (i % 3 === 0) out += marks(parts[i], o);

    else if (i % 3 === 2) out += `<code>${parts[i]}</code>`;

  }

  return out;

}

/** @param {string} s escaped @param {Options} o */

function marks(s, o) {

  const held = [];

  const hold = (html) => `\u0000${held.push(html) - 1}\u0000`;

  s = s

    .replace(WIKI, (_, embed, target, alias) => {

      const [title, heading] = unescapeHtml(target).split("#");

      const name = title.trim();

      const shown = alias ?? target;

      const href = o.resolve(name);

      const anchor = heading ? `#${slug(heading)}` : "";

      return hold(

        href === null

          ? `<a class="wikilink unresolved" href="${o.base}/open?title=${encodeURIComponent(name)}" data-title="${escapeHtml(name)}">${shown}</a>`

          : `<a class="wikilink${embed ? " embed" : ""}" href="${escapeHtml(href)}${anchor}" data-title="${escapeHtml(name)}">${shown}</a>`,

      );

    })

    .replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, (whole, label, url) =>

      SAFE_URL.test(unescapeHtml(url))

        ? hold(`<a href="${url}"${/^https?:/i.test(url) ? ' rel="noopener noreferrer" target="_blank"' : ""}>${label}</a>`)

        : whole,

    )

    .replace(/(^|[\s(])(https?:\/\/(?:(?!&(?:quot|#39|lt|gt);)[^\s<])*[^\s<.,;:!?)'"&])/g, (_, lead, url) =>

      lead + hold(`<a href="${url}" rel="noopener noreferrer" target="_blank">${url}</a>`),

    )

    .replace(TAG, (_, lead, tag) =>

      lead + hold(`<a class="tag" href="${o.base}/search?q=${encodeURIComponent(`#${unescapeHtml(tag)}`)}">#${tag}</a>`),

    );

  s = s

    .replace(/\*\*(?=\S)([^*]*?\S)\*\*/g, "<strong>$1</strong>")

    .replace(/__(?=\S)([^_]*?\S)__/g, "<strong>$1</strong>")

    .replace(/(^|[^*\w])\*(?=\S)([^*]*?\S)\*(?!\w)/g, "$1<em>$2</em>")

    .replace(/(^|[^_\w])_(?=\S)([^_]*?\S)_(?!\w)/g, "$1<em>$2</em>")

    .replace(/~~(?=\S)([^~]*?\S)~~/g, "<del>$1</del>")

    .replace(/==(?=\S)([^=]*?\S)==/g, "<mark>$1</mark>");

  return s.replace(/\u0000(\d+)\u0000/g, (_, i) => held[Number(i)]);

}

/**

 * @typedef {{ resolve: (title: string) => string | null, base: string }} Options

 * `resolve` turns a linked note's title into its address, or null when no

 * such note exists yet (the link is drawn as one to create). `base` is the

 * vault's own address (`""` for yours, `/s/<id>` for a shared one), where a

 * link to a note not written yet, or a tag, goes looking.

 */

const CALLOUTS = new Set(["note", "info", "tip", "success", "question", "warning", "danger", "bug", "example", "quote", "abstract", "todo", "failure"]);

/**

 * A whole note, as HTML.

 * @param {string} md

 * @param {Partial<Options>} [options]

 */

export function render(md, options = {}) {

  const o = { resolve: options.resolve ?? (() => null), base: options.base ?? "" };

  const text = md.replace(/\r\n?/g, "\n");

  const fm = frontmatter(text);

  if (fm === null) return blocks(text.split("\n"), o);

  const props = fm.props

    .map(([k, v]) => `<dt>${escapeHtml(k)}</dt><dd>${v.map((x) => inline(escapeHtml(x), o)).join(", ") || "—"}</dd>`)

    .join("");

  return `${props === "" ? "" : `<dl class="properties">${props}</dl>\n`}${blocks(fm.body.split("\n"), o)}`;

}

/** @param {string[]} lines @param {Options} o */

function blocks(lines, o) {

  let out = "";

  let i = 0;

  const para = [];

  const flush = () => {

    if (para.length > 0) out += `<p>${para.map((l) => inline(escapeHtml(l), o)).join("<br>")}</p>\n`;

    para.length = 0;

  };

  while (i < lines.length) {

    const line = lines[i];

    let m;

    if (/^\s*$/.test(line)) {

      flush();

      i++;

    } else if ((m = /^(```|~~~)\s*([\w+-]*)/.exec(line))) {

      flush();

      const fence = m[1];

      const code = [];

      i++;

      while (i < lines.length && !lines[i].startsWith(fence)) code.push(lines[i++]);

      i++;

      out += `<pre><code${m[2] ? ` class="lang-${escapeHtml(m[2])}"` : ""}>${escapeHtml(code.join("\n"))}</code></pre>\n`;

    } else if ((m = /^(#{1,6})[ \t]+(.*?)[ \t]*#*[ \t]*$/.exec(line))) {

      flush();

      const n = m[1].length;

      out += `<h${n} id="${escapeHtml(slug(m[2]))}">${inline(escapeHtml(m[2]), o)}</h${n}>\n`;

      i++;

    } else if (/^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/.test(line)) {

      flush();

      out += "<hr>\n";

      i++;

    } else if (/^ {0,3}>/.test(line)) {

      flush();

      const quoted = [];

      while (i < lines.length && /^ {0,3}>/.test(lines[i])) quoted.push(lines[i++].replace(/^ {0,3}> ?/, ""));

      const callout = /^\[!(\w+)\]([+-]?)[ \t]*(.*)$/.exec(quoted[0] ?? "");

      if (callout) {

        const kind = callout[1].toLowerCase();

        const cls = CALLOUTS.has(kind) ? kind : "note";

        const heading = callout[3] || kind.charAt(0).toUpperCase() + kind.slice(1);

        out += `<div class="callout callout-${cls}"><p class="callout-title">${inline(escapeHtml(heading), o)}</p>${blocks(quoted.slice(1), o).trimEnd()}</div>\n`;

      } else out += `<blockquote>${blocks(quoted, o).trimEnd()}</blockquote>\n`;

    } else if (/^\s*([-*+]|\d+[.)])\s/.test(line)) {

      flush();

      const items = [];

      while (i < lines.length && (/^\s*([-*+]|\d+[.)])\s/.test(lines[i]) || (/^\s{2,}\S/.test(lines[i]) && items.length > 0))) items.push(lines[i++]);

      out += list(items, o);

    } else if (/^\s*\|.*\|\s*$/.test(line) && /^\s*\|?[\s:|-]*-[\s:|-]*\|?\s*$/.test(lines[i + 1] ?? "")) {

      flush();

      const cells = (l) => l.trim().replace(/^\||\|$/g, "").split("|").map((c) => c.trim());

      const head = cells(line);

      const align = cells(lines[i + 1]).map((c) => (c.startsWith(":") && c.endsWith(":") ? "center" : c.endsWith(":") ? "right" : ""));

      const style = (k) => (align[k] ? ` style="text-align:${align[k]}"` : "");

      i += 2;

      let body = "";

      while (i < lines.length && /^\s*\|.*\|\s*$/.test(lines[i])) {

        body += `<tr>${cells(lines[i++]).map((c, k) => `<td${style(k)}>${inline(escapeHtml(c), o)}</td>`).join("")}</tr>`;

      }

      out += `<div class="table"><table><thead><tr>${head.map((c, k) => `<th${style(k)}>${inline(escapeHtml(c), o)}</th>`).join("")}</tr></thead><tbody>${body}</tbody></table></div>\n`;

    } else {

      para.push(line);

      i++;

    }

  }

  flush();

  return out;

}

/** Lines of a list, nested by indentation. @param {string[]} lines @param {Options} o */

function list(lines, o) {

  const indent = (l) => l.match(/^\s*/)[0].replace(/\t/g, "  ").length;

  const base = indent(lines[0]);

  const ordered = /^\s*\d+[.)]\s/.test(lines[0]);

  let html = "";

  let i = 0;

  while (i < lines.length) {

    const m = /^\s*(?:[-*+]|\d+[.)])\s+(.*)$/.exec(lines[i]);

    const text = m ? m[1] : lines[i].trim();

    i++;

    const child = [];

    while (i < lines.length && indent(lines[i]) > base) child.push(lines[i++]);

    const task = /^\[([ xX])\]\s+(.*)$/.exec(text);

    const body = task

      ? `<button type="button" class="check" role="checkbox" aria-checked="${task[1] !== " "}" aria-label="Done"></button><span${task[1] !== " " ? ' class="done"' : ""}>${inline(escapeHtml(task[2]), o)}</span>`

      : inline(escapeHtml(text), o);

    html += `<li${task ? ' class="task"' : ""}>${body}${child.length > 0 ? list(child, o).trimEnd() : ""}</li>`;

  }

  return ordered ? `<ol>${html}</ol>\n` : `<ul>${html}</ul>\n`;

}