Conversation
スマホ表示時のヘッダー要素のレイアウト問題を修正。 変更内容: - ダークモードトグルと言語スイッチをモバイル時はサイドバー上部に移動 - 検索ボックスの幅を柔軟に調整し、画面幅に収まるように改善 - ThemeToggleコンポーネントを複数インスタンスに対応（querySelectorAll使用） これにより、スマホでヘッダー要素が画面外にはみ出す問題が解消され、 すべてのコントロールに容易にアクセスできるようになった。 修正ファイル: - src/layouts/DocsLayout.astro - src/components/ThemeToggle.astro - src/components/SearchBox.astro Closes #7 (Task 0)
- Vivliostyle CLI (@vivliostyle/cli)を追加 - 10個のPDF生成config作成(cli/vfm/themes/viewer/reference × ja/en) - packages/theme-PDFカスタムテーマ作成(package.json, theme.css, README.md) - @media printでPageNavigation非表示化 - ページ番号を中央のみに修正 - インライン画像(width/height属性, style="width:1.5em")対応 - float画像と後続ul要素の回り込み対応 - 画像ファイルをdist配下にコピー - .vivliostyleキャッシュディレクトリを.gitignoreに追加 - npm run build:pdfスクリプト群追加
- Analyzed HTML structure of 5 products (CLI, VFM, Themes, Viewer, Reference) - Created quantitative comparison table (lines, headings, images, special elements) - Classified products by complexity (lightweight 30-42 lines vs heavyweight 326 lines) - Identified 3-level image complexity taxonomy (none/simple/styled) - Evaluated 3 theme design options (single/base+ext/modular) - Recommended modular theme approach for maintainability This analysis forms the foundation for Phase 5 theme design strategy.
- Added pros/cons analysis for all 3 options (single/base+ext/modular) - Explained why Option C (Modular Theme) is recommended - Added implementation priority phases (Phase 1-4) - Clarified that modular approach aligns with SSMO design philosophy - Documented use cases for each option
- Identified current issue: purple (#6b4fa2) has low visibility in dark mode - Proposed 3 color candidates: 1. Bright Blue (#3b9eff) - Recommended for brand alignment 2. Cyan/Teal (#22d3ee) - Modern and fresh appearance 3. Coral/Orange (#ff7849) - High visibility warm tone - Added comparison table with contrast ratios and use cases - Included implementation guide for global.css - Recommended Bright Blue for best balance of accessibility and brand consistency
- Added HTML color swatches for all 3 candidates - Displayed current color (#6b4fa2) with visual chip - Created comparison table with before/after color swatches - Improved visual clarity for color selection decision
…b compatibility - Replaced HTML spans with via.placeholder.com color swatches - GitHub Markdown sanitizes inline styles, so using external images instead - All color chips now display properly on GitHub - Converted comparison table to use image-based color swatches
- GitHub was blocking via.placeholder.com images - Switched to img.shields.io which is widely supported on GitHub - Used 'for-the-badge' style for better visibility - All color chips should now display properly
- Changed CNAME from docs2.vivliostyle.org to docs.vivliostyle.org - Updated site URL in astro.config.mjs - Added @astrojs/sitemap integration for SEO - Verified build succeeds (57 pages generated) - All internal links use relative paths (no hardcoded domains) - Ready for production deployment to docs.vivliostyle.org
- Changed primary color from #6b4fa2 (purple) to #3b9eff (bright blue) - Updated primary-light: #5eb0ff - Updated primary-dark: #2080e0 - Improves visibility in dark mode - Better alignment with Vivliostyle brand colors - See _investigation/COLOR_PROPOSAL.md for detailed analysis
- Add sidebar link styles to global.css for all sidebar links - Update fallback colors from #0066cc to #3b9eff in themes/vfm/cli pages - Add link styles to index and viewer pages - Apply :global() to reference page sidebar styles to ensure proper scoping - All sidebar links now use var(--color-text) for normal state and var(--color-primary) for hover state
Contributor
There was a problem hiding this comment.
Pull request overview
This PR prepares the documentation site for production deployment to docs.vivliostyle.org with three main improvements: domain configuration updates, accent color changes for better dark mode visibility, and mobile header layout fixes.
Changes:
- Updated domain from
docs2.vivliostyle.orgtodocs.vivliostyle.orgin CNAME and Astro config - Changed accent color from purple (#6b4fa2) to bright blue (#3b9eff) for improved dark mode accessibility
- Fixed mobile header by moving theme toggle and language switcher into the sidebar menu for better responsive design
- Added comprehensive PDF generation support with 10 Vivliostyle config files and a new PDF theme
- Fixed sidebar link colors across all pages to use consistent theming instead of browser defaults
Reviewed changes
Copilot reviewed 36 out of 48 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| public/CNAME | Updated domain to docs.vivliostyle.org |
| astro.config.mjs | Updated site URL and added sitemap integration |
| public/styles/global.css | Changed accent colors and added comprehensive sidebar link styling |
| src/layouts/DocsLayout.astro | Added mobile controls in sidebar with theme toggle and language switcher |
| src/components/ThemeToggle.astro | Updated to support multiple toggle instances (header + sidebar) |
| src/components/SearchBox.astro | Removed min-width constraint for better mobile flexibility |
| vivliostyle.config-*.js (10 files) | Added PDF generation configurations for all documentation sections |
| packages/theme-PDF/* | New PDF theme with print-optimized styles and web element removal |
| public/styles/pdf.css | PDF-specific styles (duplicate of theme-PDF/theme.css) |
| package.json | Added Vivliostyle CLI dependencies and PDF build scripts |
| src/pages/*/[...slug].astro (12 files) | Updated fallback colors and added sidebar link styling |
| _investigation/*.md | Documentation for Phase 5 planning and color proposals |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Remove duplicate sidebar link styles in reference pages (en/ja) - Internationalize ThemeToggle aria-labels for ja/en support - Remove duplicate max-width rule in global.css @media print
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 36 out of 48 changed files in this pull request and generated 9 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Remove duplicate sidebar link styles from reference pages (global.css already handles) - Update repository URLs from docs2 to docs for consistency - Update internal documentation URLs in _investigation files
- Remove overly broad .sidebar a selector - Remove important to allow active/selected link states to work properly - Keep specific selectors for navigation links only
Member
|
ダークモードで、「前へ」・「次へ」のリンクのボタンをホーバーしたとき、背景色が白くなりますがタイトルがダークモードでの通常テキストの色のままなので、見えにくくなります。 これはこのプルリクエストの内容ではないですが気になったのでコメントしておきます。 修正案： src/components/PageNavigation.astro#83 の src/components/PageNavigation.astro#108 の |
- Add lighter text color on hover for better contrast with white background - Remove redundant color declaration from nav-title to inherit hover state
Member
Author
|
ありがとうございます。c6380a2で対応しました。 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
本番環境（docs.vivliostyle.org）へのデプロイメント準備として、ドメイン設定、アクセントカラー変更、およびサイドバーリンクの色修正を実施しました。
主な変更内容
1. ドメイン設定の更新
docs2.vivliostyle.org→docs.vivliostyle.orgへの移行準備2. アクセントカラーの変更
3. サイドバーリンク色の修正
技術的詳細
Astroスロットスコープの課題
:global()疑似クラスでも不十分public/styles/global.cssにスタイルを追加し、!importantでブラウザデフォルトを上書き変更ファイル（13ファイル）
public/styles/global.css- サイドバーリンクスタイル追加public/CNAME- ドメイン設定astro.config.mjs- サイトURL設定vivliostyle.config-*.jsファイル（6ファイル）- baseURL更新src/pages/{ja,en}/index.astro- ナビゲーションスタイルsrc/pages/{ja,en}/viewer/[...slug].astro- 戻るリンクスタイルsrc/pages/{ja,en}/{cli,vfm,themes}/[...slug].astro（6ファイル）- フォールバックカラー更新テスト済み項目
デプロイ後の確認事項
関連コミット
参考資料
_investigation/DEVELOPMENT_PLAN-2.md_investigation/COLOR_PROPOSAL.md