v3: generated placeholder thumbnails for pages with no preview image, and a fix for hotlink-protected ones

Thumbnails were failing in two different ways that both ended as an empty box.

Cloudflare hotlink protection answers a cross-site Referer with 403, so images
we had extracted correctly (dles.aukspot.com's og:image among them) never
rendered — every onError handler set display:none and swallowed it. The new
Thumbnail component loads with referrerPolicy="no-referrer", retries once
through /api/proxy-image for hosts that reject an empty referrer too, and only
then falls back to a placeholder.

Separately, the extraction cascade ended at the page's icon and then a guessed
/favicon.ico, so thumbnailUrl was almost never empty — just a 16x16 icon
cover-cropped into a 128x72 box. It now stops at real artwork, with faviconUrl
and accentColor (theme-color / msapplication-TileColor / mask-icon) as their own
fields. An absent thumbnailUrl finally means "no artwork", which is what makes
the placeholder possible: the site's own color mixed into the theme surface,
with its favicon centered on it, or its initial. Contrast holds for any
third-party color by construction rather than by luminance math, so nyt only
has to set --thumb-tint-strength to 0% to stay monochrome and geocities only
has to raise it. Missing accents fall back to a stable hostname-derived hue, so
rows saved before this get a tint with no backfill.

Migration 0011 reclassifies favicon-shaped thumbnailUrls on existing dumps.
The journal mosaic keeps its pull-quote and text fallbacks — the placeholder
appears there only to repair a broken image.

Also fixed: refresh silently overwrote good metadata with a failure stub, the
refresh button swallowed every error, refresh never broadcast the update,
extractBestIcon ranked SVG icons below 16x16 PNGs, and shared links with no
artwork carried no og:image at all.

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

api/middleware/og.ts

@@ -11,6 +11,8 @@ interface OGMeta {
   title: string;
   description?: string;
   imageUrl?: string;
+  /** True only for real artwork — a square site icon must not claim a wide card. */
+  imageIsWide?: boolean;
   url: string;
 }
 
@@ -23,7 +25,9 @@ function escapeAttr(s: string): string {
 }
 
 function buildTags(meta: OGMeta): string {
-  const card = meta.imageUrl ? "summary_large_image" : "summary";
+  const card = meta.imageUrl && meta.imageIsWide
+    ? "summary_large_image"
+    : "summary";
   const tags = [
     `<title>${escapeAttr(meta.title)}</title>`,
     `<meta property="og:site_name" content="${OG_SITE_NAME}" />`,
@@ -105,10 +109,14 @@ export async function ogMiddleware(ctx: Context, next: Next) {
       } else if (dump.richContent?.thumbnailUrl) {
         imageUrl = dump.richContent.thumbnailUrl;
       }
+      // No artwork: fall back to our own site icon rather than the target's
+      // favicon, which is typically too small to survive a social card (and may
+      // be hotlink-protected).
       meta = {
         title: dump.title,
         description: dump.comment,
-        imageUrl,
+        imageUrl: imageUrl ?? `${origin}/apple-touch-icon.png`,
+        imageIsWide: !!imageUrl,
         url: pageUrl,
       };
     } catch { /* not found or private — serve default */ }
@@ -121,7 +129,7 @@ export async function ogMiddleware(ctx: Context, next: Next) {
       meta = {
         title: user.username,
         description: user.description,
-        imageUrl,
+        imageUrl: imageUrl ?? `${origin}/apple-touch-icon.png`,
         url: pageUrl,
       };
     } catch { /* not found */ }
@@ -135,7 +143,7 @@ export async function ogMiddleware(ctx: Context, next: Next) {
         meta = {
           title: playlist.title,
           description: playlist.description,
-          imageUrl,
+          imageUrl: imageUrl ?? `${origin}/apple-touch-icon.png`,
           url: pageUrl,
         };
       }