v3: generated placeholder thumbnails for pages with no preview image, and a fix for hotlink-protected ones
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 47s

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>
This commit is contained in:
khannurien
2026-08-11 19:43:55 +00:00
parent 0e138be6df
commit 1cb904d2cf
21 changed files with 736 additions and 130 deletions

View File

@@ -3,12 +3,20 @@ import type { RichContentProvider } from "../rich-content-service.ts";
import { getDump } from "../dump-service.ts";
import { getUserByUsername } from "../user-service.ts";
import { getPlaylistById } from "../playlist-service.ts";
import { PUBLIC_URL } from "../../config.ts";
import { PUBLIC_URL, THEME_COLOR } from "../../config.ts";
const DUMP_RE = /^\/dumps\/([^/]+)$/;
const USER_RE = /^\/users\/([^/]+)$/;
const PLAYLIST_RE = /^\/playlists\/([^/]+)$/;
// Internal links carry gerbeur's own branding, so an art-less one still gets a
// recognizable placeholder instead of a generic tint.
const SELF_BRANDING = {
siteName: "gerbeur",
faviconUrl: `${PUBLIC_URL}/apple-touch-icon.png`,
accentColor: THEME_COLOR,
} as const;
export const selfProvider: RichContentProvider = {
name: "self",
@@ -38,7 +46,7 @@ export const selfProvider: RichContentProvider = {
return Promise.resolve({
type: "generic",
url,
siteName: "gerbeur",
...SELF_BRANDING,
title: dump.title,
description: dump.comment,
thumbnailUrl,
@@ -54,7 +62,7 @@ export const selfProvider: RichContentProvider = {
return Promise.resolve({
type: "generic",
url,
siteName: "gerbeur",
...SELF_BRANDING,
title: user.username,
description: user.description,
thumbnailUrl,
@@ -70,7 +78,7 @@ export const selfProvider: RichContentProvider = {
return Promise.resolve({
type: "generic",
url,
siteName: "gerbeur",
...SELF_BRANDING,
title: playlist.title,
description: playlist.description,
thumbnailUrl,