feat: add policy pages
This commit is contained in:
gosangam
@@ -0,0 +1,254 @@
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import {
|
||||
getMagazineContent,
|
||||
getMagazineMeta,
|
||||
getMagazineSidebarItems,
|
||||
slugToBookCode,
|
||||
type MagazineSidebarItem,
|
||||
} from "@/lib/magazines";
|
||||
import { ogForMagazine, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
|
||||
import { PageHeader } from "@/components/page-header";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ slug: string; issue: string }>;
|
||||
searchParams: Promise<Record<string, string | string[] | undefined>>;
|
||||
}): Promise<Metadata> {
|
||||
const { slug, issue: issueSlug } = await params;
|
||||
const sp = await searchParams;
|
||||
const bookCode = slugToBookCode(slug);
|
||||
|
||||
const [meta, content] = await Promise.all([
|
||||
getMagazineMeta(bookCode),
|
||||
getMagazineContent(bookCode, issueSlug),
|
||||
]);
|
||||
|
||||
const magTitle = meta?.title ?? slug;
|
||||
const paragraphs = content?.paragraphs;
|
||||
|
||||
const quote = extractQuoteFromHl(sp, paragraphs);
|
||||
if (quote) {
|
||||
return buildOgMeta({ title: magTitle, quote });
|
||||
}
|
||||
|
||||
const issueTitle = content?.title ?? undefined;
|
||||
|
||||
return ogForMagazine(magTitle, issueTitle);
|
||||
}
|
||||
|
||||
export default async function MagazineIssuePage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string; issue: string }>;
|
||||
}) {
|
||||
const { slug, issue: issueSlug } = await params;
|
||||
const bookCode = slugToBookCode(slug);
|
||||
|
||||
const [meta, content, sidebarItems] = await Promise.all([
|
||||
getMagazineMeta(bookCode),
|
||||
getMagazineContent(bookCode, issueSlug),
|
||||
getMagazineSidebarItems(bookCode),
|
||||
]);
|
||||
|
||||
if (!meta || !content) notFound();
|
||||
|
||||
const navItems = sidebarItems.filter((item) => item.type !== "heading");
|
||||
const currentIdx = navItems.findIndex((item) => item.slug === issueSlug);
|
||||
const prev = currentIdx > 0 ? navItems[currentIdx - 1] : null;
|
||||
const next =
|
||||
currentIdx < navItems.length - 1 ? navItems[currentIdx + 1] : null;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<PageHeader sticky>
|
||||
<Link
|
||||
href={`/magazines/${slug}`}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
← {meta.title}
|
||||
</Link>
|
||||
<h1 className="mt-3 text-2xl font-bold text-foreground">
|
||||
{content.title}
|
||||
</h1>
|
||||
</PageHeader>
|
||||
|
||||
<div className="max-w-5xl mx-auto flex">
|
||||
<IssueSidebar
|
||||
items={sidebarItems}
|
||||
currentSlug={issueSlug}
|
||||
magSlug={slug}
|
||||
/>
|
||||
|
||||
<main className="flex-1 min-w-0 px-6 py-8 space-y-8">
|
||||
<IssueNav
|
||||
prev={prev}
|
||||
next={next}
|
||||
navItems={navItems}
|
||||
currentSlug={issueSlug}
|
||||
magSlug={slug}
|
||||
magTitle={meta.title}
|
||||
showMobileNav
|
||||
/>
|
||||
|
||||
<Card>
|
||||
<CardContent className="py-8 px-6 sm:px-8">
|
||||
<div className="space-y-4">
|
||||
{content.paragraphs.map((paragraph, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="text-base text-foreground leading-relaxed"
|
||||
dangerouslySetInnerHTML={{ __html: paragraph }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<IssueNav
|
||||
prev={prev}
|
||||
next={next}
|
||||
navItems={navItems}
|
||||
currentSlug={issueSlug}
|
||||
magSlug={slug}
|
||||
magTitle={meta.title}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueSidebar({
|
||||
items,
|
||||
currentSlug,
|
||||
magSlug,
|
||||
}: {
|
||||
items: MagazineSidebarItem[];
|
||||
currentSlug: string;
|
||||
magSlug: string;
|
||||
}) {
|
||||
return (
|
||||
<aside className="hidden lg:block w-56 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
|
||||
<h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
|
||||
Issues
|
||||
</h2>
|
||||
<nav className="flex flex-col gap-0.5">
|
||||
{items.map((item, i) =>
|
||||
item.type === "heading" ? (
|
||||
<h3
|
||||
key={`item-${i}`}
|
||||
className="text-xs font-bold uppercase tracking-wider text-muted-foreground mt-4 mb-1 px-2"
|
||||
>
|
||||
{item.label}
|
||||
</h3>
|
||||
) : (
|
||||
<Link
|
||||
key={`item-${i}`}
|
||||
href={`/magazines/${magSlug}/${item.slug}`}
|
||||
className={cn(
|
||||
"px-2 py-1.5 rounded-md text-sm transition-colors truncate",
|
||||
item.slug === currentSlug
|
||||
? "bg-primary/10 text-primary font-medium"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
)}
|
||||
title={item.label}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
),
|
||||
)}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueNav({
|
||||
prev,
|
||||
next,
|
||||
navItems,
|
||||
currentSlug,
|
||||
magSlug,
|
||||
magTitle,
|
||||
showMobileNav = false,
|
||||
}: {
|
||||
prev: MagazineSidebarItem | null;
|
||||
next: MagazineSidebarItem | null;
|
||||
navItems: MagazineSidebarItem[];
|
||||
currentSlug: string;
|
||||
magSlug: string;
|
||||
magTitle: string;
|
||||
showMobileNav?: boolean;
|
||||
}) {
|
||||
const mobileNavGroups: MobileNavGroup[] = [];
|
||||
if (showMobileNav && navItems.length > 0) {
|
||||
mobileNavGroups.push({
|
||||
title: "Issues",
|
||||
items: navItems.map((i) => ({
|
||||
slug: i.slug,
|
||||
label: i.label,
|
||||
href: `/magazines/${magSlug}/${i.slug}`,
|
||||
type: i.type,
|
||||
})),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
{showMobileNav && (
|
||||
<MobileNav
|
||||
groups={mobileNavGroups}
|
||||
currentSlug={currentSlug}
|
||||
bookTitle={magTitle}
|
||||
/>
|
||||
)}
|
||||
{prev ? (
|
||||
<Link
|
||||
href={`/magazines/${magSlug}/${prev.slug}`}
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline", size: "sm" }),
|
||||
"gap-1.5",
|
||||
)}
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
<span className="hidden sm:inline truncate max-w-[180px]">
|
||||
{prev.label}
|
||||
</span>
|
||||
<span className="sm:hidden">Previous</span>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="hidden lg:block" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{next ? (
|
||||
<Link
|
||||
href={`/magazines/${magSlug}/${next.slug}`}
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline", size: "sm" }),
|
||||
"gap-1.5",
|
||||
)}
|
||||
>
|
||||
<span className="hidden sm:inline truncate max-w-[180px]">
|
||||
{next.label}
|
||||
</span>
|
||||
<span className="sm:hidden">Next</span>
|
||||
<ChevronRight className="size-4" />
|
||||
</Link>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import {
|
||||
getMagazineMeta,
|
||||
slugToBookCode,
|
||||
type MagazineChapterEntry,
|
||||
} from "@/lib/magazines";
|
||||
import { ogForMagazine } from "@/lib/og";
|
||||
import { PageHeader } from "@/components/page-header";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { slug } = await params;
|
||||
const bookCode = slugToBookCode(slug);
|
||||
const meta = await getMagazineMeta(bookCode);
|
||||
const title = meta?.title ?? slug;
|
||||
return ogForMagazine(title);
|
||||
}
|
||||
|
||||
export default async function MagazineIndexPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const bookCode = slugToBookCode(slug);
|
||||
const meta = await getMagazineMeta(bookCode);
|
||||
if (!meta) notFound();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<PageHeader>
|
||||
<Link
|
||||
href="/magazines"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
← Magazines
|
||||
</Link>
|
||||
<h1 className="mt-3 text-3xl font-bold text-foreground">
|
||||
{meta.title}
|
||||
</h1>
|
||||
<p className="mt-1 text-muted-foreground">{meta.author}</p>
|
||||
</PageHeader>
|
||||
|
||||
<main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
|
||||
{meta.description && (
|
||||
<p className="text-muted-foreground">{meta.description}</p>
|
||||
)}
|
||||
|
||||
{meta.chapters.map((ch: MagazineChapterEntry, idx: number) => {
|
||||
if ("slug" in ch && !("subChapters" in ch)) {
|
||||
return (
|
||||
<Card key={ch.slug}>
|
||||
<CardContent className="p-0">
|
||||
<Link
|
||||
href={`/magazines/${slug}/${ch.slug}`}
|
||||
className="flex items-center px-5 py-4 hover:bg-muted transition-colors"
|
||||
>
|
||||
<p className="font-medium text-foreground">{ch.title}</p>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if ("subChapters" in ch) {
|
||||
const group = ch as {
|
||||
title: string;
|
||||
subChapters: { slug: string; title: string }[];
|
||||
};
|
||||
return (
|
||||
<div key={`group-${idx}`}>
|
||||
<h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3">
|
||||
{group.title}
|
||||
</h2>
|
||||
<Card className="divide-y divide-border">
|
||||
<CardContent className="p-0">
|
||||
<ul className="divide-y divide-border">
|
||||
{group.subChapters.map((sc) => (
|
||||
<li key={sc.slug}>
|
||||
<Link
|
||||
href={`/magazines/${slug}/${sc.slug}`}
|
||||
className="flex items-center px-5 py-3 hover:bg-muted transition-colors"
|
||||
>
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{sc.title}
|
||||
</p>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
})}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user