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:
29
src/app/api/public/companies/list/route.ts
Normal file
29
src/app/api/public/companies/list/route.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { createAdminClient } from "@/lib/supabase/admin";
|
||||
|
||||
// Cache aggressively — directory rarely changes, and 1k+ companies is ~50KB.
|
||||
export const revalidate = 600;
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const svc = createAdminClient();
|
||||
const { data } = await svc
|
||||
.from("tracked_companies")
|
||||
.select("company_name, slug")
|
||||
.eq("directory_visible", true)
|
||||
.not("slug", "is", null)
|
||||
.not("company_name", "is", null);
|
||||
|
||||
const rows = (data || [])
|
||||
.filter((r: any) => r.company_name && r.slug)
|
||||
.map((r: any) => ({ name: String(r.company_name).trim(), slug: String(r.slug) }))
|
||||
.filter((r) => r.name.length >= 3);
|
||||
|
||||
return NextResponse.json(
|
||||
{ companies: rows },
|
||||
{ headers: { "Cache-Control": "public, s-maxage=600, stale-while-revalidate=1200" } },
|
||||
);
|
||||
} catch (e: any) {
|
||||
return NextResponse.json({ companies: [], error: e?.message || "error" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -8,6 +8,8 @@ import AdImage from '@/components/AdImage';
|
||||
import { ADS_300X250, rotateAll } from '@/lib/ads';
|
||||
import { createClient } from '@/lib/supabase/client';
|
||||
import SidebarAdStack from "@/components/SidebarAdStack";
|
||||
import LinkifyPlainText from "@/components/LinkifyPlainText";
|
||||
import CompanyMentionsHover from "@/components/CompanyMentionsHover";
|
||||
|
||||
// Inline ad slot inserted between forum replies every N posts.
|
||||
function InThreadAd({ adIndex }: { adIndex: number }) {
|
||||
@@ -368,7 +370,9 @@ export default function ForumThreadPage() {
|
||||
<span className="text-[#555] font-body text-xs">·</span>
|
||||
<span className="text-[#555] font-body text-xs">{thread.view_count} views</span>
|
||||
</div>
|
||||
<p className="text-[#d0d0d0] font-body text-sm leading-relaxed whitespace-pre-wrap">{thread.body}</p>
|
||||
<p className="text-[#d0d0d0] font-body text-sm leading-relaxed">
|
||||
<LinkifyPlainText body={thread.body} />
|
||||
</p>
|
||||
<VoteButtons
|
||||
targetType="thread"
|
||||
targetId={thread.id}
|
||||
@@ -408,7 +412,9 @@ export default function ForumThreadPage() {
|
||||
<span className="text-[#555] font-body text-xs">·</span>
|
||||
<span className="text-[#555] font-body text-xs">{timeAgo(reply.created_at)}</span>
|
||||
</div>
|
||||
<p className="text-[#d0d0d0] font-body text-sm leading-relaxed whitespace-pre-wrap">{reply.body}</p>
|
||||
<p className="text-[#d0d0d0] font-body text-sm leading-relaxed">
|
||||
<LinkifyPlainText body={reply.body} />
|
||||
</p>
|
||||
<VoteButtons
|
||||
targetType="reply"
|
||||
targetId={reply.id}
|
||||
@@ -537,6 +543,7 @@ export default function ForumThreadPage() {
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
<CompanyMentionsHover />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,6 +9,8 @@ import SpotlightCarousel from "./components/SpotlightCarousel";
|
||||
import ArticleFeed from "./components/ArticleFeed";
|
||||
import ScrollRevealSection from "@/components/ScrollRevealSection";
|
||||
import NewsletterSignup from "./components/NewsletterSignup";
|
||||
import SponsorLogoStrip from "@/components/SponsorLogoStrip";
|
||||
import CompanyMentionsHover from "@/components/CompanyMentionsHover";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Broadcast Beat — Broadcast Engineering News & Insights',
|
||||
@@ -166,8 +168,16 @@ export default function HomePage() {
|
||||
<NewsletterSignup />
|
||||
</ScrollRevealSection>
|
||||
|
||||
{/* Coverage Partners logo strip — current banner advertisers */}
|
||||
<ScrollRevealSection className="section-enter section-enter-5">
|
||||
<Suspense fallback={null}>
|
||||
<SponsorLogoStrip />
|
||||
</Suspense>
|
||||
</ScrollRevealSection>
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
<CompanyMentionsHover />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -41,11 +41,28 @@ async function loadManufacturer(slug: string) {
|
||||
.order("sort_order")
|
||||
.order("name");
|
||||
|
||||
// Recent stories: title contains the company name. The same heuristic the
|
||||
// article auto-linker and the hover card use — keeps the directory in sync
|
||||
// with the editorial coverage even when manufacturer_id isn't backfilled.
|
||||
const needle = String(data.company_name || "").trim();
|
||||
let recentStories: any[] = [];
|
||||
if (needle.length >= 3) {
|
||||
const { data: stories } = await supabase
|
||||
.from("wp_imported_posts")
|
||||
.select("wp_slug, title, excerpt, featured_image, wp_published_at, category")
|
||||
.eq("status", "published")
|
||||
.ilike("title", `%${needle.replace(/[%_]/g, "")}%`)
|
||||
.order("wp_published_at", { ascending: false, nullsFirst: false })
|
||||
.limit(12);
|
||||
recentStories = stories || [];
|
||||
}
|
||||
|
||||
return {
|
||||
company: data,
|
||||
shows: shows || [],
|
||||
pressReleases: pressReleases || [],
|
||||
executives: executives || [],
|
||||
recentStories,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -86,7 +103,7 @@ export default async function ManufacturerProfile({
|
||||
const { slug } = await params;
|
||||
const result = await loadManufacturer(slug);
|
||||
if (!result) notFound();
|
||||
const { company, shows, pressReleases, executives } = result;
|
||||
const { company, shows, pressReleases, executives, recentStories } = result;
|
||||
|
||||
const jsonLd = {
|
||||
"@context": "https://schema.org",
|
||||
@@ -339,9 +356,46 @@ export default async function ManufacturerProfile({
|
||||
</section>
|
||||
)}
|
||||
|
||||
{recentStories.length > 0 && (
|
||||
<section className="mb-10">
|
||||
<header className="flex items-baseline justify-between mb-3">
|
||||
<h2 className="text-lg font-display font-bold text-ink">Recent coverage</h2>
|
||||
<Link href={`/news?search=${encodeURIComponent(company.company_name)}`} className="text-xs text-brand-primary hover:underline">
|
||||
All stories →
|
||||
</Link>
|
||||
</header>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{recentStories.slice(0, 6).map((r: any) => (
|
||||
<Link
|
||||
key={r.wp_slug}
|
||||
href={`/news/${r.wp_slug}`}
|
||||
className="group bg-white border border-ink/10 rounded-md p-3 hover:border-brand-primary hover:shadow-sm transition-all flex gap-3"
|
||||
>
|
||||
{r.featured_image ? (
|
||||
/* eslint-disable-next-line @next/next/no-img-element */
|
||||
<img src={r.featured_image} alt="" className="w-20 h-14 rounded object-cover bg-ink/5 flex-shrink-0" loading="lazy" />
|
||||
) : (
|
||||
<div className="w-20 h-14 rounded bg-ink/5 flex-shrink-0" />
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-xs font-semibold text-ink leading-snug group-hover:text-brand-primary line-clamp-3">
|
||||
{r.title}
|
||||
</h3>
|
||||
{r.wp_published_at && (
|
||||
<p className="text-[10px] text-ink/50 mt-1">
|
||||
{new Date(r.wp_published_at).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{pressReleases.length > 0 && (
|
||||
<section className="mb-10">
|
||||
<h2 className="text-lg font-display font-bold text-ink mb-3">Recent news</h2>
|
||||
<h2 className="text-lg font-display font-bold text-ink mb-3">Press releases</h2>
|
||||
<ul className="space-y-2">
|
||||
{pressReleases.map((p) => (
|
||||
<li key={p.slug || p.source_url} className="text-sm">
|
||||
|
||||
234
src/app/nab-2026/page.tsx
Normal file
234
src/app/nab-2026/page.tsx
Normal 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 11–16, 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>
|
||||
);
|
||||
}
|
||||
125
src/components/LinkifyPlainText.tsx
Normal file
125
src/components/LinkifyPlainText.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type Company = { name: string; slug: string; needle: string };
|
||||
|
||||
// Module-level cache: fetched once per page load, reused across every
|
||||
// LinkifyPlainText instance on the page.
|
||||
let companyListPromise: Promise<Company[]> | null = null;
|
||||
|
||||
function loadCompanies(): Promise<Company[]> {
|
||||
if (companyListPromise) return companyListPromise;
|
||||
companyListPromise = (async () => {
|
||||
try {
|
||||
const r = await fetch("/api/public/companies/list");
|
||||
if (!r.ok) return [];
|
||||
const j = await r.json();
|
||||
const rows: Company[] = (j.companies || []).map((c: any) => ({
|
||||
name: c.name,
|
||||
slug: c.slug,
|
||||
needle: String(c.name).toLowerCase(),
|
||||
}));
|
||||
// Longest first so "Sony Pictures" beats "Sony"
|
||||
rows.sort((a, b) => b.needle.length - a.needle.length);
|
||||
return rows;
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
})();
|
||||
return companyListPromise;
|
||||
}
|
||||
|
||||
function escapeRegex(s: string): string {
|
||||
return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||
}
|
||||
|
||||
interface Segment {
|
||||
type: "text" | "link";
|
||||
text: string;
|
||||
slug?: string;
|
||||
}
|
||||
|
||||
function buildSegments(text: string, companies: Company[], maxLinks = 10): Segment[] {
|
||||
if (!text) return [];
|
||||
if (companies.length === 0) return [{ type: "text", text }];
|
||||
|
||||
const out: Segment[] = [];
|
||||
let cursor = 0;
|
||||
const seen = new Set<string>();
|
||||
let linkCount = 0;
|
||||
|
||||
while (cursor < text.length && linkCount < maxLinks) {
|
||||
// Find earliest match starting at or after cursor
|
||||
let best: { start: number; end: number; company: Company } | null = null;
|
||||
for (const c of companies) {
|
||||
if (seen.has(c.slug)) continue;
|
||||
const re = new RegExp(`(^|[^A-Za-z0-9])(${escapeRegex(c.name)})(?![A-Za-z0-9])`, "i");
|
||||
re.lastIndex = 0;
|
||||
const m = re.exec(text.slice(cursor));
|
||||
if (!m) continue;
|
||||
const absStart = cursor + m.index + m[1].length;
|
||||
const absEnd = absStart + m[2].length;
|
||||
if (!best || absStart < best.start || (absStart === best.start && absEnd - absStart > best.end - best.start)) {
|
||||
best = { start: absStart, end: absEnd, company: c };
|
||||
}
|
||||
}
|
||||
if (!best) break;
|
||||
if (best.start > cursor) {
|
||||
out.push({ type: "text", text: text.slice(cursor, best.start) });
|
||||
}
|
||||
out.push({ type: "link", text: text.slice(best.start, best.end), slug: best.company.slug });
|
||||
seen.add(best.company.slug);
|
||||
linkCount++;
|
||||
cursor = best.end;
|
||||
}
|
||||
if (cursor < text.length) out.push({ type: "text", text: text.slice(cursor) });
|
||||
return out;
|
||||
}
|
||||
|
||||
export default function LinkifyPlainText({
|
||||
body,
|
||||
className,
|
||||
preserveWhitespace = true,
|
||||
}: {
|
||||
body: string;
|
||||
className?: string;
|
||||
preserveWhitespace?: boolean;
|
||||
}) {
|
||||
const [companies, setCompanies] = useState<Company[] | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
loadCompanies().then((c) => { if (alive) setCompanies(c); });
|
||||
return () => { alive = false; };
|
||||
}, []);
|
||||
|
||||
const segments = companies ? buildSegments(body || "", companies) : null;
|
||||
const wsClass = preserveWhitespace ? "whitespace-pre-wrap" : "";
|
||||
const combined = `${wsClass} ${className || ""}`.trim();
|
||||
|
||||
if (!segments) {
|
||||
// Companies still loading — render raw text so we don't FOUC.
|
||||
return <span className={combined}>{body}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={combined}>
|
||||
{segments.map((s, i) =>
|
||||
s.type === "link" && s.slug ? (
|
||||
<Link
|
||||
key={i}
|
||||
href={`/manufacturers/${s.slug}`}
|
||||
data-company-slug={s.slug}
|
||||
className="company-mention"
|
||||
>
|
||||
{s.text}
|
||||
</Link>
|
||||
) : (
|
||||
<span key={i}>{s.text}</span>
|
||||
),
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
89
src/components/SponsorLogoStrip.tsx
Normal file
89
src/components/SponsorLogoStrip.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import Link from "next/link";
|
||||
import { createAdminClient } from "@/lib/supabase/admin";
|
||||
|
||||
type Sponsor = {
|
||||
slug: string;
|
||||
name: string;
|
||||
logoUrl: string | null;
|
||||
};
|
||||
|
||||
async function fetchSponsors(): Promise<Sponsor[]> {
|
||||
try {
|
||||
const adv = createAdminClient("adv");
|
||||
const { data: ads } = await adv
|
||||
.from("active_advertisers_by_property")
|
||||
.select("company_name_lower")
|
||||
.eq("property", "broadcastbeat");
|
||||
const names = Array.from(new Set((ads || []).map((r: any) => String(r.company_name_lower))));
|
||||
if (names.length === 0) return [];
|
||||
|
||||
const bb = createAdminClient();
|
||||
const { data: dir } = await bb
|
||||
.from("tracked_companies")
|
||||
.select("slug, company_name, logo_url")
|
||||
.eq("directory_visible", true)
|
||||
.in("company_name", names.map((n) => n)); // case-sensitive — directory should match
|
||||
// Some directory entries may have slightly different casing — fall back
|
||||
// to a case-insensitive single-name lookup for anything missed.
|
||||
const bySlug = new Map<string, Sponsor>();
|
||||
for (const d of (dir || []) as any[]) {
|
||||
bySlug.set(d.slug, { slug: d.slug, name: d.company_name, logoUrl: d.logo_url || null });
|
||||
}
|
||||
const matchedNames = new Set((dir || []).map((d: any) => String(d.company_name).toLowerCase()));
|
||||
const missing = names.filter((n) => !matchedNames.has(n));
|
||||
if (missing.length > 0) {
|
||||
for (const n of missing) {
|
||||
const { data: hit } = await bb
|
||||
.from("tracked_companies")
|
||||
.select("slug, company_name, logo_url")
|
||||
.eq("directory_visible", true)
|
||||
.ilike("company_name", n)
|
||||
.limit(1)
|
||||
.maybeSingle();
|
||||
if (hit) bySlug.set(hit.slug, { slug: hit.slug, name: hit.company_name, logoUrl: hit.logo_url || null });
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(bySlug.values()).filter((s) => s.logoUrl); // only show those with a logo
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export default async function SponsorLogoStrip() {
|
||||
const sponsors = await fetchSponsors();
|
||||
if (sponsors.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="max-w-container mx-auto px-4 py-6 border-t border-b border-[#1a1a1a]" aria-label="Coverage partners">
|
||||
<div className="flex items-center gap-4 mb-3">
|
||||
<span className="text-[10px] uppercase tracking-widest text-[#3b82f6] font-bold">
|
||||
Coverage Partners
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-[#1a1a1a]" />
|
||||
<Link href="/advertise" className="text-[10px] text-[#666] hover:text-[#3b82f6] font-mono">
|
||||
Advertise →
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
|
||||
{sponsors.map((s) => (
|
||||
<Link
|
||||
key={s.slug}
|
||||
href={`/manufacturers/${s.slug}`}
|
||||
data-company-slug={s.slug}
|
||||
className="block opacity-70 hover:opacity-100 transition-opacity"
|
||||
title={s.name}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={s.logoUrl || ""}
|
||||
alt={s.name}
|
||||
className="h-10 md:h-12 w-auto object-contain max-w-[140px] bg-white p-1.5 rounded"
|
||||
loading="lazy"
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user