render.js · Property Ontology

javascript255 lines9.3 KB
1'use strict';
2
3// Content renderers: Markdown → HTML (with heading ids, mermaid, relative
4// link rewriting), source code → line-numbered highlighted HTML, JSONL →
5// record cards, plus small helpers shared by the page templates.
6
7const path = require('path');
8const hljs = require('highlight.js');
9const { Marked } = require('marked');
10const { markedHighlight } = require('marked-highlight');
11const { gfmHeadingId } = require('marked-gfm-heading-id');
12const { registerLanguages, languageFor } = require('./languages');
13
14registerLanguages(hljs);
15
16const HIGHLIGHT_LIMIT = 600 * 1024; // bytes; above this we skip syntax colouring
17const TEXT_LIMIT = 3 * 1024 * 1024; // bytes; above this we do not inline at all
18
19function escapeHtml(s) {
return String(s)
  .replace(/&/g, '&amp;')
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;')
  .replace(/"/g, '&quot;')
  .replace(/'/g, '&#39;');
26}
27
28function encodePath(rel) {
return rel.split('/').map(encodeURIComponent).join('/');
30}
31
32function formatBytes(n) {
if (n < 1024) return `${n} B`;
const units = ['KB', 'MB', 'GB'];
let v = n / 1024;
let i = 0;
while (v >= 1024 && i < units.length - 1) {
  v /= 1024;
  i++;
}
return `${v.toFixed(v >= 100 ? 0 : 1)} ${units[i]}`;
42}
43
44function highlightCode(code, lang) {
if (lang && lang !== 'plaintext' && hljs.getLanguage(lang)) {
  try {
    return { html: hljs.highlight(code, { language: lang, ignoreIllegals: true }).value, lang };
  } catch {
    /* fall through */
  }
}
return { html: escapeHtml(code), lang: 'plaintext' };
53}
54
55/**
* Split highlighted HTML into lines, re-opening any <span> tags that were
* left open at a line break so each line is self-contained markup.
*/
59function splitHighlightedLines(html) {
const lines = html.split('\n');
const out = [];
let open = []; // stack of opening tags
const tagRe = /<span\b[^>]*>|<\/span>/g;
for (const line of lines) {
  const prefix = open.join('');
  let m;
  tagRe.lastIndex = 0;
  while ((m = tagRe.exec(line))) {
    if (m[0] === '</span>') open.pop();
    else open.push(m[0]);
  }
  const suffix = '</span>'.repeat(open.length);
  out.push(prefix + line + suffix);
}
return out;
76}
77
78/** Full source view with line numbers and anchors (#L12). */
79function renderCode(code, filename, opts = {}) {
const lang = opts.lang !== undefined ? opts.lang : languageFor(filename);
const bytes = Buffer.byteLength(code, 'utf8');
const skipHighlight = bytes > HIGHLIGHT_LIMIT;
const { html, lang: usedLang } = skipHighlight ? { html: escapeHtml(code), lang: 'plaintext' } : highlightCode(code, lang);
const lines = splitHighlightedLines(html);
if (lines.length && lines[lines.length - 1] === '') lines.pop();
const rows = lines
  .map((l, i) => {
    const n = i + 1;
    return `<tr id="L${n}"><td class="ln"><a href="#L${n}" data-line="${n}">${n}</a></td><td class="lc">${l || '\n'}</td></tr>`;
  })
  .join('');
return {
  html: `<div class="code-view hljs" data-lang="${escapeHtml(usedLang || 'plaintext')}"><table class="code-table"><tbody>${rows}</tbody></table></div>`,
  lines: lines.length,
  lang: usedLang,
  skippedHighlight: skipHighlight,
};
98}
99
100/** Render each JSONL record as a pretty-printed, highlighted card. */
101function renderJsonl(text) {
const lines = text.split('\n').filter((l) => l.trim() !== '');
const cards = lines.map((line, i) => {
  let body;
  let title = `Record ${i + 1}`;
  try {
    const obj = JSON.parse(line);
    const pretty = JSON.stringify(obj, null, 2);
    body = highlightCode(pretty, 'json').html;
    const id = obj && (obj.id || obj.ID || obj.name || obj.slug);
    if (id) title = `<span class="rec-id">${escapeHtml(String(id))}</span>`;
  } catch {
    body = escapeHtml(line);
    title = `Record ${i + 1} <span class="badge warn">unparsable</span>`;
  }
  return `<details class="jsonl-rec" id="R${i + 1}" ${i < 25 ? 'open' : ''}><summary><span class="rec-n">#${i + 1}</span> ${title}</summary><pre class="hljs"><code>${body}</code></pre></details>`;
});
return { html: `<div class="jsonl-view">${cards.join('')}</div>`, records: lines.length };
119}
120
121/* ------------------------------------------------------------------ */
122/* Markdown                                                            */
123/* ------------------------------------------------------------------ */
124
125function isRelativeHref(href) {
if (!href) return false;
if (/^[a-z][a-z0-9+.-]*:/i.test(href)) return false; // scheme (http:, mailto:, data:)
if (href.startsWith('/') || href.startsWith('#') || href.startsWith('//')) return false;
return true;
130}
131
132/** Resolve an href relative to the markdown file's directory → repo path + hash. */
133function resolveRelative(href, fileDir) {
const [pathPart, hash] = href.split('#');
const [cleanPath] = pathPart.split('?');
const decoded = (() => {
  try {
    return decodeURIComponent(cleanPath);
  } catch {
    return cleanPath;
  }
})();
let target = path.posix.normalize(path.posix.join(fileDir || '', decoded));
if (target === '.') target = '';
if (target.startsWith('..')) return null;
return { target, hash: hash ? `#${hash}` : '' };
147}
148
149function createMarkdown({ fileDir, fileSet }) {
const marked = new Marked(
  markedHighlight({
    emptyLangClass: 'hljs',
    langPrefix: 'hljs language-',
    highlight(code, lang) {
      if (lang === 'mermaid') return code; // handled by renderer below
      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
      return hljs.highlight(code, { language, ignoreIllegals: true }).value;
    },
  }),
  gfmHeadingId(),
);
162
const renderer = {
  code({ text, lang, escaped }) {
    if ((lang || '').trim().toLowerCase() === 'mermaid') {
      return `<div class="mermaid-block"><pre class="mermaid" data-src="${escapeHtml(text)}">${escapeHtml(text)}</pre><details class="mermaid-src"><summary>Diagram source</summary><pre class="hljs"><code>${escapeHtml(text)}</code></pre></details></div>\n`;
    }
    const language = (lang || '').trim().split(/\s+/)[0];
    const cls = language ? ` class="hljs language-${escapeHtml(language)}"` : ' class="hljs"';
    const body = escaped ? text : escapeHtml(text);
    return `<div class="md-code"><button class="copy-btn" type="button" data-copy title="Copy">Copy</button><pre><code${cls}>${body}</code></pre></div>\n`;
  },
  link({ href, title, tokens }) {
    const text = this.parser.parseInline(tokens);
    let out = href;
    let extra = '';
    if (isRelativeHref(href)) {
      const r = resolveRelative(href, fileDir);
      if (r) {
        const isDir = fileSet ? fileSet.dirs.has(r.target) : false;
        const isFile = fileSet ? fileSet.files.has(r.target) : true;
        if (isFile || isDir) out = `/files/${encodePath(r.target)}${r.hash}`;
        else extra = ' class="broken-link" title="Target not found in repository"';
      }
    } else if (/^https?:/i.test(href)) {
      extra = ' target="_blank" rel="noopener noreferrer"';
    }
    const t = title ? ` title="${escapeHtml(title)}"` : '';
    return `<a href="${escapeHtml(out)}"${t}${extra}>${text}</a>`;
  },
  image({ href, title, text }) {
    let out = href;
    if (isRelativeHref(href)) {
      const r = resolveRelative(href, fileDir);
      if (r) out = `/raw/${encodePath(r.target)}`;
    }
    const t = title ? ` title="${escapeHtml(title)}"` : '';
    return `<img src="${escapeHtml(out)}" alt="${escapeHtml(text || '')}"${t} loading="lazy">`;
  },
  table(token) {
    // Wrap tables so wide ontology registers scroll instead of overflowing.
    const header = token.header.map((c) => this.tablecell(c)).join('');
    const rows = token.rows.map((r) => `<tr>${r.map((c) => this.tablecell(c)).join('')}</tr>`).join('');
    return `<div class="table-wrap"><table><thead><tr>${header}</tr></thead><tbody>${rows}</tbody></table></div>\n`;
  },
};
marked.use({ renderer, gfm: true, breaks: false });
return marked;
209}
210
211/** Extract YAML front matter if present. */
212function splitFrontMatter(text) {
const m = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/.exec(text);
if (!m) return { frontMatter: null, body: text };
return { frontMatter: m[1], body: text.slice(m[0].length) };
216}
217
218/** Collect h1–h3 headings (id + text) for the table of contents. */
219function extractHeadings(html) {
const out = [];
const re = /<h([1-3])\s+id="([^"]+)"[^>]*>([\s\S]*?)<\/h\1>/g;
let m;
while ((m = re.exec(html))) {
  const text = m[3].replace(/<[^>]+>/g, '').trim();
  out.push({ level: Number(m[1]), id: m[2], text });
}
return out;
228}
229
230function renderMarkdown(text, relPath, fileSet) {
const fileDir = path.posix.dirname(relPath);
const { frontMatter, body } = splitFrontMatter(text);
const marked = createMarkdown({ fileDir: fileDir === '.' ? '' : fileDir, fileSet });
const html = marked.parse(body);
const headings = extractHeadings(html);
const mermaidCount = (html.match(/<pre class="mermaid"/g) || []).length;
let fm = '';
if (frontMatter) {
  fm = `<details class="front-matter" open><summary>Front matter</summary><pre class="hljs"><code>${highlightCode(frontMatter, 'yaml').html}</code></pre></details>`;
}
return { html: fm + html, headings, mermaidCount };
242}
243
244module.exports = {
escapeHtml,
encodePath,
formatBytes,
renderCode,
renderJsonl,
renderMarkdown,
highlightCode,
languageFor,
HIGHLIGHT_LIMIT,
TEXT_LIMIT,
255};