1cb904d2cf
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>
92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
import type { RichContent } from "../../model/interfaces.ts";
|
|
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, 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",
|
|
|
|
matches(url: string): boolean {
|
|
try {
|
|
const { pathname } = new URL(url);
|
|
return DUMP_RE.test(pathname) ||
|
|
USER_RE.test(pathname) ||
|
|
PLAYLIST_RE.test(pathname);
|
|
} catch {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
fetch(url: string): Promise<RichContent> {
|
|
const { pathname } = new URL(url);
|
|
|
|
const dumpMatch = pathname.match(DUMP_RE);
|
|
if (dumpMatch) {
|
|
const dump = getDump(dumpMatch[1]);
|
|
let thumbnailUrl: string | undefined;
|
|
if (dump.kind === "file" && dump.fileMime?.startsWith("image/")) {
|
|
thumbnailUrl = `${PUBLIC_URL}/api/files/${dump.id}`;
|
|
} else if (dump.richContent?.thumbnailUrl) {
|
|
thumbnailUrl = dump.richContent.thumbnailUrl;
|
|
}
|
|
return Promise.resolve({
|
|
type: "generic",
|
|
url,
|
|
...SELF_BRANDING,
|
|
title: dump.title,
|
|
description: dump.comment,
|
|
thumbnailUrl,
|
|
});
|
|
}
|
|
|
|
const userMatch = pathname.match(USER_RE);
|
|
if (userMatch) {
|
|
const user = getUserByUsername(userMatch[1]);
|
|
const thumbnailUrl = user.avatarMime
|
|
? `${PUBLIC_URL}/api/avatars/${user.id}`
|
|
: undefined;
|
|
return Promise.resolve({
|
|
type: "generic",
|
|
url,
|
|
...SELF_BRANDING,
|
|
title: user.username,
|
|
description: user.description,
|
|
thumbnailUrl,
|
|
});
|
|
}
|
|
|
|
const playlistMatch = pathname.match(PLAYLIST_RE);
|
|
if (playlistMatch) {
|
|
const playlist = getPlaylistById(playlistMatch[1]);
|
|
const thumbnailUrl = playlist.imageMime
|
|
? `${PUBLIC_URL}/api/playlists/${playlist.id}/image`
|
|
: undefined;
|
|
return Promise.resolve({
|
|
type: "generic",
|
|
url,
|
|
...SELF_BRANDING,
|
|
title: playlist.title,
|
|
description: playlist.description,
|
|
thumbnailUrl,
|
|
});
|
|
}
|
|
|
|
// Should not reach here if matches() is correct
|
|
return Promise.resolve({ type: "generic", url });
|
|
},
|
|
};
|