Per-entry licence badge and "Link to this entry" snippets (part of #117)

- lib/badge.mjs: badge/<id>.svg per entry, "Free Game Dev Assets |
  <licence> · read <date>", coloured by licence family, with an
  accessible name
- each entry page has a "Link to this entry" box with the badge as
  Markdown and HTML
- docs/for-publishers.md explains the badge and the new per-entry
  licence-change feed

Not done: unique per-entry social cards. The build no longer has a PNG
writer (the site card is a screenshot), and drawing text into PNGs with
no dependencies would look worse than the shared card. #117 stays open
for that.

Refs #117

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LpkeXQPaUhxjgqdqnk6BrJ

Author: TMHSDigital

docs/for-publishers.md

@@ -45,3 +45,15 @@ https://tmhsdigital.github.io/Free-Game-Dev-Assets/entry/<id>/
 ```
 
 The `<id>` is the entry's file name, for example `kenney` for `catalog/3d/kenney.md`.
+
+Each entry also has a badge saying when the catalog last read your licence, coloured by licence family:
+
+```text
+https://tmhsdigital.github.io/Free-Game-Dev-Assets/badge/<id>.svg
+```
+
+The entry page's "Link to this entry" box has it as Markdown and HTML, ready to paste into a README or store page. The date updates whenever the licence is re-read.
+
+## Hear about changes to your entry
+
+Each entry page links an Atom feed, `entry/<id>/changes.xml`, with an item whenever the recorded licence, commercial use, credit requirement or status changes.

site/build.mjs

@@ -40,6 +40,7 @@ import { createDistWriter } from "./lib/dist-writer.mjs";
 import { serviceWorkerJs, webManifest } from "./lib/offline.mjs";
 import { auditPageHtml } from "./lib/audit-page.mjs";
 import { changeEventsFromLog, changesFeedXml } from "./lib/changes.mjs";
+import { badgeSvg } from "./lib/badge.mjs";
 import { ATTRIBUTION_RANK, categoryChipsHtml, guideRowsHtml, headMetaHtml, licenseFamily, notFoundHtml, robotsTxt, stackRowsHtml, starterRowsHtml } from "./lib/home-page.mjs";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -599,6 +600,8 @@ function main() {
   // One licence-change feed per entry, beside its page (#186).
   const changes = licenceChanges();
   for (const entry of entries) {
+    // A badge publishers can link back with (#117).
+    writeOut(path.join("badge", `${entry.id}.svg`), badgeSvg(entry));
     writeOut(path.join("entry", entry.id, "changes.xml"), changesFeedXml({ entry, events: changes.get(entry.id) || [], siteUrl: config.site.siteUrl, generatedAt: payload.generatedAt }));
   }
   const stackPages = writeStackPages({ stacks, entries, config, stats, stamp, hasCard, now });

site/lib/badge.mjs

@@ -0,0 +1,53 @@
+/**
+ * The per-entry badge (#117): a static SVG at badge/<id>.svg saying the
+ * catalog read the source's licence and when, for publishers to link back
+ * with. Coloured by licence family. Pure.
+ */
+import { esc } from "./shared.mjs";
+
+const FAMILY_COLOURS = {
+  "public-domain": "#2e7d32",
+  permissive: "#1565c0",
+  "cc-by": "#00796b",
+  copyleft: "#b26a00",
+  "non-commercial": "#8b2e2e",
+};
+
+/** Approximate text width at 11px Verdana, as shields.io badges measure it. */
+export function textWidth(text) {
+  let w = 0;
+  for (const ch of String(text)) w += /[mwMW@]/.test(ch) ? 10 : /[ijlI.,:;'|!·]/.test(ch) ? 3.5 : /[A-Z0-9]/.test(ch) ? 7.5 : 6.5;
+  return Math.ceil(w);
+}
+
+/** The badge SVG: "Free Game Dev Assets | <licence> · read <date>". */
+export function badgeSvg(entry) {
+  const left = "Free Game Dev Assets";
+  const right = `${entry.license}${entry.verified ? ` · read ${entry.verified}` : ""}`;
+  const lw = textWidth(left) + 12;
+  const rw = textWidth(right) + 12;
+  const colour = FAMILY_COLOURS[entry.licenseFamily] || "#5a6472";
+  const label = `${left}: ${right}`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${lw + rw}" height="20" role="img" aria-label="${esc(label)}">
+  <title>${esc(label)}</title>
+  <rect width="${lw}" height="20" fill="#12151a"/>
+  <rect x="${lw}" width="${rw}" height="20" fill="${colour}"/>
+  <g fill="#fff" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11" text-anchor="middle">
+    <text x="${lw / 2}" y="14">${esc(left)}</text>
+    <text x="${lw + rw / 2}" y="14">${esc(right)}</text>
+  </g>
+</svg>
+`;
+}
+
+/** Markdown and HTML a publisher can paste to show the badge, linking the entry page. */
+export function badgeSnippets(entry, siteUrl) {
+  const base = String(siteUrl).replace(/\/+$/, "");
+  const page = `${base}/entry/${entry.id}/`;
+  const img = `${base}/badge/${entry.id}.svg`;
+  const alt = `Licence read by Free Game Dev Assets`;
+  return {
+    markdown: `[![${alt}](${img})](${page})`,
+    html: `<a href="${page}"><img src="${img}" alt="${alt}" /></a>`,
+  };
+}

