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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user