fix(feed): repair broken article thumbnails from doubled image URLs

HackerNoon's RSS media:thumbnail/media:content URLs are malformed at the
source — an already-absolute CDN URL prefixed with their own origin
(https://hackernoon.com/https://cdn.hackernoon.com/…), which 404s. Our
ingestion stored them verbatim, and the redesigned cards SSR the <img>,
so the broken-image icon stuck: the error event fires before React
hydrates and attaches onError, so the fallback never runs.

- add unwrapDoubledUrl() (utils/url.ts) + unit tests
- card: unwrap at render and detect pre-hydration failures via a ref
  callback, so a dead image collapses to no thumbnail (not a broken icon)
- sanitise URLs at ingestion (fetch-rss, admin/sync-feeds — media + OG)
- one-off scrub script for already-stored rows

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: NiallJoeMaher

app/api/admin/sync-feeds/route.ts

@@ -11,6 +11,7 @@ import { eq } from "drizzle-orm";
 import Parser from "rss-parser";
 import { customAlphabet } from "nanoid";
 import { fetchOgImage } from "@/lib/og-image";
+import { ensureHttps, unwrapDoubledUrl } from "@/utils/url";
 
 // Generate Reddit-style short IDs: lowercase + numbers, 7 characters
 const generateShortId = customAlphabet(
@@ -128,10 +129,14 @@ function extractImageUrl(item: Parser.Item): string | null {
     | { url?: string; type?: string }
     | undefined;
 
-  if (mediaContent?.$?.url) return mediaContent.$.url;
-  if (mediaThumbnail?.$?.url) return mediaThumbnail.$.url;
+  // Some feeds (e.g. HackerNoon's media:thumbnail) prefix an already-absolute
+  // CDN URL with their own origin, producing a 404ing doubled URL — unwrap it.
+  if (mediaContent?.$?.url)
+    return ensureHttps(unwrapDoubledUrl(mediaContent.$.url));
+  if (mediaThumbnail?.$?.url)
+    return ensureHttps(unwrapDoubledUrl(mediaThumbnail.$.url));
   if (enclosure?.url && enclosure.type?.startsWith("image/"))
-    return enclosure.url;
+    return ensureHttps(unwrapDoubledUrl(enclosure.url));
 
   return null;
 }
@@ -246,7 +251,9 @@ export async function POST(request: Request) {
 
           // Fetch OG image from the article URL
           try {
-            const ogImageUrl = await fetchOgImage(item.link);
+            const ogImageUrl = ensureHttps(
+              unwrapDoubledUrl(await fetchOgImage(item.link)),
+            );
             if (ogImageUrl) {
               await db
                 .update(aggregated_article)

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import Link from "next/link";
 import * as Sentry from "@sentry/nextjs";
 import { api } from "@/server/trpc/react";
 import { signIn, useSession } from "next-auth/react";
 import { toast } from "sonner";
 import VoteControl from "@/components/Vote/VoteControl";
 import { ReportButton } from "@/components/ReportModal/ReportModal";
-import { ensureHttps } from "@/utils/url";
+import { ensureHttps, unwrapDoubledUrl } from "@/utils/url";
 import { getRelativeTime } from "@/utils/relativeTime";
 
 export type ContentType = "POST" | "LINK";
@@ -94,10 +94,18 @@ const UnifiedContentCard = ({
   const [isBookmarked, setIsBookmarked] = useState(initialBookmarked);
   const [shared, setShared] = useState(false);
 
+  // SSR race: a broken <img> begins loading during HTML parse and its `error`
+  // event can fire before React hydrates and attaches `onError`, so the handler
+  // never runs and the broken image sticks. This ref callback runs on mount — a
+  // loaded-but-zero-size image already failed — and hides it like onError would.
+  const checkBrokenImage = useCallback((node: HTMLImageElement | null) => {
+    if (node?.complete && node.naturalWidth === 0) setImageError(true);
+  }, []);
+
   const { data: session } = useSession();
   const utils = api.useUtils();
 
-  const imageUrl = ensureHttps(rawImageUrl);
+  const imageUrl = ensureHttps(unwrapDoubledUrl(rawImageUrl));
 
   // Card URL priority (slug ends with urlId, so it stays canonical; urlId is the
   // fallback when slug is missing): discussion /d/ > member /{username}/ >
@@ -200,7 +208,7 @@ const UnifiedContentCard = ({
 
   return (
     <article
-      className="group rounded-lg border border-hairline bg-surface p-5 transition-colors duration-base ease-out hover:border-strong"
+      className="group rounded-lg border border-hairline bg-surface p-4 transition-colors duration-base ease-out hover:border-strong sm:p-5"
       data-testid="content-card"
     >
       <div className="flex gap-4">
@@ -226,17 +234,17 @@ const UnifiedContentCard = ({
               (handleHref ? (
                 <Link
                   href={handleHref}
-                  className="whitespace-nowrap text-sm font-semibold text-fg hover:underline"
+                  className="min-w-0 max-w-full truncate text-sm font-semibold text-fg hover:underline"
                 >
                   {authorName}
                 </Link>
               ) : (
-                <span className="whitespace-nowrap text-sm font-semibold text-fg">
+                <span className="min-w-0 max-w-full truncate text-sm font-semibold text-fg">
                   {authorName}
                 </span>
               ))}
             <span
-              className="whitespace-nowrap font-mono text-xs text-faint"
+              className="min-w-0 basis-full truncate font-mono text-xs text-faint"
               // Cards now SSR (feed initialData) and relative times derive
               // from Date.now() — a minute boundary between server render and
               // hydration would otherwise log a text mismatch.
@@ -293,6 +301,7 @@ const UnifiedContentCard = ({
             className="relative h-[68px] w-[104px] flex-shrink-0 self-start overflow-hidden rounded-sm border border-hairline"
           >
             <img
+              ref={checkBrokenImage}
               src={imageUrl}
               alt=""
               className="h-full w-full object-cover"

scripts/fetch-rss.ts

@@ -13,6 +13,7 @@ import { eq, and, isNotNull } from "drizzle-orm";
 import { nanoid } from "nanoid";
 import Parser from "rss-parser";
 import crypto from "crypto";
+import { ensureHttps, unwrapDoubledUrl } from "../utils/url";
 
 const parser = new Parser({
   timeout: 10000,
@@ -231,6 +232,10 @@ async function fetchAndProcessFeed(source: FeedSource) {
         console.log(`    ✓ ${readTimeMins} min read`);
       }
 
+      // Some feeds (e.g. HackerNoon's media:thumbnail) prefix an already-
+      // absolute CDN URL with their own origin, producing a 404ing doubled URL.
+      imageUrl = ensureHttps(unwrapDoubledUrl(imageUrl));
+
       // Rate limit: small delay between fetches
       await delay(200);
 

scripts/fix-doubled-image-urls.ts

@@ -0,0 +1,83 @@
+/**
+ * One-off scrub for image URLs that an upstream feed prefixed with its own
+ * origin, leaving a doubled-up, 404ing URL — e.g. HackerNoon's media:thumbnail:
+ *   https://hackernoon.com/https://cdn.hackernoon.com/images/x.png
+ *
+ * The card now unwraps these at render, so this only cleans the stored data
+ * (used by server-side OG/SEO tags). Safe to re-run — it's idempotent.
+ *
+ * Usage: npx tsx scripts/fix-doubled-image-urls.ts
+ */
+
+import { db } from "../server/db";
+import { posts, aggregated_article } from "../server/db/schema";
+import { eq, like, or } from "drizzle-orm";
+import { ensureHttps, unwrapDoubledUrl } from "../utils/url";
+
+// Matches a scheme that appears AFTER the first character — i.e. a second
+// embedded "http(s)://" further along the string. Cheap pre-filter; the real
+// decision is made by unwrapDoubledUrl per row.
+const DOUBLED = "%://http%://%";
+
+async function fixPosts() {
+  const rows = await db
+    .select({ id: posts.id, coverImage: posts.coverImage })
+    .from(posts)
+    .where(like(posts.coverImage, DOUBLED));
+
+  let fixed = 0;
+  for (const row of rows) {
+    const cleaned = ensureHttps(unwrapDoubledUrl(row.coverImage));
+    if (cleaned !== row.coverImage) {
+      await db
+        .update(posts)
+        .set({ coverImage: cleaned })
+        .where(eq(posts.id, row.id));
+      fixed++;
+    }
+  }
+  console.log(`posts.coverImage: ${fixed}/${rows.length} fixed`);
+}
+
+async function fixAggregatedArticles() {
+  const rows = await db
+    .select({
+      id: aggregated_article.id,
+      imageUrl: aggregated_article.imageUrl,
+      ogImageUrl: aggregated_article.ogImageUrl,
+    })
+    .from(aggregated_article)
+    .where(
+      or(
+        like(aggregated_article.imageUrl, DOUBLED),
+        like(aggregated_article.ogImageUrl, DOUBLED),
+      ),
+    );
+
+  let fixed = 0;
+  for (const row of rows) {
+    const imageUrl = ensureHttps(unwrapDoubledUrl(row.imageUrl));
+    const ogImageUrl = ensureHttps(unwrapDoubledUrl(row.ogImageUrl));
+    if (imageUrl !== row.imageUrl || ogImageUrl !== row.ogImageUrl) {
+      await db
+        .update(aggregated_article)
+        .set({ imageUrl, ogImageUrl })
+        .where(eq(aggregated_article.id, row.id));
+      fixed++;
+    }
+  }
+  console.log(`aggregated_article: ${fixed}/${rows.length} fixed`);
+}
+
+async function main() {
+  console.log("=== Scrubbing doubled image URLs ===");
+  await fixPosts();
+  await fixAggregatedArticles();
+  console.log("Done.");
+  process.exit(0);
+}
+
+main().catch((error) => {
+  console.error("Fatal error:", error);
+  process.exit(1);
+});

utils/url.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from "vitest";
+import { unwrapDoubledUrl, ensureHttps } from "./url";
+
+describe("unwrapDoubledUrl", () => {
+  it("unwraps a URL prefixed with another origin (HackerNoon media:thumbnail bug)", () => {
+    expect(
+      unwrapDoubledUrl(
+        "https://hackernoon.com/https://cdn.hackernoon.com/images/A7coZ0.png",
+      ),
+    ).toBe("https://cdn.hackernoon.com/images/A7coZ0.png");
+  });
+
+  it("unwraps an http-wrapped https URL, keeping the inner scheme", () => {
+    expect(
+      unwrapDoubledUrl("http://example.com/https://cdn.example.com/x.png"),
+    ).toBe("https://cdn.example.com/x.png");
+  });
+
+  it("leaves a normal absolute URL untouched", () => {
+    expect(unwrapDoubledUrl("https://cdn.thenewstack.io/media/x.png")).toBe(
+      "https://cdn.thenewstack.io/media/x.png",
+    );
+  });
+
+  it("does not treat a scheme in the query string as a wrapper", () => {
+    // Only one real scheme at index 0 — a `?url=https://...` proxy param is left alone.
+    expect(
+      unwrapDoubledUrl("https://img.proxy/optimize?url=https://cdn.site/x.png"),
+    ).toBe("https://img.proxy/optimize?url=https://cdn.site/x.png");
+  });
+
+  it("passes through null/empty", () => {
+    expect(unwrapDoubledUrl(null)).toBeNull();
+    expect(unwrapDoubledUrl(undefined)).toBeNull();
+    expect(unwrapDoubledUrl("")).toBeNull();
+  });
+
+  it("composes with ensureHttps to clean a wrapped http CDN url", () => {
+    expect(
+      ensureHttps(
+        unwrapDoubledUrl(
+          "https://hackernoon.com/http://cdn.hackernoon.com/x.png",
+        ),
+      ),
+    ).toBe("https://cdn.hackernoon.com/x.png");
+  });
+});

utils/url.ts

@@ -29,6 +29,24 @@ export function safeExternalHref(
   return parsed.protocol === "https:" ? url.trim() : undefined;
 }
 
+/**
+ * Unwraps a URL that an upstream feed prefixed with its own origin, leaving an
+ * already-absolute URL doubled up — e.g. HackerNoon's `media:thumbnail` serves
+ * `https://hackernoon.com/https://cdn.hackernoon.com/x.png`, which 404s. We
+ * slice from the LAST embedded scheme so the inner, real URL wins. A normal URL
+ * (only scheme at index 0) and a `?url=https://...` proxy param are left intact.
+ */
+export function unwrapDoubledUrl(
+  url: string | null | undefined,
+): string | null {
+  if (!url) return null;
+  // Ignore a scheme that appears inside the query string — only unwrap when the
+  // embedded scheme sits in the path (before any `?`).
+  const path = url.split("?")[0];
+  const i = Math.max(path.lastIndexOf("http://"), path.lastIndexOf("https://"));
+  return i > 0 ? url.slice(i) : url;
+}
+
 /** Upgrades an `http://` URL to `https://`. Returns null for empty input. */
 export function ensureHttps(url: string | null | undefined): string | null {
   if (!url) return null;