From 06c84ea37b84b6f923f7e4262b1e73e45db4f5a3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 10 Mar 2026 20:48:35 +0000
Subject: [PATCH 1/3] feat(site): enhance HTML with semantic elements and ARIA
 accessibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses issue #28 by improving the semantic markup and accessibility of
the single-page app while maintaining zero behavioral or visual changes.

Semantic HTML5 improvements:
- Topbar `<div>` converted to `<nav aria-label="External links">`
- Hero `<div>` converted to `<section>`
- Results list area `<main>` (nested incorrectly) converted to `<section>`
- All view pages wrapped in a top-level `<main id="main-content">`
- Breadcrumb `<div>` converted to `<nav aria-label="Breadcrumb">`
- Heading hierarchy added: `<h1>` for hero title and package name,
  `<h2>` for sidebar filter groups and aside card titles
- CSS heading reset added so `h1`–`h6` inherit font size/weight from
  their parent class styles

ARIA accessibility improvements:
- `aria-label` added to both search inputs, navbar, sort selects,
  manifest button, modal close button, and copy-snippet button
- Tab bar: `role="tablist"`, `role="tab"`, `aria-selected`, and
  `aria-controls` on buttons; `role="tabpanel"` + `aria-labelledby`
  on panels; `switchTab()` JS updated to sync `aria-selected`
- Snippet card header: `role="button"`, `tabindex="0"`,
  `aria-expanded`, and keyboard handler added; `toggleSnip()` and
  `renderDetail()` updated to keep `aria-expanded` in sync
- Modal: `role="dialog"`, `aria-modal="true"`, `aria-labelledby`
- Results count: `aria-live="polite"` and `aria-atomic="true"`
- Toast notification: `role="status"` and `aria-live="polite"`
- Decorative chevron spans marked `aria-hidden="true"`
- Filter aside given `aria-label="Filter by"`
- `aria-label` added to main navbar and package information tabs

https://claude.ai/code/session_01LmU2X5jmgRZ1LHXc9S7bW1
---
 dfetch_hub/site/index.html | 88 ++++++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 36 deletions(-)
diff --git a/dfetch_hub/site/index.html b/dfetch_hub/site/index.html
index a4c6f6a..498c5c6 100644
--- a/dfetch_hub/site/index.html
+++ b/dfetch_hub/site/index.html
@@ -379,6 +379,7 @@
     .toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--nav);color:#fff;padding:.55rem .95rem;border-radius:var(--r);font-size:.875rem;border-left:3px solid var(--accent);box-shadow:0 3px 14px rgba(0,0,0,.18);z-index:9999;transform:translateY(6px);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
     .toast.show{opacity:1;transform:translateY(0)}
 
+    h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0;padding:0}
     @media(max-width:900px){.pkg-body{grid-template-columns:1fr}.res-side{display:none}}
     @media(max-width:600px){.nsearch{display:none}.hero{padding:2rem 1rem}.res-body{padding:1rem}.topbar{display:none}}
   </style>
@@ -386,7 +387,7 @@
 <body>
 
 <header class="site-hdr">
-<div class="topbar">
+<nav class="topbar" aria-label="External links">
   <a class="topbar-link" href="https://github.com/dfetch-org/dfetch-hub" target="_blank" rel="noopener">
     <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
     Repository
@@ -399,8 +400,8 @@
     <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg>
     dfetch
   </a>
-</div>
-<nav class="navbar">
+</nav>
+<nav class="navbar" aria-label="Main navigation">
   <a class="brand" href="#" onclick="showHome();return false">
     <img class="brand-logo" src="dfetch_logo_only.png" alt="dfetch dog logo" width="1189" height="1196" />
     <span>DFetch:hub</span>
@@ -408,32 +409,36 @@
   <div class="nsearch" id="nsearch">
     <span class="nsearch-ico">⌕</span>
     <input id="nInput" type="search" placeholder="Search components…" autocomplete="off"
+      aria-label="Search packages"
       oninput="onNInput(this.value)" onkeydown="onNKey(event)"
       onfocus="openAC()" onblur="setTimeout(closeAC,180)" />
     <span class="nsearch-kbd">/</span>
     <div class="acdrop" id="acdrop"></div>
   </div>
   <div class="nav-actions">
-    <button class="btn-mf" onclick="openModal()">⊕ Manifest <span class="mf-cnt" id="mfcnt">0</span></button>
+    <button class="btn-mf" onclick="openModal()" aria-label="Open manifest builder">⊕ Manifest <span class="mf-cnt" id="mfcnt" aria-hidden="true">0</span></button>
   </div>
 </nav>
 </header>
 
+<main id="main-content">
+
 <!-- HOME -->
 <div class="view active" id="page-home">
-  <div class="hero">
+  <section class="hero">
     <div class="hero-inner">
       <div class="hero-dogrow">
         <img class="hero-dog" src="dfetch_logo_only.png" alt="dfetch — the fetching dog" width="1189" height="1196" />
         <div class="hero-textblock">
-          <div class="hero-title">DFetch:hub</div>
+          <h1 class="hero-title">DFetch:hub</h1>
           <p class="hero-sub">Search &amp; compose <code style="color:var(--accent);background:rgba(0,0,0,.3);padding:.1em .4em;border-radius:3px;font-family:var(--mono)">dfetch.yaml</code> manifests</p>
         </div>
       </div>
       <div class="hero-search">
         <span class="hero-search-ico">⌕</span>
         <input id="hInput" type="search" placeholder="Search packages, e.g. mbedtls, zlib, openssl…"
-          autocomplete="off" oninput="onHInput(this.value)" onkeydown="onHKey(event)"
+          autocomplete="off" aria-label="Search packages"
+          oninput="onHInput(this.value)" onkeydown="onHKey(event)"
           onfocus="openHAC()" onblur="setTimeout(closeHAC,180)" />
         <div class="acdrop" id="hacdrop"></div>
       </div>
@@ -443,7 +448,7 @@
         <div class="hstat"><strong id="sLbl">0</strong> labels</div>
       </div>
     </div>
-  </div>
+  </section>
   <div class="hero-bottom-text">
     <p>Start typing to explore packages. The manifest you create can be used with <a href="https://dfetch.rtfd.io" target="_blank" rel="noopener">dfetch</a>.</p>
   </div>
@@ -452,15 +457,15 @@
 <!-- RESULTS -->
 <div class="view" id="page-results">
   <div class="res-header">
-    <span class="res-count" id="rcount">Showing <strong>0</strong> packages</span>
+    <span class="res-count" id="rcount" aria-live="polite" aria-atomic="true">Showing <strong>0</strong> packages</span>
     <div class="fchips" id="fchips"></div>
-    <select class="sort-sel" id="pageSzSel" onchange="onPageSizeChange(this.value)">
+    <select class="sort-sel" id="pageSzSel" aria-label="Results per page" onchange="onPageSizeChange(this.value)">
       <option value="25">25 / page</option>
       <option value="50" selected>50 / page</option>
       <option value="100">100 / page</option>
       <option value="200">200 / page</option>
     </select>
-    <select class="sort-sel" id="sortSel" onchange="applySort()">
+    <select class="sort-sel" id="sortSel" aria-label="Sort order" onchange="applySort()">
       <option value="relevance">Relevance</option>
       <option value="stars">Most stars</option>
       <option value="updated">Recently updated</option>
@@ -468,16 +473,19 @@
     </select>
   </div>
   <div class="res-body">
-    <aside class="res-side">
-      <div class="sg"><div class="sg-title">Registry</div><div id="sideLabels"></div></div>
-      <div class="sg"><div class="sg-title">VCS Type</div><div id="sideSrcs"></div></div>
-      <div class="sg"><div class="sg-title">License</div><div id="sideLics"></div></div>
+    <aside class="res-side" aria-label="Filter by">
+      <div class="sg"><h2 class="sg-title">Registry</h2>
+<div id="sideLabels"></div></div>
+      <div class="sg"><h2 class="sg-title">VCS Type</h2>
+<div id="sideSrcs"></div></div>
+      <div class="sg"><h2 class="sg-title">License</h2>
+<div id="sideLics"></div></div>
     </aside>
