Blame for src/versions.js

import { esc, table } from "./ui.js";

export function versionFromHash(hash) {
  const id = hash.split("/")[2];
  return /^(001|002|003|004|005|006)$/.test(id) ? id : "006";
}

function rows(headers, values, className = "") {
  return table(
    headers,
    values.map((row) => `<tr>${row.map((v) => `<td>${esc(v)}</td>`).join("")}</tr>`),
    "synth-table synth-version-table " + (headers.length === 2 ? "synth-facts-table " : "") + className,
  );
}

export function versionDetail(version, history) {
  const detail = history.versions.find((v) => v.id === version.id);
  return `<header class="synth-version-heading"><h2>V${esc(version.id)} · ${esc(version.title)}</h2><span>${esc(version.state)}</span></header>
    <p class="synth-version-delta">${esc(detail.delta)}</p>
    ${detail.groups.map((group) => `<section class="synth-feature-section"><h3>${esc(group.title)}</h3>${rows(group.headers, group.rows)}${(group.notes || []).map((note) => `<p>${esc(note)}</p>`).join("")}</section>`).join("")}
    <details class="synth-version-limits"><summary>使用边界与来源</summary><ul>${detail.limits.map((text) => `<li>${esc(text)}</li>`).join("")}</ul>${detail.references?.length ? `<div class="synth-links">${detail.references.map(([title, url]) => `<a href="${esc(url)}" target="_blank" rel="noopener noreferrer">${esc(title)}</a>`).join("")}</div>` : ""}</details>`;
}

export function versionsView(content, history, selected) {
  const version = content.versions.find((v) => v.id === selected);
  return `<section class="synth-section"><div class="synth-toolbar"><h2>版本对照</h2><div class="synth-links"><a href="downloads/egorender_versions.md" download>Markdown</a><a href="data/egorender-versions.json" download>JSON</a></div></div>
    ${rows(["版本", "改变什么", "RGB", "深度", "覆盖与边界"], history.comparison, "synth-version-overview")}
    <details><summary>数据版本、渲染批次、执行修订</summary>${rows(["层级", "例子", "含义"], history.naming)}</details></section>
    <section class="synth-section"><nav class="synth-version-picker" aria-label="版本">${content.versions.map((v) => `<a href="#synthetic/versions/${esc(v.id)}" data-version="${esc(v.id)}" ${v.id === selected ? 'aria-current="page"' : ""}>V${esc(v.id)}</a>`).join("")}</nav>
    <article id="synth-version-detail" class="synth-version-detail">${versionDetail(version, history)}</article></section>`;
}