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

antigravitygemini · 36 steps · 55s · 6 filessession bebe5767-873@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 23 / 36

parser.jschange 2/2

(function (global, factory) {
  if (typeof exports === 'object' && typeof module !== 'undefined') {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
  } else {
    global.WikiParser = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
 
  function escapeHTML(str) {
    if (!str) return '';
    return str
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }
 
  function extractWikilinks(text) {
    if (!text) return [];
    const regex = /\[\[([^\]\|]+)(?:\|([^\]]+))?\]\]/g;
    const links = [];
    let match;
    while ((match = regex.exec(text)) !== null) {
      const target = match[1].trim();
      const alias = match[2] ? match[2].trim() : null;
      links.push({
        raw: match[0],
        target: target,
        alias: alias || target,
        index: match.index
      });
    }
    return links;
  }
 
  function parseInline(text, existingPagesMap) {
    if (!text) return '';
    
−    // Process code spans first to protect them from formatting
    // 1. Save inline code spans first, escaping their inner content
    const codeSpans = [];
    text = text.replace(/`([^`]+)`/g, (match, code) => {
      codeSpans.push(`<code>${escapeHTML(code)}</code>`);
      return `\u0000CODE${codeSpans.length - 1}\u0000`;
    });
 
−    // Wikilinks: [[Target]] or [[Target|Alias]]
    // 2. Escape HTML in user text to prevent XSS / raw HTML injection
    text = escapeHTML(text);
 
    // 3. Wikilinks: [[Target]] or [[Target|Alias]]
    // Note: Since text was escaped, [[ and ]] are intact.
    text = text.replace(/\[\[([^\]\|]+)(?:\|([^\]]+))?\]\]/g, (match, targetRaw, aliasRaw) => {
      const target = targetRaw.trim();
      const alias = aliasRaw ? aliasRaw.trim() : target;
      const exists = existingPagesMap ? (existingPagesMap[target.toLowerCase()] !== undefined) : true;
      const classAttr = exists ? 'wikilink' : 'wikilink wikilink-new';
−      const titleAttr = exists ? `Go to ${escapeHTML(target)}` : `Create page "${escapeHTML(target)}"`;
−      return `<a href="#" class="${classAttr}" data-page="${escapeHTML(target)}" title="${titleAttr}">${escapeHTML(alias)}</a>`;
      const titleAttr = exists ? `Go to ${target}` : `Create page "${target}"`;
      return `<a href="#" class="${classAttr}" data-page="${target}" title="${titleAttr}">${alias}</a>`;
    });
 
−    // Standard markdown links: [text](url)
    // 4. Standard markdown links: [text](url)
    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, linkText, url) => {
−      const safeUrl = escapeHTML(url.trim());
−      const safeText = linkText;
−      return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${safeText}</a>`;
      return `<a href="${url.trim()}" target="_blank" rel="noopener noreferrer">${linkText}</a>`;
    });
 
−    // Bold: **text** or __text__
    // 5. Bold: **text** or __text__
    text = text.replace(/(\*\*|__)(.*?)\1/g, '<strong>$2</strong>');
 
−    // Italic: *text* or _text_
    // 6. Italic: *text* or _text_
    text = text.replace(/(\*|_)(.*?)\1/g, '<em>$2</em>');
 