-    <main class="res-main">
+    <section class="res-main" aria-label="Package results">
       <div id="rlist"></div>
       <div class="no-res" id="noRes" style="display:none"><div class="no-res-ico">🔍</div><p><strong>No packages found</strong></p><p style="font-size:.86rem">Try different keywords or clear filters.</p></div>
       <div class="pagination" id="pagination"></div>
-    </main>
+    </section>
   </div>
 </div>
 
@@ -485,10 +493,10 @@
 <div class="view" id="page-detail">
   <div class="pkg-hdr">
     <div class="pkg-hdr-inner">
-      <div class="pkg-bc"><a href="#" onclick="showResults();return false">← Back to results</a></div>
+      <nav class="pkg-bc" aria-label="Breadcrumb"><a href="#" onclick="showResults();return false">← Back to results</a></nav>
       <div class="pkg-trow">
         <div>
-          <span class="pkg-ttitle" id="dName"></span>
+          <h1 class="pkg-ttitle" id="dName"></h1>
           <span class="pkg-tver" id="dVer"></span>
         </div>
         <div class="pkg-tbadges" id="dBadges"></div>
@@ -498,17 +506,17 @@
     </div>
   </div>
   <div class="tabs-bar">
-    <div class="tabs-inner">
-      <button class="tabbtn active" onclick="switchTab('readme')">README</button>
-      <button class="tabbtn" onclick="switchTab('versions')">Versions</button>
+    <div class="tabs-inner" role="tablist" aria-label="Package information">
+      <button class="tabbtn active" role="tab" id="tab-btn-readme" aria-selected="true" aria-controls="tab-readme" onclick="switchTab('readme')">README</button>
+      <button class="tabbtn" role="tab" id="tab-btn-versions" aria-selected="false" aria-controls="tab-versions" onclick="switchTab('versions')">Versions</button>
     </div>
   </div>
   <div class="pkg-body">
     <div class="pkg-cnt">
-      <div class="tabcontent active" id="tab-readme">
+      <div class="tabcontent active" id="tab-readme" role="tabpanel" aria-labelledby="tab-btn-readme">
         <div class="readme-wrap" id="readmeBody"></div>
       </div>
-      <div class="tabcontent" id="tab-versions">
+      <div class="tabcontent" id="tab-versions" role="tabpanel" aria-labelledby="tab-btn-versions">
         <table class="vtable"><thead><tr><th>Ref</th><th>Type</th><th>SHA</th><th>Date</th></tr></thead>
         <tbody id="vtbody"></tbody></table>
       </div>
@@ -523,31 +531,35 @@
         </div>
       </div>
       <div class="snip-card" id="snipCard">
-        <div class="snip-card-hdr" onclick="toggleSnip()">
+        <div class="snip-card-hdr" role="button" tabindex="0" aria-expanded="false" aria-controls="snipPanel"
+          onclick="toggleSnip()" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSnip()}">
           <span class="snip-card-ico">{ }</span>
           <span class="snip-card-title">dfetch.yaml snippet</span>
-          <button class="snip-hdr-copy" onclick="event.stopPropagation();copySnip()" title="Copy snippet">
+          <button class="snip-hdr-copy" onclick="event.stopPropagation();copySnip()" aria-label="Copy snippet">
             <svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="4" width="9" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 11.5H2.5A1.5 1.5 0 0 1 1 10V3A1.5 1.5 0 0 1 2.5 1.5h7A1.5 1.5 0 0 1 11 3v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
           </button>
-          <span class="snip-chevron">▾</span>
+          <span class="snip-chevron" aria-hidden="true">▾</span>
         </div>
         <div class="snip-panel" id="snipPanel" style="display:none">
           <div class="snip-code" id="dSnip"></div>
         </div>
       </div>
-      <div class="aside-card"><div class="aside-t">Links</div><div id="aLinks"></div></div>
-      <div class="aside-card"><div class="aside-t">Details</div><div id="aDets"></div></div>
-      <div class="aside-card"><div class="aside-t">Found in</div><div class="aside-sources" id="aSrcs"></div></div>
+      <div class="aside-card"><h2 class="aside-t">Links</h2>
+<div id="aLinks"></div></div>
+      <div class="aside-card"><h2 class="aside-t">Details</h2>
+<div id="aDets"></div></div>
+      <div class="aside-card"><h2 class="aside-t">Found in</h2>
+<div class="aside-sources" id="aSrcs"></div></div>
     </aside>
   </div>
 </div>
 
 <!-- MANIFEST MODAL -->
-<div class="modal-ov" id="mfModal" onclick="if(event.target===this)closeModal()">
+<div class="modal-ov" id="mfModal" role="dialog" aria-modal="true" aria-labelledby="mfModalTitle" onclick="if(event.target===this)closeModal()">
   <div class="modal">
     <div class="modal-hdr">
-      <div class="modal-title">dfetch.yaml manifest builder</div>
-      <button class="modal-close" onclick="closeModal()">✕</button>
+      <div class="modal-title" id="mfModalTitle">dfetch.yaml manifest builder</div>
+      <button class="modal-close" onclick="closeModal()" aria-label="Close manifest builder">✕</button>
     </div>
     <div class="modal-body">
       <div class="mf-empty" id="mfEmpty"><p>No components selected yet.</p><p style="font-size:.84rem;margin-top:.3rem">Browse and click <strong>Add to manifest</strong>.</p></div>
@@ -562,7 +574,9 @@
   </div>
 </div>
 
-<div class="toast" id="toast"></div>
+</main>
+
+<div class="toast" id="toast" role="status" aria-live="polite"></div>
 <script>
 'use strict';
 let RAW = {};       // catalog data
@@ -887,7 +901,7 @@
   // Reset snippet panel to collapsed
   const snipPanel=document.getElementById('snipPanel');const snipCard=document.getElementById('snipCard');
   if(snipPanel)snipPanel.style.display='none';
-  if(snipCard)snipCard.classList.remove('open');
+  if(snipCard){snipCard.classList.remove('open');const snipHdr=snipCard.querySelector('.snip-card-hdr');if(snipHdr)snipHdr.setAttribute('aria-expanded','false');}
   updAddBtn();updSelVerInfo();switchTab('readme');
 }
 function selectVersion(i){
@@ -957,7 +971,7 @@
   while(sib&&sib.classList.contains('vtree-item')){sib.style.display=open?'none':'';sib=sib.nextElementSibling;}
 }
 function switchTab(name){
-  document.querySelectorAll('.tabbtn').forEach((b,i)=>{const ns=['readme','versions'];b.classList.toggle('active',ns[i]===name)});
+  document.querySelectorAll('.tabbtn').forEach((b,i)=>{const ns=['readme','versions'];const on=ns[i]===name;b.classList.toggle('active',on);b.setAttribute('aria-selected',String(on))});
   document.querySelectorAll('.tabcontent').forEach(el=>el.classList.remove('active'));
   document.getElementById('tab-'+name).classList.add('active');
 }
@@ -967,6 +981,8 @@
   const open=panel.style.display!=='none';
   panel.style.display=open?'none':'';
   card.classList.toggle('open',!open);
