Add global language selector and docs page navigation filtering to improve docs DX #165
Conversation
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
Replace individual page-level language selectors with a centralized GlobalLanguageSelector component. This refactoring consolidates language switching functionality into a single global component that integrates with the existing UnifiedPageManager, providing a more consistent user experience across all documentation pages.
Add GlobalLanguageSelector.astro component that provides a unified language switcher for JavaScript, Go, and Python code examples. Features include: - CSS-controlled display to prevent flicker during language switches - Integration with UnifiedPageManager for cross-page synchronization - Accessible design with ARIA labels and screen reader support - Mobile-responsive styling with hover and focus states - MutationObserver for real-time sync with data-genkit-lang attribute
…c content Add CSS rules to automatically hide sidebar section headers when they contain no links for the currently selected language (JavaScript, Go, or Python), improving the user experience by reducing visual clutter in language-filtered views.
- Remove redundant mutation observer from GlobalLanguageSelector, delegate to UnifiedPageManager - Clean up LanguageSelector props by removing unused 'languages' parameter - Consolidate duplicate CSS selectors for language filtering into grouped rules - Improve code organization and reduce redundancy in language management
- Decrease vertical padding from 1rem to 0.75rem - Remove bottom border styling - Reduce bottom margin from 0.5rem to 0.25rem Makes the language selector component more compact and cleaner.
Add language-specific icons (Node.js, Go, Python) to the language selector dropdown. Refactor the component to use dynamic rendering with imported SVG icons and improve the layout with flexbox styling. Update CSS for better visual alignment and consistent spacing.
pavelgj
reviewed
Oct 28, 2025
| { label: "pgvector", slug: "docs/integrations/pgvector", attrs: { 'data-lang': 'js go python' } }, | ||
| { label: "LanceDB", slug: "docs/integrations/lancedb", attrs: { 'data-lang': 'js go python' } }, | ||
| { label: "Astra DB", slug: "docs/integrations/astra-db", attrs: { 'data-lang': 'js go python' } }, | ||
| { label: "Neo4j", slug: "docs/integrations/neo4j", attrs: { 'data-lang': 'js go python' } }, |
Add synchronization logic to GlobalLanguageSelector to ensure the hidden select value stays in sync with the current language (data-genkit-lang attribute). This fixes dropdown checkmark display when language is changed by other selectors on the page. - Add syncSelectValue function to read current language from DOM - Implement MutationObserver to watch for language attribute changes - Ensure initial sync on component load
pavelgj
approved these changes
Oct 28, 2025
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.
Adds a global language selector to the docs navigation and filters the docs navigation column content in CSS based on selected language so that only relevant pages are displayed - reducing liklihood of developers finding irrelevant docs pages for a given language.
Global and page-level language selectors are in sync and both affect the navigation filtering.
Change should be SEO-friendly because all pages in the navigation are available to crawlers in the HTML, with filtering happening through CSS.