site: licence freshness page template and styles

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Wc67NX9MM964uaVGn4bpZJ

Author: TMHSDigital

site/lib/freshness.mjs

@@ -3,7 +3,7 @@
  * Buckets come from verifiedAge, the function the homepage cards use, so the
  * summary and the cards cannot disagree. Pure: `now` is passed in.
  */
-import { esc, verifiedAge } from "./shared.mjs";
+import { esc, freshnessPageUrl, verifiedAge } from "./shared.mjs";
 
 const RECENT_DAYS = 30;
 const byName = (a, b) => a.entry.name.localeCompare(b.entry.name);
@@ -46,3 +46,108 @@ export function freshnessLineHtml(stats, stamp, href) {
   parts.push(`<a href="${esc(href)}">See every check, oldest first</a>.`);
   return parts.join(" ");
 }
+
+const BUCKET_WORDS = { fresh: "fresh", aging: "aging", stale: "stale", unknown: "no check date" };
+
+function recentHtml(recent, stamp) {
+  if (!recent.length) return `<p>None in the ${RECENT_DAYS} days before ${esc(stamp)}.</p>`;
+  const items = recent
+    .map(
+      (r) =>
+        `<li><a href="../entry/${esc(r.entry.id)}/">${esc(r.entry.name)}</a> <span class="verified is-fresh">${esc(r.entry.verified)} (${dayWord(r.days)})</span></li>`
+    )
+    .join("\n          ");
+  return `<ul class="recent-list">
+          ${items}
+        </ul>`;
+}
+
+function rowHtml(r) {
+  const date = r.entry.verified ? esc(r.entry.verified) : "none";
+  const age = r.days === null ? "" : dayWord(r.days);
+  return `<tr class="fresh-row" data-id="${esc(r.entry.id)}">
+            <td data-label="Checked">${date}</td>
+            <td data-label="Age">${age}</td>
+            <td data-label="Status"><span class="verified is-${r.bucket}">${BUCKET_WORDS[r.bucket]}</span></td>
+            <td data-label="Entry"><a href="../entry/${esc(r.entry.id)}/">${esc(r.entry.name)}</a></td>
+            <td data-label="Licence">${esc(r.entry.license)}</td>
+          </tr>`;
+}
+
+export function freshnessPageHtml({ stats, site, stamp, total, hasCard }) {
+  const url = freshnessPageUrl(site);
+  const title = `Licence freshness | ${site.title}`;
+  const desc = `When each licence in the catalog was last read at its source, oldest first. As of ${stamp}.`;
+  const card = `${String(site.siteUrl).replace(/\/+$/, "")}/og-card.png`;
+  const cardMeta = hasCard
+    ? `<meta property="og:image" content="${esc(card)}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="${esc(card)}" />`
+    : `<meta name="twitter:card" content="summary" />`;
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${esc(title)}</title>
+    <meta name="description" content="${esc(desc)}" />
+    <link rel="canonical" href="${esc(url)}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="${esc(site.title)}" />
+    <meta property="og:title" content="${esc(title)}" />
+    <meta property="og:description" content="${esc(desc)}" />
+    <meta property="og:url" content="${esc(url)}" />
+    ${cardMeta}
+    <meta name="twitter:title" content="${esc(title)}" />
+    <meta name="twitter:description" content="${esc(desc)}" />
+    <link rel="icon" href="../favicon.svg" type="image/svg+xml" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+  <body>
+    <a class="skip-link" href="#content">Skip to the list</a>
+    <header class="topbar">
+      <a class="brand" href="../">Free Game Dev Assets</a>
+      <nav class="topnav" aria-label="Primary">
+        <a href="../#catalog">Catalog</a>
+        <a href="../#stacks">Stacks</a>
+        <a href="../#starters">Starters</a>
+        <a href="../#guides">Guides</a>
+        <a href="${esc(site.repo)}" rel="noopener noreferrer">GitHub</a>
+      </nav>
+    </header>
+    <main class="section entry-page freshness-page" id="content">
+      <nav class="breadcrumb" aria-label="Breadcrumb">
+        <a href="../#catalog">Catalog</a> <span aria-hidden="true">/</span>
+        <span aria-current="page">Licence freshness</span>
+      </nav>
+      <h1>Licence freshness</h1>
+      <p class="freshness-line">${freshnessLineHtml(stats, stamp, "#every-check")}</p>
+      <div class="entry-lead"><p>An entry's verified date is when someone last read its licence at the source. Each entry's page quotes that licence with dates. Deprecated entries are not counted.</p></div>
+      <section aria-labelledby="recent">
+        <h2 id="recent">Most recently checked</h2>
+        <p>Checked in the ${RECENT_DAYS} days before ${esc(stamp)}, newest first. The catalog keeps only the latest check date, so a first check and a recheck look the same.</p>
+        ${recentHtml(stats.recent, stamp)}
+      </section>
+      <section aria-labelledby="every-check">
+        <h2 id="every-check">Every check, oldest first</h2>
+        <table class="fresh-table">
+          <thead>
+            <tr><th scope="col">Checked</th><th scope="col">Age</th><th scope="col">Status</th><th scope="col">Entry</th><th scope="col">Licence</th></tr>
+          </thead>
+          <tbody>
+          ${stats.rows.map(rowHtml).join("\n          ")}
+          </tbody>
+        </table>
+      </section>
+    </main>
+    <footer class="footer">
+      <p>Catalog metadata is CC0. Linked assets keep their own licenses: re-check the live source before shipping.</p>
+      <p class="footer-stamp">Built ${esc(stamp)} from ${total} catalog entries.</p>
+    </footer>
+  </body>
+</html>
+`;
+}

site/lib/lib.test.mjs

@@ -401,6 +401,21 @@ const fEmpty = freshnessStats([], fNow);
 eq("empty catalog has no oldest", fEmpty.oldest, null);
 lacks("empty catalog line has no oldest clause", freshnessLineHtml(fEmpty, "2026-09-25", "f/"), "Oldest check");
 
+/* freshness: page ---------------------------------------------------------- */
+import { freshnessPageHtml } from "./freshness.mjs";
+const fp = freshnessPageHtml({ stats: freshnessStats([...fEntries, fe("k", 'Q "<b>"', 5)], fNow), site, stamp: "2026-09-25", total: 319, hasCard: true });
+has("freshness title", fp, "<title>Licence freshness | Free Game Dev Assets</title>");
+has("freshness canonical", fp, '<link rel="canonical" href="https://x.test/s/freshness/" />');
+eq("freshness one h1", (fp.match(/<h1[\s>]/g) || []).length, 1);
+has("freshness links entries one level up", fp, 'href="../entry/i/"');
+has("freshness names escaped", fp, "Q &quot;&lt;b&gt;&quot;");
+has("freshness line links the table", fp, '<a href="#every-check">See every check, oldest first</a>');
+has("freshness table cells carry labels", fp, '<td data-label="Checked">');
+eq("freshness table rows oldest first", [...fp.matchAll(/<tr class="fresh-row" data-id="([^"]+)"/g)].map((m) => m[1]).slice(0, 3).join(","), "i,d,c");
+has("an undated row says so", fp, "no check date");
+has("recent section present", fp, 'id="recent"');
+lacks("deprecated left out of the page", fp, "Theta");
+
 /* report (keep last) ------------------------------------------------------ */
 if (failures.length) {
   console.error(`lib.test failed (${failures.length}):`);

site/lib/shared.mjs

@@ -63,3 +63,8 @@ export function unquoteScalar(v) {
 export function stackPageUrl(site, id) {
   return `${String(site.siteUrl).replace(/\/+$/, "")}/stack/${id}/`;
 }
+
+/** Absolute URL of the licence freshness page. */
+export function freshnessPageUrl(site) {
+  return `${String(site.siteUrl).replace(/\/+$/, "")}/freshness/`;
+}

site/public/styles.css

@@ -1240,3 +1240,104 @@ input:focus-visible {
   margin: 0.5rem 0 0;
   white-space: pre-wrap;
 }
+
+/* ------------------------------------------------------------------ *
+ * Licence freshness: the homepage line and /freshness/.
+ * ------------------------------------------------------------------ */
+.freshness-line {
+  max-width: 42rem;
+  margin: 1rem 0 0;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.freshness-line strong {
+  color: var(--ink);
+}
+
+.freshness-page section h2 {
+  margin: 1.75rem 0 0.5rem;
+  font-size: 1.15rem;
+  letter-spacing: -0.01em;
+}
+
+.recent-list {
+  margin: 0.5rem 0 0;
+  padding-left: 1.25rem;
+}
+
+.recent-list li {
+  margin: 0.3rem 0;
+}
+
+.fresh-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.fresh-table th,
+.fresh-table td {
+  padding: 0.45rem 0.5rem;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+}
+
+.fresh-table th {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.fresh-table td:nth-child(1),
+.fresh-table td:nth-child(2) {
+  font-family: var(--mono);
+  white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+  .fresh-table thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+  }
+
+  .fresh-table,
+  .fresh-table tbody,
+  .fresh-table tr,
+  .fresh-table td {
+    display: block;
+    width: 100%;
+  }
+
+  .fresh-table tr {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .fresh-table td {
+    display: flex;
+    gap: 0.75rem;
+    padding: 0.15rem 0;
+    border: 0;
+  }
+
+  .fresh-table td::before {
+    content: attr(data-label);
+    flex: 0 0 5.5rem;
+    font-family: var(--mono);
+    font-size: 0.75rem;
+    color: var(--muted);
+  }
+
+  .fresh-table td:nth-child(1),
+  .fresh-table td:nth-child(2) {
+    white-space: normal;
+  }
+}