+  const hdr=card.querySelector('.snip-card-hdr');
+  if(hdr)hdr.setAttribute('aria-expanded',String(!open));
 }
 
 function toggleMf(){

From 6db290e55b6646e81bd8ac92c32bdad291e8a203 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 10 Mar 2026 21:10:46 +0000
Subject: [PATCH 2/3] feat(ci): add strict HTML, CSS, and JS pre-commit
 checkers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three new pre-commit hooks (all PyPI-installable, language: python):

djlint-check — HTML formatter consistency
  Runs djlint --check so any future hand-edits that deviate from djlint's
  canonical HTML formatting are caught before commit.
  Configuration additions in pyproject.toml:
    profile = "html"   — enables the full HTML5 rule set
    indent = 2         — enforces 2-space indentation
    max_line_length = 120 — matches the Python project limit
    format_js = false  — prevents djlint from mangling JS regex tokens
    format_css = false — CSS is intentionally minified; keep it verbatim

check-embedded-css (scripts/check_css.py + tinycss2==1.5.1)
  Extracts every <style> block from HTML files and parses each with
  tinycss2.  Reports parse errors at the tokeniser level (malformed tokens,
  unexpected characters) and declaration-level errors (missing ':' separator,
  empty value lists).  Accepts modern CSS (custom properties, var(), clamp(),
  vendor prefixes) without false positives.

check-embedded-js (scripts/check_js.py + py-mini-racer==0.6.0)
  Extracts every inline <script> block (skipping src= external scripts) and
  passes each through V8's Function constructor via py-mini-racer.  This
  catches all ES2020+ syntax errors (including optional chaining, async/await,
  nullish coalescing) without executing the code.

Supporting changes:
  • esc() refactored from 5 sequential .replace() calls to a single-pass
    lookup-table approach (avoids djlint misreading the bare />/g regex token;
    also slightly faster at runtime).
  • index.html reformatted by djlint --reformat (HTML structure only; CSS/JS
    content preserved verbatim).
  • tinycss2==1.5.1 and py-mini-racer==0.6.0 added to [project.optional-
    dependencies].development in pyproject.toml.

https://claude.ai/code/session_01LmU2X5jmgRZ1LHXc9S7bW1
---
 .pre-commit-config.yaml    |  17 ++
 dfetch_hub/site/index.html | 547 ++++++++++++++++++++++---------------
 pyproject.toml             |   9 +-
 scripts/check_css.py       | 181 ++++++++++++
 scripts/check_js.py        | 155 +++++++++++
 5 files changed, 695 insertions(+), 214 deletions(-)
 create mode 100644 scripts/check_css.py
 create mode 100644 scripts/check_js.py

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index e24040a..f993008 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -62,6 +62,23 @@ repos:
       entry: djlint --lint
       language: python
       files: \.(html|jinja|j2)$
+  -   id: djlint-check
+      name: HTML formatter check
+      entry: djlint --check
+      language: python
+      files: \.(html|jinja|j2)$
+  -   id: check-embedded-css
+      name: CSS linter (embedded styles)
+      entry: python scripts/check_css.py
+      language: python
+      files: \.(html|jinja|j2)$
+      additional_dependencies: [tinycss2==1.5.1]
+  -   id: check-embedded-js
+      name: JS syntax checker (embedded scripts)
+      entry: python scripts/check_js.py
+      language: python
+      files: \.(html|jinja|j2)$
+      additional_dependencies: [py-mini-racer==0.6.0]
   -   id: pydocstyle
       name: docstring style
       entry: pydocstyle --convention=google
diff --git a/dfetch_hub/site/index.html b/dfetch_hub/site/index.html
index 498c5c6..5760e41 100644
--- a/dfetch_hub/site/index.html
+++ b/dfetch_hub/site/index.html
@@ -1,25 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="Browse and search packages from popular C/C++ registries (vcpkg, Conan, clib) for use with dfetch." />
-  <title>DFetch:hub</title>
-
-  <!-- Favicon: dfetch dog SVG inline as data URI -->
-  <link rel="icon" type="image/x-icon" href="favicon.ico" />
-
-  <!-- Lato: body font used throughout the dfetch RTD site -->
-  <!-- Nunito: the rounded bold font used in the dfetch logo/header image -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&family=Nunito:wght@700;800;900&family=Roboto+Mono:wght@400;500&family=Poiret+One&display=swap" rel="stylesheet" />
-
-  <!-- Markdown rendering + sanitisation -->
-  <script src="https://cdn.jsdelivr.net/npm/marked@15/marked.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
-  <script>marked.use({gfm:true,breaks:false});</script>
-
-  <style>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description"
+          content="Browse and search packages from popular C/C++ registries (vcpkg, Conan, clib) for use with dfetch." />
+    <title>DFetch:hub</title>
+    <!-- Favicon: dfetch dog SVG inline as data URI -->
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <!-- Lato: body font used throughout the dfetch RTD site -->
+    <!-- Nunito: the rounded bold font used in the dfetch logo/header image -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&family=Nunito:wght@700;800;900&family=Roboto+Mono:wght@400;500&family=Poiret+One&display=swap"
+          rel="stylesheet" />
+    <!-- Markdown rendering + sanitisation -->
+    <script src="https://cdn.jsdelivr.net/npm/marked@15/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
+    <script>marked.use({gfm:true,breaks:false});</script>
+    <style>
     *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
     :root{
       /* dfetch / sphinx-rtd-theme palette */
@@ -382,202 +380,323 @@
     h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0;padding:0}
     @media(max-width:900px){.pkg-body{grid-template-columns:1fr}.res-side{display:none}}
     @media(max-width:600px){.nsearch{display:none}.hero{padding:2rem 1rem}.res-body{padding:1rem}.topbar{display:none}}
-  </style>
-</head>
-<body>
-
-<header class="site-hdr">
-<nav class="topbar" aria-label="External links">
-  <a class="topbar-link" href="https://github.com/dfetch-org/dfetch-hub" target="_blank" rel="noopener">
-    <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
-    Repository
-  </a>
-  <a class="topbar-link" href="https://dfetch.rtfd.io" target="_blank" rel="noopener">
-    <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h11A1.5 1.5 0 0 1 15 2.5v8A1.5 1.5 0 0 1 13.5 12H9.09l.644 1.542A.5.5 0 0 1 9.25 14.5H6.75a.5.5 0 0 1-.484-.958L6.91 12H2.5A1.5 1.5 0 0 1 1 10.5v-8z"/></svg>
-    Documentation
-  </a>
-  <a class="topbar-link" href="https://github.com/dfetch-org/dfetch" target="_blank" rel="noopener">
-    <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg>
-    dfetch
-  </a>
-</nav>
-<nav class="navbar" aria-label="Main navigation">
-  <a class="brand" href="#" onclick="showHome();return false">
-    <img class="brand-logo" src="dfetch_logo_only.png" alt="dfetch dog logo" width="1189" height="1196" />
-    <span>DFetch:hub</span>
-  </a>
-  <div class="nsearch" id="nsearch">
-    <span class="nsearch-ico">⌕</span>
-    <input id="nInput" type="search" placeholder="Search components…" autocomplete="off"
-      aria-label="Search packages"
-      oninput="onNInput(this.value)" onkeydown="onNKey(event)"
-      onfocus="openAC()" onblur="setTimeout(closeAC,180)" />
-    <span class="nsearch-kbd">/</span>
-    <div class="acdrop" id="acdrop"></div>
-  </div>
-  <div class="nav-actions">
-    <button class="btn-mf" onclick="openModal()" aria-label="Open manifest builder">⊕ Manifest <span class="mf-cnt" id="mfcnt" aria-hidden="true">0</span></button>
-  </div>
-</nav>
-</header>
-
-<main id="main-content">
-
-<!-- HOME -->
-<div class="view active" id="page-home">
-  <section class="hero">
-    <div class="hero-inner">
-      <div class="hero-dogrow">
-        <img class="hero-dog" src="dfetch_logo_only.png" alt="dfetch — the fetching dog" width="1189" height="1196" />
-        <div class="hero-textblock">
-          <h1 class="hero-title">DFetch:hub</h1>
-          <p class="hero-sub">Search &amp; compose <code style="color:var(--accent);background:rgba(0,0,0,.3);padding:.1em .4em;border-radius:3px;font-family:var(--mono)">dfetch.yaml</code> manifests</p>
+    </style>
+  </head>
+  <body>
+    <header class="site-hdr">
+      <nav class="topbar" aria-label="External links">
+        <a class="topbar-link"
+           href="https://github.com/dfetch-org/dfetch-hub"
+           target="_blank"
+           rel="noopener">
+          <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+          </svg>
+          Repository
+        </a>
+        <a class="topbar-link"
+           href="https://dfetch.rtfd.io"
+           target="_blank"
+           rel="noopener">
+          <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h11A1.5 1.5 0 0 1 15 2.5v8A1.5 1.5 0 0 1 13.5 12H9.09l.644 1.542A.5.5 0 0 1 9.25 14.5H6.75a.5.5 0 0 1-.484-.958L6.91 12H2.5A1.5 1.5 0 0 1 1 10.5v-8z" />
+          </svg>
+          Documentation
+        </a>
+        <a class="topbar-link"
+           href="https://github.com/dfetch-org/dfetch"
+           target="_blank"
+           rel="noopener">
+          <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
+          </svg>
+          dfetch
+        </a>
+      </nav>
+      <nav class="navbar" aria-label="Main navigation">
+        <a class="brand" href="#" onclick="showHome();return false">
+          <img class="brand-logo"
+               src="dfetch_logo_only.png"
+               alt="dfetch dog logo"
+               width="1189"
+               height="1196" />
+          <span>DFetch:hub</span>
+        </a>
+        <div class="nsearch" id="nsearch">
+          <span class="nsearch-ico">⌕</span>
+          <input id="nInput"
+                 type="search"
+                 placeholder="Search components…"
+                 autocomplete="off"
+                 aria-label="Search packages"
+                 oninput="onNInput(this.value)"
+                 onkeydown="onNKey(event)"
+                 onfocus="openAC()"
+                 onblur="setTimeout(closeAC,180)" />
+          <span class="nsearch-kbd">/</span>
+          <div class="acdrop" id="acdrop"></div>
         </div>
-      </div>
-      <div class="hero-search">
-        <span class="hero-search-ico">⌕</span>
-        <input id="hInput" type="search" placeholder="Search packages, e.g. mbedtls, zlib, openssl…"
-          autocomplete="off" aria-label="Search packages"
-          oninput="onHInput(this.value)" onkeydown="onHKey(event)"
-          onfocus="openHAC()" onblur="setTimeout(closeHAC,180)" />
-        <div class="acdrop" id="hacdrop"></div>
-      </div>
-      <div class="hero-stats">
-        <div class="hstat"><strong id="sCmp">0</strong> components</div>
-        <div class="hstat"><strong id="sReg">0</strong> registries</div>
-        <div class="hstat"><strong id="sLbl">0</strong> labels</div>
-      </div>
-    </div>
-  </section>
-  <div class="hero-bottom-text">
-    <p>Start typing to explore packages. The manifest you create can be used with <a href="https://dfetch.rtfd.io" target="_blank" rel="noopener">dfetch</a>.</p>
-  </div>
-</div>
-
-<!-- RESULTS -->
-<div class="view" id="page-results">
-  <div class="res-header">
-    <span class="res-count" id="rcount" aria-live="polite" aria-atomic="true">Showing <strong>0</strong> packages</span>
-    <div class="fchips" id="fchips"></div>
-    <select class="sort-sel" id="pageSzSel" aria-label="Results per page" onchange="onPageSizeChange(this.value)">
-      <option value="25">25 / page</option>
-      <option value="50" selected>50 / page</option>
-      <option value="100">100 / page</option>
-      <option value="200">200 / page</option>
-    </select>
-    <select class="sort-sel" id="sortSel" aria-label="Sort order" onchange="applySort()">
-      <option value="relevance">Relevance</option>
-      <option value="stars">Most stars</option>
-      <option value="updated">Recently updated</option>
-      <option value="name">Name A-Z</option>
-    </select>
-  </div>
-  <div class="res-body">
-    <aside class="res-side" aria-label="Filter by">
-      <div class="sg"><h2 class="sg-title">Registry</h2>
-<div id="sideLabels"></div></div>
-      <div class="sg"><h2 class="sg-title">VCS Type</h2>
-<div id="sideSrcs"></div></div>
-      <div class="sg"><h2 class="sg-title">License</h2>
-<div id="sideLics"></div></div>
-    </aside>
-    <section class="res-main" aria-label="Package results">
-      <div id="rlist"></div>
-      <div class="no-res" id="noRes" style="display:none"><div class="no-res-ico">🔍</div><p><strong>No packages found</strong></p><p style="font-size:.86rem">Try different keywords or clear filters.</p></div>
-      <div class="pagination" id="pagination"></div>
-    </section>
-  </div>
-</div>
-
-<!-- DETAIL -->
-<div class="view" id="page-detail">
-  <div class="pkg-hdr">
-    <div class="pkg-hdr-inner">
-      <nav class="pkg-bc" aria-label="Breadcrumb"><a href="#" onclick="showResults();return false">← Back to results</a></nav>
-      <div class="pkg-trow">
-        <div>
-          <h1 class="pkg-ttitle" id="dName"></h1>
-          <span class="pkg-tver" id="dVer"></span>
+        <div class="nav-actions">
+          <button class="btn-mf"
+                  onclick="openModal()"
+                  aria-label="Open manifest builder">
+            ⊕ Manifest <span class="mf-cnt" id="mfcnt" aria-hidden="true">0</span>
+          </button>
+        </div>
+      </nav>
+    </header>
+    <main id="main-content">
+      <!-- HOME -->
+      <div class="view active" id="page-home">
+        <section class="hero">
+          <div class="hero-inner">
+            <div class="hero-dogrow">
+              <img class="hero-dog"
+                   src="dfetch_logo_only.png"
+                   alt="dfetch — the fetching dog"
+                   width="1189"
+                   height="1196" />
+              <div class="hero-textblock">
+                <h1 class="hero-title">DFetch:hub</h1>
+                <p class="hero-sub">
+                  Search &amp; compose <code style="color:var(--accent);
+              background:rgba(0,0,0,.3);
+              padding:.1em .4em;
+              border-radius:3px;
+              font-family:var(--mono)">dfetch.yaml</code> manifests
+                </p>
+              </div>
+            </div>
+            <div class="hero-search">
+              <span class="hero-search-ico">⌕</span>
+              <input id="hInput"
+                     type="search"
+                     placeholder="Search packages, e.g. mbedtls, zlib, openssl…"
+                     autocomplete="off"
+                     aria-label="Search packages"
+                     oninput="onHInput(this.value)"
+                     onkeydown="onHKey(event)"
+                     onfocus="openHAC()"
+                     onblur="setTimeout(closeHAC,180)" />
+              <div class="acdrop" id="hacdrop"></div>
+            </div>
+            <div class="hero-stats">
+              <div class="hstat">
+                <strong id="sCmp">0</strong> components
+              </div>
+              <div class="hstat">
+                <strong id="sReg">0</strong> registries
+              </div>
+              <div class="hstat">
+                <strong id="sLbl">0</strong> labels
+              </div>
+            </div>
+          </div>
+        </section>
+        <div class="hero-bottom-text">
+          <p>
+            Start typing to explore packages. The manifest you create can be used with <a href="https://dfetch.rtfd.io" target="_blank" rel="noopener">dfetch</a>.
+          </p>
         </div>
-        <div class="pkg-tbadges" id="dBadges"></div>
-      </div>
-      <div class="pkg-tdesc" id="dDesc"></div>
-      <div class="pkg-tmeta" id="dMeta"></div>
-    </div>
-  </div>
-  <div class="tabs-bar">
-    <div class="tabs-inner" role="tablist" aria-label="Package information">
-      <button class="tabbtn active" role="tab" id="tab-btn-readme" aria-selected="true" aria-controls="tab-readme" onclick="switchTab('readme')">README</button>
-      <button class="tabbtn" role="tab" id="tab-btn-versions" aria-selected="false" aria-controls="tab-versions" onclick="switchTab('versions')">Versions</button>
-    </div>
-  </div>
-  <div class="pkg-body">
-    <div class="pkg-cnt">
-      <div class="tabcontent active" id="tab-readme" role="tabpanel" aria-labelledby="tab-btn-readme">
-        <div class="readme-wrap" id="readmeBody"></div>
-      </div>
-      <div class="tabcontent" id="tab-versions" role="tabpanel" aria-labelledby="tab-btn-versions">
-        <table class="vtable"><thead><tr><th>Ref</th><th>Type</th><th>SHA</th><th>Date</th></tr></thead>
-        <tbody id="vtbody"></tbody></table>
       </div>
-    </div>
-    <aside>
-      <div class="action-card">
-        <button class="btn-add add" id="btnAdd" onclick="toggleMf()">＋ Add to manifest</button>
-        <div id="selVerInfo" class="ver-pill" style="display:none">
-          <span class="ver-pill-lbl">Version</span>
-          <span class="vsn" id="selVerName"></span>
-          <span class="ver-pill-kind" id="selVerKind"></span>
+      <!-- RESULTS -->
+      <div class="view" id="page-results">
+        <div class="res-header">
+          <span class="res-count" id="rcount" aria-live="polite" aria-atomic="true">Showing <strong>0</strong> packages</span>
+          <div class="fchips" id="fchips"></div>
+          <select class="sort-sel"
+                  id="pageSzSel"
+                  aria-label="Results per page"
+                  onchange="onPageSizeChange(this.value)">
+            <option value="25">25 / page</option>
+            <option value="50" selected>50 / page</option>
+            <option value="100">100 / page</option>
+            <option value="200">200 / page</option>
+          </select>
+          <select class="sort-sel"
+                  id="sortSel"
+                  aria-label="Sort order"
+                  onchange="applySort()">
+            <option value="relevance">Relevance</option>
+            <option value="stars">Most stars</option>
+            <option value="updated">Recently updated</option>
+            <option value="name">Name A-Z</option>
+          </select>
+        </div>
+        <div class="res-body">
+          <aside class="res-side" aria-label="Filter by">
+            <div class="sg">
+              <h2 class="sg-title">Registry</h2>
+              <div id="sideLabels"></div>
+            </div>
+            <div class="sg">
+              <h2 class="sg-title">VCS Type</h2>
+              <div id="sideSrcs"></div>
+            </div>
+            <div class="sg">
+              <h2 class="sg-title">License</h2>
+              <div id="sideLics"></div>
+            </div>
+          </aside>
+          <section class="res-main" aria-label="Package results">
+            <div id="rlist"></div>
+            <div class="no-res" id="noRes" style="display:none">
+              <div class="no-res-ico">🔍</div>
+              <p>
+                <strong>No packages found</strong>
+              </p>
+              <p style="font-size:.86rem">Try different keywords or clear filters.</p>
+            </div>
+            <div class="pagination" id="pagination"></div>
+          </section>
         </div>
       </div>
-      <div class="snip-card" id="snipCard">
-        <div class="snip-card-hdr" role="button" tabindex="0" aria-expanded="false" aria-controls="snipPanel"
-          onclick="toggleSnip()" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSnip()}">
-          <span class="snip-card-ico">{ }</span>
-          <span class="snip-card-title">dfetch.yaml snippet</span>
-          <button class="snip-hdr-copy" onclick="event.stopPropagation();copySnip()" aria-label="Copy snippet">
-            <svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="4" width="9" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 11.5H2.5A1.5 1.5 0 0 1 1 10V3A1.5 1.5 0 0 1 2.5 1.5h7A1.5 1.5 0 0 1 11 3v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-          </button>
-          <span class="snip-chevron" aria-hidden="true">▾</span>
+      <!-- DETAIL -->
+      <div class="view" id="page-detail">
+        <div class="pkg-hdr">
+          <div class="pkg-hdr-inner">
+            <nav class="pkg-bc" aria-label="Breadcrumb">
+              <a href="#" onclick="showResults();return false">← Back to results</a>
+            </nav>
+            <div class="pkg-trow">
+              <div>
+                <h1 class="pkg-ttitle" id="dName"></h1>
+                <span class="pkg-tver" id="dVer"></span>
+              </div>
+              <div class="pkg-tbadges" id="dBadges"></div>
+            </div>
+            <div class="pkg-tdesc" id="dDesc"></div>
+            <div class="pkg-tmeta" id="dMeta"></div>
+          </div>
+        </div>
+        <div class="tabs-bar">
+          <div class="tabs-inner" role="tablist" aria-label="Package information">
+            <button class="tabbtn active"
+                    role="tab"
+                    id="tab-btn-readme"
+                    aria-selected="true"
+                    aria-controls="tab-readme"
+                    onclick="switchTab('readme')">README</button>
+            <button class="tabbtn"
+                    role="tab"
+                    id="tab-btn-versions"
+                    aria-selected="false"
+                    aria-controls="tab-versions"
+                    onclick="switchTab('versions')">Versions</button>
+          </div>
         </div>
