Website
Reading
Article and project layouts, outlines, media and installation instructions.
Usage
When to reach for it
Ships from@misoto22/folio/website
import { DetailMasthead } from '@misoto22/folio/website'Best practices
Do
- Supply localized labels, descriptive links and meaningful image alternatives.
Don’t
- Do not put service credentials, routing logic or backend models inside presentation components.
Examples
article and outline
A reading layout combines semantic publication metadata, sections and an outline. Adjacent-record links remain ordinary host links with descriptive titles.
A practice of attention
A few observations from the daily walk.
Notice
A familiar route still changes with the light. Record one detail before naming the whole scene.
Return
Compare what you wrote on the next visit. The difference often matters more than the first impression.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
ReadingLayout
| Prop | Type | Default | Description |
|---|---|---|---|
| outline | ReactNode | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
ReadingSection
seamless lets a structured child continue directly from the section rule without drawing a second seam.
| Prop | Type | Default | Description |
|---|---|---|---|
| caption | ReactNode | — | |
| compact | boolean | — | |
| lead | ReactNode | — | |
| seamless | boolean | — | |
| title | ReactNode | — |
Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
ReadingLead
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| description | ReactNode | — | |
| muted | ReactNode | — |
RecordPager
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | |
| next | ReadingPagerItem | — | |
| previous | ReadingPagerItem | — |
isSelfNumbered
Takes no props of its own.
numberToc
Takes no props of its own.
TableOfContents
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | OutlineItem[] | — | |
| labelrequired | string | — | |
| expanded | boolean | false | — |
| numbering | 'auto' | 'none' | 'auto' | — |
| onNavigate | (id: string) => void | — |
MobileOutline
| Prop | Type | Default | Description |
|---|---|---|---|
| closeLabelrequired | string | — | |
| itemsrequired | OutlineItem[] | — | |
| openLabelrequired | string | — | |
| titlerequired | string | — |
ReadingProgress
Takes no props of its own.
AuthorPanel
| Prop | Type | Default | Description |
|---|---|---|---|
| namerequired | string | — | |
| avatar | ReactNode | — | |
| bio | ReactNode | — | |
| links | ReactNode | — | |
| role | ReactNode | — |
ReadingFigure
A reading image can preserve its source framing with fit="contain", rather than silently cropping it to a house ratio.
| Prop | Type | Default | Description |
|---|---|---|---|
| mediarequired | ReactNode | — | |
| captionEnd | ReactNode | — | |
| captionStart | ReactNode | — | |
| fit | 'cover' | 'contain' | 'cover' | — |
| ratio | string | '16 / 8' | — |
| width | 'page' | 'fill' | 'page' | — |
MediaPlayback
| Prop | Type | Default | Description |
|---|---|---|---|
| fallbackrequired | ReactNode | — | |
| labelrequired | string | — | |
| pauseLabelrequired | string | — | |
| playLabelrequired | string | — | |
| srcrequired | string | — | |
| poster | string | — |
ActionBand
A terminal project invitation with one strong entry action and quieter supporting actions.
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | ReactNode | — | |
| actions | ReactNode | — | |
| description | ReactNode | — | |
| eyebrow | ReactNode | — |
FeaturePairs
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | { id?: string; label?: ReactNode; title?: ReactNode; description: ReactNode }[] | — |
DevicePreview
| Prop | Type | Default | Description |
|---|---|---|---|
| kindrequired | 'browser' | 'phone' | — | |
| mediarequired | ReactNode | — | |
| caption | ReactNode | — | |
| label | string | — |
PreviewPair
| Prop | Type | Default | Description |
|---|---|---|---|
| desktoprequired | ReactNode | — | |
| mobile | ReactNode | — |
CommandTabs
| Prop | Type | Default | Description |
|---|---|---|---|
| copiedLabelrequired | string | — | |
| copyLabelrequired | string | — | |
| labelrequired | string | — | |
| tabsrequired | CommandTab[] | — | |
| footer | ReactNode | — |
ReadingSurface
| Prop | Type | Default | Description |
|---|---|---|---|
| numbered | boolean | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
ReadingForm
| Prop | Type | Default | Description |
|---|---|---|---|
| inline | boolean | — |
Also accepts everything in React.FormHTMLAttributes<HTMLFormElement>. Those are forwarded to the underlying element and are not listed row by row.
ArchitectureColumns
| Prop | Type | Default | Description |
|---|---|---|---|
| columnsrequired | { title: string; connected?: boolean; nodes: ArchitectureColumnNode[] }[] | — | |
| foundation | ArchitectureColumnNode[] | — |
TokenLine
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | { label: ReactNode; strong?: boolean; icon?: ReactNode }[] | — | |
| label | ReactNode | — | |
| separator | string | '·' | — |
ContentFigure
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| caption | ReactNode | — | |
| wide | boolean | — |
ReadingPage
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — |
Also accepts everything in HTMLAttributes<HTMLElement>. Those are forwarded to the underlying element and are not listed row by row.
CommandSnippet
| Prop | Type | Default | Description |
|---|---|---|---|
| coderequired | string | — | |
| copiedLabelrequired | string | — | |
| copyLabelrequired | string | — | |
| className | string | — | |
| pieces | CommandPiece[] | — |