Sidebar nav: full garden tree on every page
- buildNavTree: every non-draft page nested by vault folder; folders link to their (real or synthetic) index page and take its title when set - NavTree component: recursive details/summary tree, no JS — folders on the current path render open, current page gets aria-current styling - layout: sticky left sidebar >=72rem, flows after the footer as a site index on narrow screens Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,38 @@
|
|||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
nodes: any[];
|
||||||
|
currentPath: string;
|
||||||
|
}
|
||||||
|
const { nodes, currentPath } = Astro.props;
|
||||||
|
// build-time pathnames may carry .html / index.html suffixes — normalize
|
||||||
|
const norm = decodeURIComponent(currentPath)
|
||||||
|
.replace(/index\.html$/, '')
|
||||||
|
.replace(/\.html$/, '');
|
||||||
|
const here = (u: string) => norm === u || norm === u.replace(/\/$/, '');
|
||||||
|
const under = (u: string) => norm.startsWith(u);
|
||||||
|
---
|
||||||
|
|
||||||
|
<ul class="nav-tree">
|
||||||
|
{
|
||||||
|
nodes.map((n) =>
|
||||||
|
n.children ? (
|
||||||
|
<li>
|
||||||
|
<details open={under(n.url)}>
|
||||||
|
<summary>
|
||||||
|
<a href={n.url} aria-current={here(n.url) ? 'page' : undefined}>
|
||||||
|
{n.name}
|
||||||
|
</a>
|
||||||
|
</summary>
|
||||||
|
<Astro.self nodes={n.children} currentPath={currentPath} />
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
) : (
|
||||||
|
<li>
|
||||||
|
<a href={n.url} aria-current={here(n.url) ? 'page' : undefined}>
|
||||||
|
{n.name}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
+96
-3
@@ -1,5 +1,8 @@
|
|||||||
---
|
---
|
||||||
import 'katex/dist/katex.min.css';
|
import 'katex/dist/katex.min.css';
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
import { buildNavTree } from '../lib/nav.mjs';
|
||||||
|
import NavTree from '../components/NavTree.astro';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -7,6 +10,7 @@ interface Props {
|
|||||||
}
|
}
|
||||||
const { title, description } = Astro.props;
|
const { title, description } = Astro.props;
|
||||||
const isHome = Astro.url.pathname === '/';
|
const isHome = Astro.url.pathname === '/';
|
||||||
|
const navTree = buildNavTree(await getCollection('garden'));
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
@@ -22,6 +26,8 @@ const isHome = Astro.url.pathname === '/';
|
|||||||
src="https://plausible.io/js/script.js"></script>
|
src="https://plausible.io/js/script.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="layout">
|
||||||
|
<div class="content-col">
|
||||||
<header>
|
<header>
|
||||||
{!isHome && <nav><a href="/">← home</a></nav>}
|
{!isHome && <nav><a href="/">← home</a></nav>}
|
||||||
</header>
|
</header>
|
||||||
@@ -35,6 +41,12 @@ const isHome = Astro.url.pathname === '/';
|
|||||||
<a href="https://resume.c0smere.net">resume</a>
|
<a href="https://resume.c0smere.net">resume</a>
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
</div>
|
||||||
|
<aside class="sidebar">
|
||||||
|
<p class="sidebar-title"><a href="/">the garden</a></p>
|
||||||
|
<NavTree nodes={navTree} currentPath={Astro.url.pathname} />
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// mermaid: only load the (large) module on pages that need it
|
// mermaid: only load the (large) module on pages that need it
|
||||||
@@ -81,14 +93,95 @@ const isHome = Astro.url.pathname === '/';
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
margin: 0 auto;
|
margin: 0;
|
||||||
padding: 1.5rem 1rem 3rem;
|
|
||||||
max-width: 44rem;
|
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
.layout {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem 1rem 3rem;
|
||||||
|
max-width: 44rem;
|
||||||
|
}
|
||||||
|
/* mobile: sidebar flows after the footer as a full site index */
|
||||||
|
.sidebar {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid var(--faint);
|
||||||
|
}
|
||||||
|
@media (min-width: 72rem) {
|
||||||
|
.layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 17rem minmax(0, 44rem);
|
||||||
|
gap: 3rem;
|
||||||
|
max-width: 66rem;
|
||||||
|
}
|
||||||
|
.sidebar {
|
||||||
|
order: -1;
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
border-top: none;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
align-self: start;
|
||||||
|
max-height: 100vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 1.5rem 0.5rem 1.5rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sidebar-title {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.sidebar-title a {
|
||||||
|
color: var(--fg);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.sidebar ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 0.85rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.sidebar > ul,
|
||||||
|
.sidebar-title + ul {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.sidebar li {
|
||||||
|
margin: 0.15rem 0;
|
||||||
|
}
|
||||||
|
.sidebar a {
|
||||||
|
color: var(--muted);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.sidebar a:hover {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.sidebar a[aria-current='page'] {
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.sidebar summary {
|
||||||
|
cursor: pointer;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.sidebar summary::before {
|
||||||
|
content: '▸';
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.9em;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.8em;
|
||||||
|
transition: transform 0.15s;
|
||||||
|
}
|
||||||
|
.sidebar details[open] > summary::before {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.sidebar summary a {
|
||||||
|
font-weight: 550;
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
a {
|
a {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,55 @@
|
|||||||
|
// Sidebar navigation tree: every non-draft page in the garden, nested by
|
||||||
|
// vault folder. Folders link to their index page (real or synthetic).
|
||||||
|
import { urlForId, slugForId } from './quartz-compat.mjs';
|
||||||
|
|
||||||
|
export function buildNavTree(entries) {
|
||||||
|
const root = { children: new Map() };
|
||||||
|
|
||||||
|
const dirNode = (parts) => {
|
||||||
|
let node = root;
|
||||||
|
let acc = '';
|
||||||
|
for (const seg of parts) {
|
||||||
|
acc = acc ? `${acc}/${seg}` : seg;
|
||||||
|
if (!node.children.has(seg)) {
|
||||||
|
node.children.set(seg, {
|
||||||
|
name: seg,
|
||||||
|
url: '/' + slugForId(acc) + '/',
|
||||||
|
children: new Map(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
node = node.children.get(seg);
|
||||||
|
}
|
||||||
|
return node;
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const e of entries) {
|
||||||
|
if (e.data.draft || e.id === 'index') continue;
|
||||||
|
const parts = e.id.split('/');
|
||||||
|
const base = parts.pop();
|
||||||
|
const folder = dirNode(parts);
|
||||||
|
if (base === 'index') {
|
||||||
|
// folder's own page: use its title for the folder label if set
|
||||||
|
if (e.data.title) folder.name = e.data.title;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
folder.children.set(base, {
|
||||||
|
name: e.data.title ?? base,
|
||||||
|
url: urlForId(e.id),
|
||||||
|
children: null,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const finalize = (node) => {
|
||||||
|
const kids = [...node.children.values()].map((k) =>
|
||||||
|
k.children ? finalize(k) : k,
|
||||||
|
);
|
||||||
|
kids.sort((a, b) => {
|
||||||
|
const af = a.children ? 0 : 1;
|
||||||
|
const bf = b.children ? 0 : 1;
|
||||||
|
return af - bf || a.name.localeCompare(b.name, 'en', { sensitivity: 'base' });
|
||||||
|
});
|
||||||
|
return { ...node, children: kids };
|
||||||
|
};
|
||||||
|
|
||||||
|
return finalize(root).children;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user