-        <div class="snip-panel" id="snipPanel" style="display:none">
-          <div class="snip-code" id="dSnip"></div>
+        <div class="pkg-body">
+          <div class="pkg-cnt">
+            <div class="tabcontent active"
+                 id="tab-readme"
+                 role="tabpanel"
+                 aria-labelledby="tab-btn-readme">
+              <div class="readme-wrap" id="readmeBody"></div>
+            </div>
+            <div class="tabcontent"
+                 id="tab-versions"
+                 role="tabpanel"
+                 aria-labelledby="tab-btn-versions">
+              <table class="vtable">
+                <thead>
+                  <tr>
+                    <th>Ref</th>
+                    <th>Type</th>
+                    <th>SHA</th>
+                    <th>Date</th>
+                  </tr>
+                </thead>
+                <tbody id="vtbody">
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <aside>
+            <div class="action-card">
+              <button class="btn-add add" id="btnAdd" onclick="toggleMf()">＋ Add to manifest</button>
+              <div id="selVerInfo" class="ver-pill" style="display:none">
+                <span class="ver-pill-lbl">Version</span>
+                <span class="vsn" id="selVerName"></span>
+                <span class="ver-pill-kind" id="selVerKind"></span>
+              </div>
+            </div>
+            <div class="snip-card" id="snipCard">
+              <div class="snip-card-hdr"
+                   role="button"
+                   tabindex="0"
+                   aria-expanded="false"
+                   aria-controls="snipPanel"
+                   onclick="toggleSnip()"
+                   onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSnip()}">
+                <span class="snip-card-ico">{ }</span>
+                <span class="snip-card-title">dfetch.yaml snippet</span>
+                <button class="snip-hdr-copy"
+                        onclick="event.stopPropagation();copySnip()"
+                        aria-label="Copy snippet">
+                  <svg width="12"
+                       height="12"
+                       viewBox="0 0 16 16"
+                       fill="none"
+                       xmlns="http://www.w3.org/2000/svg">
+                    <rect x="5" y="4" width="9" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+                    <path d="M3 11.5H2.5A1.5 1.5 0 0 1 1 10V3A1.5 1.5 0 0 1 2.5 1.5h7A1.5 1.5 0 0 1 11 3v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                  </svg>
+                </button>
+                <span class="snip-chevron" aria-hidden="true">▾</span>
+              </div>
+              <div class="snip-panel" id="snipPanel" style="display:none">
+                <div class="snip-code" id="dSnip"></div>
+              </div>
+            </div>
+            <div class="aside-card">
+              <h2 class="aside-t">Links</h2>
+              <div id="aLinks"></div>
+            </div>
+            <div class="aside-card">
+              <h2 class="aside-t">Details</h2>
+              <div id="aDets"></div>
+            </div>
+            <div class="aside-card">
+              <h2 class="aside-t">Found in</h2>
+              <div class="aside-sources" id="aSrcs"></div>
+            </div>
+          </aside>
         </div>
       </div>
