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 12 / 72
app.jschange 1/1
/* app.js — wiki application shell: storage, routing, editing, search. */
(function () {
  'use strict';
 
  var P = window.WikiParser;
  var STORE_KEY = 'kb-wiki/v1';
 
  var els = {
    pageList: document.getElementById('page-list'),
    pageCount: document.getElementById('page-count'),
    search: document.getElementById('search'),
    searchResults: document.getElementById('search-results'),
    title: document.getElementById('page-title'),
    editor: document.getElementById('editor'),
    preview: document.getElementById('preview'),
    content: document.getElementById('content'),
    backlinks: document.getElementById('backlinks'),
    saveStatus: document.getElementById('save-status'),
    btnEdit: document.getElementById('btn-edit'),
    btnNew: document.getElementById('btn-new'),
    btnRename: document.getElementById('btn-rename'),
    btnDelete: document.getElementById('btn-delete'),
    btnExport: document.getElementById('btn-export'),
    btnImport: document.getElementById('btn-import'),
    importFile: document.getElementById('import-file'),
    btnHelp: document.getElementById('btn-help'),
    helpModal: document.getElementById('help-modal')
  };
 
  var pages = {};
  var current = null;
  var mode = 'preview';
  var saveTimer = null;
  var statusTimer = null;
  var searchHits = [];
  var searchSel = 0;
  var lastQuery = '';
 
  // ---------- seed content ----------
 
  var HOME_MD = [
    '# Welcome to your notebook',
    '',
    'A personal knowledge base that lives entirely in your browser. Pages are',
    'saved to localStorage as you type — use **Export** in the sidebar to back up.',
    '',
    '## Getting around',
    '',
    '- Press `e` (or the Edit button) to edit a page with a live preview.',
    '- Link pages with double brackets: [[Syntax Guide]].',
    '- Dashed links like [[Reading List]] do not exist yet — click one to create the page.',
    '- Press `/` to search everything, `n` for a new page, `?` for all shortcuts.',
    '',
    '## Starting points',
    '',
    '1. Skim the [[Syntax Guide]]',
    '2. Create your first page with `n`',
    '3. Start linking — backlinks show up at the bottom of each page'
  ].join('\n');
 
  var GUIDE_MD = [
    '# Syntax Guide',
    '',
    'Everything the editor understands. Press `e` to compare source and preview.',
    '',
    '## Text',
    '',
    '**Bold**, *italic*, ***both***, and `inline code`.',
    '',
    '## Links',
    '',
    '- External: [Anthropic](https://www.anthropic.com) — opens in a new tab',
    '- Internal: [[Home]] — double brackets make a wikilink',
    '- Labelled: [[Home|back to the start]]',
    '- Missing pages render dashed: [[Ideas]] — click one to create it',
    '',
    '## Lists',
    '',
    '1. Ordered lists use numbers',
    '2. Indent two spaces to nest:',
    '   - unordered markers are `-`, `*`, or `+`',
    '   - the Tab key indents in the editor',
    '',
    '## Code',
    '',
    '```js',
    'function greet(name) {',
    '  return "Hello, " + name + "!";',
    '}',
    '```',
    '',
    '---',
    '',
    'A line with three dashes draws the horizontal rule above.'
  ].join('\n');
 
  function seedPages() {
    var now = Date.now();
    function page(content) { return { content: content, created: now, updated: now }; }
    return { 'Home': page(HOME_MD), 'Syntax Guide': page(GUIDE_MD) };
  }
 
  // ---------- storage ----------
 
  function load() {
    try {
      var raw = localStorage.getItem(STORE_KEY);
      if (raw) {
        var data = JSON.parse(raw);
        if (data && data.pages && typeof data.pages === 'object') return data.pages;
      }
    } catch (e) {
      console.warn('Could not load wiki data:', e);
    }
    return null;
  }
 
  function persist() {
    clearTimeout(saveTimer);
    saveTimer = null;
    try {
      localStorage.setItem(STORE_KEY, JSON.stringify({ version: 1, saved: Date.now(), pages: pages }));
      setStatus('Saved');
    } catch (e) {
      setStatus('Save failed');
      console.error('Could not save wiki data:', e);
    }
  }
 
  function scheduleSave() {
    clearTimeout(saveTimer);
    saveTimer = setTimeout(persist, 400);
  }
 
  function setStatus(text) {
    els.saveStatus.textContent = text;
    clearTimeout(statusTimer);
    statusTimer = setTimeout(function () { els.saveStatus.textContent = ''; }, 1600);
  }
 
  // ---------- routing ----------
 
  function nameFromHash() {
    var m = location.hash.match(/^#\/page\/(.+)$/);
    if (!m) return null;
    try { return decodeURIComponent(m[1]); } catch (e) { return null; }
  }
 
  function openPage(name, opts) {
    opts = opts || {};
    if (!pages[name]) {
      pages[name] = { content: '', created: Date.now(), updated: Date.now() };
      persist();
      if (!opts.mode) opts.mode = 'edit'; // brand-new pages open straight into the editor
    }
    current = name;
    if (opts.mode) mode = opts.mode;
    var target = '#/page/' + encodeURIComponent(name);
    if (location.hash !== target) location.hash = target;
    clearSearch();
    renderAll();
  }
 
  window.addEventListener('hashchange', function () {
    var n = nameFromHash();
    if (n && n !== current) {
      openPage(n, pages[n] ? { mode: 'preview' } : {});
    }
  });
 
  // ---------- rendering ----------
 
  function renderAll() {
    renderSidebar();
    els.title.textContent = current;
    document.title = current + ' — Notebook';
    if (els.editor.value !== pages[current].content) els.editor.value = pages[current].content;
    renderPreview();
    renderBacklinks();
    applyMode();
  }
 
  function renderPreview() {
    var html = P.parse(pages[current].content, {
      pageExists: function (n) { return !!pages[n]; }
    });
    els.preview.innerHTML = html ||
      '<p class="empty-hint">Empty page — press <code>e</code> to start writing.</p>';
  }
 
  function flatPages() {
    var flat = {};
    Object.keys(pages).forEach(function (n) { flat[n] = pages[n].content; });
    return flat;
  }
 
  function renderBacklinks() {
    var back = P.buildGraph(flatPages()).backlinks[current] || [];
    if (!back.length) {
      els.backlinks.innerHTML = '';
      els.backlinks.hidden = true;
      return;
    }
    els.backlinks.hidden = false;
    els.backlinks.innerHTML = '<span class="backlinks-label">Linked from:</span> ' +
      back.map(function (n) {
        return '<a href="#/page/' + encodeURIComponent(n) + '">' + P.escapeHtml(n) + '</a>';
      }).join('');
  }
 
  function renderSidebar() {
    var names = Object.keys(pages).sort(function (a, b) { return a.localeCompare(b); });
    els.pageList.innerHTML = names.map(function (n) {
      return '<a class="page-link' + (n === current ? ' active' : '') +
        '" href="#/page/' + encodeURIComponent(n) + '">' + P.escapeHtml(n) + '</a>';
    }).join('');
    els.pageCount.textContent = names.length + (names.length === 1 ? ' page' : ' pages');
  }
 
  function applyMode() {
    els.content.classList.toggle('mode-edit', mode === 'edit');
    els.btnEdit.textContent = mode === 'edit' ? 'Done' : 'Edit';
    if (mode === 'edit') els.editor.focus();
  }
 
  function toggleMode() {
    mode = mode === 'edit' ? 'preview' : 'edit';
    if (mode === 'preview') {
      persist();
      renderAll();
    } else {
      applyMode();
    }
  }
 
  // ---------- page operations ----------
 
  function cleanName(name) {
    return name == null ? '' : name.replace(/[\[\]|#]/g, '').trim();
  }
 
  function newPage() {
    var name = cleanName(prompt('New page name:'));
    if (!name) return;
    openPage(name, pages[name] ? { mode: 'preview' } : { mode: 'edit' });
  }
 
  function deletePage() {
    if (!confirm('Delete "' + current + '"? This cannot be undone.')) return;
    delete pages[current];
    persist();
    current = null;
    var next = pages['Home'] ? 'Home' : Object.keys(pages)[0];
    openPage(next || 'Home', next ? { mode: 'preview' } : {});
  }
 
  function escapeRegExp(s) {
    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }
 
  function renamePage() {
    var name = cleanName(prompt('Rename "' + current + '" to:', current));
    if (!name || name === current) return;
    if (pages[name] && !confirm('"' + name + '" already exists. Overwrite it?')) return;
    pages[name] = pages[current];
    var old = current;
    delete pages[old];
    // Point existing [[Old]] and [[Old|label]] links at the new name.
    var re = new RegExp('\\[\\[\\s*' + escapeRegExp(old) + '\\s*(\\||\\]\\])', 'g');
    Object.keys(pages).forEach(function (n) {
      pages[n].content = pages[n].content.replace(re, '[[' + name + '$1');
    });
    current = null;
    persist();
    openPage(name, { mode: 'preview' });
  }
 
  // ---------- export / import ----------
 
  function exportJson() {
    var payload = JSON.stringify({ version: 1, exported: new Date().toISOString(), pages: pages }, null, 2);
    var blob = new Blob([payload], { type: 'application/json' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'wiki-export-' + new Date().toISOString().slice(0, 10) + '.json';
    document.body.appendChild(a);
    a.click();
    a.remove();
    setTimeout(function () { URL.revokeObjectURL(url); }, 1000);
    setStatus('Exported');
  }
 
  function importJson(file) {
    var reader = new FileReader();
    reader.onload = function () {
      try {
        var data = JSON.parse(reader.result);
        var incoming = data && data.pages && typeof data.pages === 'object' ? data.pages : data;
        if (!incoming || typeof incoming !== 'object' || Array.isArray(incoming)) {
          throw new Error('expected an object of pages');
        }
        var names = Object.keys(incoming).filter(function (n) {
          var v = incoming[n];
          return typeof v === 'string' || (v && typeof v.content === 'string');
        });
        if (!names.length) throw new Error('no pages found in file');
        if (!confirm('Import ' + names.length + ' page(s)? Existing pages with the same name will be overwritten.')) return;
        names.forEach(function (n) {
          var v = incoming[n];
          var content = typeof v === 'string' ? v : v.content;
          var prev = pages[n];
          pages[n] = {
            content: content,
            created: (v && v.created) || (prev && prev.created) || Date.now(),
            updated: (v && v.updated) || Date.now()
          };
        });
        persist();
        openPage(current && pages[current] ? current : names[0], { mode: 'preview' });
        setStatus('Imported ' + names.length);
      } catch (e) {
        alert('Import failed: ' + e.message);
      }
    };
    reader.readAsText(file);
  }
 
  // ---------- search ----------
 
  function clearSearch() {
    els.search.value = '';
    searchHits = [];
    searchSel = 0;
    lastQuery = '';
    els.searchResults.hidden = true;
    els.searchResults.innerHTML = '';
    els.pageList.hidden = false;
  }
 
  function focusSearch() {
    els.search.focus();
    els.search.select();
  }
 
  function runSearch(q) {
    var query = q.trim();
    if (!query) {
      searchHits = [];
      lastQuery = '';
      els.searchResults.hidden = true;
      els.pageList.hidden = false;
      return;
    }
    var ql = query.toLowerCase();
    lastQuery = ql;
    searchHits = [];
    Object.keys(pages).forEach(function (name) {
      var content = pages[name].content;
      var inTitle = name.toLowerCase().indexOf(ql) >= 0;
      var idx = content.toLowerCase().indexOf(ql);
      if (!inTitle && idx < 0) return;
      var occurrences = idx >= 0 ? content.toLowerCase().split(ql).length - 1 : 0;
      searchHits.push({ name: name, idx: idx, content: content, score: (inTitle ? 100 : 0) + occurrences });
    });
    searchHits.sort(function (a, b) { return b.score - a.score || a.name.localeCompare(b.name); });
    searchSel = 0;
    renderSearchResults();
  }
 
  function highlight(text, ql) {
    var idx = text.toLowerCase().indexOf(ql);
    if (idx < 0) return P.escapeHtml(text);
    return P.escapeHtml(text.slice(0, idx)) +
      '<mark>' + P.escapeHtml(text.slice(idx, idx + ql.length)) + '</mark>' +
      P.escapeHtml(text.slice(idx + ql.length));
  }
 
  function snippetFor(content, idx, ql) {
    var start = Math.max(0, idx - 34);
    var end = Math.min(content.length, idx + ql.length + 46);
    return (start > 0 ? '…' : '') +
      P.escapeHtml(content.slice(start, idx)) +
      '<mark>' + P.escapeHtml(content.slice(idx, idx + ql.length)) + '</mark>' +
      P.escapeHtml(content.slice(idx + ql.length, end)) +
      (end < content.length ? '…' : '');
  }
 
  function renderSearchResults() {
    els.pageList.hidden = true;
    els.searchResults.hidden = false;
    if (!searchHits.length) {
      els.searchResults.innerHTML = '<div class="no-hits">No matches</div>';
      return;
    }
    els.searchResults.innerHTML = searchHits.map(function (h, i) {
      return '<button class="search-hit' + (i === searchSel ? ' selected' : '') +
        '" data-name="' + P.escapeHtml(h.name) + '">' +
        '<span class="hit-title">' + highlight(h.name, lastQuery) + '</span>' +
        (h.idx >= 0 ? '<span class="hit-snippet">' + snippetFor(h.content, h.idx, lastQuery) + '</span>' : '') +
        '</button>';
    }).join('');
  }
 
  function moveSearchSel(delta) {
    if (!searchHits.length) return;
    searchSel = (searchSel + delta + searchHits.length) % searchHits.length;
    renderSearchResults();
    var sel = els.searchResults.querySelector('.selected');
    if (sel) sel.scrollIntoView({ block: 'nearest' });
  }
 
  // ---------- help ----------
 
  function toggleHelp() {
    els.helpModal.hidden = !els.helpModal.hidden;
  }
 
  // ---------- events ----------
 
  els.btnEdit.addEventListener('click', toggleMode);
  els.btnNew.addEventListener('click', newPage);
  els.btnRename.addEventListener('click', renamePage);
  els.btnDelete.addEventListener('click', deletePage);
  els.btnExport.addEventListener('click', exportJson);
  els.btnImport.addEventListener('click', function () { els.importFile.click(); });
  els.importFile.addEventListener('change', function () {
    if (els.importFile.files[0]) importJson(els.importFile.files[0]);
    els.importFile.value = '';
  });
  els.btnHelp.addEventListener('click', toggleHelp);
  els.helpModal.addEventListener('click', function (e) {
    if (e.target === els.helpModal) toggleHelp();
  });
 
  els.editor.addEventListener('input', function () {
    pages[current].content = els.editor.value;
    pages[current].updated = Date.now();
    scheduleSave();
    renderPreview();
  });
 
  els.editor.addEventListener('keydown', function (e) {
    if (e.key === 'Tab') {
      e.preventDefault();
      els.editor.setRangeText('  ', els.editor.selectionStart, els.editor.selectionEnd, 'end');
      els.editor.dispatchEvent(new Event('input'));
    }
  });
 
  els.search.addEventListener('input', function () { runSearch(els.search.value); });
  els.search.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowDown') { e.preventDefault(); moveSearchSel(1); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); moveSearchSel(-1); }
    else if (e.key === 'Enter' && searchHits[searchSel]) {
      openPage(searchHits[searchSel].name, { mode: 'preview' });
      els.search.blur();
    }
  });
 
  els.searchResults.addEventListener('click', function (e) {
    var hit = e.target.closest('.search-hit');
    if (hit) openPage(hit.getAttribute('data-name'), { mode: 'preview' });
  });
 
  document.addEventListener('keydown', function (e) {
    var mod = e.metaKey || e.ctrlKey;
    var t = e.target;
    var typing = t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable);
 
    if (mod && !e.shiftKey && !e.altKey) {
      var k = e.key.toLowerCase();
      if (k === 'e') { e.preventDefault(); toggleMode(); return; }
      if (k === 'k') { e.preventDefault(); focusSearch(); return; }
      if (k === 's') { e.preventDefault(); persist(); return; }
    }
 
    if (e.key === 'Escape') {
      if (!els.helpModal.hidden) toggleHelp();
      else if (t === els.search) { clearSearch(); els.search.blur(); }
      else if (mode === 'edit') toggleMode();
      return;
    }
 
    if (typing) return;
 
    if (e.key === '/') { e.preventDefault(); focusSearch(); }
    else if (e.key === 'e') { e.preventDefault(); toggleMode(); }
    else if (e.key === 'n') { e.preventDefault(); newPage(); }
    else if (e.key === '?') { e.preventDefault(); toggleHelp(); }
  });
 
  window.addEventListener('beforeunload', function () {
    if (saveTimer) persist();
  });
 
  // ---------- init ----------
 
  var stored = load();
  pages = stored || seedPages();
  if (!stored) persist();
  var fromHash = nameFromHash();
  var start = fromHash || (pages['Home'] ? 'Home' : Object.keys(pages)[0]) || 'Home';
  openPage(start, pages[start] ? { mode: 'preview' } : {});
})();
 
506 linesjs
Writes …/app.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