−    // Restore code spans
    // 7. Restore code spans
    text = text.replace(/\u0000CODE(\d+)\u0000/g, (match, idx) => codeSpans[parseInt(idx, 10)]);
 
    return text;
  }
 
  function parseMarkdown(markdown, options = {}) {
    if (!markdown) return '';
    const existingPagesMap = options.existingPages || null;
 
    // Standardize line breaks
    const src = markdown.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
    const lines = src.split('\n');
    
    const htmlLines = [];
    let inCodeBlock = false;
    let codeBlockLang = '';
    let codeBlockContent = [];
 
    let inList = false;
    let listType = null; // 'ul' or 'ol'
 
    function closeList() {
      if (inList) {
        htmlLines.push(`</${listType}>`);
        inList = false;
        listType = null;
      }
    }
 
    for (let i = 0; i < lines.length; i++) {
      const line = lines[i];
 
      // Code blocks
      if (line.trim().startsWith('```')) {
        if (inCodeBlock) {
          // Close code block
          const codeText = escapeHTML(codeBlockContent.join('\n'));
          const langClass = codeBlockLang ? ` class="language-${escapeHTML(codeBlockLang)}"` : '';
          htmlLines.push(`<pre><code${langClass}>${codeText}</code></pre>`);
          inCodeBlock = false;
          codeBlockContent = [];
          codeBlockLang = '';
        } else {
          closeList();
          inCodeBlock = true;
          codeBlockLang = line.trim().slice(3).trim();
        }
        continue;
      }
 
      if (inCodeBlock) {
        codeBlockContent.push(line);
        continue;
      }
 
      // Blank line
      if (line.trim() === '') {
        closeList();
        continue;
      }
 
      // Horizontal Rule: --- or *** or ___
      if (/^(---|\*\*\*|___)\s*$/.test(line.trim())) {
        closeList();
        htmlLines.push('<hr>');
        continue;
      }
 
      // Headings: # Heading
      const headingMatch = line.match(/^(#{1,6})\s+(.*)$/);
      if (headingMatch) {
        closeList();
        const level = headingMatch[1].length;
        const headingText = headingMatch[2].trim();
        const parsedContent = parseInline(headingText, existingPagesMap);
        const slug = headingText.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
        htmlLines.push(`<h${level} id="${slug}">${parsedContent}</h${level}>`);
        continue;
      }
 
      // Blockquotes: > Quote
      const bqMatch = line.match(/^>\s?(.*)$/);
      if (bqMatch) {
        closeList();
        const quoteContent = parseInline(bqMatch[1], existingPagesMap);
        htmlLines.push(`<blockquote><p>${quoteContent}</p></blockquote>`);
        continue;
      }
 
      // Lists: Unordered (- or * or +) or Ordered (1. 2.)
      const ulMatch = line.match(/^[\*\-\+]\s+(.*)$/);
      const olMatch = line.match(/^(\d+)\.\s+(.*)$/);
 
      if (ulMatch || olMatch) {
        const currentType = ulMatch ? 'ul' : 'ol';
        const itemContent = parseInline((ulMatch ? ulMatch[1] : olMatch[2]).trim(), existingPagesMap);
 
        if (!inList || listType !== currentType) {
          closeList();
          inList = true;
          listType = currentType;
          htmlLines.push(`<${listType}>`);
        }
        htmlLines.push(`<li>${itemContent}</li>`);
        continue;
      }
 
      // Paragraph fallback if not in list
      closeList();
      const inlineParsed = parseInline(line.trim(), existingPagesMap);
      htmlLines.push(`<p>${inlineParsed}</p>`);
    }
 
    closeList();
 
    return htmlLines.join('\n');
  }
 
  function buildWikiGraph(pages) {
    const pageArray = Array.isArray(pages) ? pages : Object.values(pages);
    
    const existingTitlesMap = {};
    const titleToCanonical = {};
    
    pageArray.forEach(p => {
      const canonical = p.title.trim();
      const key = canonical.toLowerCase();
      existingTitlesMap[key] = true;
      titleToCanonical[key] = canonical;
    });
 
    const nodesMap = {};
    const edges = [];
    const backlinks = {};
    const outgoingLinks = {};
    const missingPages = new Set();
 
    pageArray.forEach(p => {
      const canonical = p.title.trim();
      nodesMap[canonical] = {
        id: canonical,
        label: canonical,
        exists: true,
        wordCount: p.content ? p.content.trim().split(/\s+/).filter(Boolean).length : 0
      };
      backlinks[canonical] = [];
      outgoingLinks[canonical] = [];
    });
 
    pageArray.forEach(p => {
      const sourceCanonical = p.title.trim();
      const links = extractWikilinks(p.content || '');
      const seenInThisPage = new Set();
 
      links.forEach(link => {
        const targetRaw = link.target;
        const targetKey = targetRaw.toLowerCase();
        
        const isExisting = existingTitlesMap[targetKey];
        const targetCanonical = isExisting ? titleToCanonical[targetKey] : targetRaw;
 
        if (!isExisting) {
          missingPages.add(targetCanonical);
          if (!nodesMap[targetCanonical]) {
            nodesMap[targetCanonical] = {
              id: targetCanonical,
              label: targetCanonical,
              exists: false,
              wordCount: 0
            };
          }
          if (!backlinks[targetCanonical]) backlinks[targetCanonical] = [];
          if (!outgoingLinks[targetCanonical]) outgoingLinks[targetCanonical] = [];
        }
 
        const edgeKey = `${sourceCanonical}->${targetCanonical}`;
        if (!seenInThisPage.has(edgeKey)) {
          seenInThisPage.add(edgeKey);
          edges.push({
            source: sourceCanonical,
            target: targetCanonical
          });
 
          outgoingLinks[sourceCanonical].push(targetCanonical);
          backlinks[targetCanonical].push(sourceCanonical);
        }
      });
    });
 
    return {
      nodes: Object.values(nodesMap),
      edges: edges,
      backlinks: backlinks,
      outgoingLinks: outgoingLinks,
      missingPages: Array.from(missingPages)
    };
  }
 
  return {
    escapeHTML: escapeHTML,
    extractWikilinks: extractWikilinks,
    parseMarkdown: parseMarkdown,
    buildWikiGraph: buildWikiGraph
  };
}));
 

280 linesjs

**Planning Wiki App UI** I'm now carefully planning the UI and core functionality of the Wi…

Files at this step

drag the rail to scrub

Discussion

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

#antigravity #css #gemini #graphics #html #javascript #quick #testing

b5-agy

← all sessions