Typography

MDX article typography components — headings, paragraphs, lists, and blockquotes.

Article Typography

All elements

Headings

Heading with anchor

Text formatting

Lists

Horizontal rule

Blockquotes

Element overrides (real components)

Element overrides (custom className merge)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for article Typography components — migrated to the repo-root story // contract (`lib/styleguide/story-contract`; epic #1647, wave 3a batch C). // // H4-H6, strong, em, code, hr are styled via the rehype-article-elements // plugin at build time instead of Preact component wrappers, so those // elements are shown here as plain HTML with the same classes the plugin // injects. // // Gap-fill (epic #1647, wave 6, #1662): the zfb migration (sub 5.1, #60) // later replaced that rehype plugin with real Preact overrides, since migrated // into the `@takazudo-modular/ui-preact/{code,em,h4,h5,h6,hr,strong}` package // subpaths (#2049, #2052) — which this showcase now imports. The raw-HTML // approximations above predate that and have drifted (e.g. the H4 example // above still carries a `pb-vgap-sm` the real `H4` component dropped) — kept // as-is per the no-destructive-edit rule. `ElementOverrides` / // `ElementOverridesCustomClass` below exercise the ACTUAL override // components so the catalog has one source of truth for their current output. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { H2 } from './h2'; import { H3 } from './h3'; import { P } from './p'; import { Ul } from './ul'; import { Ol } from './ol'; import { Blockquote } from './blockquote'; import { Code } from '@takazudo-modular/ui-preact/code'; import { Em } from '@takazudo-modular/ui-preact/em'; import { Strong } from '@takazudo-modular/ui-preact/strong'; import { H4 } from '@takazudo-modular/ui-preact/h4'; import { H5 } from '@takazudo-modular/ui-preact/h5'; import { H6 } from '@takazudo-modular/ui-preact/h6'; import { Hr } from '@takazudo-modular/ui-preact/hr'; const meta: StoryMeta = { title: 'Typography', category: 'Article Typography', order: 1, description: 'MDX article typography components — headings, paragraphs, lists, and blockquotes.', usage: `import { H2 } from '@/components/article/h2';\nimport { P } from '@/components/article/p';\n\n<H2>見出し</H2>\n<P>段落テキスト</P>`, }; export default meta; export const AllElements = defineStory({ name: 'All elements', render: () => ( <div className="max-w-[800px]"> <H2>見出し2 (H2) - Main Section</H2> <P> これは段落テキストです。モジュラーシンセサイザーは、独立したモジュールを組み合わせて音を作り出す電子楽器です。各モジュールはオシレーター、フィルター、アンプなどの機能を持ち、パッチケーブルで接続します。 </P> <H3>見出し3 (H3) - Sub Section</H3> <P> Eurorack（ユーロラック）は最も普及しているモジュラーシンセサイザーの規格です。 3Uの高さと電源規格が標準化されており、異なるメーカーのモジュールを組み合わせることができます。 </P> <h4 className="font-futura font-bold pb-vgap-sm text-sm md:text-lg"> 見出し4 (H4) - Detail Section </h4> <P> <strong className="text-zd-strong font-bold">ボールドテキスト</strong>と <em className="italic">イタリックテキスト</em> を使って強調することができます。これらはMDXで**と*で囲むことで表現できます。 </P> <h5 className="font-futura font-bold pb-vgap-sm text-sm md:text-base">見出し5 (H5)</h5> <P>見出し5は小さめのセクション見出しに使用します。</P> <h6 className="font-futura font-bold pb-vgap-sm text-sm">見出し6 (H6)</h6> <P>見出し6は最も小さい見出しレベルです。</P> <hr className="border-0 h-[4px] bg-zd-white my-vgap-md lg:my-vgap-lg" /> <H3>リスト表示</H3> <h4 className="font-futura font-bold pb-vgap-sm text-sm md:text-lg">順序なしリスト (Ul)</h4> <Ul> <li>VCO (Voltage Controlled Oscillator) - 電圧制御発振器</li> <li>VCF (Voltage Controlled Filter) - 電圧制御フィルター</li> <li>VCA (Voltage Controlled Amplifier) - 電圧制御アンプ</li> <li> モジュレーション <Ul> <li>LFO (Low Frequency Oscillator)</li> <li>Envelope Generator</li> </Ul> </li> </Ul> <h4 className="font-futura font-bold pb-vgap-sm text-sm md:text-lg">順序付きリスト (Ol)</h4> <Ol> <li>電源を接続する</li> <li>VCOの出力をVCFに接続する</li> <li>VCFの出力をVCAに接続する</li> <li>VCAの出力をミキサーまたはオーディオインターフェースに接続する</li> </Ol> <H3>引用 (Blockquote)</H3> <Blockquote> <P> モジュラーシンセサイザーの魅力は、決まった音色や構成にとらわれず、自分だけのシステムを組み上げられることにあります。 </P> </Blockquote> </div> ), }); export const Headings = defineStory({ name: 'Headings', render: () => ( <div className="max-w-[800px]"> <H2>H2 見出し - セクションタイトル</H2> <H3>H3 見出し - サブセクション</H3> <h4 className="font-futura font-bold pb-vgap-sm text-sm md:text-lg"> H4 見出し - 詳細セクション </h4> <h5 className="font-futura font-bold pb-vgap-sm text-sm md:text-base"> H5 見出し - 小見出し </h5> <h6 className="font-futura font-bold pb-vgap-sm text-sm">H6 見出し - 最小見出し</h6> </div> ), }); export const HeadingWithAnchor = defineStory({ name: 'Heading with anchor', render: () => ( <div className="max-w-[800px]"> <P>見出しにIDを設定すると、ホバー時にアンカーリンクが表示されます。</P> <H2 id="section-with-anchor">アンカー付き見出し</H2> <P>この見出しにマウスを乗せると # リンクが表示されます。</P> </div> ), }); export const TextFormatting = defineStory({ name: 'Text formatting', render: () => ( <div className="max-w-[800px]"> <P>これは通常の段落テキストです。複数行にわたる長いテキストも適切な行間で表示されます。</P> <P> <strong className="text-zd-strong font-bold">Strong要素</strong> はテキストを太字にします。MDXでは**で囲みます。 </P> <P> <em className="italic">Em要素</em>はテキストをイタリックにします。MDXでは*で囲みます。 </P> <P> <strong className="text-zd-strong font-bold"> <em className="italic">両方を組み合わせる</em> </strong> こともできます。 </P> </div> ), }); export const Lists = defineStory({ name: 'Lists', render: () => ( <div className="max-w-[800px]"> <H3>順序なしリスト</H3> <Ul> <li>アイテム1</li> <li>アイテム2</li> <li> ネストしたリスト <Ul> <li>サブアイテム1</li> <li>サブアイテム2</li> </Ul> </li> <li>アイテム4</li> </Ul> <H3>順序付きリスト</H3> <Ol> <li>ステップ1</li> <li>ステップ2</li> <li>ステップ3</li> <li>ステップ4</li> </Ol> </div> ), }); export const HorizontalRule = defineStory({ name: 'Horizontal rule', render: () => ( <div className="max-w-[800px]"> <P>上のセクション</P> <hr className="border-0 h-[4px] bg-zd-white my-vgap-md lg:my-vgap-lg" /> <P>下のセクション</P> </div> ), }); export const Blockquotes = defineStory({ name: 'Blockquotes', render: () => ( <div className="max-w-[800px] zd-prose-flow"> <P>引用の前の段落です。MDXでは行頭に > を置くことで引用になります。</P> <Blockquote> <P> Harmonizer、Scale Remap、Arpeggiator、Turing Machine、Polyphonic Envelope、Euclidean Sequencer、Looper、Delay、Randomizer、Filters、Mergers、Routersなどを使って、サウンドを形作ることができます。 </P> </Blockquote> <P>複数の段落を含む引用の例:</P> <Blockquote> <P>そして一度あなたが自らの心を余すこと無く散策してしまったら</P> <P>あなたが支配するものは積み荷リストと同じぐらいに明白だ</P> </Blockquote> <P>リストを含む引用の例:</P> <Blockquote> <P>ファームウェア更新の手順:</P> <Ul> <li>Bootボタンを押し続ける</li> <li>Resetボタンを押し続ける</li> <li>Resetボタンを離す</li> <li>Bootボタンを離す</li> </Ul> </Blockquote> <P>引用の後の段落です。</P> </div> ), }); // The real zfb-path override components (as opposed to the raw-HTML // approximations used above) — Code, Em, Strong, H4-H6, Hr. export const ElementOverrides = defineStory({ name: 'Element overrides (real components)', render: () => ( <div className="max-w-[800px]"> <H4>H4見出し - Detail Section</H4> <P> <Strong>Strong要素</Strong>と<Em>Em要素</Em>、それに <Code>インラインコード</Code>を組み合わせて強調できます。 <Strong> <Em>StrongとEmの入れ子</Em> </Strong> もサポートしています。 </P> <H5>H5見出し</H5> <P>H5は小さめのセクション見出しに使用します。</P> <H6>H6見出し</H6> <P>H6は最も小さい見出しレベルです。</P> <Hr /> <P>区切り線の下のセクションです。</P> </div> ), }); // Every override component merges an extra `className` onto its own fixed // class list (`[className, ours].filter(Boolean).join(' ')`) — the one piece // of shared behavior across all seven overrides. Demonstrated here with a // visibly distinct accent color/spacing per element. export const ElementOverridesCustomClass = defineStory({ name: 'Element overrides (custom className merge)', render: () => ( <div className="max-w-[800px]"> <H4 className="text-zd-link">カスタムクラス付きH4</H4> <P> <Code className="text-zd-link">customClassName付きCode</Code> /{' '} <Strong className="text-zd-link">customClassName付きStrong</Strong> /{' '} <Em className="text-zd-link">customClassName付きEm</Em> </P> <Hr className="!bg-zd-link" /> </div> ), });