Styleguide

docs サイトの生成ページで使う基本要素とコンポーネント語彙の確認用ページです。このページ自体も content/ の Markdown から生成されます。

Generated page

統一テンプレートで作るドキュメント

本文は content/ に置き、head、戻りリンク、目次、Mermaid 読み込みは build script が決定的に合成します。

トップへ戻る Mermaid を確認

テキスト

本文、リンク、インラインコード、引用などの基本スタイルを確認します。トップページへのリンクと inline code の表示を含みます。

生成ページの見た目を確認するための引用例です。

カード

クリック導線は a.card[href] だけを使います。リンク先を持たない説明ブロックは .card を流用せず、.info-card を使います。これにより、hover や pointer affordance は実際に移動できるカードだけに限定されます。

リンクカード

クリックするとトップページへ移動する導線カードです。

公開ページ

共有用ドキュメントへの導線を想定したカードです。

情報カード

リンク先を持たない要点や分類を見せるためのカードです。

Invariant

.card は a.card[href] の link card に限定し、非リンク要素には付けません。

Callout

Info

補足説明や判断理由を短く示すための情報ブロックです。

Tip

推奨される使い方や成功状態を示します。

Warning

レビュー時に注意すべき制約や非対象を示します。

Steps

source を更新

ページ本文を content/ 配下の HTML または Markdown に書きます。
build

テンプレート合成で public/ の HTML を生成します。
preview

ローカル配信で導線と表示を確認します。

テーブル

項目	用途
content/	生成元のフラグメント
public/	Workers が配信する生成物

戻り導線

本文ページは metadata の back_links で静的な戻り先を指定できます。href は / で始まり // では始まらない site 内 path にします。ページ同士の関連リンクから深いページへ入る場合は、親ページへの導線とトップへの fallback を両方残します。

<!--
{
  "title": "Page title — Documentation",
  "back_links": [
    {
      "href": "/parent/",
      "label": "親ページに戻る"
    },
    {
      "href": "/",
      "label": "トップに戻る"
    }
  ]
}
-->

比較

Before

ページごとに head、footer、導線を手書きする。

After

本文 source だけを書き、構造は build script に任せる。

Stats

1 テンプレート

3 生成ページ

0 手書き public HTML

Timeline

Step 1 content/ の source を更新します。
Step 2 build script で public/ を再生成します。
Step 3 preview で表示と導線を確認します。

Disclosure

生成ルール

JSON metadata、本文フラグメント、Markdown のいずれも同じテンプレートに合成されます。

Mermaid

flowchart LR
        A[content] --> B[build]
          B --> C[public]

コード

build

node scripts/build.mjs