metanorma-document 0.2.0

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/data/javascripts/components/mn-code-copy.js

@@ -0,0 +1,36 @@
+// Code copy: copy button on sourcecode blocks
+(function() {
+  document.querySelectorAll('.sourcecode pre').forEach(function(pre) {
+    var wrapper = pre.parentElement;
+    if (!wrapper) return;
+
+    var btn = document.createElement('button');
+    btn.className = 'code-copy-btn';
+    btn.textContent = 'Copy';
+    btn.setAttribute('aria-label', 'Copy code to clipboard');
+
+    btn.addEventListener('click', function() {
+      var text = pre.textContent || pre.innerText;
+      var done = function() {
+        btn.textContent = 'Copied!';
+        btn.classList.add('copied');
+        setTimeout(function() { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
+      };
+
+      if (navigator.clipboard) {
+        navigator.clipboard.writeText(text).then(done);
+      } else {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.cssText = 'position:fixed;opacity:0';
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+        done();
+      }
+    });
+
+    wrapper.appendChild(btn);
+  });
+})();

data/data/javascripts/components/mn-glossary.js

@@ -0,0 +1,103 @@
+// Glossary panel: reads structured data from server-rendered data attributes
+(function() {
+  var R = window.MetanormaReader;
+  var panel = null;
+  var terms = [];
+
+  function collectTerms() {
+    if (terms.length > 0) return terms;
+    document.querySelectorAll('[data-term-name]').forEach(function(el) {
+      var name = el.getAttribute('data-term-name');
+      var def = el.getAttribute('data-term-definition') || '';
+      var id = el.id;
+      if (name) {
+        terms.push({ id: id, name: name, definition: def });
+      }
+    });
+    return terms;
+  }
+
+  function buildPanel() {
+    if (panel) return panel;
+    collectTerms();
+    panel = document.createElement('div');
+    panel.className = 'glossary-panel';
+    panel.setAttribute('role', 'dialog');
+    panel.setAttribute('aria-label', 'Glossary');
+
+    var html = '<div class="glossary-inner">';
+    html += '<div class="glossary-header">';
+    html += '<span class="glossary-title">Glossary</span>';
+    html += '<span class="glossary-count">' + terms.length + ' terms</span>';
+    html += '<button class="glossary-close" aria-label="Close">&times;</button>';
+    html += '</div>';
+    html += '<input class="glossary-search" id="glossary-search" placeholder="Filter terms..." />';
+    html += '<div class="glossary-list">';
+    terms.forEach(function(t) {
+      html += '<div class="glossary-entry" data-term="' + t.name.toLowerCase() + '">';
+      html += '<a href="#' + t.id + '" class="glossary-term">' + t.name + '</a>';
+      if (t.definition) html += '<p class="glossary-def">' + t.definition + '</p>';
+      html += '</div>';
+    });
+    html += '</div></div>';
+    panel.innerHTML = html;
+    document.body.appendChild(panel);
+
+    panel.querySelector('.glossary-close').addEventListener('click', close);
+
+    var search = panel.querySelector('.glossary-search');
+    search.addEventListener('input', function() {
+      var q = this.value.toLowerCase();
+      panel.querySelectorAll('.glossary-entry').forEach(function(el) {
+        el.style.display = el.getAttribute('data-term').indexOf(q) >= 0 ? '' : 'none';
+      });
+    });
+
+    panel.addEventListener('click', function(e) {
+      if (e.target === panel) close();
+    });
+
+    return panel;
+  }
+
+  function open() {
+    buildPanel();
+    panel.classList.add('glossary-visible');
+    var search = panel.querySelector('.glossary-search');
+    if (search) setTimeout(function() { search.focus(); }, 100);
+  }
+
+  function close() {
+    if (panel) panel.classList.remove('glossary-visible');
+  }
+
+  function toggle() {
+    if (panel && panel.classList.contains('glossary-visible')) {
+      close();
+    } else {
+      open();
+    }
+  }
+
+  var glossaryBtn = document.getElementById('glossary-btn');
+  if (glossaryBtn) {
+    glossaryBtn.addEventListener('click', function(e) {
+      e.preventDefault();
+      toggle();
+    });
+  }
+
+  document.addEventListener('keydown', function(e) {
+    var el = document.activeElement;
+    if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable)) return;
+    if (e.key === 'g' && !e.ctrlKey && !e.metaKey) {
+      e.preventDefault();
+      toggle();
+    }
+    if (e.key === 'Escape' && panel && panel.classList.contains('glossary-visible')) {
+      close();
+    }
+  });
+
+  R.glossary = { open: open, close: close, toggle: toggle, terms: terms };
+})();

