From 750b761098ca5986c15368b631a34f1a8d411943 Mon Sep 17 00:00:00 2001 From: LennarX Date: Fri, 17 Jul 2026 22:27:04 +0200 Subject: [PATCH 1/5] feat: render the tool repo's LICENSE as a dynamic site page Fetch LICENSE from the flashtrace clone at build time (next to the docs/ input), render it verbatim in a 
 at /license/, and point
the footer link there instead of github.com. Fails the build loudly
if the file is missing, same as the docs.

Co-Authored-By: Claude Fable 5 
---
 build.mjs       | 22 ++++++++++++++++++++--
 src/layout.mjs  |  2 +-
 src/license.mjs | 21 +++++++++++++++++++++
 3 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/license.mjs

diff --git a/build.mjs b/build.mjs
index af8e426..5fed98a 100644
--- a/build.mjs
+++ b/build.mjs
@@ -10,6 +10,7 @@ import { Marked } from 'marked';
 import { docShell, esc, GITHUB_URL, highlightTokens, SITE_URL } from './src/layout.mjs';
 import { renderLanding } from './src/landing.mjs';
 import { renderImpressum } from './src/impressum.mjs';
+import { renderLicense } from './src/license.mjs';
 
 const root = path.dirname(fileURLToPath(import.meta.url));
 const dist = path.join(root, 'dist');
