From 751eca2f16de493837c31e3ffc4bf86ecd481323 Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Wed, 20 May 2026 03:56:23 +0000
Subject: [PATCH] show-coverage: add site Header + Footer + in-content 728x90
 banner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/app/show-coverage/[slug]/page.tsx | 85 ++++++++++++++++-----------
 src/app/show-coverage/page.tsx        | 79 +++++++++++++++----------
 2 files changed, 97 insertions(+), 67 deletions(-)

diff --git a/src/app/show-coverage/[slug]/page.tsx b/src/app/show-coverage/[slug]/page.tsx
index 5a6fbd4..f190e79 100644
--- a/src/app/show-coverage/[slug]/page.tsx
+++ b/src/app/show-coverage/[slug]/page.tsx
@@ -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>
   );
 }
diff --git a/src/app/show-coverage/page.tsx b/src/app/show-coverage/page.tsx
index ae7d879..5ec17a9 100644
--- a/src/app/show-coverage/page.tsx
+++ b/src/app/show-coverage/page.tsx
@@ -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>
   );
 }