Conversation
There was a problem hiding this comment.
Pull request overview
This pull request updates the documentation site's typography and navigation system. The changes introduce Google Sans Flex as the primary font family and redesign the global header navigation to use accordion-style dropdowns for better content organization. The navigation now groups products under a "Product" dropdown and organizes reference documentation into collapsible sections for docs and contribution guides.
Changes:
- Switch main font from Noto Sans JP to Google Sans Flex (with Noto Sans JP as fallback for Japanese characters)
- Redesign header navigation with accordion dropdowns using native
<details>elements - Adjust navigation hierarchy with proper sizing, indentation, and visual feedback
- Ensure external tutorial/FAQ links open in new tabs with proper security attributes
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| src/layouts/DocsLayout.astro | Implements new accordion-based navigation structure with bilingual labels, external link handling, and responsive CSS styling for dropdowns |
| public/styles/global.css | Updates font imports and font-family stack to prioritize Google Sans Flex while maintaining Japanese font support |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@8..144,400;8..144,500;8..144,700&display=swap'); | ||
|
|
||
| /* Noto Sans JP: 丸付き数字（❶-❿）を確実にカバー */ | ||
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap'); |
There was a problem hiding this comment.
Consider using font-display: swap or font-display: optional in the Google Fonts URL query parameter to improve perceived performance and avoid FOUT (Flash of Unstyled Text). Currently using display=swap, which is good. However, you're loading two separate font families (Google Sans Flex and Noto Sans JP), which increases the initial page load. Consider whether both fonts are necessary on every page, or if Noto Sans JP could be loaded conditionally for Japanese pages only.
Summary
Testing