@@ -32,6 +33,15 @@ function locateDocs() {
 
 const docsDir = locateDocs();
 
+// --- license: raw text from the tool repo root, next to docs/ ---------------
+
+const licensePath = path.join(docsDir, '..', 'LICENSE');
+if (!existsSync(licensePath)) {
+  console.error(`error: LICENSE not found at ${licensePath}`);
+  process.exit(1);
+}
+const licenseText = readFileSync(licensePath, 'utf8');
+
 // --- version: release tag from env, else the tool repo's package.json ------
 
 function readVersion() {
@@ -174,13 +184,21 @@ writeFileSync(path.join(dist, 'index.html'), renderLanding({ version, gitRef }))
 mkdirSync(path.join(dist, 'impressum'), { recursive: true });
 writeFileSync(path.join(dist, 'impressum', 'index.html'), renderImpressum({ version }));
 
+mkdirSync(path.join(dist, 'license'), { recursive: true });
+writeFileSync(path.join(dist, 'license', 'index.html'), renderLicense({ version, text: licenseText }));
+
 for (const page of pages) {
   const dir = page.slug ? path.join(dist, 'docs', page.slug) : path.join(dist, 'docs');
   mkdirSync(dir, { recursive: true });
   writeFileSync(path.join(dir, 'index.html'), renderDoc(page));
 }
 
-const sitePaths = ['/', ...pages.map((p) => (p.slug ? `/docs/${p.slug}/` : '/docs/')), '/impressum/'];
+const sitePaths = [
+  '/',
+  ...pages.map((p) => (p.slug ? `/docs/${p.slug}/` : '/docs/')),
+  '/license/',
+  '/impressum/',
+];
 writeFileSync(
   path.join(dist, 'sitemap.xml'),
   `
@@ -194,4 +212,4 @@ cpSync(path.join(root, 'public'), dist, { recursive: true });
 cpSync(path.join(root, 'src', 'styles', 'site.css'), path.join(dist, 'site.css'));
 cpSync(path.join(root, 'src', 'scripts', 'site.js'), path.join(dist, 'site.js'));
 
-console.log(`built ${pages.length + 2} pages into dist/ (flashtrace ${version || 'unknown version'})`);
+console.log(`built ${pages.length + 3} pages into dist/ (flashtrace ${version || 'unknown version'})`);
diff --git a/src/layout.mjs b/src/layout.mjs
index b97e930..b4937ce 100644
--- a/src/layout.mjs
+++ b/src/layout.mjs
@@ -75,7 +75,7 @@ function footer({ version }) {
       Docs
       GitHub
       Discussions
-      License
+      License
       Legal Notice
     
     
Docs built from flashtrace ${esc(version)}.

diff --git a/src/license.mjs b/src/license.mjs
new file mode 100644
index 0000000..87b3791
--- /dev/null
+++ b/src/license.mjs
@@ -0,0 +1,21 @@
+// License page - renders the tool repo's LICENSE (plain text, pre-formatted
+// with spaces for centering) verbatim inside the site shell.
+import { esc, pageShell } from './layout.mjs';
+
+export function renderLicense({ version, text }) {
+  const body = `

+

+
License

+
${esc(text)}

+

+
`;
+  return pageShell({
+    title: 'License ยท flashtrace',
+    description: 'The Apache License, Version 2.0 that flashtrace is distributed under.',
+    path: '/license/',
+    version,
+    active: '',
+    body,
+    bodyClass: 'page-legal',
+  });
+}

From b1e1e87a8b80827cdb30c267c018d5850a8cb54e Mon Sep 17 00:00:00 2001
From: LennarX 
Date: Fri, 17 Jul 2026 22:49:47 +0200
Subject: [PATCH 2/5] feat: center and shrink-wrap the license text block

The 46rem doc column hugged the left of the 80rem section and the

 stretched wider than its 77-column text, so the license looked
off-center. Center the legal content column, widen the license page
to 52rem, center its heading, and shrink-wrap the 
 to its text
so the raw file's space-centered header reads as intended.

Co-Authored-By: Claude Fable 5 
---
 src/license.mjs     |  2 +-
 src/styles/site.css | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/license.mjs b/src/license.mjs
index 87b3791..e71323a 100644
--- a/src/license.mjs
+++ b/src/license.mjs
@@ -4,7 +4,7 @@ import { esc, pageShell } from './layout.mjs';
 
 export function renderLicense({ version, text }) {
   const body = `

-

+

 
License

 
${esc(text)}

 

diff --git a/src/styles/site.css b/src/styles/site.css
index dfc08cf..fc4afe1 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -993,12 +993,34 @@ h3:hover .heading-anchor,
   padding-bottom: 3.5rem;
 }
 
+.page-legal .doc-content {
+  margin-inline: auto;
+}
+
 .legal address {
   font-style: normal;
   line-height: 1.7;
   color: var(--text);
 }
 
+/* license: the tool repo's raw LICENSE text. Shrink-wrap the block and center
+   it so the text's own space-centered header reads as intended. */
+.license-doc {
+  max-width: 52rem;
+}
+
+.license-doc h1 {
+  text-align: center;
+}
+
+.license-doc pre {
+  width: fit-content;
+  max-width: 100%;
+  margin: 1.75rem auto 0;
+  padding: 2rem 2.5rem;
+  font-size: 0.9rem;
+}
+
 /* ---------- responsive ---------- */
 
 @media (max-width: 1100px) {

From d029bb94e1cae5c41fb81bd1b2b58a716f25172f Mon Sep 17 00:00:00 2001
From: LennarX 
Date: Fri, 17 Jul 2026 23:17:59 +0200
Subject: [PATCH 3/5] feat: add GitHub-style license summary panel

Show the familiar permissions/limitations/conditions overview (as on
github.com and choosealicense.com) above the raw license text, with a
short description and a not-legal-advice note. The panel only renders
when the fetched LICENSE is recognized as Apache 2.0, so a future
license change falls back to the raw text instead of a wrong summary.
Adds --ok/--no/--info color tokens to both themes.

Co-Authored-By: Claude Fable 5 
---
 src/license.mjs     |  37 +++++++++++++++-
 src/styles/site.css | 105 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 141 insertions(+), 1 deletion(-)

diff --git a/src/license.mjs b/src/license.mjs
index e71323a..791bae9 100644
--- a/src/license.mjs
+++ b/src/license.mjs
@@ -1,11 +1,46 @@
 // License page - renders the tool repo's LICENSE (plain text, pre-formatted
-// with spaces for centering) verbatim inside the site shell.
+// with spaces for centering) verbatim inside the site shell. When the text is
+// recognized as Apache 2.0, a GitHub-style summary panel is shown above it;
+// an unrecognized license falls back to the raw text alone rather than
+// risking a wrong summary.
 import { esc, pageShell } from './layout.mjs';
 
+// Octicons (MIT): law, check, x, info.
+const lawIcon = ``;
+const checkIcon = ``;
+const xIcon = ``;
+const infoIcon = ``;
+
+// Summary as shown by GitHub's license banner (sourced from choosealicense.com).
+function apacheSummaryPanel() {
+  const col = (label, cls, icon, items) => `

+
${label}

+
    ${items.map((it) => `
  • ${icon}${esc(it)}
    • `).join('\n')}

+
`;
+  return `

+

+${lawIcon}
+

+
flashtrace is licensed under the

+
Apache License 2.0

+

+

+
A permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

+

+${col('Permissions', 'lic-ok', checkIcon, ['Commercial use', 'Modification', 'Distribution', 'Patent use', 'Private use'])}
+${col('Limitations', 'lic-no', xIcon, ['Trademark use', 'Liability', 'Warranty'])}
+${col('Conditions', 'lic-info', infoIcon, ['License and copyright notice', 'State changes'])}
+

+
This is not legal advice. Learn more about the Apache License 2.0.

+
`;
+}
+
 export function renderLicense({ version, text }) {
+  const isApache2 = text.includes('Apache License') && text.includes('Version 2.0');
   const body = `

 

 
License

+${isApache2 ? apacheSummaryPanel() : ''}
 
${esc(text)}

 

 
`;
diff --git a/src/styles/site.css b/src/styles/site.css
index fc4afe1..6453920 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -18,6 +18,9 @@
   --tk-id: #b45309;
   --tk-kw: #92400e;
   --tk-arrow: #0e7490;
+  --ok: #15803d;
+  --no: #b91c1c;
+  --info: #0e7490;
   --shadow: 0 1px 3px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.06);
   --topbar-h: 3.5rem;
   color-scheme: light;
@@ -39,6 +42,9 @@
   --tk-id: #f9c21d;
   --tk-kw: #e8964a;
   --tk-arrow: #56b6c2;
+  --ok: #3fb950;
+  --no: #f85149;
+  --info: #56b6c2;
   --shadow: 0 1px 3px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.35);
   color-scheme: dark;
 }
@@ -61,6 +67,9 @@
     --tk-id: #f9c21d;
     --tk-kw: #e8964a;
     --tk-arrow: #56b6c2;
+    --ok: #3fb950;
+    --no: #f85149;
+    --info: #56b6c2;
     color-scheme: dark;
   }
 }
