Skip to content

feat: add resizable sidebars and fix FOUC #145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
braboj merged 1 commit into from
Apr 25, 2026
Merged

feat: add resizable sidebars and fix FOUC #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 0 additions & 81 deletions astro-site/src/components/PlaybookNav.astro
View file
Open in desktop

This file was deleted.

61 changes: 46 additions & 15 deletions astro-site/src/layouts/DocLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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);
Expand All @@ -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 -->
Expand All @@ -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)} />
Expand All @@ -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>
1 change: 0 additions & 1 deletion astro-site/src/pages/[...slug].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ const jsonLd = {
description={entry.data.description}
headings={headings}
currentPath={sectionPath}
currentSection={page.section}
jsonLd={jsonLd}
>
<Content />
Expand Down
94 changes: 19 additions & 75 deletions astro-site/src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -632,7 +576,7 @@ a:hover {

.sidebar-toc,
.sidebar-tutorials,
.playbook-nav {
.resize-handle {
display: none;
}
}
Expand Down
Loading