cross-link: forum auto-link, NAB hub, sponsor strip, recent stories

Feature 3 — forum auto-linking
  Thread + reply bodies in /forum/thread/[id] now wrap company-name
  mentions with /manufacturers/<slug> links via a new client-side
  LinkifyPlainText component. Loads the directory list once per page
  (module-level promise cache), regex-scans each body, preserves
  whitespace, caps at 10 links per body to avoid clutter.
  CompanyMentionsHover mounted on the page so the same preview card
  pops on hover.
  Adds /api/public/companies/list — minimal { name, slug } directory
  feed, cached 10min.

Feature 4 — /nab-2026 live coverage hub
  New page aggregating every directory company with exhibits_nab=true.
  Three sections:
    - Coverage Partners — active advertisers exhibiting at NAB, larger
      tiles with emerald Sponsor border
    - Latest from the show floor — last 60 days of articles with NAB
      in the title, cinematic grid
    - All NAB 2026 exhibitors — alphabetical, capped at 200 with link
      to full /manufacturers directory
  Every company tile carries data-company-slug for hover previews.

Feature 5b — Sponsor logo strip on homepage
  New SponsorLogoStrip server component renders just above the footer
  on the homepage, showing logos of every current banner advertiser
  with a directory entry + logo. Each links to the manufacturer
  profile with the hover-card slug attribute.

Feature 5c — Recent coverage on manufacturer profiles
  /manufacturers/[slug] now includes a grid of the 6 most recent
  articles matching the company name in the title, with thumbnails.
  Renames the existing manufacturer_id-linked block to "Press
  releases" since it's a separate data source.
This commit is contained in:
Ryan Salazar
2026-05-27 12:55:25 +00:00
parent a59846a524
commit 2e78726291
7 changed files with 552 additions and 4 deletions

234
src/app/nab-2026/page.tsx Normal file
View File

