articles: strip dead WP image tags from imported post bodies

rewriteLegacyImageUrlsInHtml only swapped URLs that had a mapping in
legacy-image-map.json — anything missing the map was left pointing at
the dead https://www.broadcastbeat.com/wp-content/uploads/ host (404
in browsers, bad for SEO, broken-image icons everywhere).

New stripDeadLegacyImages() pass runs after the rewrite and removes:
- <figure> blocks whose only inner image is a dead WP image
- <a> wrappers around dead images
- Bare <img dead> tags
- Empty <figure> leftovers
…leaving body copy intact and figcaption-less.

cleanLegacyImages() is the one-call helper that pipes both steps.
Applied via rowToArticle so every /news/<slug> render gets it.
This commit is contained in:
Ryan Salazar
2026-05-27 13:20:42 +00:00
parent eb9029e311
commit 95a230b1ef
2 changed files with 39 additions and 2 deletions

View File

@@ -1,6 +1,6 @@
import { createClient } from "@supabase/supabase-js"; import { createClient } from "@supabase/supabase-js";
import type { Article } from "./types"; import type { Article } from "./types";
import { rewriteLegacyImageUrl, rewriteLegacyImageUrlsInHtml } from "@/lib/legacy-image"; import { rewriteLegacyImageUrl, cleanLegacyImages } from "@/lib/legacy-image";
const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL!; const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const SUPABASE_ANON = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!; const SUPABASE_ANON = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
@@ -128,7 +128,7 @@ function rowToArticle(row: ImportedPostRow, section: Section = "news"): Article
const image = row.featured_image const image = row.featured_image
? rewriteLegacyImageUrl(row.featured_image) ? rewriteLegacyImageUrl(row.featured_image)
: FALLBACK_IMAGE; : FALLBACK_IMAGE;
const content = rewriteLegacyImageUrlsInHtml(row.content || ""); const content = cleanLegacyImages(row.content || "");
const author = row.author_name || "Broadcast Beat"; const author = row.author_name || "Broadcast Beat";
return { return {
slug: row.wp_slug, slug: row.wp_slug,

View File

@@ -32,3 +32,40 @@ export function rewriteLegacyImageUrlsInHtml(html: string): string {
(m) => rewriteLegacyImageUrl(m), (m) => rewriteLegacyImageUrl(m),
); );
} }
/**
* Strip <img>, <picture>, and their wrapping <figure>/<a> tags whose src
* still points at the dead WP host AFTER rewriteLegacyImageUrl ran. These
* load 404s in the browser and hurt SEO; better to remove than to leave
* broken image icons. Tags whose src is anything else are left alone.
*/
export function stripDeadLegacyImages(html: string): string {
if (!html) return html;
// Match <img> tags whose src still hits the dead WP host.
const DEAD_HOST_RE = /https?:\/\/(?:www\.)?broadcastbeat\.com\/wp-content\/uploads\//i;
// Drop entire <figure>...</figure> blocks whose only inner content is a
// dead-image <img>. Preserves figures that wrap working images.
let out = html.replace(/<figure\b[^>]*>([\s\S]*?)<\/figure>/gi, (full, inner) => {
if (!/<img\b[^>]*\bsrc\s*=\s*["'][^"']*broadcastbeat\.com\/wp-content\/uploads\/[^"']*["']/i.test(inner)) return full;
// figure contains a dead image — drop entirely
return "";
});
// Drop <a>…<img dead …>…</a> wrappers
out = out.replace(/<a\b[^>]*>\s*<img\b[^>]*\bsrc\s*=\s*["'][^"']*broadcastbeat\.com\/wp-content\/uploads\/[^"']*["'][^>]*\/?>\s*<\/a>/gi, "");
// Drop bare <img dead …>
out = out.replace(/<img\b[^>]*\bsrc\s*=\s*["'][^"']*broadcastbeat\.com\/wp-content\/uploads\/[^"']*["'][^>]*\/?>/gi, "");
// Drop empty <figure></figure> left over after image removal.
out = out.replace(/<figure\b[^>]*>\s*(?:<figcaption\b[^>]*>\s*<\/figcaption>\s*)?<\/figure>/gi, "");
return out;
}
/** One-call helper: rewrite mapped URLs, then strip anything still dead. */
export function cleanLegacyImages(html: string): string {
return stripDeadLegacyImages(rewriteLegacyImageUrlsInHtml(html));
}