site/lib/entry-page.mjs

@@ -20,6 +20,7 @@ import { thumbHtml } from "./cards.mjs";
 import { previewCredit } from "./thumbs.mjs";
 import { creditLineHtml, fillInNote } from "./owes.mjs";
 import { ENGINES, nativeEngines } from "./search.mjs";
+import { badgeSnippets } from "./badge.mjs";
 
 export function jsonLd(entry, site, { categoryLabel } = {}) {
   const work = { "@type": "CreativeWork", name: entry.name, url: entry.url };
@@ -175,6 +176,14 @@ export function entryPageHtml({ entry, leadHtml, restHtml, deprecatedReasonHtml,
         ${c.block}
       </section>
       <p class="page-actions"><a class="btn" href="${esc(entry.url)}" rel="noopener noreferrer">Go to source</a></p>
+      <details class="entry-badge">
+        <summary>Link to this entry</summary>
+        <p><img src="../../badge/${esc(entry.id)}.svg" alt="Licence read by Free Game Dev Assets" /></p>
+        <p>Markdown:</p>
+        <pre class="attribution-string"><code>${esc(badgeSnippets(entry, site.siteUrl).markdown)}</code></pre>
+        <p>HTML:</p>
+        <pre class="attribution-string"><code>${esc(badgeSnippets(entry, site.siteUrl).html)}</code></pre>
+      </details>
       <p class="entry-feed"><a href="changes.xml" type="application/atom+xml">Follow licence changes</a> (an Atom feed of changes to this licence, its commercial use, credit or status)</p>
       <p class="page-links">
         <a href="${esc(`${repo}/blob/main/${entry.path}`)}" rel="noopener noreferrer">View the file on GitHub</a>

site/lib/lib.test.mjs

@@ -2670,6 +2670,21 @@ await section("licence-change feeds (#186)", async () => {
   has("opml: names escaped", opml, 'text="A <1>"');
 });
 
+/* entry badge (#117) ------------------------------------------------------ */
+await section("entry badge (#117)", async () => {
+  const { badgeSvg, badgeSnippets, textWidth } = await import("./badge.mjs");
+  const svg = badgeSvg({ id: "a", license: "CC-BY-4.0", licenseFamily: "cc-by", verified: "2026-10-13" });
+  has("badge: licence and read date", svg, "CC-BY-4.0 · read 2026-10-13");
+  has("badge: accessible name", svg, 'aria-label="Free Game Dev Assets: CC-BY-4.0 · read 2026-10-13"');
+  has("badge: coloured by family", svg, 'fill="#00796b"');
+  has("badge: unknown family is grey", badgeSvg({ id: "b", license: "custom", licenseFamily: "custom", verified: null }), 'fill="#5a6472"');
+  has("badge: escaped", badgeSvg({ id: "c", license: "A<&>", verified: null }), "A&lt;&amp;&gt;");
+  eq("badge: wider text, wider badge", textWidth("MMMM") > textWidth("iiii"), true);
+  const s = badgeSnippets({ id: "a" }, "https://x.test/s/");
+  eq("badge: markdown links the entry", s.markdown, "[![Licence read by Free Game Dev Assets](https://x.test/s/badge/a.svg)](https://x.test/s/entry/a/)");
+  has("badge: html too", s.html, '<img src="https://x.test/s/badge/a.svg"');
+});
+
 /* report (keep last) ------------------------------------------------------ */
 if (failures.length) {
   console.error(`lib.test failed (${failures.length}):`);