@@ -1021,6 +1030,102 @@ h3:hover .heading-anchor,
   font-size: 0.9rem;
 }
 
+/* GitHub-style summary panel above the raw license text */
+.license-summary {
+  margin-top: 1.75rem;
+  padding: 1.5rem 1.75rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-raised);
+  box-shadow: var(--shadow);
+}
+
+.license-summary-head {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  color: var(--muted);
+}
+
+.license-summary-kicker {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.license-summary-name {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 650;
+  line-height: 1.3;
+  color: var(--text);
+}
+
+.license-summary-desc {
+  margin: 1rem 0 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.license-summary-cols {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.license-col-label {
+  margin: 0 0 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.license-col ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.license-col li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.15rem 0;
+  font-size: 0.85rem;
+}
+
+.license-col li svg {
+  flex-shrink: 0;
+}
+
+.lic-ok svg {
+  color: var(--ok);
+}
+
+.lic-no svg {
+  color: var(--no);
+}
+
+.lic-info svg {
+  color: var(--info);
+}
+
+.license-summary-note {
+  margin: 1.5rem 0 0;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+@media (max-width: 640px) {
+  .license-summary-cols {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* ---------- responsive ---------- */
 
 @media (max-width: 1100px) {

From 57264743437f171cd55ce7e8b6bece11c204c45c Mon Sep 17 00:00:00 2001
From: LennarX 
Date: Fri, 17 Jul 2026 23:37:45 +0200
Subject: [PATCH 4/5] feat: separate license summary from full text with
 labeled divider

A labeled rule (Full license text) between the summary panel and the
raw 
 block makes the two sections read as distinct.

Co-Authored-By: Claude Fable 5 
---
 src/license.mjs     |  2 +-
 src/styles/site.css | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/license.mjs b/src/license.mjs
index 791bae9..25a6c86 100644
--- a/src/license.mjs
+++ b/src/license.mjs
@@ -40,7 +40,7 @@ export function renderLicense({ version, text }) {
   const body = `

 

 
License

-${isApache2 ? apacheSummaryPanel() : ''}
+${isApache2 ? `${apacheSummaryPanel()}\n` : ''}
 
${esc(text)}

 

 
`;
diff --git a/src/styles/site.css b/src/styles/site.css
index 6453920..c42c66c 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -1120,6 +1120,26 @@ h3:hover .heading-anchor,
   color: var(--muted);
 }
 
+/* labeled divider between the summary panel and the raw text */
+.license-divider {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 3rem 0 0;
+  color: var(--muted);
+  font-size: 0.75rem;
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.license-divider::before,
+.license-divider::after {
+  content: '';
+  flex: 1;
+  border-top: 1px solid var(--border);
+}
+
 @media (max-width: 640px) {
   .license-summary-cols {
     grid-template-columns: 1fr;

From 2acf78c3c269900b5d2ecc73da47d1f490a80d49 Mon Sep 17 00:00:00 2001
From: LennarX 
Date: Sat, 18 Jul 2026 00:06:39 +0200
Subject: [PATCH 5/5] fix: detect Apache 2.0 from the license header, not the
 whole text

Match the first two non-blank lines (Apache License / Version 2.0)
instead of substring-scanning the full text, so a future license that
merely mentions Apache 2.0 in its body cannot trigger the summary.

Co-Authored-By: Claude Fable 5 
---
 src/license.mjs | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/license.mjs b/src/license.mjs
index 25a6c86..6fd569f 100644
--- a/src/license.mjs
+++ b/src/license.mjs
@@ -35,12 +35,22 @@ ${col('Conditions', 'lic-info', infoIcon, ['License and copyright notice', 'Stat
 `;
 }
 
+// Apache 2.0 starts with "Apache License" / "Version 2.0, January 2004" as
+// its first two non-blank lines. Checking only the header (not the whole
+// text) avoids a false match on a future license that merely mentions it.
+function isApache2(text) {
+  const [l1 = '', l2 = ''] = text
+    .split(/\r?\n/, 20)
+    .map((l) => l.trim())
+    .filter(Boolean);
+  return l1 === 'Apache License' && l2.startsWith('Version 2.0');
+}
+
 export function renderLicense({ version, text }) {
-  const isApache2 = text.includes('Apache License') && text.includes('Version 2.0');
   const body = `

 

 
License

-${isApache2 ? `${apacheSummaryPanel()}\n` : ''}
+${isApache2(text) ? `${apacheSummaryPanel()}\n` : ''}
 
${esc(text)}

 

 
`;