
2026/01/13 11:49
私たちは自らドキュメントサイトを作り上げました。
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
(欠落していた詳細を含む)**
Tangled のドキュメントは、単一の
DOCS.md ファイルから Pandoc の chunkedhtml 出力形式で生成される軽量な JavaScript‑free 静的サイトです。結果として得られるページには、自動生成された目次が含まれ、モバイル環境ではスクリプトなしで折りたたみ表示されます。また、ビルドパイプラインは Nix(runCommandLocal)を使用して Pandoc を実行し、Tailwind CSS でスタイリングし、カスタムテンプレート (docs/template.html) を利用しています。検索機能はブラウザの「ページ内検索」に限定されており、簡易フォームでドキュメント領域への Google 検索をリダイレクトすることができます。全サイト検索が必要な場合には、chunkedhtml ではなく 単一ページエクスポート(no chunkedhtml)も利用可能です。
チームは Mintlify、Docusaurus、MkDocs、MdBook など他のドキュメントエンジンを評価し、そのシンプルさと低オーバーヘッドから Pandoc を選択しました。モノレポおよび Nix デプロイメントは Tangled の既存インフラ(Colmena + nginx)に合わせて構築されています。デプロイは
nix flake update tangled を実行した後、nix run nixpkgs#colmena -- apply で行います。
Pandoc の Markdown エンジンと Tangled 内で使用される Goldmark にはレンダリング上の差異があります。ドキュメント量が増大する場合は、TigerStyle と呼ばれるカスタム静的サイトジェネレーターを導入し、より大きなコンテンツに対応できるようになる可能性があります。
このアプローチにより、ユーザーは軽量で高速なドキュメントを最小限の依存関係で利用でき、Tangled のインフラストラクチャをシンプルかつ保守しやすく保つことができます。将来的には TigerStyle などのツールによりスケーラビリティと開発者体験が向上する可能性があります。
本文
最近、ドキュメントを整理して https://docs.tangled.org に公開しました。Pandoc だけで作成しています。いくつかの理由から、Pandoc を使って静的サイトを自前で構築する方が、小規模プロジェクトには十分です。
要件
- モノレポ内に存在
- JavaScript は不要:テキストのみのページ集合は JS がなくても閲覧できるべきです。
- 検索性:多くのドキュメントエンジンは検索機能をバンドルしないため、
か外部検索を使うケースがほとんどです。Ctrl+F - 低複雑度:ビルド・テスト・デプロイが簡単であること。
- スタイル適用の容易さ
エコシステム評価
いくつかのドキュメントエンジンを検討しました。
| エンジン | 備考 |
|---|---|
| Mintlify | ホームページからは AI に重点を置いている印象。 |
| Docusaurus | 生成サイトは見栄えが良いですが、React SPA であるため過剰かもしれません。 |
| MkDocs | JS を無効にしても動作しますが、 で TOC を管理するのが面倒です。 |
| MdBook | で TOC を制御する必要があります。 |
MkDocs と MdBook は機能拡張を考えると今後も検討対象に残ります。
Pandoc の活用
Pandoc は柔軟なマークアップ変換ツールです。「chunkedhtml」出力形式はドキュメントサイト生成に最適です。デフォルト設定で Markdown ファイルを変換すると、次のようになります。
- ドキュメント構造から自動生成される TOC
- 各セクションが個別ページになる
Pandoc を自社ニーズに合わせて調整する手順は簡単です。
- Markdown を一つにまとめ:
DOCS.md - デフォルトテンプレートを変更:TOC をすべてのページに配置し、サイドバー化 (
)docs/template.html - Tailwind の prose クラスを挿入:tangled.org と docs.tangled.org で一貫した表示を実現
ドキュメント生成は次のコマンドで行います。
pandoc docs/DOCS.md \ -o out/ \ -t chunkedhtml \ --variable toc \ --toc-depth=2 \ --css=docs/stylesheet.css \ --chunk-template="%i.html" \ --highlight-style=docs/highlight.theme \ --template=docs/template.html
JavaScript を使わないサイドバー
モバイルで折りたたみ可能な TOC は多くのエンジンが JS で実装します。MkDocs は
:checked 擬似クラスを利用したチェックボックストリックで対応しています。
他のアプローチは次の通りです。
/<details>
:機能するものの、サイドバー外をクリックしても折りたたまれません。<summary>- Popover API:サイドバーコンポーネントに最適です。
Popover を使った例は以下の通りです。
<button popovertarget="toc-popover">Table of Contents</button> <div id="toc-popover" popover class="fixed top-0"> <ul> Quick Start <li>…</li> <li>…</li> <li>…</li> </ul> </div>
TOC は独立してスクロールでき、サイドバー外をクリックすると閉じます。画面幅が大きい場合は常に表示され、小さいデバイスのみで折りたたみ機能が有効です。
検索
現在サイトにはネイティブ検索機能はありません。https://htmx.org に触発され、検索バーは Google へリダイレクトするだけの実装にしています。
<form action="https://google.com/search"> <input type="hidden" name="q" value="+[inurl:https://docs.tangled.org]"> … </form>
ドキュメントが単一ページで扱いきれないほど大きくなる場合は、別の検索手段を検討します。
ビルドとデプロイ
Tangled の全サービスは Nix と Colmena を使って構築・配備しています。ドキュメントサイトをビルドする簡易的な Nix デリベーションは次のようになります。
runCommandLocal "docs" {} '' … ${pandoc}/bin/pandoc ${src}/docs/DOCS.md … … ''
NixOS のマシンでは nginx がサイトを提供します。
services.nginx = { enable = true; virtualHosts = { "docs.tangled.org" = { root = "${tangled-pkgs.docs}"; locations."/" = { tryFiles = "$uri $uri/ =404"; index = "index.html"; }; }; }; };
Colmena を使ったデプロイは次のように行います。
nix run nixpkgs#colmena -- apply
サイトを更新するには、まず
nix flake update tangled
で Tangled フレーク入力を最新化し、再デプロイをトリガーします。
備考
自前構築によりメインサイトと同じスタイルでドキュメントサイトを整えることが容易になりました。ただし Pandoc の Markdown レンダリングと Tangled で使われている Goldmark の間にはまだ差異があります。将来的には独自の静的サイトジェネレータ―TigerStyle!―を作る方向も検討しています。