chore: changes for jaspr#423
Closed
JohnWeidner wants to merge 47 commits into
Closed
Conversation
|
note: it can be useful for the upcoming migrations. It seems Jaspr's markdown parser treats anything inside opening/closing tags as raw HTML. This is important to mention during the migration, as it causes this kind of issue: 
A quick fix for that is to use HTML formatting instead of the usual markdown formatting. On this example, I used tag instead of the markdown label syntax. 
|
…hlighted as the actively selected item.
- collapsible_sidebar: replace floating close button with structured
`.sidebar-mobile-header` bar (hidden on desktop ≥ 1024px) that holds
a flex row of `mobileNavItems` (nav links, icon links, ThemeToggle)
followed by the close button; add supporting CSS for
`.sidebar-mobile-header`, `.sidebar-mobile-nav`, and `.sidebar-close`
with correct light/dark borders and hover states
- main.server.dart: pass the same header items as `mobileNavItems` to
CollapsibleSidebar so Get Started, VGV Dev Tools, VGV icon, GitHub
icon, and ThemeToggle remain accessible in the mobile sidebar panel
- site_styles.dart: four layout fixes
• sidebar-barrier: position fixed + black background so DocsLayout's
opacity:0.5 produces rgba(0,0,0,0.5) Docusaurus scrim covering the
full viewport including the navbar
• desktop sidebar top: 3.75rem (matches header height, closes 4px gap
left by DocsLayout's default top:4rem)
• mobile sidebar width: 83vw (matches Docusaurus
--ifm-navbar-sidebar-width) instead of fixed 300px
• mobile sidebar z-index: 200 so panel slides over the fixed header
• dark mode mobile nav-button: transparent background + white text
matching Docusaurus custom.css @media (max-width:996px) rule
- main.server.dart: reduce mobileNavItems to Get Started CTA +
ThemeToggle only, matching Docusaurus's single-row header pattern
(CTA · toggle · ×); removes VGV Dev Tools, VGV icon, and GitHub icon
which caused the header to wrap onto two rows
- site_styles.dart:
• mobile sidebar: override .docs .sidebar to width:100% so nav items
fill the full 83vw panel (previously fixed at 300px desktop value,
leaving dead space on wider phones)
• dark mode mobile: sidebar-container background #081842 (navbar bg)
instead of #020f30 (page bg), matching Docusaurus's mobile overlay
appearance
- Add .sidebar-back button below the mobile header, hidden on desktop, matching Docusaurus's secondary-panel back-link appearance; clicking it removes the 'open' class from .sidebar-container to close the panel (handled via extended _toggleScript event delegation) - Remove border-bottom from .sidebar-mobile-header (and its dark mode override) so there is no divider line between the header row and the back-link row, matching the Docusaurus screenshot
Docs sidebar (CollapsibleSidebar): - Add `primaryNavItems` parameter for the global nav items - Add `.sidebar-primary` panel rendered between mobile header and back button - Update `_toggleScript`: "← Back to main menu" now switches to primary panel (adds `.show-primary` to `.sidebar`) instead of closing the sidebar - Close/barrier clicks reset `.show-primary` so next open starts fresh - Add CSS: `.sidebar-primary` (hidden by default), `.sidebar-primary-nav` (flex column), mobile media query for `.show-primary` panel toggle Home page (HomepageLayout): - Add `data-has-sidebar` attribute to `.header-container` so the hamburger button from `SidebarToggleButton` becomes visible at narrow viewports - Add `.sidebar-barrier` + `.sidebar-container` with primary nav items (Get Started, VGV Dev Tools, VGV icon, GitHub icon) as a vertical list - Add CSS: sidebar sliding panel (83vw, translateX, z-index 200), backdrop scrim via `:has()`, `.sidebar-primary-link` sidebar-style links, dark mode Global (site_styles.dart): - Add `.sidebar-icon-dark`/`.sidebar-icon-light` dark mode switching rules used by icon links in both the docs and home primary panels
Changes made: h3 font-weight: 600 → 700 (matching Docusaurus/Infima) in site_styles.dart Inline code styling: Added 1px solid rgba(0,0,0,0.1) border, changed border-radius from 0.2rem to 0.4rem, simplified padding to uniform 0.1rem Dark mode inline code: Added rgba(255,255,255,0.1) border for dark mode Dark mode page nav border: #444950 → #606770 (matching Docusaurus) Dark mode workflow card text: #ffffff → #ebedf0 (matching Docusaurus's muted white) Header: Changed border-bottom to box-shadow: rgba(0,0,0,0.1) 0 1px 2px 0 (matching Docusaurus) Sidebar link weight: 400 → 500 in collapsible_sidebar.dart Content layout fix: Zeroed inner div's horizontal padding at desktop (≥1000px), fixing content width from 711px → 735px (exactly matching Docusaurus) Visual parity: 94.74% → 95.00% (+0.26pp)
JohnWeidner
force-pushed
the
chore/convertToJaspr
branch
from
6cf685a to
5fbb52a
Compare
…izes and whitespace: Typography fixes (affecting both light and dark mode): h2 line-height: 1.5em (48px) → 1.25 unitless (40px) — matches Docusaurus h3 line-height: 1.5em (36px) → 1.25 unitless (30px) — matches Docusaurus h3 margin: 2rem 0 0.75rem (32px 0 12px) → 1.875rem 0 1.25rem (30px 0 20px) — matches Docusaurus ul/ol margin: 20px 0 → 0 0 1.25rem (bottom-only, matching Docusaurus) ul/ol padding-left: 26px → 2rem (32px, matching Docusaurus) li margin/padding: 8px 0 / 0 0 0 6px → 0 / 0 — matches Docusaurus Inline code font-weight: 600 → inherit (700 in headings, 400 in paragraphs) pre margin: 1.25rem 0 → 0 0 1.25rem (bottom-only, matching Docusaurus) Footer font-size: 0.75rem (12px) → 1rem (16px) — matches Docusaurus Page nav margin-top: 2rem (32px) → 48px — matches Docusaurus Page nav padding: 2rem 0 (32px) → 0 — matches Docusaurus Visual parity: 94.74% → 96.97% (+2.23pp)
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
2 participants
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.
Changes to use jaspr instead of Docusaurus
Status
IN DEVELOPMENT
Description
Type of Change