mkdnsite 0.0.1 → 1.1.0

package/src/client/scripts.ts

@@ -9,6 +9,9 @@ export function CLIENT_SCRIPTS (client: ClientConfig): string {
 
   const scripts: string[] = []
 
+  scripts.push(NAV_TOGGLE_SCRIPT)
+  scripts.push(STICKY_TABLE_SCRIPT)
+
   if (client.themeToggle) {
     scripts.push(THEME_TOGGLE_SCRIPT)
   }
@@ -23,6 +26,11 @@ export function CLIENT_SCRIPTS (client: ClientConfig): string {
 
   if (client.search) {
     scripts.push(SEARCH_SCRIPT)
+    scripts.push(HIGHLIGHT_SCRIPT)
+  }
+
+  if (client.charts) {
+    scripts.push(CHART_SCRIPT)
   }
 
   if (scripts.length === 0) return ''
@@ -30,6 +38,31 @@ export function CLIENT_SCRIPTS (client: ClientConfig): string {
   return `<script>${scripts.join('\n')}</script>`
 }
 
+const NAV_TOGGLE_SCRIPT = `
+(function(){
+  var toggle = document.querySelector('.mkdn-nav-toggle');
+  var nav = document.querySelector('.mkdn-nav');
+  var backdrop = document.querySelector('.mkdn-nav-backdrop');
+  if (!toggle || !nav) return;
+  function open() {
+    nav.classList.add('mkdn-nav--open');
+    if (backdrop) backdrop.classList.add('mkdn-nav-backdrop--visible');
+    toggle.setAttribute('aria-expanded', 'true');
+  }
+  function close() {
+    nav.classList.remove('mkdn-nav--open');
+    if (backdrop) backdrop.classList.remove('mkdn-nav-backdrop--visible');
+    toggle.setAttribute('aria-expanded', 'false');
+  }
+  toggle.addEventListener('click', function() {
+    nav.classList.contains('mkdn-nav--open') ? close() : open();
+  });
+  if (backdrop) backdrop.addEventListener('click', close);
+  nav.addEventListener('click', function(e) {
+    if (e.target && e.target.closest && e.target.closest('a')) close();
+  });
+})();`
+
 const THEME_TOGGLE_SCRIPT = `
 (function(){
   var btn = document.querySelector('.mkdn-theme-toggle');
@@ -100,7 +133,376 @@ const MERMAID_SCRIPT = `
 `.trim()
 
 const SEARCH_SCRIPT = `
-/* Search: placeholder for client-side search functionality.
-   Will be implemented with a pre-built content index served at /search-index.json.
-   For MVP, this is a no-op that can be activated once the index endpoint exists. */
+(function(){
+  // ── Search modal ──────────────────────────────────────────────────────────
+  var overlay, input, resultsEl, activeIdx = -1, debounceTimer, lastQuery = '';
+
+  function escHtml(s) {
+    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  function boldTerms(excerpt, terms) {
+    var safe = escHtml(excerpt);
+    var sorted = terms.slice().sort(function(a,b){ return b.length - a.length; });
+    sorted.forEach(function(t){
+      if (t.length < 2) return;
+      var escaped = t.replace(new RegExp('[.*+?^' + '$' + '{}()|[\\]\\\\]','g'),'\\$&');
+      var re = new RegExp('(' + escaped + ')', 'gi');
+      safe = safe.replace(re, '<mark>$1</mark>');
+    });
+    return safe;
+  }
+
+  function buildModal() {
+    overlay = document.createElement('div');
+    overlay.className = 'mkdn-search-overlay';
+    overlay.setAttribute('role','dialog');
+    overlay.setAttribute('aria-modal','true');
+    overlay.setAttribute('aria-label','Search');
+    overlay.innerHTML =
+      '<div class="mkdn-search-modal">' +
+        '<div class="mkdn-search-input-wrap">' +
+          '<svg class="mkdn-search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>' +
+          '<input type="text" class="mkdn-search-input" placeholder="Search documentation..." autocomplete="off" spellcheck="false">' +
+          '<kbd class="mkdn-search-kbd">Esc</kbd>' +
+        '</div>' +
+        '<div class="mkdn-search-results"><p class="mkdn-search-hint">Type to search\u2026</p></div>' +
+      '</div>';
+    document.body.appendChild(overlay);
+    input = overlay.querySelector('.mkdn-search-input');
+    resultsEl = overlay.querySelector('.mkdn-search-results');
+
+    // Close on overlay click (outside modal)
+    overlay.addEventListener('click', function(e){ if (e.target === overlay) closeModal(); });
+    input.addEventListener('input', onInput);
+    input.addEventListener('keydown', onKeydown);
+  }
+
+  function openModal() {
+    if (!overlay) buildModal();
+    overlay.classList.add('mkdn-search-overlay--open');
+    input.value = '';
+    lastQuery = '';
+    activeIdx = -1;
+    resultsEl.innerHTML = '<p class="mkdn-search-hint">Type to search\u2026</p>';
+    requestAnimationFrame(function(){ input.focus(); });
+  }
+
+  function closeModal() {
+    if (overlay) overlay.classList.remove('mkdn-search-overlay--open');
+    clearTimeout(debounceTimer);
+  }
+
+  function onInput() {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(doSearch, 250);
+  }
+
+  function doSearch() {
+    var q = input.value.trim();
+    if (q === lastQuery) return;
+    lastQuery = q;
+    activeIdx = -1;
+    if (!q) { resultsEl.innerHTML = '<p class="mkdn-search-hint">Type to search\u2026</p>'; return; }
+    resultsEl.innerHTML = '<p class="mkdn-search-hint mkdn-search-hint--loading">Searching\u2026</p>';
+    var url = '/api/search?q=' + encodeURIComponent(q) + '&limit=10';
+    fetch(url).then(function(r){ return r.json(); }).then(function(results){
+      renderResults(results, q);
+    }).catch(function(){
+      resultsEl.innerHTML = '<p class="mkdn-search-hint">Search unavailable</p>';
+    });
+  }
+
+  function renderResults(results, q) {
+    if (!results.length) {
+      resultsEl.innerHTML = '<p class="mkdn-search-hint">No results found</p>';
+      return;
+    }
+    var terms = q.toLowerCase().split(/\\s+/).filter(function(t){ return t.length >= 2; });
+    var html = results.map(function(r, i){
+      var href = r.slug + '?q=' + encodeURIComponent(q);
+      return '<a href="' + href + '" class="mkdn-search-result' + (i === 0 ? ' mkdn-search-result--active' : '') + '" data-idx="' + i + '">' +
+        '<div class="mkdn-search-result-title">' + escHtml(r.title || r.slug) + '</div>' +
+        '<div class="mkdn-search-result-excerpt">' + boldTerms(r.excerpt || '', terms) + '</div>' +
+        '<div class="mkdn-search-result-slug">' + escHtml(r.slug) + '</div>' +
+      '</a>';
+    }).join('');
+    resultsEl.innerHTML = html;
+    activeIdx = 0;
+    resultsEl.querySelectorAll('.mkdn-search-result').forEach(function(el){
+      el.addEventListener('mouseenter', function(){
+        setActive(parseInt(el.getAttribute('data-idx')));
+      });
+    });
+  }
+
+  function setActive(idx) {
+    var items = resultsEl.querySelectorAll('.mkdn-search-result');
+    if (!items.length) return;
+    idx = Math.max(0, Math.min(idx, items.length - 1));
+    items.forEach(function(el, i){
+      el.classList.toggle('mkdn-search-result--active', i === idx);
+    });
+    items[idx].scrollIntoView({ block: 'nearest' });
+    activeIdx = idx;
+  }
+
+  function onKeydown(e) {
+    var items = resultsEl.querySelectorAll('.mkdn-search-result');
+    if (e.key === 'Escape') { closeModal(); return; }
+    if (e.key === 'ArrowDown') { e.preventDefault(); setActive(activeIdx + 1); return; }
+    if (e.key === 'ArrowUp') { e.preventDefault(); setActive(activeIdx - 1); return; }
+    if (e.key === 'Enter' && items.length) {
+      e.preventDefault();
+      var target = items[Math.max(0, activeIdx)];
+      if (target) { closeModal(); window.location.href = target.getAttribute('href'); }
+    }
+  }
+
+  // Keyboard shortcut: Cmd+K / Ctrl+K
+  document.addEventListener('keydown', function(e){
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); openModal(); }
+    if (e.key === 'Escape' && overlay && overlay.classList.contains('mkdn-search-overlay--open')) closeModal();
+  });
+
+  // Search trigger button
+  document.addEventListener('click', function(e){
+    if (e.target && e.target.closest && e.target.closest('.mkdn-search-trigger')) openModal();
+  });
+})();
+`.trim()
+
+const HIGHLIGHT_SCRIPT = `
+(function(){
+  var params = new URLSearchParams(window.location.search);
+  var q = params.get('q');
+  if (!q) return;
+
+  params.delete('q');
+  var newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '') + window.location.hash;
+  history.replaceState(null, '', newUrl);
+
+  var terms = q.toLowerCase().split(/ +/).filter(function(t){ return t.length >= 2; });
+  terms.sort(function(a, b){ return b.length - a.length; });
+  if (!terms.length) return;
+
+  var prose = document.querySelector('.mkdn-prose');
+  if (!prose) return;
+
+  var marks = [];
+
+  var walker = document.createTreeWalker(prose, 4, function(node){
+    var p = node.parentNode;
+    if (!p) return 2;
+    var tag = p.nodeName.toUpperCase();
+    if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'CODE' || tag === 'PRE') return 2;
+    return 1;
+  });
+
+  var textNodes = [];
+  while (walker.nextNode()) textNodes.push(walker.currentNode);
+
+  textNodes.forEach(function(node){
+    var text = node.nodeValue || '';
+    var lower = text.toLowerCase();
+    var found = false;
+    terms.forEach(function(t){ if (lower.indexOf(t) !== -1) found = true; });
+    if (!found) return;
+
+    var frag = document.createDocumentFragment();
+    var remaining = text;
+    var lowerRemaining = lower;
+
+    while (remaining.length > 0) {
+      var bestIdx = -1, bestLen = 0;
+      terms.forEach(function(t){
+        var idx = lowerRemaining.indexOf(t);
+        if (idx !== -1 && (bestIdx === -1 || idx < bestIdx)) { bestIdx = idx; bestLen = t.length; }
+      });
+
+      if (bestIdx === -1) { frag.appendChild(document.createTextNode(remaining)); break; }
+      if (bestIdx > 0) frag.appendChild(document.createTextNode(remaining.slice(0, bestIdx)));
+
+      var mark = document.createElement('mark');
+      mark.className = 'mkdn-search-highlight';
+      mark.textContent = remaining.slice(bestIdx, bestIdx + bestLen);
+      frag.appendChild(mark);
+      marks.push(mark);
+
+      remaining = remaining.slice(bestIdx + bestLen);
+      lowerRemaining = lowerRemaining.slice(bestIdx + bestLen);
+    }
+
+    node.parentNode.replaceChild(frag, node);
+  });
+
+  if (marks.length > 0) marks[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+  function fadeHighlights() {
+    marks.forEach(function(m){ m.classList.add('mkdn-search-highlight--fading'); });
+    setTimeout(function(){
+      marks.forEach(function(m){
+        if (m.parentNode) m.parentNode.replaceChild(document.createTextNode(m.textContent || ''), m);
+      });
+      marks = [];
+    }, 600);
+  }
+
+  var fadeTimer = setTimeout(fadeHighlights, 8000);
+  document.addEventListener('click', function(){ clearTimeout(fadeTimer); fadeHighlights(); }, { once: true });
+})();
+`.trim()
+
+const STICKY_TABLE_SCRIPT = `
+(function(){
+  var wrappers = document.querySelectorAll('.mkdn-table-wrapper');
+  if (!wrappers.length) return;
+
+  var clones = [];
+
+  wrappers.forEach(function(wrapper){
+    var table = wrapper.querySelector('table');
+    if (!table) return;
+    var thead = table.querySelector('thead');
+    if (!thead) return;
+
+    var clone = document.createElement('div');
+    clone.className = 'mkdn-thead-clone mkdn-prose';
+    clone.style.display = 'none';
+
+    var cloneTable = document.createElement('table');
+    cloneTable.appendChild(thead.cloneNode(true));
+    clone.appendChild(cloneTable);
+    document.body.appendChild(clone);
+
+    clones.push({ wrapper: wrapper, table: table, thead: thead, clone: clone, cloneTable: cloneTable });
+  });
+
+  if (!clones.length) return;
+
+  function syncWidths (entry) {
+    entry.cloneTable.style.width = entry.table.getBoundingClientRect().width + 'px';
+    var ths = entry.thead.querySelectorAll('th');
+    var cloneThs = entry.clone.querySelectorAll('th');
+    ths.forEach(function(th, i){
+      if (cloneThs[i]) {
+        var w = th.getBoundingClientRect().width + 'px';
+        cloneThs[i].style.width = w;
+        cloneThs[i].style.minWidth = w;
+        cloneThs[i].style.maxWidth = w;
+      }
+    });
+    var wrapperRect = entry.wrapper.getBoundingClientRect();
+    entry.clone.style.left = wrapperRect.left + 'px';
+    entry.clone.style.width = wrapperRect.width + 'px';
+    entry.cloneTable.style.marginLeft = (-entry.wrapper.scrollLeft) + 'px';
+  }
+
+  function onScroll () {
+    clones.forEach(function(entry){
+      var theadRect = entry.thead.getBoundingClientRect();
+      var tableBottom = entry.table.getBoundingClientRect().bottom;
+      var theadHeight = theadRect.height;
+      if (theadRect.top < 0 && tableBottom > theadHeight) {
+        entry.clone.style.display = 'block';
+        syncWidths(entry);
+      } else {
+        entry.clone.style.display = 'none';
+      }
+    });
+  }
+
+  clones.forEach(function(entry){
+    entry.wrapper.addEventListener('scroll', function(){
+      if (entry.clone.style.display !== 'none') {
+        entry.cloneTable.style.marginLeft = (-entry.wrapper.scrollLeft) + 'px';
+      }
+    });
+  });
+
+  window.addEventListener('scroll', onScroll, { passive: true });
+  window.addEventListener('resize', onScroll, { passive: true });
+})();
+`.trim()
+
+const CHART_SCRIPT = `
+(function(){
+  var chartBlocks = document.querySelectorAll('code.language-chart');
+  if (chartBlocks.length === 0) return;
+
+  var s = document.createElement('script');
+  s.src = 'https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js';
+  s.onload = function(){
+    var root = getComputedStyle(document.documentElement);
+    var textMuted = root.getPropertyValue('--mkdn-text-muted').trim() || '#6b7280';
+    var borderColor = root.getPropertyValue('--mkdn-border').trim() || '#e5e7eb';
+    var accent = root.getPropertyValue('--mkdn-accent').trim() || '#6366f1';
+    var fontBody = root.getPropertyValue('--mkdn-font-body').trim() || 'inherit';
+
+    var palette = [
+      accent,
+      '#06b6d4', '#f59e0b', '#10b981', '#ef4444',
+      '#8b5cf6', '#ec4899', '#14b8a6'
+    ];
+
+    Chart.defaults.color = textMuted;
+    Chart.defaults.borderColor = borderColor;
+    Chart.defaults.font.family = fontBody;
+
+    chartBlocks.forEach(function(block, idx){
+      var pre = block.parentElement;
+      var raw = block.textContent || '';
+      var config;
+      try {
+        config = JSON.parse(raw);
+      } catch(e) {
+        var errEl = document.createElement('div');
+        errEl.className = 'mkdn-chart-error';
+        errEl.textContent = 'Chart error: invalid JSON';
+        pre.parentElement.replaceChild(errEl, pre);
+        return;
+      }
+
+      if (config.data && config.data.datasets) {
+        config.data.datasets.forEach(function(ds, i){
+          var color = palette[i % palette.length];
+          if (!ds.backgroundColor) {
+            if (config.type === 'pie' || config.type === 'doughnut' || config.type === 'polarArea') {
+              ds.backgroundColor = palette.slice(0, (ds.data || []).length);
+            } else {
+              ds.backgroundColor = color + '33';
+            }
+          }
+          if (!ds.borderColor) ds.borderColor = color;
+          if (config.type === 'line' || config.type === 'radar') {
+            if (ds.tension === undefined) ds.tension = 0.3;
+            if (ds.fill === undefined) ds.fill = false;
+          }
+        });
+      }
+
+      if (!config.options) config.options = {};
+      config.options.responsive = true;
+      config.options.maintainAspectRatio = true;
+
+      var container = document.createElement('div');
+      container.className = 'mkdn-chart';
+      var canvas = document.createElement('canvas');
+      canvas.id = 'mkdn-chart-' + idx;
+      container.appendChild(canvas);
+      pre.parentElement.replaceChild(container, pre);
+
+      try {
+        new Chart(canvas, config);
+      } catch(e) {
+        container.innerHTML = '';
+        var err = document.createElement('div');
+        err.className = 'mkdn-chart-error';
+        err.textContent = 'Chart error: ' + (e.message || 'unknown error');
+        container.appendChild(err);
+      }
+    });
+  };
+  document.head.appendChild(s);
+})();
 `.trim()

package/src/config/defaults.ts

@@ -12,6 +12,11 @@ export const DEFAULT_CONFIG: MkdnSiteConfig = {
   },
   theme: {
     mode: 'prose',
+    builtinCss: true,
+    pageTitle: false,
+    pageDate: false,
+    prevNext: false,
+    readingTime: false,
     showNav: true,
     showToc: true,
     colorScheme: 'system',
@@ -36,24 +41,60 @@ export const DEFAULT_CONFIG: MkdnSiteConfig = {
     copyButton: true,
     themeToggle: true,
     math: true,
-    search: true
+    search: true,
+    charts: true
   },
-  renderer: 'portable'
+  renderer: 'portable',
+  mcp: {
+    enabled: true,
+    endpoint: '/mcp'
+  },
+  csp: {
+    enabled: true
+  }
+}
+
+/**
+ * Preset theme overrides applied before user config.
+ * User values always win over preset values.
+ */
+const PRESET_THEME: Record<string, Partial<MkdnSiteConfig['theme']>> = {
+  docs: {
+    showNav: true,
+    showToc: true,
+    pageTitle: false,
+    pageDate: false,
+    prevNext: true,
+    readingTime: false
+  },
+  blog: {
+    showNav: false,
+    showToc: false,
+    pageTitle: true,
+    pageDate: true,
+    prevNext: true,
+    readingTime: true
+  }
 }
 
 /**
- * Deep merge user config with defaults.
+ * Deep merge user config with defaults, applying preset if set.
+ * Merge order: DEFAULT_CONFIG → preset → userConfig
  * User values take precedence at every nesting level.
  */
 export function resolveConfig (
   userConfig: Partial<MkdnSiteConfig>
 ): MkdnSiteConfig {
+  const presetTheme = userConfig.preset != null
+    ? (PRESET_THEME[userConfig.preset] ?? {})
+    : {}
+
   return {
     ...DEFAULT_CONFIG,
     ...userConfig,
     site: { ...DEFAULT_CONFIG.site, ...userConfig.site },
     server: { ...DEFAULT_CONFIG.server, ...userConfig.server },
-    theme: { ...DEFAULT_CONFIG.theme, ...userConfig.theme },
+    theme: { ...DEFAULT_CONFIG.theme, ...presetTheme, ...userConfig.theme },
     negotiation: {
       ...DEFAULT_CONFIG.negotiation,
       ...userConfig.negotiation,
@@ -63,6 +104,28 @@ export function resolveConfig (
       }
     },
     llmsTxt: { ...DEFAULT_CONFIG.llmsTxt, ...userConfig.llmsTxt },
-    client: { ...DEFAULT_CONFIG.client, ...userConfig.client }
+    client: { ...DEFAULT_CONFIG.client, ...userConfig.client },
+    github: userConfig.github,
+    include: userConfig.include,
+    exclude: userConfig.exclude,
+    mcp: { ...DEFAULT_CONFIG.mcp, ...userConfig.mcp },
+    analytics: userConfig.analytics != null
+      ? {
+          ...userConfig.analytics,
+          traffic: userConfig.analytics.traffic != null
+            ? { enabled: false, console: false, ...userConfig.analytics.traffic }
+            : userConfig.analytics.traffic
+        }
+      : userConfig.analytics,
+    csp: userConfig.csp != null
+      ? { ...DEFAULT_CONFIG.csp, ...userConfig.csp }
+      : DEFAULT_CONFIG.csp,
+    cache: {
+      enabled: userConfig.cache?.enabled ?? false,
+      maxAge: userConfig.cache?.maxAge ?? 300,
+      maxAgeMarkdown: userConfig.cache?.maxAgeMarkdown ?? 300,
+      staleWhileRevalidate: userConfig.cache?.staleWhileRevalidate ?? 0,
+      versionTag: userConfig.cache?.versionTag
+    }
   }
 }