Website

Content

Formatted code, clipboard actions, step sequences and rich-content elements.

Usage

When to reach for it

Render supplied text and highlighted code with consistent reading and copy affordances.

Ships from@misoto22/design/website

TSX

import { StepSequence } from '@misoto22/design/website'

Notes

A process rail whose source order, counters and annotations belong to the host.

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

a documented process

A process rail and a code panel share the same reading surface. Step order and highlighted code nodes come from the host; copying uses the rendered source text.

CollectGather the records.

ReviewCheck titles and links.

PublishShare the finished list.

Review each step before publishing.

JavaScript

const readingList = records.filter(record => record.reviewed)

Parts

Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.

ContentTable

Keeps a rendered article table intact inside a keyboard-scrollable region.

Also accepts everything in TableHTMLAttributes<HTMLTableElement>. Those are forwarded to the underlying element and are not listed row by row.

ExternalLinkMark

ExternalLinkMark props
Prop	Type	Default	Description
children	`ReactNode`	`'↗'`	—

ClipboardButton

Confirms copying only after the browser accepts the clipboard write.

ClipboardButton props
Prop	Type	Description
copiedLabelrequired	`string`	—
copyLabelrequired	`string`	—
className	`string`	—
getText	`() => string`	Read the current rendered code at activation, when the host owns highlighting.
text	`string`	—

CodePanel

A rendered-code panel for Markdown and MDX, preserving the host's highlighted nodes.

CodePanel props
Prop	Type	Default	Description
childrenrequired	`ReactNode`		—
copiedLabelrequired	`string`		—
copyLabelrequired	`string`		—
framed	`boolean`	`true`	False when the host renderer has already supplied an enclosing figure.
languageLabel	`ReactNode`		A display label, already mapped from the host highlighter's language id.
preProps	`HTMLAttributes<HTMLPreElement>`		—