Changeset 0101d0a in Klonkt for src/services/EmbedResolver.js

Timestamp:

07/28/2026 08:22:37 AM (6 weeks ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

c52dc82

Parents:

b258a79

Message:

Embeds toonden niets: OpenGraph erbij en een backfill

Twee oorzaken, allebei mijn eigen gat.

OPENGRAPH ONTBRAK. Ik had oEmbed gebouwd als de generieke weg, maar het grootste
deel van het web levert dat helemaal niet. Link-previews met een thumbnail
draaien in de praktijk op OpenGraph, en dat is ook wat Mastodon leest. Gecheckt
op een URL uit onze eigen feed: og:image en og:title wel, oEmbed niet. Zonder die
stap loste vrijwel elke link op naar kind=link en werd er dus niets opgeslagen,
en bleef de kaart leeg. OpenGraph zit nu in dezelfde keten, na oEmbed en voor de
kale link, en gebruikt dezelfde pagina-fetch: het kost geen extra request. De
fetch stuurt nu ook een User-Agent mee, want een deel van het web geeft z-n
og-tags alleen aan iets dat op een browser lijkt.

GEEN BACKFILL. embed_json werd alleen gevuld bij nieuwe binnenkomende posts, dus
alle 359 bestaande rijen bleven leeg: precies wat je ziet als je de app opent.
Self-heal v16 haalt het alsnog op, alleen voor rijen zonder quote en zonder
embed, dus een pagina-fetch per kandidaat en nooit opnieuw.

Changed files:
src/services/EmbedResolver.js

• findOpenGraph (og:image/title/site_name, met twitter:-fallback)
• resolveEmbed: OpenGraph na oEmbed, een pagina-fetch voor beide
• liveIO: User-Agent op de pagina-fetch

src/services/ActivityPubService.js

• SELFHEAL_VERSION 15 -> 16: embed_json backfillen

test/embed-resolver.test.js

• 4 tests: og lezen + entities, twitter-fallback en non-http image geweigerd, oEmbed wint nog steeds van OpenGraph, en een og-only pagina levert een kaart

remarks: 213 tests groen. End-to-end gedraaid op een echte feed-URL: titel,
provider en thumbnail komen eruit.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:

• src/services/EmbedResolver.js (modified) (5 diffs)

src/services/EmbedResolver.js

@@ -35 +35 @@
 function decodeEntities(s) {
   return String(s).replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, "'");
+}
+
+/**
+ * OpenGraph, the one that actually carries link previews on the open web.
+ * oEmbed is the richer protocol but most sites simply do not implement it;
+ * og:image / og:title is what Mastodon and everyone else reads, so it is the
+ * fallback that makes thumbnails appear at all. Same page fetch as the oEmbed
+ * discovery, so it costs nothing extra.
+ */
+export function findOpenGraph(html) {
+  if (!html || typeof html !== 'string') return null;
+  const meta = {};
+  for (const tag of html.match(/<meta\b[^>]*>/gi) || []) {
+    const key = (tag.match(/\b(?:property|name)\s*=\s*["']([^"']+)["']/i) || [])[1];
+    if (!key) continue;
+    const k = key.toLowerCase();
+    if (!/^(og:image|og:title|og:site_name|og:description|twitter:image|twitter:title)$/.test(k)) continue;
+    const val = (tag.match(/\bcontent\s*=\s*["']([^"']*)["']/i) || [])[1];
+    if (val && !meta[k]) meta[k] = decodeEntities(val);
+  }
+  const image = meta['og:image'] || meta['twitter:image'];
+  const title = meta['og:title'] || meta['twitter:title'];
+  if (!image && !title) return null;
+  return { image: image && /^https?:\/\//i.test(image) ? image : null, title: title || null, site: meta['og:site_name'] || null };
 }
 
@@ -118 +142 @@
   }
 
-  // 3. oEmbed: the generic path for everything else.
-  if (io.getPage && io.getJSON) {
+  // 3. oEmbed, then OpenGraph. One page fetch serves both: oEmbed is the richer
+  //    protocol, OpenGraph is the one most of the web actually ships.
+  if (io.getPage) {
     const page = await io.getPage(url).catch(() => null);
-    const endpoint = findOEmbedEndpoint(page);
-    if (endpoint) {
-      const o = await io.getJSON(endpoint).catch(() => null);
-      const card = fromOEmbed(url, o);
-      if (card) return card;
+    if (page) {
+      const endpoint = findOEmbedEndpoint(page);
+      if (endpoint && io.getJSON) {
+        const o = await io.getJSON(endpoint).catch(() => null);
+        const card = fromOEmbed(url, o);
+        if (card) return card;
+      }
+      const og = findOpenGraph(page);
+      if (og) {
+        return {
+          kind: 'opengraph',
+          url,
+          title: og.title,
+          author: og.site ? { name: og.site, handle: null, icon: null } : null,
+          provider: og.site,
+          html: null,
+          media: og.image ? [{ url: og.image, type: 'image/*' }] : [],
+        };
+      }
     }
   }
@@ -140 +179 @@
 
 const MAX_BODY = 512_000;   // an oEmbed page/endpoint is small; refuse the rest
-
-async function safeText(safeFetch, url, accept) {
+const UA = 'Mozilla/5.0 (compatible; Klonkt/1.0; +https://klonkt.com)';
+
+async function safeText(safeFetch, url, accept, extra = {}) {
   try {
-    const r = await safeFetch(url, { headers: { Accept: accept } });
+    const r = await safeFetch(url, { headers: { Accept: accept, ...extra } });
     if (!r.ok) return null;
     if (Number(r.headers.get('content-length') || 0) > MAX_BODY) return null;
@@ -163 +203 @@
       try { return JSON.parse(body); } catch { return null; }   // an HTML page is simply not AP
     },
-    getPage: (u) => safeText(safeFetch, u, 'text/html'),
+    // Plenty of sites only hand out their OpenGraph tags to something that
+    // looks like a browser, so the page fetch identifies itself.
+    getPage: (u) => safeText(safeFetch, u, 'text/html', { 'User-Agent': UA }),
     getJSON: async (u) => {
       const body = await safeText(safeFetch, u, 'application/json');
@@ -179 +221 @@
 }
 
-export default { resolveEmbed, findOEmbedEndpoint, looksLikeAPObject, fromOEmbed, fromAPObject, liveIO };
+export default { resolveEmbed, findOEmbedEndpoint, findOpenGraph, looksLikeAPObject, fromOEmbed, fromAPObject, liveIO };