Merge pull request #145 from braboj/feature/resizable-sidebar

feat: add resizable sidebars and fix FOUC

Author: braboj

astro-site/src/components/PlaybookNav.astro

@@ -2,7 +2,6 @@
 import "../styles/global.css";
 import Header from "../components/Header.astro";
 import TableOfContents from "../components/TableOfContents.astro";
-import PlaybookNav from "../components/PlaybookNav.astro";
 import TutorialLinks from "../components/TutorialLinks.astro";
 import Footer from "../components/Footer.astro";
 import site from "../data/site.json";
@@ -12,12 +11,10 @@ interface Props {
   description?: string;
   headings?: { depth: number; slug: string; text: string }[];
   currentPath?: string;
-  currentSection?: string;
   jsonLd?: Record<string, unknown>;
 }
 
-const { title, description, headings = [], currentPath = "/", currentSection = "", jsonLd } = Astro.props;
-const isPlaybook = currentSection === "playbook" || currentSection.startsWith("playbook/");
+const { title, description, headings = [], currentPath = "/", jsonLd } = Astro.props;
 const pageDescription = description || site.description;
 const pageTitle = `${title} — ${site.title}`;
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
@@ -31,6 +28,7 @@ const ogImage = new URL("/tutorial-git/images/og-banner.png", Astro.site);
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{pageTitle}</title>
     <meta name="description" content={pageDescription} />
+    <link rel="icon" href={`${import.meta.env.BASE_URL}favicon.svg`} type="image/svg+xml" />
     <link rel="canonical" href={canonicalUrl} />
 
     <!-- Open Graph -->
@@ -47,12 +45,7 @@ const ogImage = new URL("/tutorial-git/images/og-banner.png", Astro.site);
     <meta name="twitter:description" content={pageDescription} />
     <meta name="twitter:image" content={ogImage} />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap"