-      <div class="aside-card"><h2 class="aside-t">Links</h2>
-<div id="aLinks"></div></div>
-      <div class="aside-card"><h2 class="aside-t">Details</h2>
-<div id="aDets"></div></div>
-      <div class="aside-card"><h2 class="aside-t">Found in</h2>
-<div class="aside-sources" id="aSrcs"></div></div>
-    </aside>
-  </div>
-</div>
-
-<!-- MANIFEST MODAL -->
-<div class="modal-ov" id="mfModal" role="dialog" aria-modal="true" aria-labelledby="mfModalTitle" onclick="if(event.target===this)closeModal()">
-  <div class="modal">
-    <div class="modal-hdr">
-      <div class="modal-title" id="mfModalTitle">dfetch.yaml manifest builder</div>
-      <button class="modal-close" onclick="closeModal()" aria-label="Close manifest builder">✕</button>
-    </div>
-    <div class="modal-body">
-      <div class="mf-empty" id="mfEmpty"><p>No components selected yet.</p><p style="font-size:.84rem;margin-top:.3rem">Browse and click <strong>Add to manifest</strong>.</p></div>
-      <div class="msel-list" id="mselList"></div>
-      <div class="mf-code" id="mfCode" style="display:none"></div>
-    </div>
-    <div class="modal-foot">
-      <span class="modal-fi" id="mfInfo"></span>
-      <button class="btn-dl-mf" onclick="dlMf()">⬇ Download</button>
-      <button class="btn-copy-mf" onclick="copyMf()">Copy YAML</button>
-    </div>
-  </div>
-</div>
-
-</main>
-
-<div class="toast" id="toast" role="status" aria-live="polite"></div>
-<script>
+      <!-- MANIFEST MODAL -->
+      <div class="modal-ov"
+           id="mfModal"
+           role="dialog"
+           aria-modal="true"
+           aria-labelledby="mfModalTitle"
+           onclick="if(event.target===this)closeModal()">
+        <div class="modal">
+          <div class="modal-hdr">
+            <div class="modal-title" id="mfModalTitle">dfetch.yaml manifest builder</div>
+            <button class="modal-close"
+                    onclick="closeModal()"
+                    aria-label="Close manifest builder">✕</button>
+          </div>
+          <div class="modal-body">
+            <div class="mf-empty" id="mfEmpty">
+              <p>No components selected yet.</p>
+              <p style="font-size:.84rem;margin-top:.3rem">
+                Browse and click <strong>Add to manifest</strong>.
+              </p>
+            </div>
+            <div class="msel-list" id="mselList"></div>
+            <div class="mf-code" id="mfCode" style="display:none"></div>
+          </div>
+          <div class="modal-foot">
+            <span class="modal-fi" id="mfInfo"></span>
+            <button class="btn-dl-mf" onclick="dlMf()">⬇ Download</button>
+            <button class="btn-copy-mf" onclick="copyMf()">Copy YAML</button>
+          </div>
+        </div>
+      </div>
+    </main>
+    <div class="toast" id="toast" role="status" aria-live="polite"></div>
+    <script>
 'use strict';
 let RAW = {};       // catalog data
 let ALL = [];       // this fixes the ReferenceError