@@ -0,0 +1,234 @@
import type { Metadata } from "next";
import Link from "next/link";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { createClient } from "@/lib/supabase/server";
import { createAdminClient } from "@/lib/supabase/admin";
import CompanyMentionsHover from "@/components/CompanyMentionsHover";
export const revalidate = 600;
export const metadata: Metadata = {
title: "NAB Show 2026 — Live Coverage Hub | Broadcast Beat",
description:
"Broadcast Beat's live coverage of NAB Show 2026: 1,100+ exhibitors, the latest product launches, booth-by-booth news, and editorial pick stories from the show floor.",
alternates: { canonical: "/nab-2026" },
openGraph: {
title: "NAB Show 2026 — Live Coverage Hub",
description:
"Live coverage, exhibitor list, and breaking product news from NAB Show 2026.",
type: "website",
url: "https://broadcastbeat.com/nab-2026",
},
};
type ExhibitorRow = {
slug: string;
company_name: string;
logo_url: string | null;
featured: boolean;
mention_count: number;
categories: string[] | null;
};
type ArticleRow = {
wp_slug: string;
title: string;
excerpt: string | null;
featured_image: string | null;
wp_published_at: string | null;
};
export default async function NabHub() {
const supabase = await createClient();
const { data: rawExhibitors } = await supabase
.from("tracked_companies")
.select("slug, company_name, logo_url, featured, mention_count, categories")
.eq("directory_visible", true)
.eq("exhibits_nab", true)
.not("slug", "is", null)
.order("featured", { ascending: false })
.order("mention_count", { ascending: false })
.order("company_name", { ascending: true })
.limit(2000);
const exhibitors = (rawExhibitors || []) as ExhibitorRow[];
// Sponsor lookup so the hub can bubble paying advertisers to the top.
let sponsors = new Set<string>();
try {
const adv = createAdminClient("adv");
const { data: ads } = await adv
.from("active_advertisers_by_property")
.select("company_name_lower")
.eq("property", "broadcastbeat");
sponsors = new Set((ads || []).map((r: any) => String(r.company_name_lower)));
} catch { /* tolerate */ }
// Group exhibitors: sponsors first, then everything else alphabetically.
const sponsorRows = exhibitors.filter((e) => sponsors.has(e.company_name.toLowerCase()));
const otherRows = exhibitors
.filter((e) => !sponsors.has(e.company_name.toLowerCase()))
.sort((a, b) => a.company_name.localeCompare(b.company_name));
// Recent NAB stories — anything published in the last 60 days with NAB in
// the title or tags. Cap at 30.
const sixtyDaysAgo = new Date(Date.now() - 60 * 24 * 3600 * 1000).toISOString();
const { data: rawArticles } = await supabase
.from("wp_imported_posts")
.select("wp_slug, title, excerpt, featured_image, wp_published_at")
.eq("status", "published")
.or("title.ilike.%NAB%,title.ilike.%NAB 2026%")
.gte("wp_published_at", sixtyDaysAgo)
.order("wp_published_at", { ascending: false })
.limit(30);
const articles = (rawArticles || []) as ArticleRow[];
return (
<div className="min-h-screen bg-white">
<Header />
<CompanyMentionsHover />
{/* Hero */}
<section className="bg-gradient-to-br from-amber-50 to-white border-b border-ink/10">
<div className="max-w-6xl mx-auto px-4 py-10">
<div className="flex items-baseline gap-3 mb-2">
<span className="text-[10px] font-bold uppercase tracking-widest bg-amber-100 text-amber-800 px-2 py-0.5 rounded">
Live coverage hub
</span>
<span className="text-xs text-ink/50">April 1116, 2026 · Las Vegas</span>
</div>
<h1 className="text-3xl md:text-5xl font-display font-bold text-ink mb-3">
NAB Show 2026
</h1>
<p className="text-ink/70 text-base max-w-3xl">
{exhibitors.length.toLocaleString()} exhibitors confirmed.
{sponsorRows.length > 0 && <> {sponsorRows.length} are Broadcast Beat coverage partners.</>}
{" "}Browse the directory, read the latest product news, and find every booth.
</p>
</div>
</section>
<div className="max-w-6xl mx-auto px-4 py-10 space-y-12">
{/* Featured / Coverage Partners */}
{sponsorRows.length > 0 && (
<section>
<header className="flex items-baseline justify-between mb-4">
<h2 className="text-xl font-display font-bold text-ink">
Coverage Partners at NAB
</h2>
<span className="text-xs text-ink/50">{sponsorRows.length} exhibiting partner{sponsorRows.length === 1 ? "" : "s"}</span>
</header>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
{sponsorRows.map((e) => (
<Link
key={e.slug}
href={`/manufacturers/${e.slug}`}
data-company-slug={e.slug}
className="bg-white border-2 border-emerald-300 rounded-lg p-3 hover:border-emerald-500 hover:shadow-md transition-all flex flex-col items-center text-center gap-2"
>
<div className="w-full h-16 flex items-center justify-center bg-ink/5 rounded">
{e.logo_url ? (
/* eslint-disable-next-line @next/next/no-img-element */
<img src={e.logo_url} alt={`${e.company_name} logo`} className="max-h-12 max-w-full object-contain" loading="lazy" />
) : (
<span className="text-2xl font-bold text-ink/40">{e.company_name.charAt(0).toUpperCase()}</span>
)}
</div>
<span className="font-semibold text-ink text-xs truncate w-full">{e.company_name}</span>
<span className="text-[9px] font-bold uppercase tracking-wider bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded">Sponsor</span>
</Link>
))}
</div>
</section>
)}
{/* Recent NAB-related stories */}
{articles.length > 0 && (
<section>
<header className="flex items-baseline justify-between mb-4">
<h2 className="text-xl font-display font-bold text-ink">
Latest from the show floor
</h2>
<Link href="/news?search=NAB+2026" className="text-xs text-brand-primary hover:underline">
See all NAB coverage
</Link>
</header>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{articles.slice(0, 9).map((a) => (
<Link
key={a.wp_slug}
href={`/news/${a.wp_slug}`}
className="group bg-white border border-ink/10 rounded-lg overflow-hidden hover:border-brand-primary hover:shadow-sm transition-all"
>
{a.featured_image && (
/* eslint-disable-next-line @next/next/no-img-element */
<img
src={a.featured_image}
alt=""
className="w-full aspect-video object-cover group-hover:scale-[1.02] transition-transform"
loading="lazy"
/>
)}
<div className="p-3">
<h3 className="font-semibold text-ink text-sm leading-snug group-hover:text-brand-primary line-clamp-3 mb-1">
{a.title}
</h3>
{a.wp_published_at && (
<p className="text-[10px] text-ink/50">
{new Date(a.wp_published_at).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
</p>
)}
</div>
</Link>
))}
</div>
</section>
)}
{/* Full exhibitor list */}
<section>
<header className="flex items-baseline justify-between mb-4">
<h2 className="text-xl font-display font-bold text-ink">
All NAB 2026 exhibitors
</h2>
<Link href="/manufacturers" className="text-xs text-brand-primary hover:underline">
Full directory
</Link>
</header>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
{otherRows.slice(0, 200).map((e) => (
<Link
key={e.slug}
href={`/manufacturers/${e.slug}`}
data-company-slug={e.slug}
className="bg-white border border-ink/10 rounded-md p-2.5 hover:border-brand-primary transition-all flex items-center gap-2.5"
>
{e.logo_url ? (
/* eslint-disable-next-line @next/next/no-img-element */
<img src={e.logo_url} alt="" className="w-10 h-10 rounded bg-ink/5 object-contain flex-shrink-0" loading="lazy" />
) : (
<div className="w-10 h-10 rounded bg-ink/5 flex items-center justify-center text-ink/40 font-bold text-sm flex-shrink-0">
{e.company_name.charAt(0).toUpperCase()}
</div>
)}
<span className="font-medium text-ink text-xs truncate">{e.company_name}</span>
</Link>
))}
</div>
{otherRows.length > 200 && (
<p className="text-center text-xs text-ink/50 mt-4">
Showing 200 of {otherRows.length.toLocaleString()} exhibitors.{" "}
<Link href="/manufacturers" className="text-brand-primary hover:underline">Browse the full directory </Link>
</p>
)}
</section>
</div>
<Footer />
</div>
);
}