From e0ce3eab4858d8740b564113690526c4c2d966cb Mon Sep 17 00:00:00 2001
From: Branimir Georgiev <braboj@gmail.com>
Date: Sat, 25 Apr 2026 18:58:28 +0300
Subject: [PATCH] feat: add resizable sidebars, fix favicon and theme FOUC
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add draggable splitter between sidebars and content area with teal
highlight on hover. Session-only — resets on navigation. Widen
default sidebar to 16rem.

Fix flash of unstyled content by moving theme init to the head.
Add favicon link with correct base path.

Remove PlaybookNav component — all pages show tutorial links on
the right sidebar.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 astro-site/src/components/PlaybookNav.astro | 81 ------------------
 astro-site/src/layouts/DocLayout.astro      | 61 +++++++++----
 astro-site/src/pages/[...slug].astro        |  1 -
 astro-site/src/styles/global.css            | 94 +++++----------------
 4 files changed, 65 insertions(+), 172 deletions(-)
 delete mode 100644 astro-site/src/components/PlaybookNav.astro

diff --git a/astro-site/src/components/PlaybookNav.astro b/astro-site/src/components/PlaybookNav.astro
deleted file mode 100644
index 6b8b15e..0000000
--- a/astro-site/src/components/PlaybookNav.astro
+++ /dev/null
@@ -1,81 +0,0 @@
----
-interface Recipe {
-  slug: string;
-  title: string;
-}
-
-interface Props {
-  currentSection: string;
-}
-
-const { currentSection } = Astro.props;
-const base = import.meta.env.BASE_URL;
-
-const groups: { label: string; recipes: Recipe[] }[] = [
-  {
-    label: "Everyday",
-    recipes: [
-      { slug: "playbook/undoing-changes", title: "Undoing Changes" },
-      { slug: "playbook/diffing", title: "Diffing" },
-      { slug: "playbook/history", title: "History" },
-      { slug: "playbook/stashing", title: "Stashing" },
-    ],
-  },
-  {
-    label: "Branching and Merging",
-    recipes: [
-      { slug: "playbook/branching", title: "Branching" },
-      { slug: "playbook/merging", title: "Merging" },
-      { slug: "playbook/rebasing", title: "Rebasing" },
-      { slug: "playbook/cherry-picking", title: "Cherry-Picking" },
-    ],
-  },
-  {
-    label: "Remote",
-    recipes: [
-      { slug: "playbook/remote-operations", title: "Remote Operations" },
-      { slug: "playbook/remote-management", title: "Remote Management" },
-    ],
-  },
-  {
-    label: "Project Structure",
-    recipes: [
-      { slug: "playbook/tagging", title: "Tagging" },
-      { slug: "playbook/submodules", title: "Submodules" },
-      { slug: "playbook/subtrees", title: "Subtrees" },
-    ],
-  },
-  {
-    label: "Advanced",
-    recipes: [
-      { slug: "playbook/selectors", title: "Selectors" },
-      { slug: "playbook/hooks", title: "Hooks" },
-      { slug: "playbook/debugging", title: "Debugging" },
-      { slug: "playbook/configuration", title: "Configuration" },
-    ],
-  },
-];
----
-
-<nav class="playbook-nav">
-  <div class="playbook-nav-title">
-    <a href={`${base}playbook/`} class={currentSection === "playbook" ? "active" : ""}>Playbook</a>
-  </div>
-  {groups.map((group) => (
-    <div class="playbook-nav-group">
-      <div class="playbook-nav-group-label">{group.label}</div>
-      <ul>
-        {group.recipes.map((r) => (
-          <li>
-            <a
-              href={`${base}${r.slug}/`}
-              class={currentSection === r.slug ? "active" : ""}
-            >
-              {r.title}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </div>
-  ))}
-</nav>
diff --git a/astro-site/src/layouts/DocLayout.astro b/astro-site/src/layouts/DocLayout.astro
index 8b9d5c8..e9a11b6 100644
--- a/astro-site/src/layouts/DocLayout.astro
+++ b/astro-site/src/layouts/DocLayout.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>
diff --git a/astro-site/src/pages/[...slug].astro b/astro-site/src/pages/[...slug].astro
index bb976de..f38997b 100644
--- a/astro-site/src/pages/[...slug].astro
+++ b/astro-site/src/pages/[...slug].astro
@@ -47,7 +47,6 @@ const jsonLd = {
   description={entry.data.description}
   headings={headings}
   currentPath={sectionPath}
-  currentSection={page.section}
   jsonLd={jsonLd}
 >
   <Content />
diff --git a/astro-site/src/styles/global.css b/astro-site/src/styles/global.css
index 6cf30ba..5a3a5bc 100644
--- a/astro-site/src/styles/global.css
+++ b/astro-site/src/styles/global.css
@@ -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;
   }
 }