@@ -1052,8 +1171,10 @@ <h1 class="pkg-ttitle" id="dName"></h1>
   setTimeout(()=>URL.revokeObjectURL(url),10000);
 }
 
-
-function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;')}
+{{ /* djlint:off */ }}
+const _ESC={'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'};
+{{ /* djlint:on */ }}
+function esc(s){return String(s||'').replace(/[&<>"']/g,c=>_ESC[c]||c)}
 function yamlQ(s){return"'"+String(s||'').replace(/'/g,"''")+"'"}
 function slug(s){return String(s||'').toLowerCase().replace(/[^a-z0-9]/g,'-').replace(/-+/g,'-').replace(/^-|-$/g,'')}
 function fmt(n){if(n>=1000)return(n/1000).toFixed(1)+'k';return String(n)}
@@ -1062,6 +1183,6 @@ <h1 class="pkg-ttitle" id="dName"></h1>
 function relt(iso){if(!iso)return'';const d=new Date(iso);const diff=Date.now()-d.getTime();const days=Math.floor(diff/86400000);if(days<1)return'today';if(days<7)return`${days}d ago`;if(days<30)return`${Math.floor(days/7)}w ago`;if(days<365)return`${Math.floor(days/30)}mo ago`;return`${Math.floor(days/365)}y ago`}
 function cpTxt(t){if(navigator.clipboard)return navigator.clipboard.writeText(t);return new Promise((res,rej)=>{const ta=document.createElement('textarea');ta.value=t;document.body.appendChild(ta);ta.select();try{const ok=document.execCommand('copy');ok?res():rej(new Error('execCommand copy returned false'))}catch(e){rej(e)}finally{ta.remove()}})}
 function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');clearTimeout(t._t);t._t=setTimeout(()=>t.classList.remove('show'),2200)}
-</script>
-</body>
-</html>
\ No newline at end of file
+    </script>
+  </body>
+</html>
diff --git a/pyproject.toml b/pyproject.toml
index 572b333..95d7d10 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -36,6 +36,8 @@ development = [
     "black==25.1.0",
     "codespell==2.4.1",
     "djlint==1.36.4",
+    "tinycss2==1.5.1",
+    "py-mini-racer==0.6.0",
     "doc8==2.0.0",
     "isort==6.0.0",
     "mypy==1.14.1",
@@ -142,7 +144,12 @@ ignore = [
 known-first-party = ["dfetch_hub"]
 
 [tool.djlint]
-ignore = "H021,H031"  # H021: inline styles intentional in single-file app; H031: meta keywords are obsolete
+profile = "html"
+indent = 2
+max_line_length = 120
+format_js = false   # djlint misidentifies JS regex tokens as HTML; keep script content verbatim
+format_css = false  # CSS is intentionally minified; keep style content verbatim
+ignore = "H021,H031"  # H021: inline styles intentional in single-file app; H031: meta keywords tag is obsolete
 
 [tool.doc8]
 max-line-length = 120
diff --git a/scripts/check_css.py b/scripts/check_css.py
new file mode 100644
index 0000000..3612302
--- /dev/null
+++ b/scripts/check_css.py
@@ -0,0 +1,181 @@
+"""Validate CSS embedded in HTML files using tinycss2.
+
+Extracts every ``<style>`` block from each HTML file supplied on the command
+line and parses it with tinycss2.  The following problems are reported as
+errors:
+
+* CSS parse errors flagged by the tokeniser (malformed tokens, unexpected
+  characters, etc.).
+* Declaration-level syntax errors such as a missing ``:`` separator.
+* Declarations whose value token list is completely empty (``prop: ;``).
+* Qualified rules whose declaration block is empty (``selector {}``).
+
+Exits with code 1 if any problems are found, 0 otherwise.
+
+Note: tinycss2 is intentionally permissive about *unknown* property names and
+values (matching browser error-recovery behaviour), so vendor-prefixed
+properties and modern CSS4 functions like ``clamp()``/``var()`` are accepted
+without warnings.
+"""
+
+from __future__ import annotations
+
+import sys
+from html.parser import HTMLParser
+from pathlib import Path
+from typing import TYPE_CHECKING
+
+if TYPE_CHECKING:
+    pass
+
+# ---------------------------------------------------------------------------
+# HTML extraction
+# ---------------------------------------------------------------------------
+
+
+class _StyleExtractor(HTMLParser):
+    """Collect the text content of every ``<style>`` element."""
+
+    def __init__(self) -> None:
+        """Initialise parser state."""
+        super().__init__()
+        self._in_style: bool = False
+        self._buf: list[str] = []
+        self.blocks: list[tuple[int, str]] = []  # (start_line, css_text)
+
+    def handle_starttag(self, tag: str, attrs: list[tuple[str, str | None]]) -> None:
+        """Enter a ``<style>`` element."""
+        if tag == "style":
+            self._in_style = True
+            self._buf = []
+
+    def handle_endtag(self, tag: str) -> None:
+        """Save accumulated text when a ``<style>`` element closes."""
+        if tag == "style" and self._in_style:
+            self.blocks.append((self.getpos()[0], "".join(self._buf)))
+            self._in_style = False
+
+    def handle_data(self, data: str) -> None:
+        """Accumulate character data while inside a ``<style>`` element."""
+        if self._in_style:
+            self._buf.append(data)
+
+
+# ---------------------------------------------------------------------------
+# CSS validation helpers
+# ---------------------------------------------------------------------------
+
+
+def _check_declarations(content: list[object], block_line: int, block_num: int) -> list[str]:
+    """Validate declaration-level nodes inside a qualified rule or at-rule block.
+
+    Args:
+        content: The ``content`` token list from a tinycss2 ``QualifiedRule`` or
+            ``AtRule`` node, already passed through ``parse_declaration_list``.
+        block_line: Source line of the opening ``<style>`` tag in the HTML file.
+        block_num: 1-based index of the ``<style>`` block in the file.
+
+    Returns:
+        A list of human-readable error strings (empty if no problems found).
+    """
+    import tinycss2  # type: ignore[import-untyped]
+
+    messages: list[str] = []
+    decls = tinycss2.parse_declaration_list(content, skip_whitespace=True, skip_comments=True)
+    for node in decls:
+        line = block_line + getattr(node, "source_line", 1) - 1
+        if node.type == "error":  # type: ignore[union-attr]
+            messages.append(f"  <style> block {block_num} line ~{line}: {node.message}")  # type: ignore[union-attr]
+        elif node.type == "declaration":  # type: ignore[union-attr]
+            # Flag completely empty value lists (e.g. "color: ;")
+            value_tokens = [
+                t
+                for t in node.value  # type: ignore[union-attr]
+                if getattr(t, "type", None) not in ("whitespace", "comment")
+            ]
+            if not value_tokens:
+                messages.append(
+                    f"  <style> block {block_num} line ~{line}:"
+                    f" empty value for property '{node.name}'"  # type: ignore[union-attr]
+                )
+    return messages
+
+
+def _validate_block(css_text: str, start_line: int, block_num: int) -> list[str]:
+    """Parse one CSS block and return all error messages.
+
+    Args:
+        css_text: Raw CSS text extracted from a ``<style>`` element.
+        start_line: Line number of the ``<style>`` opening tag in the HTML source.
+        block_num: 1-based index of this block within the file.
+
+    Returns:
+        A (possibly empty) list of formatted diagnostic strings.
+    """
+    import tinycss2  # type: ignore[import-untyped]
+
+    rules = tinycss2.parse_stylesheet(css_text, skip_whitespace=True, skip_comments=True)
+    messages: list[str] = []
+
+    for rule in rules:
+        line = start_line + getattr(rule, "source_line", 1) - 1
+        if rule.type == "error":  # type: ignore[union-attr]
+            messages.append(f"  <style> block {block_num} line ~{line}: {rule.message}")  # type: ignore[union-attr]
+        elif rule.type == "qualified-rule":  # type: ignore[union-attr]
+            messages.extend(_check_declarations(rule.content, start_line, block_num))  # type: ignore[union-attr]
+        elif rule.type == "at-rule" and rule.content is not None:  # type: ignore[union-attr]
+            # Recurse into @media, @supports, etc.
+            inner = tinycss2.parse_stylesheet(rule.content, skip_whitespace=True, skip_comments=True)  # type: ignore[union-attr]
+            for inner_rule in inner:
+                if inner_rule.type == "error":  # type: ignore[union-attr]
+                    messages.append(
+                        f"  <style> block {block_num} (inside @{rule.at_keyword}): {inner_rule.message}"  # type: ignore[union-attr]
+                    )
+                elif inner_rule.type == "qualified-rule":  # type: ignore[union-attr]
+                    messages.extend(_check_declarations(inner_rule.content, start_line, block_num))  # type: ignore[union-attr]
+
+    return messages
+
+
+def _check_file(path: Path) -> list[str]:
+    """Return CSS error messages for all ``<style>`` blocks in an HTML file.
+
+    Args:
+        path: Path to an HTML file.
+
+    Returns:
+        A (possibly empty) list of formatted diagnostic messages.
+    """
+    extractor = _StyleExtractor()
+    extractor.feed(path.read_text(encoding="utf-8"))
+    messages: list[str] = []
+    for idx, (start_line, css_text) in enumerate(extractor.blocks, 1):
+        messages.extend(_validate_block(css_text, start_line, idx))
+    return messages
+
+
+# ---------------------------------------------------------------------------
+# Entry point
+# ---------------------------------------------------------------------------
+
+
+def main() -> int:
+    """Validate embedded CSS in all HTML files given as arguments.
+
+    Returns:
+        0 if all CSS is structurally valid, 1 if any errors were found.
+    """
+    failed = False
+    for arg in sys.argv[1:]:
+        path = Path(arg)
+        messages = _check_file(path)
+        if messages:
+            print(f"{arg}: CSS errors detected")
+            for msg in messages:
+                print(msg)
+            failed = True
+    return 1 if failed else 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/scripts/check_js.py b/scripts/check_js.py
new file mode 100644
index 0000000..d70d67b
--- /dev/null
+++ b/scripts/check_js.py
@@ -0,0 +1,155 @@
+"""Validate JavaScript embedded in HTML files using py-mini-racer (V8).
+
+Extracts every inline ``<script>`` block from each HTML file supplied on the
+command line (skipping ``<script src="...">`` external scripts) and passes it
+through V8's ``Function`` constructor, which compiles the code without
+executing it.  Any ``SyntaxError`` thrown by V8 is reported and causes the
+script to exit with code 1.
+
+This approach supports the full modern ECMAScript feature set (ES2020+,
+including optional chaining ``?.``, nullish coalescing ``??``, async/await,
+etc.) because it uses the real V8 engine bundled with py-mini-racer.
+"""
+
+from __future__ import annotations
+
+import sys
+from html.parser import HTMLParser
+from pathlib import Path
+
+# ---------------------------------------------------------------------------
+# V8 syntax-check bootstrap
+# ---------------------------------------------------------------------------
+
+# Runs once per process.  The helper function is injected into the V8 context
+# before any user code is checked.
+_V8_BOOTSTRAP = """
+function _checkSyntax(code) {
+    try {
+        new Function(code);
+        return null;
+    } catch (e) {
+        return (e instanceof SyntaxError) ? e.message : null;
+    }
+}
+"""
+
+# ---------------------------------------------------------------------------
+# HTML extraction
+# ---------------------------------------------------------------------------
+
+
+class _ScriptExtractor(HTMLParser):
+    """Collect the text content of inline ``<script>`` elements."""
+
+    def __init__(self) -> None:
+        """Initialise parser state."""
+        super().__init__()
+        self._in_script: bool = False
+        self._buf: list[str] = []
+        self.blocks: list[tuple[int, str]] = []  # (start_line, js_text)
+
+    def handle_starttag(self, tag: str, attrs: list[tuple[str, str | None]]) -> None:
+        """Enter an inline ``<script>`` element; skip external ones."""
+        if tag == "script":
+            attr_dict = dict(attrs)
+            if "src" not in attr_dict:
+                self._in_script = True
+                self._buf = []
+
+    def handle_endtag(self, tag: str) -> None:
+        """Save accumulated text when a ``<script>`` element closes."""
+        if tag == "script" and self._in_script:
+            self.blocks.append((self.getpos()[0], "".join(self._buf)))
+            self._in_script = False
+
+    def handle_data(self, data: str) -> None:
+        """Accumulate character data while inside a ``<script>`` element."""
+        if self._in_script:
+            self._buf.append(data)
+
+
+# ---------------------------------------------------------------------------
+# JavaScript validation
+# ---------------------------------------------------------------------------
+
+
+def _make_ctx() -> object:
+    """Create and return a warm py-mini-racer context with the helper loaded.
+
+    Returns:
+        A ``py_mini_racer.MiniRacer`` instance ready to call ``_checkSyntax``.
+    """
+    from py_mini_racer import MiniRacer  # type: ignore[import-untyped]
+
+    ctx = MiniRacer()
+    ctx.eval(_V8_BOOTSTRAP)
+    return ctx
+
+
+def _validate_block(ctx: object, js_text: str, start_line: int, block_num: int) -> list[str]:
+    """Use V8 to syntax-check one JavaScript block.
+
+    Args:
+        ctx: A warm ``MiniRacer`` context (already has ``_checkSyntax`` loaded).
+        js_text: Raw JavaScript extracted from an inline ``<script>`` element.
+        start_line: Line number of the ``<script>`` opening tag in the HTML.
+        block_num: 1-based index of this block within the file.
+
+    Returns:
+        A (possibly empty) list of formatted error strings.
+    """
+    result = ctx.call("_checkSyntax", js_text)  # type: ignore[union-attr]
+    if result is None:
+        return []
+    # V8 SyntaxError messages don't include line numbers relative to the
+    # extracted block, so we report the HTML source line of the <script> tag.
+    return [f"  <script> block {block_num} (HTML line ~{start_line}): SyntaxError: {result}"]
+
+
+def _check_file(path: Path) -> list[str]:
+    """Return JS syntax-error messages for all inline ``<script>`` blocks.
+
+    Args:
+        path: Path to an HTML file.
+
+    Returns:
+        A (possibly empty) list of formatted diagnostic messages.
+    """
+    extractor = _ScriptExtractor()
+    extractor.feed(path.read_text(encoding="utf-8"))
+    if not extractor.blocks:
+        return []
+
+    ctx = _make_ctx()
+    messages: list[str] = []
+    for idx, (start_line, js_text) in enumerate(extractor.blocks, 1):
+        messages.extend(_validate_block(ctx, js_text, start_line, idx))
+    return messages
+
+
+# ---------------------------------------------------------------------------
+# Entry point
+# ---------------------------------------------------------------------------
+
+
+def main() -> int:
+    """Validate embedded JavaScript in all HTML files given as arguments.
+
+    Returns:
+        0 if all JavaScript is syntactically valid, 1 if any errors were found.
+    """
+    failed = False
+    for arg in sys.argv[1:]:
+        path = Path(arg)
+        messages = _check_file(path)
+        if messages:
+            print(f"{arg}: JavaScript syntax errors detected")
+            for msg in messages:
+                print(msg)
+            failed = True
+    return 1 if failed else 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())

From 7709aa04e998be2ede510aef52604103deb6c13a Mon Sep 17 00:00:00 2001
From: Ben Spoor <ben.spoor@gmail.com>
Date: Tue, 10 Mar 2026 22:56:39 +0100
Subject: [PATCH 3/3] Review comments

---
 scripts/check_css.py | 10 ++++------
 scripts/check_js.py  | 10 ++++++++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/scripts/check_css.py b/scripts/check_css.py
index 3612302..2809fbb 100644
--- a/scripts/check_css.py
+++ b/scripts/check_css.py
@@ -23,10 +23,6 @@
 import sys
 from html.parser import HTMLParser
 from pathlib import Path
-from typing import TYPE_CHECKING
-
-if TYPE_CHECKING:
-    pass
 
 # ---------------------------------------------------------------------------
 # HTML extraction
@@ -40,6 +36,7 @@ def __init__(self) -> None:
         """Initialise parser state."""
         super().__init__()
         self._in_style: bool = False
+        self._start_line: int = 0
         self._buf: list[str] = []
         self.blocks: list[tuple[int, str]] = []  # (start_line, css_text)
 
@@ -47,12 +44,13 @@ def handle_starttag(self, tag: str, attrs: list[tuple[str, str | None]]) -> None
         """Enter a ``<style>`` element."""
         if tag == "style":
             self._in_style = True
+            self._start_line = self.getpos()[0]
             self._buf = []
 
     def handle_endtag(self, tag: str) -> None:
         """Save accumulated text when a ``<style>`` element closes."""
         if tag == "style" and self._in_style:
-            self.blocks.append((self.getpos()[0], "".join(self._buf)))
+            self.blocks.append((self._start_line, "".join(self._buf)))
             self._in_style = False
 
     def handle_data(self, data: str) -> None:
@@ -125,7 +123,7 @@ def _validate_block(css_text: str, start_line: int, block_num: int) -> list[str]
             messages.extend(_check_declarations(rule.content, start_line, block_num))  # type: ignore[union-attr]
         elif rule.type == "at-rule" and rule.content is not None:  # type: ignore[union-attr]
             # Recurse into @media, @supports, etc.
-            inner = tinycss2.parse_stylesheet(rule.content, skip_whitespace=True, skip_comments=True)  # type: ignore[union-attr]
+            inner = tinycss2.parse_blocks_contents(rule.content, skip_whitespace=True, skip_comments=True)  # type: ignore[union-attr]
             for inner_rule in inner:
                 if inner_rule.type == "error":  # type: ignore[union-attr]
                     messages.append(
diff --git a/scripts/check_js.py b/scripts/check_js.py
index d70d67b..8c8b583 100644
--- a/scripts/check_js.py
+++ b/scripts/check_js.py
@@ -16,6 +16,10 @@
 import sys
 from html.parser import HTMLParser
 from pathlib import Path
+from typing import TYPE_CHECKING
+
+if TYPE_CHECKING:
+    from py_mini_racer import MiniRacer  # type: ignore[import-untyped]
 
 # ---------------------------------------------------------------------------
 # V8 syntax-check bootstrap
@@ -46,6 +50,7 @@ def __init__(self) -> None:
         """Initialise parser state."""
         super().__init__()
         self._in_script: bool = False
+        self._start_line: int = 0
         self._buf: list[str] = []
         self.blocks: list[tuple[int, str]] = []  # (start_line, js_text)
 
@@ -55,12 +60,13 @@ def handle_starttag(self, tag: str, attrs: list[tuple[str, str | None]]) -> None
             attr_dict = dict(attrs)
             if "src" not in attr_dict:
                 self._in_script = True
+                self._start_line = self.getpos()[0]
                 self._buf = []
 
     def handle_endtag(self, tag: str) -> None:
         """Save accumulated text when a ``<script>`` element closes."""
         if tag == "script" and self._in_script:
-            self.blocks.append((self.getpos()[0], "".join(self._buf)))
+            self.blocks.append((self._start_line, "".join(self._buf)))
             self._in_script = False
 
     def handle_data(self, data: str) -> None:
@@ -74,7 +80,7 @@ def handle_data(self, data: str) -> None:
 # ---------------------------------------------------------------------------
 
 
-def _make_ctx() -> object:
+def _make_ctx() -> MiniRacer:
     """Create and return a warm py-mini-racer context with the helper loaded.
 
     Returns:
