Phase 1: VFM + SSMO基盤構築

[ogwata]

概要

docs2.vivliostyle.org の Phase 1 として、VFMカスタムローダーとSSMO対応CSSの基盤を構築しました。

変更内容

VFMカスタムローダー

• @vivliostyle/vfm パッケージによるMarkdown→HTML変換
• Astro Content Collections対応のカスタムローダー実装
• Frontmatter抽出（gray-matter使用）
• 多言語対応（en/ja）

SSMO対応CSS

• CSS変数によるデザイントークン定義
• Web/PDF/EPUB共通のタイポグラフィスタイル
• @media print による印刷/PDF用スタイル
• ダークモード対応

ページ構造

• ルートページで言語検出・リダイレクト
• 英語版・日本語版トップページ
• DocsLayoutコンポーネント

CI/CD

• GitHub Pages デプロイ用ワークフロー

確認方法

npm install
npm run dev
# http://localhost:4321/ にアクセス

関連ドキュメント

• _investigation/DEVELOPMENT_PLAN-2.md
• _investigation/CSS_OPTIONS.md

次のステップ（Phase 2以降）

• CLI ドキュメントの統合（submodule）
• 他プロダクトドキュメントの統合
• PDF/EPUB生成設定

[Copilot]

Pull request overview

This PR implements Phase 1 of the docs2.vivliostyle.org project, establishing a foundation for Single Source Multi Output (SSMO) documentation that can generate Web, PDF, and EPUB formats from a single Markdown source. The implementation includes a custom VFM (Vivliostyle Flavored Markdown) loader for Astro Content Collections and SSMO-compatible CSS design.

Key Changes:

• Custom VFM loader for Astro Content Collections with multi-language support
• SSMO-compatible CSS using CSS variables and media queries for Web/PDF/EPUB output
• Language detection and routing system for English and Japanese content
• GitHub Actions workflow for automated deployment

Reviewed changes

Copilot reviewed 20 out of 24 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
src/loaders/vfm-loader.ts	Custom Astro loader for VFM Markdown conversion with frontmatter support
src/content.config.ts	Content Collections configuration for English and Japanese documentation
src/layouts/DocsLayout.astro	Main documentation layout with header, sidebar, and responsive design
src/pages/index.astro	Root page with client-side language detection and redirect
src/pages/en/index.astro	English language homepage with VFM content loading
src/pages/ja/index.astro	Japanese language homepage with VFM content loading
public/styles/global.css	SSMO-compatible global styles with Web/PDF/EPUB support via media queries
content/en/index.md	English homepage content with VFM syntax examples
content/ja/index.md	Japanese homepage content with VFM syntax examples
astro.config.mjs	Astro configuration with VFM external dependency handling
package.json	Project dependencies including VFM, Astro, and gray-matter
.github/workflows/deploy.yml	GitHub Pages deployment workflow with submodule support
_investigation/*.md	Comprehensive planning and research documentation

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[MurakamiShinyu]

npm run dev でサーバー起動して、http://localhost:4321/ を開くと、

In your site you have your base path set to /docs2.vivliostyle.org. Do you want to go there instead?

とhttp://localhost:4321/docs2.vivliostyle.org を開かなければならなくなっています。そこでそれを開いてみましたがスタイルシートが適用されないなどうまく動きません。スタイルシートへのリンクなどが /docs2.vivliostyle.org/ というディレクトリからでなくルートからのパスになっているためです。

commit 717b75d

fix: GitHub Pages 用のベースパス設定を追加

が問題だと思います。

  site: 'https://docs2.vivliostyle.org',

から

  site: 'https://vivliostyle.github.io',
  base: '/docs2.vivliostyle.org',

に変更されていますが、公開予定のURLは 'https://docs2.vivliostyle.org' であるので、変更前が正しいです。https://vivliostyle.github.io/docs2.vivliostyle.org/ に公開するのではありません（GitHub Pagesのしくみでまずそこにできますがそれは公開しません）。
このコミットの変更をすべて取り消すとよいと思います。

[ogwata]

e53019dで対応しました。ご確認ください。

[MurakamiShinyu]

e53019dで対応しました。ご確認ください。

src/pages/index.astro も元に戻す必要があります。

717b75d#diff-95d291e9ce4c8739cc7e65ff7bf0838dd5294cf39ab787ba51a42d08fb2df663

の変更を元に戻すとよいと思います。

[ogwata]

失礼しました。3ff2cb7で修正しました。
ご確認ください。

[MurakamiShinyu]

これでよいと思います。
あとはカスタムドメインを docs2.vivliostyle.org にする設定をすると https://docs2.vivliostyle.org/ でアクセスできるようになるはずです。
（vivliostyle.orgドメインのサブドメインdocs2のDNSレコードの設定をしておきました）