Build a personal knowledge-base wiki as a static app in this directory: index.html, sty…

claude-codeclaude-fable-5 · 72 steps · 22m 54s · 7 filessession 21a724bd-503@agentsage-runs

Build a personal knowledge-base wiki as a static app in this directory: index.html, style.css, app.js, parser.js. Markdown editing with live preview using your own small parser (headings, bold, italic, links, inline code, code blocks, lists), multiple pages with [[wikilink]] syntax that creates/links pages, full-text search, localStorage persistence, JSON export/import, dark theme, keyboard shortcuts. Also create tests.html + tests.js exercising the parser and the wikilink graph. Run the tests headless with node and fix what fails.

same matchclaude-code · 72 steps codex · 50 steps pi · 26 steps antigravity · 36 steps opencode · 30 steps

compare in arena

step 03 / 72

parser.jschange 1/1

/*
 * parser.js — a small Markdown + [[wikilink]] parser.
 * Works in the browser (window.WikiParser) and in Node (module.exports).
 *
 * Supported syntax:
 *   # .. ######            headings
 *   **bold** __bold__      bold
 *   *italic* _italic_      italic
 *   `inline code`          inline code
 *   ``` ... ```            fenced code blocks (optional language)
 *   [text](url)            links (http/https open in a new tab; javascript: blocked)
 *   [[Page]] [[Page|label]] wikilinks
 *   - * + and 1.           lists, nested by indentation
 *   ---                    horizontal rule
 */
