show-coverage: add site Header + Footer + in-content 728x90 banner

Both /show-coverage and /show-coverage/[slug] were rendering bare
<main> elements with no site chrome — no top nav, no leaderboard ad
above the page, no footer, no in-content banners.

- Wrap each page in <div className="min-h-screen bg-background">
  <Header />…<Footer /></div>. <Header /> already brings the site-wide
  728x90 leaderboard with it (see Header.tsx footer of the component)
  so that banner appears automatically above the page content.
- Add one in-content 728x90 banner per page (between Upcoming/Past on
  the index, and between event header / Coverage list on the detail
  page) so the show-coverage pages carry the same ad inventory as
  other sections.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
2026-05-20 03:56:23 +00:00
parent 7f0675a0e3
commit 751eca2f16
2 changed files with 97 additions and 67 deletions

View File

@@ -1,6 +1,10 @@
import Link from "next/link";
import { notFound } from "next/navigation";
import { createClient } from "@supabase/supabase-js";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AdImage from "@/components/AdImage";
import { ADS_728X90, shuffle } from "@/lib/ads";
export const dynamic = "force-dynamic";
export const revalidate = 600;
@@ -156,14 +160,16 @@ export default async function EventCoveragePage({
};
return (
<main className="mx-auto max-w-5xl px-6 py-10 text-[#e5e7eb]">
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(eventJsonLd) }}
/>
<Link href="/show-coverage" className="text-sm text-[var(--color-text-info,#60a5fa)] hover:underline">
All events
</Link>
<div className="min-h-screen bg-background">
<Header />
<main className="mx-auto max-w-5xl px-6 py-10 text-[#e5e7eb]">
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(eventJsonLd) }}
/>
<Link href="/show-coverage" className="text-sm text-[var(--color-text-info,#60a5fa)] hover:underline">
All events
</Link>
<header className="mt-4 mb-8 border-b border-[#252525] pb-6">
<div className="flex items-center gap-3 mb-2">
@@ -205,33 +211,42 @@ export default async function EventCoveragePage({
)}
</header>
<section>
<h2 className="font-mono text-xs uppercase tracking-wider text-[#6b7280] mb-4">
Coverage ({articles.length})
</h2>
{articles.length === 0 ? (
<p className="text-sm text-[#6b7280]">
No articles tagged to this event yet.
</p>
) : (
<ul className="space-y-5">
{articles.map((a) => (
<li key={`${a.source_table}-${a.slug}`} className="border-b border-[#252525] pb-5 last:border-0">
<Link
href={`/news/${a.slug}`}
className="block hover:opacity-90"
>
<h3 className="font-serif text-xl font-semibold">{a.title}</h3>
{a.excerpt && <p className="text-sm text-[#9ca3af] mt-1 line-clamp-2">{a.excerpt}</p>}
<div className="text-[11px] font-mono text-[#6b7280] mt-2">
{a.author} · {new Date(a.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
</div>
</Link>
</li>
))}
</ul>
{/* In-content 728x90 banner */}
{ADS_728X90.length > 0 && (
<div className="my-8 hidden md:flex justify-center" aria-label="Advertisement">
<AdImage ad={shuffle(ADS_728X90)[0]} page="show-coverage" />
</div>
)}
</section>
</main>
<section>
<h2 className="font-mono text-xs uppercase tracking-wider text-[#6b7280] mb-4">
Coverage ({articles.length})
</h2>
{articles.length === 0 ? (
<p className="text-sm text-[#6b7280]">
No articles tagged to this event yet.
</p>
) : (
<ul className="space-y-5">
{articles.map((a) => (
<li key={`${a.source_table}-${a.slug}`} className="border-b border-[#252525] pb-5 last:border-0">
<Link
href={`/news/${a.slug}`}
className="block hover:opacity-90"
>
<h3 className="font-serif text-xl font-semibold">{a.title}</h3>
{a.excerpt && <p className="text-sm text-[#9ca3af] mt-1 line-clamp-2">{a.excerpt}</p>}
<div className="text-[11px] font-mono text-[#6b7280] mt-2">
{a.author} · {new Date(a.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
</div>
</Link>
</li>
))}
</ul>
)}
</section>
</main>
<Footer />
</div>
);
}

View File

@@ -1,5 +1,9 @@
import Link from "next/link";
import { createClient } from "@supabase/supabase-js";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AdImage from "@/components/AdImage";
import { ADS_728X90, shuffle } from "@/lib/ads";
export const dynamic = "force-dynamic";
export const revalidate = 600;
@@ -62,42 +66,53 @@ export default async function ShowCoverageIndex() {
const past = events.filter((e) => e.end_date < today);
return (
<main className="mx-auto max-w-6xl px-6 py-10 text-[#e5e7eb]">
<header className="mb-8">
<h1 className="font-serif text-4xl font-bold tracking-tight">Show coverage</h1>
<p className="text-sm text-[#9ca3af] mt-2 font-mono">
{upcoming.length} upcoming · {past.length} past · {events.length} total
</p>
</header>
<div className="min-h-screen bg-background">
<Header />
<main className="mx-auto max-w-6xl px-6 py-10 text-[#e5e7eb]">
<header className="mb-8">
<h1 className="font-serif text-4xl font-bold tracking-tight">Show coverage</h1>
<p className="text-sm text-[#9ca3af] mt-2 font-mono">
{upcoming.length} upcoming · {past.length} past · {events.length} total
</p>
</header>
<section className="mb-12">
<h2 className="font-mono text-xs uppercase tracking-wider text-[#6b7280] mb-4">
Upcoming
</h2>
{upcoming.length === 0 ? (
<p className="text-sm text-[#6b7280]">No upcoming events.</p>
) : (
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
{upcoming.map((e) => (
<EventCard key={e.slug} e={e} />
))}
</ul>
)}
</section>
{past.length > 0 && (
<section>
<section className="mb-12">
<h2 className="font-mono text-xs uppercase tracking-wider text-[#6b7280] mb-4">
Past
Upcoming
</h2>
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
{past.map((e) => (
<EventCard key={e.slug} e={e} />
))}
</ul>
{upcoming.length === 0 ? (
<p className="text-sm text-[#6b7280]">No upcoming events.</p>
) : (
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
{upcoming.map((e) => (
<EventCard key={e.slug} e={e} />
))}
</ul>
)}
</section>
)}
</main>
{/* In-content 728x90 banner */}
{ADS_728X90.length > 0 && (
<div className="my-10 hidden md:flex justify-center" aria-label="Advertisement">
<AdImage ad={shuffle(ADS_728X90)[0]} page="show-coverage" />
</div>
)}
{past.length > 0 && (
<section>
<h2 className="font-mono text-xs uppercase tracking-wider text-[#6b7280] mb-4">
Past
</h2>
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
{past.map((e) => (
<EventCard key={e.slug} e={e} />
))}
</ul>
</section>
)}
</main>
<Footer />
</div>
);
}