Entry pages: verdict above the fold on phones, honest thumbnail sizing

- Phones get a one-line verdict under the title (licence, commercial
  stance, credit, verified age) with Go to source beside it, and the
  strip is capped at 160 px; at 375x667 the source button now ends at
  317 px instead of 980 px. Desktop is unchanged.
- Related links written as an entry id now read as the entry's name.
- The entry strip image loads eagerly with fetchpriority=high (it is the
  page's LCP element) and never scales past twice its stored width.
- Card thumbnails narrower than 400 px are shown whole on the surface
  colour instead of cropped and scaled up.
Checked in Chromium at 375x667 and 1440x900.

Closes #153
Closes #155

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: TMHSDigital

site/build.mjs

@@ -354,7 +354,8 @@ function linkResolvers(entries, config, entryBase = "../") {
     if (caseMismatch(repoPath, path.relative(realRoot, fs.realpathSync.native(full)))) return null;
     return fs.statSync(full).isDirectory() ? "dir" : "file";
   };
-  return (file) => makeLinkResolver({ entryPath: file.path, idByPath, repo: config.site.repo, kindOf, entryBase });
+  const nameById = new Map(entries.map((e) => [e.id, e.name]));
+  return (file) => makeLinkResolver({ entryPath: file.path, idByPath, repo: config.site.repo, kindOf, entryBase, nameById });
 }
 
 /** Reads stacks/*.md, checks them (V15) and resolves each pick to its entry. */

site/lib/cards.mjs

@@ -27,11 +27,17 @@ export function tileHtml(entry, label = entry.category) {
 }
 
 /** The entry's thumbnail image, or its tile. `root` is the page's path to the site root. */
