ReviewOS
Reload

also looking at this

stacks/bunpress

fix(spa): repair client-side router and polish default theme

#71
Merged glennmichael123 wants to merge fix/spa-nav-and-theme-polish into main
9 files +1037 -170
packages/bunpress/src/templates/layout-doc.stxmodified+23-19
@@ -14,25 +14,29 @@
1414<body>
1515 <div class="Layout">
1616 <!-- VPNav - Header -->
17 <header class="VPNav" style="position: fixed; top: 0; left: 0; right: 0; height: var(--bp-nav-height, 64px); background-color: var(--bp-nav-bg-color, var(--bp-c-bg)); border-bottom: 1px solid var(--bp-c-divider); z-index: var(--bp-z-index-nav, 30);">
18 <div style="max-width: var(--bp-layout-max-width, 1440px); margin: 0 auto; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 24px;">
19 <!-- Left side: Logo/Title + Search -->
20 <div style="display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0;">
21 <a href="/" class="VPNavBarTitle" style="font-size: 16px; font-weight: 600; color: var(--bp-c-text-1); white-space: nowrap; text-decoration: none;">{{ title }}</a>
22 <div class="VPNavBarSearch" style="position: relative; display: flex; align-items: center; max-width: 260px; width: 100%;">
23 <svg style="position: absolute; left: 12px; width: 16px; height: 16px; color: var(--bp-c-text-3);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
17 <header class="VPNav">
18 <div class="VPNavBar">
19 <div class="VPNavBarStart">
20 <button class="VPNavBarHamburger" type="button" aria-label="Toggle navigation" onclick="toggleSidebar()">
21 <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
22 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
23 </svg>
24 </button>
25 <a href="/" class="VPNavBarTitle">{{ title }}</a>
26 <div class="VPNavBarSearch">
27 <svg class="VPNavBarSearch-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2428 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
2529 </svg>
26 <input type="text" placeholder="Search" style="width: 100%; height: 32px; padding-left: 36px; padding-right: 48px; font-size: 13px; background-color: var(--bp-c-bg-alt); border: 1px solid var(--bp-c-divider); border-radius: 4px; color: var(--bp-c-text-1); outline: none; transition: border-color 0.25s, background-color 0.25s;" />
27 <kbd style="position: absolute; right: 8px; padding: 2px 6px; font-size: 11px; font-weight: 600; color: var(--bp-c-text-3); background-color: var(--bp-c-bg); border: 1px solid var(--bp-c-divider); border-radius: 4px;">⌘ K</kbd>
30 <input type="text" class="VPNavBarSearch-input" placeholder="Search" />
31 <kbd class="VPNavBarSearch-kbd">⌘ K</kbd>
2832 </div>
2933 </div>
3034
31 <!-- Right side: Navigation + Icons -->
32 <div style="display: flex; align-items: center; gap: 24px;">
33 {!! nav !!}
34 <div class="VPSocialLinks" style="display: flex; align-items: center; gap: 12px; padding-left: 24px; border-left: 1px solid var(--bp-c-divider);">
35 <!-- Theme Toggle -->
35 <div class="VPNavBarEnd">
36 <div class="VPNavBarMenu">
37 {!! nav !!}
38 </div>
39 <div class="VPSocialLinks">
3640 <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode" title="Toggle dark mode">
3741 <svg class="sun-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3842 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
@@ -41,8 +45,8 @@
4145 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
4246 </svg>
4347 </button>
44 <a href="https://github.com/stacksjs/bunpress" target="_blank" style="color: var(--bp-c-text-2); transition: color 0.25s;" onmouseover="this.style.color='var(--bp-c-text-1)'" onmouseout="this.style.color='var(--bp-c-text-2)'">
45 <svg style="width: 20px; height: 20px;" fill="currentColor" viewBox="0 0 24 24">
48 <a href="https://github.com/stacksjs/bunpress" target="_blank" rel="noopener external" aria-label="GitHub">
49 <svg fill="currentColor" viewBox="0 0 24 24">
4650 <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
4751 </svg>
4852 </a>
@@ -55,9 +59,9 @@
5559 {!! sidebar !!}
5660
5761 <!-- VPContent - Main content area -->
58 <main class="VPContent" style="position: fixed; top: var(--bp-nav-height, 64px); bottom: 0; overflow-y: auto; left: max(var(--bp-sidebar-width, 272px), calc((100vw - var(--bp-layout-max-width, 1440px)) / 2 + var(--bp-sidebar-width, 272px))); right: max(0px, calc((100vw - var(--bp-layout-max-width, 1440px)) / 2));">
59 <div class="VPDoc" style="padding: 32px 24px; padding-right: 32px;">
60 <div class="VPDocContent" style="max-width: 768px; margin: 0;">
62 <main class="VPContent VPContent--doc">
63 <div class="VPDoc">
64 <div class="VPDocContent">
6165 <article class="bp-doc">
6266 {!! content !!}
6367 </article>