-      rel="stylesheet"
-    />
+
 
     {jsonLd && (
       <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
@@ -70,16 +63,54 @@ const ogImage = new URL("/tutorial-git/images/og-banner.png", Astro.site);
     <Header currentPath={currentPath} />
     <div class="site-main">
       <TableOfContents headings={headings} />
+      <div class="resize-handle" data-side="left"></div>
       <main class="content" id="main-content">
         <h1>{title}</h1>
         <slot />
       </main>
-      {isPlaybook ? (
-        <PlaybookNav currentSection={currentSection} />
-      ) : (
-        <TutorialLinks />
-      )}
+      <div class="resize-handle" data-side="right"></div>
+      <TutorialLinks />
     </div>
     <Footer />
+
+    <script is:inline>
+      (function () {
+        var root = document.documentElement;
+        document.querySelectorAll(".resize-handle").forEach(function (handle) {
+          var side = handle.getAttribute("data-side");
+          handle.addEventListener("mousedown", function (e) {
+            e.preventDefault();
+            var startX = e.clientX;
+            var col = side === "left" ? 0 : 4;
+            var grid = handle.parentElement;
+            var current = grid.querySelectorAll(
+              side === "left" ? ".sidebar-toc" : ".sidebar-tutorials"
+            )[0];
+            var startWidth = current ? current.offsetWidth : 256;
+
+            function onMove(e) {
+              var delta = e.clientX - startX;
+              var newWidth = side === "left" ? startWidth + delta : startWidth - delta;
+              newWidth = Math.max(140, Math.min(400, newWidth));
+              var cols = getComputedStyle(grid).gridTemplateColumns.split(" ");
+              cols[col] = newWidth + "px";
+              grid.style.gridTemplateColumns = cols.join(" ");
+            }
+
+            function onUp() {
+              document.removeEventListener("mousemove", onMove);
+              document.removeEventListener("mouseup", onUp);
+              document.body.style.userSelect = "";
+              document.body.style.cursor = "";
+            }
+
+            document.body.style.userSelect = "none";
+            document.body.style.cursor = "col-resize";
+            document.addEventListener("mousemove", onMove);
+            document.addEventListener("mouseup", onUp);
+          });
+        });
+      })();
+    </script>
   </body>
 </html>

astro-site/src/layouts/DocLayout.astro

@@ -47,7 +47,6 @@ const jsonLd = {
   description={entry.data.description}
   headings={headings}
   currentPath={sectionPath}
-  currentSection={page.section}
   jsonLd={jsonLd}
 >
   <Content />

astro-site/src/pages/[...slug].astro

@@ -35,8 +35,8 @@
   --max-content: 50rem;
 
   /* Typography */
-  --font-text: "Roboto", system-ui, sans-serif;
-  --font-code: "Roboto Mono", ui-monospace, monospace;
+  --font-text: system-ui, -apple-system, sans-serif;
+  --font-code: ui-monospace, "Cascadia Code", "Fira Code", monospace;
   --font-size-sm: 0.8125rem;
   --font-size-base: 0.875rem;
   --font-size-lg: 1rem;
@@ -277,7 +277,7 @@ a:hover {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  padding: 0 var(--space-sm);
+  padding: 0 0.75rem;
   height: var(--tab-height);
   display: flex;
   align-items: center;
@@ -299,12 +299,26 @@ a:hover {
 /* Three-column layout */
 .site-main {
   display: grid;
-  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width);
+  grid-template-columns: var(--sidebar-width) 4px minmax(0, 1fr) 4px var(--sidebar-width);
   max-width: calc(var(--max-content) + 2 * var(--sidebar-width) + 2 * var(--space-xl));
   margin: 0 auto;
   min-height: calc(100vh - var(--header-height) - var(--tab-height));
 }
 
+/* Resize handles */
+.resize-handle {
+  width: 4px;
+  cursor: col-resize;
+  background: transparent;
+  transition: background 0.15s;
+  z-index: 10;
+}
+
+.resize-handle:hover,
+.resize-handle:active {
+  background: var(--color-primary-light);
+}
+
 /* Left sidebar — TOC */
 .sidebar-toc {
   position: sticky;
@@ -382,76 +396,6 @@ a:hover {
   content: "−";
 }
 
-/* Right sidebar — Playbook navigation */
-.playbook-nav {
-  position: sticky;
-  top: calc(var(--header-height) + var(--tab-height));
-  height: calc(100vh - var(--header-height) - var(--tab-height));
-  overflow-y: auto;
-  padding: var(--space-lg) var(--space-md);
-  border-left: 1px solid var(--color-border);
-  font-size: var(--font-size-sm);
-}
-
-.playbook-nav-title {
-  font-size: var(--font-size-sm);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: var(--space-md);
-}
-
-.playbook-nav-title a {
-  color: var(--color-fg-muted);
-}
-
-.playbook-nav-title a:hover,
-.playbook-nav-title a.active {
-  color: var(--color-primary-light);
-  text-decoration: none;
-}
-
-.playbook-nav-group {
-  margin-bottom: var(--space-md);
-}
-
-.playbook-nav-group-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--color-fg-faint);
-  margin-bottom: var(--space-xs);
-}
-
-.playbook-nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.playbook-nav li {
-  margin-bottom: 1px;
-}
-
-.playbook-nav li a {
-  display: block;
-  color: var(--color-fg-muted);
-  padding: var(--space-xs) var(--space-sm);
-  border-radius: 3px;
-}
-
-.playbook-nav li a:hover {
-  color: var(--color-primary-light);
-  background: var(--color-bg-hover);
-  text-decoration: none;
-}
-
-.playbook-nav li a.active {
-  color: var(--color-primary);
-  background: var(--color-bg-alt);
-  font-weight: 500;
-}
 
 /* Content area */
 .content {
@@ -632,7 +576,7 @@ a:hover {
 
   .sidebar-toc,
   .sidebar-tutorials,
-  .playbook-nav {
+  .resize-handle {
     display: none;
   }
 }