(function (root, factory) {
  var api = factory();
  if (typeof module === 'object' && module.exports) module.exports = api;
  else root.WikiParser = api;
})(typeof self !== 'undefined' ? self : this, function () {
  'use strict';
 
  var LIST_RE = /^(\s*)([-*+]|\d+\.)\s+(.+)$/;
  var WIKILINK_RE = /\[\[([^\[\]|\n]+)(?:\|([^\[\]\n]+))?\]\]/g;
 
  function escapeHtml(s) {
    return String(s)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }
 
  function unescapeHtml(s) {
    return String(s)
      .replace(/&#39;/g, "'")
      .replace(/&quot;/g, '"')
      .replace(/&gt;/g, '>')
      .replace(/&lt;/g, '<')
      .replace(/&amp;/g, '&');
  }
 
  function sanitizeUrl(url) {
    var flat = url.replace(/[\s\x00-\x1f]+/g, '');
    if (/^(javascript|vbscript|data):/i.test(flat)) return '#';
    return url;
  }
 
  // Inline rules run on HTML-escaped text. Code spans, wikilinks and markdown
  // links are swapped for \x00N\x00 placeholders so the emphasis passes cannot
  // reach into their attributes, then restored at the end.
  function parseInline(text, opts) {
    opts = opts || {};
    var tokens = [];
    function stash(html) { tokens.push(html); return '\x00' + (tokens.length - 1) + '\x00'; }
 
    var out = escapeHtml(text);
 
    out = out.replace(/`([^`\n]+)`/g, function (_, code) {
      return stash('<code>' + code + '</code>');
    });
 
    out = out.replace(WIKILINK_RE, function (m, target, label) {
      var name = unescapeHtml(target.trim());
      if (!name) return m;
      var display = label ? label.trim() : escapeHtml(name);
      var missing = typeof opts.pageExists === 'function' && !opts.pageExists(name);
      return stash('<a href="#/page/' + encodeURIComponent(name) +
        '" class="wikilink' + (missing ? ' missing' : '') +
        '" data-page="' + escapeHtml(name) + '">' + display + '</a>');
    });
 
    out = out.replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, function (_, label, url) {
      var href = sanitizeUrl(url.trim());
      var external = /^https?:\/\//i.test(href);
      return stash('<a href="' + href + '"' +
        (external ? ' target="_blank" rel="noopener"' : '') + '>' + label + '</a>');
    });
 
    out = out.replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
    out = out.replace(/__([^_\n]+)__/g, '<strong>$1</strong>');
    out = out.replace(/\*(\S(?:[^*\n]*\S)?)\*/g, '<em>$1</em>');
    out = out.replace(/(^|[^\w])_([^_\n]+)_(?!\w)/g, '$1<em>$2</em>');
 
    // Tokens may reference earlier tokens (e.g. a code span inside a wikilink
    // label), so keep restoring until no placeholders remain.
    while (/\x00\d+\x00/.test(out)) {
      out = out.replace(/\x00(\d+)\x00/g, function (_, i) { return tokens[+i]; });
    }
    return out;
  }
 
  function renderList(items, opts) {
    var i = 0;
    function build(indent) {
      var type = items[i].type;
      var html = '<' + type + '>';
      while (i < items.length) {
        var it = items[i];
        if (it.indent < indent || (it.indent === indent && it.type !== type)) break;
        if (it.indent > indent) {
          // Deeper item: nest a child list inside the previous <li>.
          html = html.replace(/<\/li>$/, build(it.indent) + '</li>');
          continue;
        }
        html += '<li>' + parseInline(it.text, opts) + '</li>';
        i++;
      }
      return html + '</' + type + '>';
    }
    var out = '';
    while (i < items.length) out += build(items[i].indent);
    return out;
  }
 
  function parse(md, opts) {
    opts = opts || {};
    var lines = String(md == null ? '' : md).replace(/\r\n?/g, '\n').split('\n');
    var blocks = [];
    var para = [];
    var i = 0;
    var m;
 
    function flushPara() {
      if (para.length) {
        blocks.push('<p>' + para.map(function (l) { return parseInline(l, opts); }).join('<br>') + '</p>');
        para = [];
      }
    }
 
    while (i < lines.length) {
      var line = lines[i];
 
      m = line.match(/^```(\S*)\s*$/);
      if (m) {
        flushPara();
        var lang = m[1];
        var code = [];
        i++;
        while (i < lines.length && !/^```\s*$/.test(lines[i])) { code.push(lines[i]); i++; }
        i++; // skip closing fence (or run past EOF on an unterminated block)
        blocks.push('<pre><code' + (lang ? ' class="language-' + escapeHtml(lang) + '"' : '') + '>' +
          escapeHtml(code.join('\n')) + '</code></pre>');
        continue;
      }
 
      m = line.match(/^(#{1,6})\s+(.+)$/);
      if (m) {
        flushPara();
        var level = m[1].length;
        blocks.push('<h' + level + '>' + parseInline(m[2].trim(), opts) + '</h' + level + '>');
        i++;
        continue;
      }
 
      if (/^\s*(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
        flushPara();
        blocks.push('<hr>');
        i++;
        continue;
      }
 
      if (LIST_RE.test(line)) {
        flushPara();
        var items = [];
        while (i < lines.length && (m = lines[i].match(LIST_RE))) {
          items.push({
            indent: m[1].replace(/\t/g, '  ').length,
            type: /^\d+\.$/.test(m[2]) ? 'ol' : 'ul',
            text: m[3]
          });
          i++;
        }
        blocks.push(renderList(items, opts));
        continue;
      }
 
      if (/^\s*$/.test(line)) { flushPara(); i++; continue; }
 
      para.push(line);
      i++;
    }
    flushPara();
    return blocks.join('\n');
  }
 
  // Returns unique wikilink targets in order of first appearance, ignoring
  // links inside inline code and fenced code blocks.
  function extractWikilinks(md) {
    var cleaned = String(md == null ? '' : md)
      .replace(/```[\s\S]*?(```|$)/g, '')
      .replace(/`[^`\n]*`/g, '');
    var re = /\[\[([^\[\]|\n]+)(?:\|[^\[\]\n]*)?\]\]/g;
    var seen = Object.create(null);
    var out = [];
    var m;
    while ((m = re.exec(cleaned))) {
      var name = m[1].trim();
      if (name && !seen[name]) {
        seen[name] = true;
        out.push(name);
      }
    }
    return out;
  }
 
  // pages: { name: content-string } or { name: { content } }.
  // Self-links are ignored. backlinks includes entries for missing targets so
  // callers can show "wanted pages".
  function buildGraph(pages) {
    var nodes = Object.keys(pages || {});
    var exists = Object.create(null);
    nodes.forEach(function (n) { exists[n] = true; });
 
    var links = Object.create(null);
    var backlinks = Object.create(null);
    nodes.forEach(function (n) { backlinks[n] = []; });
    var missing = [];
 
    nodes.forEach(function (name) {
      var value = pages[name];
      var content = typeof value === 'string' ? value
        : (value && typeof value.content === 'string' ? value.content : '');
      var targets = extractWikilinks(content).filter(function (t) { return t !== name; });
      links[name] = targets;
      targets.forEach(function (t) {
        if (!exists[t] && missing.indexOf(t) < 0) missing.push(t);
        (backlinks[t] || (backlinks[t] = [])).push(name);
      });
    });
 
    missing.sort();
    var orphans = nodes.filter(function (n) { return backlinks[n].length === 0; });
 
    return { nodes: nodes, links: links, backlinks: backlinks, missing: missing, orphans: orphans };
  }
 
  return {
    parse: parse,
    parseInline: parseInline,
    escapeHtml: escapeHtml,
    unescapeHtml: unescapeHtml,
    extractWikilinks: extractWikilinks,
    buildGraph: buildGraph
  };
});
 

248 linesjs

Writes …/parser.js

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @agentsage-runs.

#claude #claude-code #claude-fable-5 #css #html #javascript #medium #skills #subagents #testing

b1-claude

← all sessions