MapleBrief: production Canadian news aggregator

Next.js 14 + TypeScript + Tailwind + Prisma/SQLite. - LLM synthesis abstraction (OpenAI/Anthropic/Ollama) + admin settings UI - RSS ingestion pipeline (parser + cheerio content) + node-cron worker - AdSense AdUnit placements (header/in-feed/in-article/sidebar) - Sources analysis attribution, nofollow links, canonical/OG, sitemap/robots - Admin auth (ADMIN_API_KEY, timingSafeEqual, fail-closed 401) - Multi-cell lady-ga-ga marker, sitemap, robots, legal pages - Comprehensive README (setup, LLM config, AdSense, migrations, deploy)
2026-08-15 16:07:07 -04:00
commit 1010f27f44
76 changed files with 7177 additions and 0 deletions
@@ -0,0 +1,128 @@
+import { getPublishedArticles, getTagList } from '@/lib/queries';
+import ArticleCard from '@/components/ArticleCard';
+import { InFeedAd, SidebarAd } from '@/components/ads/placements';
+import Link from 'next/link';
+import { env } from '@/lib/env';
+
+export const dynamic = 'force-dynamic';
+
+export default async function HomePage({
+  searchParams,
+}: {
+  searchParams: { page?: string };
+}) {
+  const page = Math.max(1, parseInt(searchParams.page ?? '1', 10) || 1);
+  const PER = 21;
+  const [articles, tags] = await Promise.all([
+    getPublishedArticles('top-stories', PER, (page - 1) * PER),
+    getTagList(12),
+  ]);
+
+  const hero = articles[0];
+  const rest = articles.slice(1);
+
+  return (
+    <>
+      <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6">
+        <div className="grid gap-8 lg:grid-cols-3">
+          {/* Main column */}
+          <div className="lg:col-span-2">
+            {hero ? (
+              <Link
+                href={`/article/${hero.slug}`}
+                className="group mb-8 block overflow-hidden rounded-2xl border border-ink-200 bg-white shadow-sm"
+              >
+                <div className="relative aspect-[16/8] overflow-hidden bg-ink-100">
+                  {hero.image ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={hero.image}
+                      alt=""
+                      className="h-full w-full object-cover transition duration-500 group-hover:scale-[1.02]"
+                    />
+                  ) : (
+                    <div className="flex h-full items-center justify-center bg-masthead-gradient">
+                      <span className="font-display text-2xl font-bold text-white/90">
+                        {env.siteName}
+                      </span>
+                    </div>
+                  )}
+                  <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-ink-950/95 via-ink-950/70 to-transparent p-5 pt-16">
+                    <span className="mb-2 inline-block rounded bg-maple-600 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wider text-white">
+                      Lead briefing
+                    </span>
+                    <h1 className="font-display text-2xl font-bold leading-tight text-white sm:text-3xl">
+                      {hero.headline ?? hero.title}
+                    </h1>
+                    <p className="mt-2 line-clamp-2 text-sm text-ink-200">{hero.excerpt}</p>
+                  </div>
+                </div>
+              </Link>
+            ) : (
+              <EmptyState />
+            )}
+
+            {rest.length > 0 && (
+              <div className="grid gap-5 sm:grid-cols-2">
+                {interleaveInFeedAds(rest, 3).map((node) => node)}
+              </div>
+            )}
+          </div>
+
+          {/* Sidebar */}
+          <aside className="space-y-8" aria-label="Sidebar">
+            <SidebarAd tall />
+            {tags.length > 0 && (
+              <section className="rounded-xl border border-ink-200 bg-white p-5">
+                <h2 className="text-xs font-semibold uppercase tracking-wider text-ink-500">
+                  Trending topics
+                </h2>
+                <div className="mt-3 flex flex-wrap gap-2">
+                  {tags.map((t) => (
+                    <Link
+                      key={t}
+                      href={`/tag/${t}`}
+                      className="rounded-full bg-ink-100 px-3 py-1 text-sm text-ink-700 hover:bg-maple-100 hover:text-maple-800"
+                    >
+                      #{t}
+                    </Link>
+                  ))}
+                </div>
+              </section>
+            )}
+          </aside>
+        </div>
+      </div>
+    </>
+  );
+}
+
+import type { ReactNode } from 'react';
+
+/** Interleave an InFeedAd after every `every`th card. */
+function interleaveInFeedAds(
+  cards: Awaited<ReturnType<typeof getPublishedArticles>>,
+  every: number,
+): ReactNode[] {
+  const out: ReactNode[] = [];
+  cards.forEach((card, i) => {
+    out.push(<ArticleCard key={card.id} card={card} />);
+    if ((i + 1) % every === 0) out.push(<InFeedAd key={`ad-${i + 1}`} index={i + 1} />);
+  });
+  return out;
+}
+
+function EmptyState() {
+  return (
+    <div className="rounded-2xl border border-dashed border-ink-300 bg-white p-12 text-center">
+      <p className="font-display text-xl font-bold text-ink-800">
+        No briefings yet
+      </p>
+      <p className="mx-auto mt-2 max-w-md text-sm text-ink-500">
+        The ingestion worker has not published anything yet. Trigger your first
+        run (see the README “First run” section) and this page will fill with
+        synthesized briefings.
+      </p>
+    </div>
+  );
+}