-export function thumbHtml(entry, root = "", label) {
+/** Stored previews narrower than this are shown whole on the surface colour, not cropped and scaled up. */
+export const SMALL_THUMB_WIDTH = 400;
+
+export function thumbHtml(entry, root = "", label, { eager = false } = {}) {
   const t = entry.thumb;
   if (t && t.path) {
     const credit = t.credit ? ` title="${esc(t.credit)}"` : "";
-    return `<img class="entry-thumb-img" src="${esc(root)}${esc(t.path)}" width="${Number(t.width) || 640}" height="${Number(t.height) || 400}" alt=""${credit} loading="lazy" decoding="async">`;
+    const small = Number(t.width) > 0 && Number(t.width) < SMALL_THUMB_WIDTH ? " is-small" : "";
+    // The entry strip is the page's largest image: fetch it first, not lazily.
+    const load = eager ? 'loading="eager" fetchpriority="high"' : 'loading="lazy"';
+    return `<img class="entry-thumb-img${small}" src="${esc(root)}${esc(t.path)}" width="${Number(t.width) || 640}" height="${Number(t.height) || 400}" alt=""${credit} ${load} decoding="async">`;
   }
   return tileHtml(entry, label);
 }

site/lib/entry-page.mjs

@@ -107,7 +107,7 @@ export function entryPageHtml({ entry, leadHtml, restHtml, deprecatedReasonHtml,
       : "";
   // The publisher's preview, when the licence gate allowed one, with its credit.
   const strip = entry.thumb
-    ? `<figure class="entry-strip">${thumbHtml(entry, "../../")}<figcaption class="entry-credit">${esc(previewCredit(entry))}</figcaption></figure>`
+    ? `<figure class="entry-strip" style="--thumb-max:${2 * (Number(entry.thumb.width) || 640)}px">${thumbHtml(entry, "../../", undefined, { eager: true })}<figcaption class="entry-credit">${esc(previewCredit(entry))}</figcaption></figure>`
     : "";
   const usedIn = stacks.length
     ? `<p class="used-in">Used in: ${stacks.map((s) => `<a href="../../stack/${esc(s.id)}/">${esc(s.title)}</a>`).join(", ")}</p>`
@@ -144,6 +144,7 @@ export function entryPageHtml({ entry, leadHtml, restHtml, deprecatedReasonHtml,
       </nav>
       ${banner}
       <h1>${esc(entry.name)}</h1>
+      <p class="entry-verdict"><span>${esc(licence)}</span> <span>${esc(commercialLabel(entry.commercial))}</span> <span>Credit: ${esc(c.value)}</span> <span class="verified is-${age.bucket}">${esc(age.days === null ? "verified date unknown" : `verified ${age.days}d ago`)}</span> <a class="btn" href="${esc(entry.url)}" rel="noopener noreferrer">Go to source</a></p>
       ${strip}
       <div class="entry-lead">${leadHtml}</div>
       <section class="facts-panel" aria-labelledby="facts-title">

site/lib/lib.test.mjs

@@ -1038,7 +1038,9 @@ eq("filmstrip: empty when nothing to show", filmstripHtml([], { root: "" }), "")
   const siteR = { title: "T", tagline: "t", siteUrl: "https://s/", repo: "https://r" };
   const common = { leadHtml: "<p>l</p>", restHtml: "<p>r</p>", deprecatedReasonHtml: null, prev: null, next: null, site: siteR, categoryLabel: "3D", stamp: "2026-10-23", total: 1, hasCard: false, now: 0 };
   const html = entryPageHtml({ ...common, entry: { ...cardBase, thumb: { path: "thumbs/x.webp", width: 640, height: 400 }, publisher: "Kenney" } });
-  has("entry page: strip image", html, '<figure class="entry-strip"><img class="entry-thumb-img" src="../../thumbs/x.webp"');
+  has("entry page: strip image", html, '<img class="entry-thumb-img" src="../../thumbs/x.webp"');
+  has("entry page: strip capped at twice its width", html, '<figure class="entry-strip" style="--thumb-max:');
+  has("entry page: strip image loads first", html, 'loading="eager" fetchpriority="high"');
   has("entry page: credit line", html, '<figcaption class="entry-credit">Preview image from Kenney, shown under CC0</figcaption>');
   has("entry page: one primary action", html, '<p class="page-actions"><a class="btn" href="https://x.itch.io/p"');
   has("entry page: secondary links row", html, '<p class="page-links">');
@@ -1096,6 +1098,17 @@ eq("search: q from the URL is capped", readState(`?q=${"a".repeat(5000)}`, { q:
   has("modulepreload: head emits the links", baseHeadHtml({ site: { siteUrl: "https://s/", title: "T", tagline: "x" }, title: "T", description: "d", url: "https://s/", root: "../../", modules: ["a.js"] }), '<link rel="modulepreload" href="../../a.js" />');
 }
 
+/* entry links read as names; thumbnails size honestly ------------------- */
+{
+  const r = makeLinkResolver({ entryPath: "catalog/2d/a.md", idByPath: new Map([["catalog/2d/b.md", "b"]]), repo: "https://g/r", kindOf: () => null, nameById: new Map([["b", "Bee Pack"]]) });
+  has("links: an id label becomes the entry name", renderInline("[b](b.md)", r), ">Bee Pack</a>");
+  has("links: a written label is kept", renderInline("[the bee one](b.md)", r), ">the bee one</a>");
+  const { thumbHtml: th } = await import("./cards.mjs");
+  has("thumbs: small preview contained", th({ thumb: { path: "t/a.webp", width: 160, height: 120 } }), 'class="entry-thumb-img is-small"');
+  lacks("thumbs: normal preview not marked small", th({ thumb: { path: "t/a.webp", width: 640, height: 400 } }), "is-small");
+  has("thumbs: eager strip image", th({ thumb: { path: "t/a.webp", width: 640, height: 400 } }, "", undefined, { eager: true }), 'loading="eager" fetchpriority="high"');
+}
+
 /* report (keep last) ------------------------------------------------------ */
 if (failures.length) {
   console.error(`lib.test failed (${failures.length}):`);

site/lib/links.mjs

@@ -25,7 +25,7 @@ export function caseMismatch(linked, onDisk) {
   return null;
 }
 
-export function makeLinkResolver({ entryPath, idByPath, repo, kindOf, entryBase = "../" }) {
+export function makeLinkResolver({ entryPath, idByPath, repo, kindOf, entryBase = "../", nameById }) {
   const dir = path.posix.dirname(entryPath);
   return (raw) => {
     if (EXTERNAL_SCHEME_RE.test(raw)) return { href: raw, external: true };
@@ -44,7 +44,7 @@ export function makeLinkResolver({ entryPath, idByPath, repo, kindOf, entryBase
     }
     const repoPath = path.posix.normalize(path.posix.join(dir, decoded)).replace(/\/$/, "");
     const id = idByPath.get(repoPath);
-    if (id) return { href: `${entryBase}${id}/${hash}`, external: false };
+    if (id) return { href: `${entryBase}${id}/${hash}`, external: false, entryId: id, entryName: nameById ? nameById.get(id) : undefined };
     const kind = repoPath.startsWith("..") ? null : kindOf(repoPath);
     if (!kind) throw new LinkError(`${entryPath}: link target "${raw}" does not exist`);
     const mode = kind === "dir" ? "tree" : "blob";

site/lib/markdown.mjs

@@ -63,9 +63,12 @@ export function renderInline(text, resolveLink) {
   // Links. The label keeps bold, italic and code; the href goes through the
   // resolver.
   s = s.replace(LINK_RE, (_, label, href) => {
-    const { href: out, external } = resolveLink(href);
+    const { href: out, external, entryId, entryName } = resolveLink(href);
     const rel = external ? ' rel="noopener noreferrer"' : "";
-    return keep(`<a href="${esc(out)}"${rel}>${marks(esc(label))}</a>`);
+    // Related lists are written as [kenney-ui-pack](kenney-ui-pack.md); a
+    // reader should see the entry's name, not its file name.
+    const text = entryName && label.trim() === entryId ? esc(entryName) : marks(esc(label));
+    return keep(`<a href="${esc(out)}"${rel}>${text}</a>`);
   });
   // Autolinks in angle brackets.
   s = s.replace(/<(https?:\/\/[^\s<>]+)>/g, (_, url) => keep(`<a href="${esc(url)}" rel="noopener noreferrer">${esc(url)}</a>`));

site/public/styles.css

@@ -1785,6 +1785,12 @@ input:focus-visible,
   object-fit: cover;
 }
 
+/* A small stored preview is shown whole rather than cropped and scaled up. */
+.entry-thumb-img.is-small {
+  object-fit: contain;
+  background: var(--surface);
+}
+
 /* No permitted image: the entry's name on the checker an editor shows behind
    a sprite, so the tile still reads as "asset", not "missing". */
 .entry-tile {
@@ -2104,11 +2110,39 @@ body.card-focus .to-top {
 .entry-strip .entry-thumb-img {
   display: block;
   width: 100%;
+  max-width: var(--thumb-max, 100%);
   height: auto;
   max-height: 360px;
+  margin: 0 auto;
   object-fit: contain;
 }
 
+/* The licence verdict and the source link, repeated under the title on a
+   phone, where the facts panel starts below the fold. */
+.entry-verdict {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .entry-verdict {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem 0.75rem;
+    margin: 0.25rem 0 0.75rem;
+    font-size: 0.9rem;
+  }
+
+  .entry-verdict .btn {
+    flex-basis: 100%;
+    text-align: center;
+  }
+
+  .entry-strip .entry-thumb-img {
+    max-height: 160px;
+  }
+}
+
 .entry-credit {
   padding: 0.4rem 0.75rem;
   border-top: 1px solid var(--line);