{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "template-publication", "title": "Marginalia: magazine", "author": "Ballmac ", "description": "An editorial five-page magazine: a masthead between double rules, a lead story, an article with reading progress, drop cap and margin notes, section pages with sort and load more, author pages and an issues shelf with subscriptions.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/copy-button.json", "https://ui.ballmac.com/r/scroll-progress.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/templates/publication/publication-fonts.ts", "content": "// Ballmac UI: Publication template fonts. https://ui.ballmac.com/templates/template-publication\nimport { DM_Serif_Display, Lora, Public_Sans } from \"next/font/google\"\n\nexport const pubDisplay = DM_Serif_Display({ variable: \"--pub-display\", subsets: [\"latin\"], weight: \"400\", style: [\"normal\", \"italic\"], display: \"swap\", preload: false })\nexport const pubBody = Lora({ variable: \"--pub-body\", subsets: [\"latin\"], display: \"swap\", preload: false })\nexport const pubSans = Public_Sans({ variable: \"--pub-sans\", subsets: [\"latin\"], display: \"swap\", preload: false })\n", "type": "registry:component", "target": "@components/ballmac/templates/publication/publication-fonts.ts" }, { "path": "registry/ballmac/components/templates/publication/publication-data.ts", "content": "import type { MediaSource } from \"@/components/ballmac/media\"\n\n// Ballmac UI: Publication sample content. https://ui.ballmac.com/templates/template-publication\n\nexport type Section = \"Essays\" | \"Culture\" | \"Science\" | \"Technology\" | \"Interviews\"\nexport const sections: Section[] = [\"Essays\", \"Culture\", \"Science\", \"Technology\", \"Interviews\"]\n\nexport type Author = { id: string; name: string; role: string; bio: string; tone: number }\nexport const authors: Author[] = [\n { id: \"ines\", name: \"Inês Marques\", role: \"Senior editor\", bio: \"Writes about cities, memory and the objects we keep. Previously at a daily paper in Porto.\", tone: 1 },\n { id: \"tomas\", name: \"Tomás Reyes\", role: \"Science correspondent\", bio: \"Reports on ecology and the people who count things for a living.\", tone: 2 },\n { id: \"amara\", name: \"Amara Okafor\", role: \"Contributing writer\", bio: \"Essays on technology, work and the slow end of the internet.\", tone: 3 },\n { id: \"elena\", name: \"Elena Rossi\", role: \"Culture editor\", bio: \"Edits the culture desk. Cooks, reads, rarely sleeps in October.\", tone: 4 },\n]\n\nexport type Article = { id: string; section: Section; kicker: string; title: string; dek: string; author: string; date: string; read: number; art: number; popular?: number; image?: MediaSource; imageAlt?: string }\n\nexport const articles: Article[] = [\n { id: \"a1\", section: \"Essays\", kicker: \"The long view\", title: \"The case for the unfinished city\", dek: \"What a scaffold-covered street teaches us about patience, and why the cities we love are never done.\", author: \"ines\", date: \"2026-09-28\", read: 14, art: 0, popular: 1 },\n { id: \"a2\", section: \"Science\", kicker: \"Field notes\", title: \"Counting every bird in a parish of three hundred\", dek: \"A volunteer census, a very cold spring, and the surprising comeback of the corn bunting.\", author: \"tomas\", date: \"2026-09-26\", read: 11, art: 1, popular: 3 },\n { id: \"a3\", section: \"Technology\", kicker: \"Slow tech\", title: \"The internet we left in the drawer\", dek: \"On forums, feeds and the small websites that quietly still work.\", author: \"amara\", date: \"2026-09-25\", read: 9, art: 2, popular: 2 },\n { id: \"a4\", section: \"Culture\", kicker: \"Table talk\", title: \"A defence of the weeknight dinner\", dek: \"Nobody photographs it. That is exactly the point.\", author: \"elena\", date: \"2026-09-24\", read: 6, art: 3 },\n { id: \"a5\", section: \"Interviews\", kicker: \"In conversation\", title: \"“I only write in the margins”\", dek: \"The novelist Dalia Costa on notebooks, naps and finishing nothing for eleven years.\", author: \"ines\", date: \"2026-09-22\", read: 18, art: 4, popular: 4 },\n { id: \"a6\", section: \"Essays\", kicker: \"On work\", title: \"Against the optimised life\", dek: \"A year without metrics, and what was left when I stopped counting.\", author: \"amara\", date: \"2026-09-20\", read: 12, art: 5 },\n { id: \"a7\", section: \"Science\", kicker: \"Deep time\", title: \"The rock that remembers the sea\", dek: \"A geologist reads a cliff face like a diary.\", author: \"tomas\", date: \"2026-09-18\", read: 8, art: 0 },\n { id: \"a8\", section: \"Culture\", kicker: \"Listening\", title: \"What the radio knew\", dek: \"Why the old weather forecast still feels like poetry.\", author: \"elena\", date: \"2026-09-15\", read: 7, art: 2 },\n { id: \"a9\", section: \"Technology\", kicker: \"Craft\", title: \"Write the manual first\", dek: \"How good software gets made backwards.\", author: \"amara\", date: \"2026-09-12\", read: 10, art: 1 },\n { id: \"a10\", section: \"Essays\", kicker: \"Small things\", title: \"In praise of the folding chair\", dek: \"The most democratic object ever designed.\", author: \"ines\", date: \"2026-09-09\", read: 5, art: 3 },\n]\n\nexport type Issue = { n: number; season: string; theme: string; art: number; image?: MediaSource; imageAlt?: string }\n\nexport const issues: Issue[] = [\n { n: 48, season: \"Autumn 2026\", theme: \"Patience\", art: 0 },\n { n: 47, season: \"Summer 2026\", theme: \"Heat\", art: 1 },\n { n: 46, season: \"Spring 2026\", theme: \"Return\", art: 2 },\n { n: 45, season: \"Winter 2025\", theme: \"Quiet\", art: 3 },\n { n: 44, season: \"Autumn 2025\", theme: \"Maps\", art: 4 },\n { n: 43, season: \"Summer 2025\", theme: \"Water\", art: 5 },\n]\n\nexport const getAuthor = (id: string) => authors.find((a) => a.id === id) ?? authors[0]\nconst fmt = new Intl.DateTimeFormat(\"en-US\", { month: \"long\", day: \"numeric\", year: \"numeric\", timeZone: \"UTC\" })\nconst fmtShort = new Intl.DateTimeFormat(\"en-US\", { month: \"short\", day: \"numeric\", timeZone: \"UTC\" })\nexport const formatDate = (iso: string) => fmt.format(new Date(iso))\nexport const formatShort = (iso: string) => fmtShort.format(new Date(iso))\n", "type": "registry:component", "target": "@components/ballmac/templates/publication/publication-data.ts" }, { "path": "registry/ballmac/components/templates/publication/publication-theme.tsx", "content": "// Ballmac UI: Publication template shell. https://ui.ballmac.com/templates/template-publication\n\"use client\"\n\nimport * as React from \"react\"\nimport { Menu, Search, X } from \"lucide-react\"\n\nimport { pubBody, pubDisplay, pubSans } from \"@/components/ballmac/templates/publication/publication-fonts\"\nimport { sections } from \"@/components/ballmac/templates/publication/publication-data\"\nimport { cn } from \"@/lib/utils\"\nimport { Media, type MediaSource } from \"@/components/ballmac/media\"\n\ntype PublicationPage = \"home\" | \"article\" | \"section\" | \"author\" | \"issues\"\ntype PublicationHrefs = Record\n\nconst defaultHrefs: PublicationHrefs = { home: \"/publication\", article: \"/publication/essays/the-unfinished-city\", section: \"/publication/essays\", author: \"/publication/authors/ines\", issues: \"/publication/issues\" }\n\n/** Publication's palette: newsprint and ink with a deep red. Dark mode is sepia night, for reading after dark. */\nconst publicationCss = `\n.publication-theme,body:not(:has([data-gallery])):has(.publication-theme){--publication-on-accent:oklch(0.18 0.01 60);--background:oklch(0.975 0.014 85);--foreground:oklch(0.18 0.01 60);--card:oklch(0.988 0.01 85);--card-foreground:oklch(0.18 0.01 60);--popover:oklch(0.988 0.01 85);--popover-foreground:oklch(0.18 0.01 60);--primary:oklch(0.18 0.01 60);--primary-foreground:oklch(0.975 0.014 85);--secondary:oklch(0.945 0.02 85);--secondary-foreground:oklch(0.18 0.01 60);--muted:oklch(0.945 0.02 85);--muted-foreground:oklch(0.45 0.02 70);--accent:oklch(0.93 0.025 80);--accent-foreground:oklch(0.18 0.01 60);--border:oklch(0.18 0.01 60 / 18%);--input:oklch(0.18 0.01 60 / 28%);--ring:oklch(0.45 0.17 28);--surface:oklch(0.958 0.016 85);--destructive:oklch(0.5 0.2 27);--chart-1:oklch(0.45 0.17 28);--chart-2:oklch(0.4 0.07 240);--chart-3:oklch(0.78 0.12 85);--chart-4:oklch(0.46 0.1 150);--chart-5:oklch(0.62 0.11 50);--radius:0.125rem}\n.dark .publication-theme,.dark body:not(:has([data-gallery])):has(.publication-theme){--publication-on-accent:oklch(0.18 0.01 60);--background:oklch(0.17 0.012 60);--foreground:oklch(0.94 0.02 85);--card:oklch(0.2 0.013 60);--card-foreground:oklch(0.94 0.02 85);--popover:oklch(0.22 0.014 60);--popover-foreground:oklch(0.94 0.02 85);--primary:oklch(0.94 0.02 85);--primary-foreground:oklch(0.18 0.01 60);--secondary:oklch(0.25 0.014 60);--secondary-foreground:oklch(0.94 0.02 85);--muted:oklch(0.24 0.014 60);--muted-foreground:oklch(0.72 0.025 80);--accent:oklch(0.28 0.016 60);--accent-foreground:oklch(0.94 0.02 85);--border:oklch(0.94 0.02 85 / 18%);--input:oklch(0.94 0.02 85 / 28%);--ring:oklch(0.74 0.14 30);--surface:oklch(0.19 0.012 60);--destructive:oklch(0.7 0.18 27);--chart-1:oklch(0.74 0.14 30);--chart-2:oklch(0.72 0.08 240);--chart-3:oklch(0.82 0.11 85);--chart-4:oklch(0.76 0.1 150);--chart-5:oklch(0.76 0.1 55)}\nbody:not(:has([data-gallery])):has(.publication-theme){font-family:var(--pub-sans),ui-sans-serif,system-ui,sans-serif}\n`\n\nconst serif = \"[font-family:var(--pub-display),ui-serif,Georgia,serif]\"\nconst text = \"[font-family:var(--pub-body),ui-serif,Georgia,serif]\"\n\n/** A duotone illustration in ink and red, standing in for photography. */\nfunction MagArt({ variant, className, image, imageAlt }: { variant: number; className?: string; image?: MediaSource; imageAlt?: string }) {\n const v = ((variant % 6) + 6) % 6\n if (image) return \n return (\n
\n {v === 0 && (<>
{[0, 1, 2, 3].map((i) =>
)}
)}\n {v === 1 && (<>
{[0, 1, 2, 3, 4, 5].map((i) =>
)})}\n {v === 2 && (<>
{Array.from({ length: 24 }, (_, i) =>
)}
)}\n {v === 3 && (<>
)}\n {v === 4 && (<>
{[0, 1, 2, 3, 4, 5, 6].map((i) =>
)}
)}\n {v === 5 && (<>
)}\n
\n )\n}\n\nconst dateline = new Intl.DateTimeFormat(\"en-US\", { weekday: \"long\", month: \"long\", day: \"numeric\", year: \"numeric\", timeZone: \"UTC\" }).format(new Date(\"2026-10-01\"))\n\ntype PublicationShellProps = React.ComponentProps<\"div\"> & {\n /** The page being shown. */\n page: PublicationPage\n /** The section to mark current in the nav. */\n section?: string\n /** Override where pages live (used by previews). */\n hrefs?: Partial\n}\n\n/** Publication's frame: a dateline, a centred masthead between double rules, a section nav and a newsletter-first footer. */\nfunction PublicationShell({ page, section, hrefs: overrides, className, style, children, ...props }: PublicationShellProps) {\n const hrefs = { ...defaultHrefs, ...overrides }\n const [open, setOpen] = React.useState(false)\n React.useEffect(() => {\n const classes = [pubDisplay.variable, pubBody.variable, pubSans.variable].filter(Boolean)\n document.body.classList.add(...classes)\n return () => document.body.classList.remove(...classes)\n }, [])\n const current = section ?? (page === \"article\" ? \"Essays\" : undefined)\n return (\n \n \n
\n
\n \n

Issue 48

\n

Issue 48 · Autumn 2026Sign inSubscribe

\n
\n
\n
\n Marginalia\n

A magazine of ideas, written slowly

\n
\n
\n \n \n \n
\n {open && }\n
\n
\n {children}\n
\n
\n

Marginalia

Independent since 2014. Funded by readers, not by clicks.

\n {[[\"Read\", [\"Essays\", \"Culture\", \"Science\", \"Technology\"]], [\"Magazine\", [\"Issues\", \"Subscribe\", \"Gift a year\", \"Back issues\"]], [\"About\", [\"Our writers\", \"Submissions\", \"Contact\", \"Privacy\"]]].map(([t, items]) => (\n

{t as string}

    {(items as string[]).map((i) =>
  • {i}
    • )}
\n ))}\n
\n

© 2026 Marginalia Press. All rights reserved.

\n
\n
\n )\n}\n\nexport { MagArt, PublicationShell, defaultHrefs as publicationDefaultHrefs, serif as pubSerifClass, text as pubTextClass, type PublicationHrefs, type PublicationPage, type PublicationShellProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/publication/publication-theme.tsx" }, { "path": "registry/ballmac/components/templates/publication/publication-home.tsx", "content": "// Ballmac UI: Publication home page. https://ui.ballmac.com/templates/template-publication\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check } from \"lucide-react\"\n\nimport { articles, formatShort, getAuthor, sections } from \"@/components/ballmac/templates/publication/publication-data\"\nimport { MagArt, PublicationShell, pubSerifClass, pubTextClass, type PublicationHrefs } from \"@/components/ballmac/templates/publication/publication-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst kicker = \"text-chart-1 text-xs font-bold tracking-[0.14em] uppercase\"\n\nfunction Newsletter({ tone = \"card\" }: { tone?: \"card\" | \"ink\" }) {\n const [email, setEmail] = React.useState(\"\")\n const [error, setError] = React.useState(\"\")\n const [done, setDone] = React.useState(false)\n function submit(e: React.FormEvent) {\n e.preventDefault()\n if (!/^\\S+@\\S+\\.\\S+$/.test(email.trim())) return setError(\"Enter an email like you@example.com.\")\n setError(\"\")\n setDone(true)\n }\n return (\n
\n

The Sunday Margin

\n

One good essay, every Sunday morning.

\n

Free, short and unhurried. Read by 41,000 people over breakfast.

\n {done ? (\n

You’re on the list. See you Sunday.

\n ) : (\n
\n \n setEmail(e.target.value)} aria-invalid={!!error} aria-describedby={error ? `nl-err-${tone}` : undefined} placeholder=\"you@example.com\" className=\"bg-background focus-visible:ring-ring/50 placeholder:text-muted-foreground aria-[invalid=true]:border-destructive h-12 flex-1 rounded-sm border px-4 outline-none focus-visible:ring-[3px]\" />\n \n
\n )}\n {error &&

{error}

}\n
\n )\n}\n\ntype PublicationHomeProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Publication home page: a lead story with a dek, supporting stories, an opinion column, picks and a newsletter. */\nfunction PublicationHome({ hrefs, ...props }: PublicationHomeProps) {\n const [lead, ...rest] = articles\n const side = rest.slice(0, 3)\n const grid = rest.slice(3, 6)\n const popular = [...articles].filter((a) => a.popular).sort((a, b) => (a.popular ?? 0) - (b.popular ?? 0))\n const a = hrefs?.article ?? \"/publication/essays/the-unfinished-city\"\n return (\n \n
\n \n\n
\n \n
\n\n
\n
\n

Opinion & essays

\n
    \n {articles.filter((x) => x.section === \"Essays\" || x.section === \"Interviews\").slice(1, 5).map((o) => {\n const au = getAuthor(o.author)\n return (\n
  • \n {au.name.split(\" \").map((w) => w[0]).join(\"\")}\n \n

    {au.name}

    \n

    {o.title}

    \n

    {o.dek}

    \n     \n
    • \n )\n })}\n
\n
\n \n
\n\n
\n
    {sections.map((s) =>
  • {s}
    • )}
\n
\n \n )\n}\n\nexport { Newsletter, PublicationHome, type PublicationHomeProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/publication/publication-home.tsx" }, { "path": "registry/ballmac/components/templates/publication/publication-article.tsx", "content": "// Ballmac UI: Publication article page. https://ui.ballmac.com/templates/template-publication\n\"use client\"\n\nimport * as React from \"react\"\nimport { Link2 } from \"lucide-react\"\n\nimport { CopyButton } from \"@/components/ballmac/copy-button\"\nimport { ScrollProgress } from \"@/components/ballmac/scroll-progress\"\nimport { articles, formatDate, getAuthor } from \"@/components/ballmac/templates/publication/publication-data\"\nimport { Newsletter } from \"@/components/ballmac/templates/publication/publication-home\"\nimport { MagArt, PublicationShell, pubSerifClass, pubTextClass, type PublicationHrefs } from \"@/components/ballmac/templates/publication/publication-theme\"\nimport { cn } from \"@/lib/utils\"\n\n/** A paragraph with an optional margin note: beside the text on wide screens, under it on small ones. */\nfunction Para({ children, note, n }: { children: React.ReactNode; note?: string; n?: number }) {\n return (\n
\n

\n {children}\n {n && {n}}\n

\n {note && n && (\n \n )}\n
\n )\n}\n\ntype PublicationArticleProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Publication article page: a reading-progress bar, drop cap, margin notes that sit beside the text on wide screens, a pull quote and an author card. */\nfunction PublicationArticle({ hrefs, ...props }: PublicationArticleProps) {\n const a = articles[0]\n const au = getAuthor(a.author)\n const related = articles.slice(1, 4)\n return (\n \n *]:bg-chart-1\" />\n
\n
\n

{a.section} · {a.kicker}

\n

{a.title}

\n

{a.dek}

\n
\n IM\n

By {au.name}{formatDate(a.date)} · {a.read} min read

\n
\n
\n

Scaffolding on Rua da Madalena, Lisbon. Illustration.

\n\n
\n
\n

\n There is a street near my flat that has been covered in scaffolding for as long as I have lived here. The poles have weathered, a pigeon has opinions about the third floor, and the building behind it appears to be neither getting worse nor better. I used to find it depressing.1\n

\n \n
\n Then I started to notice how many of the places I love are unfinished in exactly this way: the cathedral with a crane, the square half dug up, the market that is always about to be renovated. A city that is finished is a museum.\n

What patience looks like in stone

\n Stonemasons talk about work they will never see completed. The medieval builders of a cathedral knew they would die before the spire went up, and they built the foundations for a roof they would never stand under. We have mostly lost that habit of mind.\n

“A city that is finished is a museum.”

\n I asked the neighbours what they thought. Nobody wanted it gone. They had named it, mapped their bicycles to its poles and learned which floor had the best light. The scaffold had become part of the street’s grammar.\n None of this is an argument for neglect. It is an argument for noticing that the stage between the old and the new is not a failure, and for learning to live there gracefully, perhaps even with affection.\n
\n\n
\n

Filed under Essays

\n
Share
\n
\n\n \n\n
\n

Keep reading

\n \n
\n
\n
\n \n )\n}\n\nexport { PublicationArticle, type PublicationArticleProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/publication/publication-article.tsx" }, { "path": "registry/ballmac/components/templates/publication/publication-section.tsx", "content": "// Ballmac UI: Publication section page. https://ui.ballmac.com/templates/template-publication\n\"use client\"\n\nimport * as React from \"react\"\n\nimport { articles, formatShort, getAuthor, sections, type Section } from \"@/components/ballmac/templates/publication/publication-data\"\nimport { MagArt, PublicationShell, pubSerifClass, pubTextClass, type PublicationHrefs } from \"@/components/ballmac/templates/publication/publication-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst descriptions: Record = { Essays: \"Long arguments, patiently made. New essays every week.\", Culture: \"Food, music, books and the small rituals of daily life.\", Science: \"Field work, deep time and the people who count things.\", Technology: \"Slow technology: tools, craft and the people who make them.\", Interviews: \"Unhurried conversations with writers and makers.\" }\n\ntype PublicationSectionProps = React.ComponentProps<\"div\"> & { hrefs?: Partial; initial?: Section | \"All\" }\n\n/** A Publication section page: a topic switch, a sort, a story list with thumbnails and a \"load more\" that adds stories. */\nfunction PublicationSection({ hrefs, initial = \"Essays\", ...props }: PublicationSectionProps) {\n const [section, setSection] = React.useState
(initial)\n const [sort, setSort] = React.useState<\"new\" | \"long\">(\"new\")\n const [count, setCount] = React.useState(4)\n const list = articles.filter((a) => section === \"All\" || a.section === section).sort((a, b) => (sort === \"new\" ? b.date.localeCompare(a.date) : b.read - a.read))\n const shown = list.slice(0, count)\n const a = hrefs?.article ?? \"/publication/essays/the-unfinished-city\"\n return (\n \n
\n

Section

\n

{section === \"All\" ? \"Everything\" : section}

\n

{section === \"All\" ? \"Every story, newest first.\" : descriptions[section]}

\n
\n
\n {([\"All\", ...sections] as const).map((s) => )}\n
\n \n
\n

Showing {shown.length} of {list.length} stories

\n {shown.length === 0 &&

Nothing in this section yet.

}\n \n {count < list.length &&
}\n
\n \n )\n}\n\nexport { PublicationSection, type PublicationSectionProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/publication/publication-section.tsx" }, { "path": "registry/ballmac/components/templates/publication/publication-author.tsx", "content": "// Ballmac UI: Publication author page. https://ui.ballmac.com/templates/template-publication\n\"use client\"\n\nimport * as React from \"react\"\n\nimport { articles, authors, formatShort } from \"@/components/ballmac/templates/publication/publication-data\"\nimport { MagArt, PublicationShell, pubSerifClass, pubTextClass, type PublicationHrefs } from \"@/components/ballmac/templates/publication/publication-theme\"\nimport { cn } from \"@/lib/utils\"\n\ntype PublicationAuthorProps = React.ComponentProps<\"div\"> & { hrefs?: Partial; authorId?: string }\n\n/** A Publication author page: portrait initials, a bio, the byline count and every story they wrote. */\nfunction PublicationAuthor({ hrefs, authorId = \"ines\", ...props }: PublicationAuthorProps) {\n const au = authors.find((x) => x.id === authorId) ?? authors[0]\n const mine = articles.filter((a) => a.author === au.id)\n const total = mine.reduce((n, a) => n + a.read, 0)\n const a = hrefs?.article ?? \"/publication/essays/the-unfinished-city\"\n return (\n \n
\n
\n {au.name.split(\" \").map((w) => w[0]).join(\"\")}\n
\n

{au.role}

\n

{au.name}

\n

{au.bio}

\n
{mine.length}
stories
{total}
minutes of reading
\n
\n
\n
\n

Stories by {au.name.split(\" \")[0]}

\n \n
\n
\n \n )\n}\n\nexport { PublicationAuthor, type PublicationAuthorProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/publication/publication-author.tsx" }, { "path": "registry/ballmac/components/templates/publication/publication-issues.tsx", "content": "// Ballmac UI: Publication issues page. https://ui.ballmac.com/templates/template-publication\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check } from \"lucide-react\"\n\nimport { issues } from \"@/components/ballmac/templates/publication/publication-data\"\nimport { Newsletter } from \"@/components/ballmac/templates/publication/publication-home\"\nimport { MagArt, PublicationShell, pubSerifClass, pubTextClass, type PublicationHrefs } from \"@/components/ballmac/templates/publication/publication-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst plans = [\n { id: \"digital\", name: \"Digital\", price: 4, per: \"a month\", features: [\"Every story and archive\", \"Four issues a year as PDF and ePub\", \"The Sunday Margin newsletter\"] },\n { id: \"print\", name: \"Print & digital\", price: 9, per: \"a month\", features: [\"Everything in Digital\", \"Four printed issues, posted free worldwide\", \"Back-issue discount of 30%\"], featured: true },\n]\n\ntype PublicationIssuesProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Publication issues page: a shelf of covers by season, two subscription plans with monthly or yearly billing, and the newsletter. */\nfunction PublicationIssues({ hrefs, ...props }: PublicationIssuesProps) {\n const [yearly, setYearly] = React.useState(true)\n return (\n \n
\n

The magazine

\n

Issues

\n

Four times a year, one theme, 160 pages. Printed on uncoated paper and meant to be kept.

\n\n
\n \n
\n\n
\n
\n

Read without the noise

\n
\n {([[true, \"Yearly · 2 months free\"], [false, \"Monthly\"]] as const).map(([v, l]) => )}\n
\n
\n
\n {plans.map((p) => {\n const price = yearly ? Math.round(p.price * 10) : p.price\n return (\n
\n

{p.name}

\n

${price}{yearly ? \"a year\" : p.per}

\n
    {p.features.map((f) =>
  • {f}
    • )}
\n Subscribe\n
\n )\n })}\n
\n
\n
\n
\n \n )\n}\n\nexport { PublicationIssues, type PublicationIssuesProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/publication/publication-issues.tsx" }, { "path": "registry/ballmac/app/publication/page.tsx", "content": "// Ballmac UI: Publication template route. https://ui.ballmac.com/templates/template-publication\nimport type { Metadata } from \"next\"\n\nimport { PublicationHome } from \"@/components/ballmac/templates/publication/publication-home\"\n\nexport const metadata: Metadata = {\n title: \"Marginalia: a magazine of ideas, written slowly\",\n description: \"Essays, culture, science and technology, written slowly.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/publication/page.tsx" }, { "path": "registry/ballmac/app/publication/essays/[slug]/page.tsx", "content": "// Ballmac UI: Publication template route. https://ui.ballmac.com/templates/template-publication\nimport type { Metadata } from \"next\"\n\nimport { PublicationArticle } from \"@/components/ballmac/templates/publication/publication-article\"\n\nexport const metadata: Metadata = {\n title: \"The case for the unfinished city · Marginalia\",\n description: \"What a scaffold-covered street teaches us about patience.\",\n}\n\n// One layout for every article. Load the story by params.slug from your data when you add more.\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/publication/essays/[slug]/page.tsx" }, { "path": "registry/ballmac/app/publication/essays/page.tsx", "content": "// Ballmac UI: Publication template route. https://ui.ballmac.com/templates/template-publication\nimport type { Metadata } from \"next\"\n\nimport { PublicationSection } from \"@/components/ballmac/templates/publication/publication-section\"\n\nexport const metadata: Metadata = {\n title: \"Essays · Marginalia\",\n description: \"Long arguments, patiently made.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/publication/essays/page.tsx" }, { "path": "registry/ballmac/app/publication/authors/[id]/page.tsx", "content": "// Ballmac UI: Publication template route. https://ui.ballmac.com/templates/template-publication\nimport type { Metadata } from \"next\"\n\nimport { PublicationAuthor } from \"@/components/ballmac/templates/publication/publication-author\"\n\nexport const metadata: Metadata = {\n title: \"Authors · Marginalia\",\n description: \"Writers at Marginalia.\",\n}\n\nexport default async function Page({ params }: { params: Promise<{ id: string }> }) {\n const { id } = await params\n return \n}\n", "type": "registry:page", "target": "app/publication/authors/[id]/page.tsx" }, { "path": "registry/ballmac/app/publication/issues/page.tsx", "content": "// Ballmac UI: Publication template route. https://ui.ballmac.com/templates/template-publication\nimport type { Metadata } from \"next\"\n\nimport { PublicationIssues } from \"@/components/ballmac/templates/publication/publication-issues\"\n\nexport const metadata: Metadata = {\n title: \"Issues · Marginalia\",\n description: \"Four times a year, one theme, 160 pages.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/publication/issues/page.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "template", "magazine", "blog", "editorial", "publication", "article", "newsletter", "serif" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Installs a five-page magazine. Change stories and authors in publication-data.ts, the palette in publicationCss, and the duotone MagArt illustrations (or swap them for photographs).", "whenToUse": [ "Magazines, long-form blogs and newsletters with an archive", "Reading-first sites with margin notes and a strong masthead" ], "whenNotToUse": [ "A product blog inside a SaaS marketing site (use blog-1 and blog-post-1)" ], "composesWith": [ "blog-1", "blog-post-1", "newsletter-1" ], "a11y": [ { "keys": "Tab to a note number", "action": "Moves to the note; on wide screens it sits in the margin beside the paragraph" }, { "keys": "Enter / Space on a section", "action": "Switches the list and announces how many stories are shown" } ], "customization": [ "Replace MagArt with photographs", "Edit publicationCss for the light and dark palettes", "Change the masthead name in publication-theme.tsx" ] }, "examples": [ "template-publication-demo", "template-publication-article", "template-publication-section", "template-publication-author", "template-publication-issues" ], "url": "https://ui.ballmac.com/components/template-publication" }, "docs": "Pages are at /publication, /publication/essays/[slug], /publication/essays, /publication/authors/[id] and /publication/issues. Edit stories, authors and issues in publication-data.ts; the palette is the publicationCss string in publication-theme.tsx.", "categories": [ "templates" ], "type": "registry:block" }