spb/modelmap Public License

1// ============================================================================2//  Project   : modelmap3//  File      : site/lib/render.js4//  Purpose   : HTML layout, markdown/code rendering, confidence-level widgets5//  Author    : Simon-Pierre Boucher6//  Contact   : contact@spboucher.ai7//  Website   : https://modelmap.io8//  Created   : 2026-08-129//  Modified  : 2026-08-1210//  Platform  : macOS / Apple Silicon (arm64) — Node.js (deployed on MacLustr)11//  License   : All rights reserved (research code)12// ============================================================================13"use strict";1415const { marked } = require("marked");16const hljs = require("highlight.js");1718function esc(s) {19  return String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));20}2122// Rewrite relative markdown links to platform routes; highlight code blocks.23const renderer = new marked.Renderer();24renderer.code = function ({ text, lang }) {25  let html;26  if (lang && hljs.getLanguage(lang)) {27    html = hljs.highlight(text, { language: lang }).value;28  } else {29    html = esc(text);30  }31  return `<pre class="codeblock"><code class="hljs">${html}</code></pre>`;32};3334function markdownToHtml(md, baseRel) {35  marked.use({36    renderer,37    walkTokens(token) {38      if (token.type === "link" && token.href && !/^(https?:|mailto:|#|\/)/.test(token.href)) {39        const base = baseRel.includes("/") ? baseRel.slice(0, baseRel.lastIndexOf("/")) : "";40        const joined = (base ? base + "/" : "") + token.href;41        const norm = joined.split("/").reduce((acc, part) => {42          if (part === "..") acc.pop();43          else if (part !== "." && part !== "") acc.push(part);44          return acc;45        }, []).join("/");46        token.href = norm.endsWith(".md") ? "/doc/" + norm : "/file/" + norm;47      }48    },49  });50  return marked.parse(md);51}5253function highlightFile(text, filename) {54  const ext = filename.slice(filename.lastIndexOf(".") + 1).toLowerCase();55  const langMap = {56    py: "python", sh: "bash", js: "javascript", css: "css", json: "json",57    toml: "ini", yaml: "yaml", yml: "yaml", cff: "yaml", md: "markdown",58    metal: "cpp", cpp: "cpp", h: "cpp", hpp: "cpp", swift: "swift", m: "objectivec",59  };60  const lang = filename === "Makefile" ? "makefile" : langMap[ext];61  if (lang && hljs.getLanguage(lang)) return hljs.highlight(text, { language: lang }).value;62  return esc(text);63}6465const NAV = [66  ["/", "Home"],67  ["/research", "Research"],68  ["/experiments", "Experiments"],69  ["/atlas", "Atlas"],70  ["/publications", "Publications"],71  ["/results", "Results"],72  ["/code", "Code"],73  ["/comments", "Comments"],74  ["/about", "About"],75];7677const LEVELS = [78  ["0", "anecdotal", "single run, no controls — never published alone"],79  ["1", "correlational", "controlled, replicated ≥3 seeds, ≥2 datasets"],80  ["2", "method-robust", "Level 1 + agreement across ≥2 independent techniques"],81  ["3", "causal", "Level 2 + intervention confirms the claim"],82];8384/** Confidence badge for an atlas entry (null level → "unrated"). */85function levelBadge(level) {86  if (level === null || level === undefined) {87    return `<span class="badge badge-pending">unrated</span>`;88  }89  return `<span class="badge badge-level-${level}">Level ${level} — ${LEVELS[level][1]}</span>`;90}9192/** The confidence taxonomy ladder (used on Home / Atlas / About). */93function confidenceLadder() {94  return `<ol class="ladder">` + LEVELS.map(95    ([n, name, desc]) => `<li class="ladder-step"><span class="ladder-num lv${n}">L${n}</span>96    <div><strong>${name}</strong><span class="ladder-desc">${desc}</span></div></li>`97  ).join("") + `</ol>`;98}99100/** Small inline SVG logo — contour lines, a nod to cartography. */101const LOGO = `<svg class="logo" viewBox="0 0 32 32" aria-hidden="true">102<circle cx="16" cy="16" r="13" fill="none" stroke="currentColor" stroke-width="1.6" opacity="0.9"/>103<ellipse cx="16" cy="16" rx="8.5" ry="12" fill="none" stroke="currentColor" stroke-width="1.2" opacity="0.55"/>104<ellipse cx="16" cy="16" rx="4" ry="10.5" fill="none" stroke="currentColor" stroke-width="1" opacity="0.35"/>105<path d="M3.5 13.5 H28.5 M4.5 20.5 H27.5" stroke="currentColor" stroke-width="1" opacity="0.45" fill="none"/>106<circle cx="20.5" cy="11" r="2.1" fill="currentColor"/>107</svg>`;108109function layout({ title, active, body, buildInfo = {} }) {110  const nav = NAV.map(111    ([href, label]) =>112      `<a href="${href}" class="${active === label ? "active" : ""}">${label}</a>`113  ).join("");114  const commit = buildInfo.commit ? buildInfo.commit.slice(0, 7) : "dev";115  const synced = buildInfo.generated ? buildInfo.generated.slice(0, 10) : "";116  return `<!DOCTYPE html>117<html lang="en">118<head>119<meta charset="utf-8">120<meta name="viewport" content="width=device-width, initial-scale=1">121<meta name="theme-color" content="#faf9f6">122<title>${esc(title)} · modelmap</title>123<meta name="description" content="modelmap — internal cartography of local large language models on consumer Apple Silicon. A reproducible, confidence-labeled research atlas by Simon-Pierre Boucher.">124<link rel="preconnect" href="https://fonts.googleapis.com">125<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>126<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">127<link rel="stylesheet" href="/static/style.css">128<link rel="icon" type="image/svg+xml" href="/static/logo.svg">129<link rel="apple-touch-icon" href="/static/logo.svg">130</head>131<body>132<header class="site-header" id="top">133  <div class="wrap header-row">134    <a class="brand" href="/">${LOGO}modelmap<span class="brand-dim">.io</span></a>135    <button class="nav-toggle" id="nav-toggle" aria-label="Menu" aria-expanded="false" aria-controls="site-nav">136      <span></span><span></span><span></span>137    </button>138    <nav class="site-nav" id="site-nav">${nav}</nav>139  </div>140</header>141<main class="wrap">${body}</main>142<footer class="site-footer">143  <div class="wrap footer-grid">144    <div class="footer-col footer-brand">145      <span class="brand-foot">${LOGO}modelmap<span class="brand-dim">.io</span></span>146      <p>Internal cartography of local large language models — every map versioned,147      provenanced, confidence-labeled, and regenerable on a consumer Mac.</p>148    </div>149    <div class="footer-col">150      <h4>Explore</h4>151      <a href="/research">Research</a>152      <a href="/experiments">Experiments</a>153      <a href="/atlas">Atlas</a>154      <a href="/results">Raw results</a>155    </div>156    <div class="footer-col">157      <h4>Project</h4>158      <a href="/doc/CLAUDE.md">Research charter</a>159      <a href="/doc/research/LOG.md">Research log</a>160      <a href="/comments">Leave a comment</a>161      <a href="https://www.localvm.dev">Sister project: localvm</a>162    </div>163    <div class="footer-col">164      <h4>Author</h4>165      <span>Simon-Pierre Boucher</span>166      <a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a>167      <span class="footer-meta">snapshot ${esc(commit)}${synced ? " · synced " + esc(synced) : ""}</span>168    </div>169  </div>170  <div class="wrap footer-bottom">171    <span>© 2026 Simon-Pierre Boucher · All rights reserved (research code)</span>172  </div>173</footer>174<script src="/static/app.js" defer></script>175</body>176</html>`;177}178179module.exports = { esc, markdownToHtml, highlightFile, layout, levelBadge, confidenceLadder, LEVELS };180