Post Index
Blog
Source and install need .
pnpm dlx shadcn@latest add @assembli/blog-magazineBlog Magazine
A blog front page set like a newspaper: masthead with dateline and section nav, a lead story with a big serif headline and standfirst, secondary headlines and a numbered Most read rail divided by hairline rules. A newsletter strip confirms in place, then section rows of four stories turn into swipeable rows on phones. Whole stories are links; headlines underline on hover.
Props
Other props pass through to the root element.
title
string
Default
"The Journal"Masthead name.
dateline
string
Text above the masthead, e.g. the issue date. Pass a string so server and browser agree.
issue
string
Small label at the other end of the dateline, e.g. "Issue 48".
nav
{ label: string; href: string; current?: boolean }[]
lead*
MagazineStory
secondary
MagazineStory[]
Default
[]Up to three headlines beside the lead; the first may carry an image.
mostRead
MagazineStory[]
Default
[]sections
MagazineSection[]
Default
[]newsletter
| false | { title: string; description?: string; /** Reject (throw) to show an …
The newsletter strip between the front page and the section rows. Pass false to hide it.
| Description | |||
|---|---|---|---|
| title | string | "The Journal" | Masthead name. |
| dateline | string | – | Text above the masthead, e.g. the issue date. Pass a string so server and browser agree. |
| issue | string | – | Small label at the other end of the dateline, e.g. "Issue 48". |
| nav | { label: string; href: string; current?: boolean }[] | – | |
| lead* | MagazineStory | – | |
| secondary | MagazineStory[] | [] | Up to three headlines beside the lead; the first may carry an image. |
| mostRead | MagazineStory[] | [] | |
| sections | MagazineSection[] | [] | |
| newsletter | | false | { title: string; description?: string; /** Reject (throw) to show an … | – | The newsletter strip between the front page and the section rows. Pass false to hide it. |