data/data/javascripts/components/mn-index-panel.js

@@ -0,0 +1,33 @@
+// Index panel: quick-nav letter bar and active letter highlighting
+(function() {
+  var indexSection = document.querySelector('[data-component="index"]');
+  if (!indexSection) return;
+
+  var letters = indexSection.querySelectorAll('.index-letter');
+  if (letters.length === 0) return;
+
+  // Build quick-nav map from existing nav links
+  var letterAnchors = {};
+  indexSection.querySelectorAll('.index-quicknav a').forEach(function(anchor) {
+    var letter = anchor.textContent.trim();
+    letterAnchors[letter] = anchor;
+  });
+
+  // Highlight active letter on scroll
+  if ('IntersectionObserver' in window) {
+    var observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        var letter = entry.target.textContent.trim();
+        var anchor = letterAnchors[letter];
+        if (!anchor) return;
+        if (entry.isIntersecting) {
+          anchor.classList.add('active');
+        } else {
+          anchor.classList.remove('active');
+        }
+      });
+    }, { rootMargin: '-80px 0px -80% 0px' });
+
+    letters.forEach(function(h3) { observer.observe(h3); });
+  }
+})();

data/data/javascripts/components/mn-lightbox.js

@@ -0,0 +1,18 @@
+// Lightbox: click images to view full-size overlay
+(function() {
+  document.addEventListener('click', function(e) {
+    var img = e.target.closest('figure img, .doc-content img:not(.brand-logo img):not(.footer-mn-logo img)');
+    if (!img || img.naturalWidth < 100 || img.naturalHeight < 100) return;
+
+    var overlay = document.createElement('div');
+    overlay.className = 'lightbox-overlay';
+
+    var clone = document.createElement('img');
+    clone.src = img.src;
+    clone.alt = img.alt || '';
+
+    overlay.appendChild(clone);
+    document.body.appendChild(overlay);
+    overlay.addEventListener('click', function() { overlay.remove(); });
+  });
+})();

data/data/javascripts/components/mn-search.js

