initial: zero-trust markdown tutorials site

Single-binary Go service that renders markdown pages from a runtime volume mount. Targeted at public, no-auth, no-WAF deployment behind a TLS ingress; security posture is defense-in-depth at every layer: - goldmark with no WithUnsafe — raw HTML in author markdown is stripped - CSP without 'unsafe-inline', plus HSTS, COOP, CORP, Permissions-Policy - static handler rejects non-GET/HEAD, directory listings, dotfiles, traversal - content loader rejects symlinks that escape the content root, dotfiles, and .md files larger than 1 MiB - per-page template trees (cloned from layout) so define-blocks don't collide between home/category/page - SIGHUP triggers atomic library swap — live edits on volume, no rebuild Locale layout content/<locale>/<category>/<slug>.md. Categories without _index.md still appear on the home page with a humanized name. Search is a ~70-line vanilla JS scan over /search.json?lang=<locale>; swap for a real indexer if the corpus ever balloons. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-13 00:52:53 +02:00
commit aa36b2905a
22 changed files with 1465 additions and 0 deletions
@@ -0,0 +1,71 @@
+// search.js — minimal client-side search.
+// Loads /search.json?lang=<locale>, builds an in-memory index, renders results
+// as the user types in the header search box.
+//
+// Deliberately tiny — no FlexSearch dependency yet (the page set is small,
+// linear scan with case-insensitive substring is plenty). Swap in FlexSearch
+// or Lunr if the corpus grows past a few hundred pages.
+(function () {
+  const input = document.getElementById('search-input');
+  const results = document.getElementById('search-results');
+  if (!input || !results) return;
+
+  const lang = document.documentElement.lang || 'en';
+  let pages = [];
+  let loaded = false;
+
+  function loadIndex() {
+    if (loaded) return Promise.resolve();
+    return fetch('/search.json?lang=' + encodeURIComponent(lang))
+      .then(r => r.json())
+      .then(data => { pages = data || []; loaded = true; })
+      .catch(() => { /* silent — search just stays empty */ });
+  }
+
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+
+  function search(q) {
+    if (!q || q.length < 2) return [];
+    const needle = q.toLowerCase();
+    const out = [];
+    for (const p of pages) {
+      const titleHit = p.title && p.title.toLowerCase().includes(needle);
+      const summaryHit = p.summary && p.summary.toLowerCase().includes(needle);
+      const bodyHit = p.body && p.body.toLowerCase().includes(needle);
+      if (titleHit || summaryHit || bodyHit) {
+        // crude scoring: title > summary > body
+        const score = (titleHit ? 100 : 0) + (summaryHit ? 10 : 0) + (bodyHit ? 1 : 0);
+        out.push({ ...p, score });
+      }
+      if (out.length >= 50) break;
+    }
+    out.sort((a, b) => b.score - a.score);
+    return out.slice(0, 8);
+  }
+
+  function render(matches) {
+    if (!matches.length) { results.hidden = true; results.innerHTML = ''; return; }
+    results.innerHTML = matches.map(m =>
+      `<li><a href="${escapeHtml(m.path)}">
+        <span class="title">${escapeHtml(m.title)}</span>
+        ${m.summary ? `<span class="summary">${escapeHtml(m.summary)}</span>` : ''}
+      </a></li>`
+    ).join('');
+    results.hidden = false;
+  }
+
+  let timer = null;
+  input.addEventListener('focus', loadIndex);
+  input.addEventListener('input', () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      loadIndex().then(() => render(search(input.value.trim())));
+    }, 80);
+  });
+  input.addEventListener('blur', () => {
+    // Delay so click on a result registers before hiding.
+    setTimeout(() => { results.hidden = true; }, 150);
+  });
+})();
@@ -0,0 +1,152 @@
+/* automc-tutorials — minimal opinionated CSS, no framework. */
+* { box-sizing: border-box; }
+html { font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #222; background: #fff; }
+body { margin: 0; }
+a { color: #2c5fa3; text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+.site-header {
+  display: flex; align-items: center; gap: 1rem;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #e5e5e5;
+  background: #fafafa;
+  position: sticky; top: 0; z-index: 10;
+}
+.brand { font-weight: 700; font-size: 1.05rem; color: #222; }
+.brand:hover { text-decoration: none; }
+
+.search { position: relative; flex: 1; max-width: 28rem; }
+.search input {
+  width: 100%; padding: 0.4rem 0.6rem;
+  border: 1px solid #ccc; border-radius: 6px;
+  font: inherit;
+}
+#search-results {
+  position: absolute; top: 100%; left: 0; right: 0;
+  margin: 0.25rem 0 0; padding: 0; list-style: none;
+  background: #fff; border: 1px solid #ddd; border-radius: 6px;
+  max-height: 18rem; overflow-y: auto;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+#search-results li { padding: 0; }
+#search-results a {
+  display: block; padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid #f0f0f0;
+  color: #222;
+}
+#search-results a:hover { background: #f4f7fb; text-decoration: none; }
+#search-results .title { font-weight: 600; }
+#search-results .summary { display: block; font-size: 0.85rem; color: #666; }
+
+.locale-switch a.lang {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  margin-left: 0.25rem;
+  border-radius: 4px;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  color: #555;
+}
+.locale-switch a.lang.active { background: #2c5fa3; color: #fff; }
+
+.breadcrumbs {
+  padding: 0.5rem 1.25rem;
+  font-size: 0.9rem; color: #666;
+  border-bottom: 1px solid #f0f0f0;
+}
+.breadcrumbs .sep { margin: 0 0.4rem; color: #aaa; }
+.breadcrumbs .active { color: #222; }
+
+main {
+  max-width: 50rem;
+  margin: 0 auto;
+  padding: 2rem 1.25rem;
+}
+
+h1 { font-size: 1.75rem; margin: 0 0 0.5rem; }
+h2 { font-size: 1.35rem; margin: 1.5rem 0 0.5rem; }
+.lead { font-size: 1.1rem; color: #555; margin: 0.5rem 0 1.5rem; }
+
+.category-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
+.category-item a {
+  display: block;
+  padding: 1rem 1.25rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  color: #222;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.category-item a:hover {
+  border-color: #2c5fa3;
+  box-shadow: 0 2px 8px rgba(44,95,163,0.1);
+  text-decoration: none;
+}
+.category-item h2 { margin: 0 0 0.25rem; font-size: 1.15rem; }
+.category-item p { margin: 0.25rem 0; color: #555; }
+.category-item .page-count { font-size: 0.85rem; color: #888; }
+
+.page-list { list-style: none; padding: 0; }
+.page-list li { margin-bottom: 0.5rem; }
+.page-list a {
+  display: block;
+  padding: 0.6rem 0.8rem;
+  border-left: 3px solid transparent;
+  border-radius: 4px;
+}
+.page-list a:hover { border-left-color: #2c5fa3; background: #f7f9fc; text-decoration: none; }
+.page-list strong { color: #222; }
+.page-list .summary { display: block; font-size: 0.9rem; color: #666; margin-top: 0.15rem; }
+
+.page-header { margin-bottom: 1.5rem; }
+.page-header .summary { color: #555; font-size: 1.05rem; }
+
+.prose { line-height: 1.7; }
+.prose code {
+  background: #f4f4f5; padding: 0.1rem 0.35rem; border-radius: 3px;
+  font-size: 0.9em; font-family: ui-monospace, "SF Mono", Menlo, monospace;
+}
+.prose pre {
+  background: #1e1e2e; color: #cdd6f4;
+  padding: 1rem; border-radius: 8px; overflow-x: auto;
+  font-size: 0.9rem; line-height: 1.5;
+}
+.prose pre code { background: transparent; padding: 0; color: inherit; }
+.prose img { max-width: 100%; border-radius: 8px; }
+.prose blockquote {
+  border-left: 4px solid #2c5fa3;
+  margin: 1rem 0; padding: 0.5rem 1rem;
+  background: #f7f9fc;
+}
+.prose table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
+.prose th, .prose td { border: 1px solid #e0e0e0; padding: 0.5rem 0.75rem; text-align: left; }
+.prose th { background: #fafafa; }
+
+.site-footer {
+  margin-top: 4rem;
+  padding: 1.5rem 1.25rem;
+  border-top: 1px solid #e5e5e5;
+  text-align: center;
+  font-size: 0.85rem;
+  color: #888;
+}
+
+@media (prefers-color-scheme: dark) {
+  html { color: #ddd; background: #1a1a1a; }
+  .site-header { background: #222; border-color: #333; }
+  .brand { color: #ddd; }
+  a { color: #6aa2dc; }
+  .search input { background: #2a2a2a; border-color: #444; color: #ddd; }
+  #search-results { background: #222; border-color: #444; }
+  #search-results a { color: #ddd; border-color: #2f2f2f; }
+  #search-results a:hover { background: #2a2f3a; }
+  .breadcrumbs { color: #999; border-color: #333; }
+  .breadcrumbs .active { color: #eee; }
+  .category-item a { background: #222; border-color: #333; color: #ddd; }
+  .category-item a:hover { border-color: #6aa2dc; }
+  .page-list a:hover { background: #2a2a2a; }
+  .prose code { background: #2a2a2a; color: #f4f4f5; }
+  .prose blockquote { background: #222; }
+  .prose th { background: #222; }
+  .prose th, .prose td { border-color: #333; }
+  .site-footer { border-color: #333; color: #777; }
+}