@@ -0,0 +1,212 @@
+// Search: in-page text search with highlighting (unchanged from search.js)
+(function() {
+  var panel, input, counter, content;
+  var matches = [], currentIndex = -1;
+  var isOpen = false;
+
+  function init() {
+    content = document.getElementById('doc-content');
+    if (!content) return;
+    createPanel();
+    bindKeys();
+  }
+
+  function createPanel() {
+    panel = document.createElement('div');
+    panel.className = 'search-panel';
+    panel.id = 'search-panel';
+    panel.setAttribute('role', 'search');
+    panel.innerHTML =
+      '<svg class="search-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">' +
+      '<circle cx="6.5" cy="6.5" r="5"/><line x1="10.2" y1="10.2" x2="14.5" y2="14.5"/></svg>' +
+      '<input type="text" id="search-input" class="search-input" placeholder="Search\u2026" autocomplete="off" spellcheck="false" />' +
+      '<span class="search-counter" id="search-counter"></span>' +
+      '<button class="search-btn" id="search-prev" title="Previous (Shift+Enter)" aria-label="Previous match">' +
+      '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="9,8 6,4 3,8"/></svg></button>' +
+      '<button class="search-btn" id="search-next" title="Next (Enter)" aria-label="Next match">' +
+      '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="3,4 6,8 9,4"/></svg></button>' +
+      '<button class="search-btn search-close" id="search-close" title="Close (Escape)" aria-label="Close search">&times;</button>';
+    document.body.appendChild(panel);
+
+    input = document.getElementById('search-input');
+    counter = document.getElementById('search-counter');
+
+    input.addEventListener('input', debounce(function() {
+      performSearch(input.value);
+    }, 180));
+
+    input.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        navigate(e.shiftKey ? -1 : 1);
+      }
+    });
+
+    document.getElementById('search-prev').addEventListener('click', function() { navigate(-1); });
+    document.getElementById('search-next').addEventListener('click', function() { navigate(1); });
+    document.getElementById('search-close').addEventListener('click', close);
+  }
+
+  function debounce(fn, ms) {
+    var timer;
+    return function() {
+      clearTimeout(timer);
+      timer = setTimeout(fn, ms);
+    };
+  }
+
+  function bindKeys() {
+    document.addEventListener('keydown', function(e) {
+      if ((e.ctrlKey && e.shiftKey && (e.key === 'F' || e.key === 'f')) ||
+          (e.key === '/' && !isEditable(e.target))) {
+        e.preventDefault();
+        open();
+      }
+      if (e.key === 'Escape' && isOpen) {
+        e.preventDefault();
+        close();
+      }
+    });
+  }
+
+  function isEditable(el) {
+    return el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable;
+  }
+
+  function open() {
+    isOpen = true;
+    panel.classList.add('search-active');
+    input.focus();
+    if (input.value) input.select();
+  }
+
+  function close() {
+    isOpen = false;
+    panel.classList.remove('search-active');
+    clearHighlights();
+    input.value = '';
+    counter.textContent = '';
+    matches = [];
+    currentIndex = -1;
+  }
+
+  function performSearch(query) {
+    clearHighlights();
+    if (!query || query.length < 2) {
+      counter.textContent = '';
+      matches = [];
+      currentIndex = -1;
+      return;
+    }
+
+    highlightMatches(query);
+    matches = Array.from(content.querySelectorAll('mark.search-match'));
+
+    if (matches.length > 0) {
+      currentIndex = 0;
+      scrollToMatch(0);
+    } else {
+      currentIndex = -1;
+    }
+    updateCounter();
+  }
+
+  function highlightMatches(query) {
+    var walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, {
+      acceptNode: function(node) {
+        var p = node.parentNode;
+        if (!p) return NodeFilter.FILTER_REJECT;
+        var tag = p.tagName;
+        if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'NOSCRIPT') return NodeFilter.FILTER_REJECT;
+        if (tag === 'MARK' && p.classList.contains('search-match')) return NodeFilter.FILTER_REJECT;
+        if (tag === 'MARK' && p.classList.contains('search-current')) return NodeFilter.FILTER_REJECT;
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    });
+
+    var textNodes = [];
+    while (walker.nextNode()) textNodes.push(walker.currentNode);
+
+    var escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    var regex = new RegExp('(' + escaped + ')', 'gi');
+
+    textNodes.forEach(function(textNode) {
+      var text = textNode.textContent;
+      if (!regex.test(text)) return;
+      regex.lastIndex = 0;
+
+      var fragment = document.createDocumentFragment();
+      var lastIdx = 0;
+      var match;
+
+      while ((match = regex.exec(text)) !== null) {
+        if (match.index > lastIdx) {
+          fragment.appendChild(document.createTextNode(text.substring(lastIdx, match.index)));
+        }
+        var mark = document.createElement('mark');
+        mark.className = 'search-match';
+        mark.textContent = match[1];
+        fragment.appendChild(mark);
+        lastIdx = regex.lastIndex;
+      }
+
+      if (lastIdx < text.length) {
+        fragment.appendChild(document.createTextNode(text.substring(lastIdx)));
+      }
+
+      textNode.parentNode.replaceChild(fragment, textNode);
+    });
+  }
+
+  function clearHighlights() {
+    content.querySelectorAll('mark.search-match, mark.search-current').forEach(function(mark) {
+      var parent = mark.parentNode;
+      parent.replaceChild(document.createTextNode(mark.textContent), mark);
+      parent.normalize();
+    });
+  }
+
+  function navigate(direction) {
+    if (matches.length === 0) return;
+
+    if (currentIndex >= 0 && currentIndex < matches.length) {
+      matches[currentIndex].classList.remove('search-current');
+    }
+
+    currentIndex += direction;
+    if (currentIndex >= matches.length) currentIndex = 0;
+    if (currentIndex < 0) currentIndex = matches.length - 1;
+
+    scrollToMatch(currentIndex);
+    updateCounter();
+  }
+
+  function scrollToMatch(index) {
+    if (index < 0 || index >= matches.length) return;
+    var mark = matches[index];
+    mark.classList.add('search-current');
+    mark.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+
+  function updateCounter() {
+    if (matches.length === 0) {
+      counter.textContent = currentIndex === -1 ? '' : 'No matches';
+    } else {
+      counter.textContent = (currentIndex + 1) + ' / ' + matches.length;
+    }
+  }
+
+  // Search trigger button in header
+  var searchTrigger = document.getElementById('search-trigger');
+  if (searchTrigger) {
+    searchTrigger.addEventListener('click', function() {
+      if (panel) open();
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

data/data/javascripts/components/mn-shortcuts.js

@@ -0,0 +1,83 @@
+// Keyboard shortcuts panel (? key or button)
+(function() {
+  var R = window.MetanormaReader;
+  var panel = null;
+
+  var shortcuts = [
+    { key: '/', desc: 'Search' },
+    { key: 'j / ]', desc: 'Next section' },
+    { key: 'k / [', desc: 'Previous section' },
+    { key: 't', desc: 'Toggle table of contents (mobile)' },
+    { key: 'g', desc: 'Glossary' },
+    { key: 'r', desc: 'Reading mode' },
+    { key: 'd', desc: 'Cycle theme (light/sepia/dark/OLED)' },
+    { key: 'Escape', desc: 'Close panel' },
+    { key: '?', desc: 'This help' }
+  ];
+
+  function buildPanel() {
+    if (panel) return panel;
+    panel = document.createElement('div');
+    panel.className = 'shortcuts-panel';
+    panel.setAttribute('role', 'dialog');
+    panel.setAttribute('aria-label', 'Keyboard shortcuts');
+
+    var html = '<div class="shortcuts-inner">';
+    html += '<div class="shortcuts-title">Keyboard Shortcuts</div><div class="shortcuts-list">';
+    shortcuts.forEach(function(s) {
+      html += '<div class="shortcuts-row">';
+      html += '<kbd>' + s.key.replace(/ /g, '</kbd> <kbd>') + '</kbd>';
+      html += '<span class="shortcuts-desc">' + s.desc + '</span>';
+      html += '</div>';
+    });
+    html += '</div></div>';
+    panel.innerHTML = html;
+    document.body.appendChild(panel);
+
+    panel.addEventListener('click', function(e) {
+      if (e.target === panel) close();
+    });
+    return panel;
+  }
+
+  function open() {
+    buildPanel();
+    panel.classList.add('shortcuts-visible');
+  }
+
+  function close() {
+    if (panel) panel.classList.remove('shortcuts-visible');
+  }
+
+  function toggle() {
+    if (panel && panel.classList.contains('shortcuts-visible')) {
+      close();
+    } else {
+      open();
+    }
+  }
+
+  // Wire up the header button
+  var shortcutsBtn = document.getElementById('shortcuts-btn');
+  if (shortcutsBtn) {
+    shortcutsBtn.addEventListener('click', function(e) {
+      e.preventDefault();
+      toggle();
+    });
+  }
+
+  document.addEventListener('keydown', function(e) {
+    var el = document.activeElement;
+    if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable)) return;
+
+    if (e.key === '?') {
+      e.preventDefault();
+      toggle();
+    }
+    if (e.key === 'Escape' && panel && panel.classList.contains('shortcuts-visible')) {
+      close();
+    }
+  });
+
+  R.shortcuts = { open: open, close: close, toggle: toggle };
+})();

data/data/javascripts/components/mn-stem-dropdown.js

@@ -0,0 +1,42 @@
+// Stem dropdown: hover to reveal copy buttons for math source formats
+(function() {
+  document.querySelectorAll('.math-container[data-stem-formats]').forEach(function(el) {
+    try {
+      var formats = JSON.parse(el.getAttribute('data-stem-formats'));
+    } catch(e) { return; }
+    if (!formats || Object.keys(formats).length === 0) return;
+
+    var dropdown = document.createElement('div');
+    dropdown.className = 'stem-dropdown';
+
+    var label = document.createElement('div');
+    label.className = 'stem-dropdown-label';
+    label.textContent = 'Source format';
+    dropdown.appendChild(label);
+
+    Object.keys(formats).forEach(function(key) {
+      var row = document.createElement('div');
+      row.className = 'stem-dropdown-row';
+
+      var code = document.createElement('span');
+      code.textContent = formats[key];
+      row.appendChild(code);
+
+      var btn = document.createElement('button');
+      btn.className = 'stem-copy-btn';
+      btn.textContent = '⧉';
+      btn.setAttribute('aria-label', 'Copy ' + key);
+      btn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        navigator.clipboard.writeText(formats[key]).then(function() {
+          btn.textContent = '✓';
+          setTimeout(function() { btn.textContent = '⧉'; }, 1200);
+        });
+      });
+      row.appendChild(btn);
+      dropdown.appendChild(row);
+    });
+
+    el.appendChild(dropdown);
+  });
+})();