methanol 0.0.9 → 0.0.11

package/themes/default/components/ThemeSearchBox.client.jsx

@@ -30,6 +30,7 @@ const loadPagefindModule = async () => {
 
 let keybindReady = false
 let cachedPagefind = null
+const PAGE_SIZE = 10
 
 const resolveShortcutLabel = () => {
 	if (typeof navigator === 'undefined') return 'Ctrl+K'
@@ -60,48 +61,107 @@ export default function ({ options } = {}) {
 	const query = signal('')
 	const results = signal([])
 	const isLoading = signal(false)
+	const isLoadingMore = signal(false)
+	const hasMore = signal(false)
 	const activeIndex = signal(-1)
+	const loadError = signal('')
 
 	const buttonRef = signal()
 	const inputRef = signal()
+	const resultsRef = signal()
+	const loadingMoreRef = signal()
 	const resultIdPrefix = `search-result-${Math.random().toString(36).slice(2)}`
 	const activeMatch = onCondition(activeIndex)
 
 	let debounceTimer = null
+	let resultHandles = []
+	let resultOffset = 0
+	let latestSearchId = 0
 	const shortcutLabel = resolveShortcutLabel()
 	const [Inlet, Outlet] = createPortal()
 
+	const resetSearchState = () => {
+		resultHandles = []
+		resultOffset = 0
+		hasMore.value = false
+		isLoadingMore.value = false
+	}
+
+	const loadMore = async (initial = false) => {
+		const searchId = latestSearchId
+		if (!initial) {
+			if (isLoadingMore.value || !hasMore.value) return
+			isLoadingMore.value = true
+		}
+
+		const slice = resultHandles.slice(resultOffset, resultOffset + PAGE_SIZE)
+		if (!slice.length) {
+			hasMore.value = false
+			if (!initial) isLoadingMore.value = false
+			return
+		}
+
+		try {
+			const data = await Promise.all(slice.map((r) => r.data()))
+			if (searchId !== latestSearchId) return
+
+			results.value = results.value.concat(data.map((value) => ({ value, el: signal() })))
+			resultOffset += slice.length
+			hasMore.value = resultOffset < resultHandles.length
+		} catch (err) {
+			if (searchId !== latestSearchId) return
+			loadError.value = 'Search is unavailable. Please refresh and try again.'
+			console.error('Search error:', err)
+		} finally {
+			if (!initial && searchId === latestSearchId) isLoadingMore.value = false
+		}
+	}
+
 	const search = async (q) => {
+		const searchId = ++latestSearchId
 		isLoading.value = true
 		results.value = []
 		activeIndex.value = -1
+		resetSearchState()
 
 		const pagefind = await ensurePagefind(options)
+		if (searchId !== latestSearchId) return
+
 		if (!pagefind) {
 			isLoading.value = false
+			loadError.value = 'Search is unavailable. Please refresh and try again.'
 			return
 		}
+		loadError.value = ''
 
 		try {
 			const searchResult = await pagefind.search(q)
-			if (searchResult?.results?.length) {
-				const data = await Promise.all(searchResult.results.slice(0, 10).map((r) => r.data()))
-				results.value = data.map((value) => ({ value, el: signal() }))
-			}
+			if (searchId !== latestSearchId) return
+
+			resultHandles = searchResult?.results || []
+			resultOffset = 0
+			hasMore.value = resultHandles.length > 0
+			await loadMore(true)
 		} catch (err) {
+			if (searchId !== latestSearchId) return
+			loadError.value = 'Search is unavailable. Please refresh and try again.'
 			console.error('Search error:', err)
 		} finally {
-			isLoading.value = false
+			if (searchId === latestSearchId) isLoading.value = false
 		}
 	}
 
 	const onInput = (event) => {
 		const value = event.target.value
 		query.value = value
+		loadError.value = ''
 		if (debounceTimer) clearTimeout(debounceTimer)
 
 		if (!value.trim()) {
+			latestSearchId++
+			isLoading.value = false
 			results.value = []
+			resetSearchState()
 			activeIndex.value = -1
 			return
 		}
@@ -118,13 +178,18 @@ export default function ({ options } = {}) {
 	const open = async () => {
 		isOpen.value = true
 		setTimeout(focusInput, 50)
-		await ensurePagefind(options)
+		const pagefind = await ensurePagefind(options)
+		if (!pagefind) {
+			loadError.value = 'Search is unavailable. Please refresh and try again.'
+		}
 	}
 
 	const close = () => {
 		isOpen.value = false
 		query.value = ''
 		results.value = []
+		loadError.value = ''
+		resetSearchState()
 		activeIndex.value = -1
 		if (debounceTimer) clearTimeout(debounceTimer)
 		if (inputRef.value) inputRef.value.blur()
@@ -150,6 +215,13 @@ export default function ({ options } = {}) {
 		if (event.key === 'ArrowDown') {
 			event.preventDefault()
 			if (results.value.length > 0) {
+				if (hasMore.value && activeIndex.value === results.value.length - 1) {
+					loadMore(false)
+					setTimeout(() => {
+						loadingMoreRef.value?.scrollIntoView({ block: 'nearest' })
+					}, 10)
+					return
+				}
 				const nextIndex = activeIndex.value >= 0 ? (activeIndex.value + 1) % results.value.length : 0
 				activeIndex.value = nextIndex
 				scrollActiveIntoView()
@@ -181,6 +253,13 @@ export default function ({ options } = {}) {
 		}
 		if (event.key === 'ArrowDown') {
 			event.preventDefault()
+			if (hasMore.value && indexValue === results.value.length - 1) {
+				loadMore(false)
+				setTimeout(() => {
+					loadingMoreRef.value?.scrollIntoView({ block: 'nearest' })
+				}, 10)
+				return
+			}
 			const nextIndex = (indexValue + 1) % results.value.length
 			activeIndex.value = nextIndex
 			scrollActiveIntoView()
@@ -197,6 +276,13 @@ export default function ({ options } = {}) {
 		}
 	}
 
+	const onResultsScroll = (event) => {
+		const el = event.currentTarget
+		if (!el) return
+		const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 24
+		if (nearBottom) loadMore(false)
+	}
+
 	const showEmpty = $(() => !query.value)
 	const showNoResults = $(() => {
 		const _query = query.value
@@ -204,6 +290,9 @@ export default function ({ options } = {}) {
 		const _length = results.value.length
 		return _query && !_isLoading && _length === 0
 	})
+	const showError = $(() => loadError.value)
+	const showStatus = $(() => !loadError.value)
+	const showLoadingMore = $(() => isLoadingMore.value && !isLoading.value)
 
 	if (typeof window !== 'undefined') {
 		window.__methanolSearchOpen = open
@@ -280,12 +369,19 @@ export default function ({ options } = {}) {
 									$ref={inputRef}
 								/>
 							</div>
-							<div class="search-results">
-								<If condition={showEmpty}>{() => <div class="search-status">Type to start searching...</div>}</If>
-								<If condition={showNoResults}>
-									{() => <div class="search-status">No results found for "{query}"</div>}
+							<div class="search-results" on:scroll={onResultsScroll} $ref={resultsRef}>
+								<If condition={showError}>{() => <div class="search-status">{loadError}</div>}</If>
+								<If condition={showStatus}>
+									{() => (
+										<>
+											<If condition={showEmpty}>{() => <div class="search-status">Type to start searching...</div>}</If>
+											<If condition={showNoResults}>
+												{() => <div class="search-status">No results found for "{query}"</div>}
+											</If>
+											<If condition={isLoading}>{() => <div class="search-status">Searching...</div>}</If>
+										</>
+									)}
 								</If>
-								<If condition={isLoading}>{() => <div class="search-status">Searching...</div>}</If>
 								<For entries={results} indexed>
 									{({ item: { value, el }, index }) => (
 										<a
@@ -321,6 +417,19 @@ export default function ({ options } = {}) {
 										</a>
 									)}
 								</For>
+								<If condition={showLoadingMore}>
+									{() => (
+										<div
+											class="search-status"
+											$ref={(el) => {
+												loadingMoreRef.value = el
+												el.scrollIntoView({ block: 'nearest' })
+											}}
+										>
+											Loading more results...
+										</div>
+									)}
+								</If>{' '}
 							</div>
 						</div>
 					</div>

package/themes/default/index.js

@@ -21,8 +21,8 @@
 import { readFileSync } from 'fs'
 import { fileURLToPath } from 'url'
 import { dirname, resolve } from 'path'
-import PAGE_TEMPLATE from './page.jsx'
-import { createHeadings } from './heading.jsx'
+import PAGE_TEMPLATE from './src/page.jsx'
+import { createHeadings } from './src/heading.jsx'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)

package/themes/default/pages/404.mdx

@@ -1,3 +1,7 @@
+---
+title: Page Not Found
+---
+
 # Page Not Found
 
 The page you're looking for doesn't exist.

package/themes/default/pages/index.mdx

@@ -6,19 +6,13 @@ title: Welcome
 
 Methanol turns your content folder into a static site with rEFui and MDX, file-based routing, and a fast dev server.
 
-## Quick Start
-
-```bash
-npx methanol dev
-```
-
-Open `http://localhost:5173`.
+If you're seeing this page, that means you haven't created your `index.mdx` yet.
 
-## Your Content Folder
+## Quick Start
 
 Pages are currently read from the configured `pagesDir`:
 
-<p><code>{ctx.site?.pagesDir || 'pages/'}</code></p>
+<p><code>{ctx.site.pagesDir || 'pages/'}</code></p>
 
 You can change this with `pagesDir` in your config or `--input` on the CLI. Create an `index.mdx` in that folder to replace this page.
 
@@ -29,3 +23,7 @@ components/   # JSX/TSX components for MDX
 public/       # static assets copied as-is
 dist/         # production output
 ```
+
+## Further Reading
+
+Visit [Methanol Docs](https://methanol.sudomaker.com) for details.

package/themes/default/pages/offline.mdx

@@ -0,0 +1,11 @@
+---
+title: Resource Unreachable
+---
+
+# Resource Unreachable
+
+You're offline or the server is down, and the page you're looking for isn't found in cache.
+
+## What you can do:
+
+- Go back to the [home page](/)

package/themes/default/sources/style.css

@@ -2,205 +2,88 @@
 
 :root {
 	interpolate-size: allow-keywords;
-	color-scheme: dark;
-	--bg: #09090b;
-	--surface: #0c0c0e;
-	--surface-muted: #17171a;
-	--surface-elevated: #1c1c21;
-	--text: #fafafa;
-	--muted: #a1a1aa;
-	--border: #27272a;
-	--accent: #ffa000;
+	color-scheme: light dark;
+	--bg: light-dark(#ffffff, #09090b);
+	--surface: light-dark(#fafafa, #0c0c0e);
+	--surface-muted: light-dark(#f4f4f5, #17171a);
+	--surface-elevated: light-dark(#ffffff, #1c1c21);
+	--text: light-dark(#09090b, #fafafa);
+	--muted: light-dark(#71717a, #a1a1aa);
+	--border: light-dark(#e4e4e7, #27272a);
+	--accent: light-dark(#ff8f00, #ffa000);
 	--accent-foreground: #ffffff;
-	--accent-soft: rgba(255, 160, 0, 0.1);
+	--accent-soft: light-dark(rgba(255, 143, 0, 0.08), rgba(255, 160, 0, 0.1));
 	--radius: 8px;
 	--sidebar-width: 260px;
 	--toc-width: 240px;
 	--header-height: 0px;
-	--hover-bg: rgba(255, 255, 255, 0.05);
+	--hover-bg: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
+
+	/* Starry Night Syntax Highlighting */
+	--color-prettylights-syntax-brackethighlighter-angle: light-dark(#59636e, #9198a1);
+	--color-prettylights-syntax-brackethighlighter-unmatched: light-dark(#82071e, #f85149);
+	--color-prettylights-syntax-carriage-return-bg: light-dark(#cf222e, #b62324);
+	--color-prettylights-syntax-carriage-return-text: light-dark(#f6f8fa, #f0f6fc);
+	--color-prettylights-syntax-comment: light-dark(#59636e, #9198a1);
+	--color-prettylights-syntax-constant: light-dark(#0550ae, #79c0ff);
+	--color-prettylights-syntax-constant-other-reference-link: light-dark(#0a3069, #a5d6ff);
+	--color-prettylights-syntax-entity: light-dark(#6639ba, #d2a8ff);
+	--color-prettylights-syntax-entity-tag: light-dark(#0550ae, #7ee787);
+	--color-prettylights-syntax-invalid-illegal-bg: light-dark(#82071e, #8e1519);
+	--color-prettylights-syntax-invalid-illegal-text: light-dark(#f6f8fa, #f0f6fc);
+	--color-prettylights-syntax-keyword: light-dark(#cf222e, #ff7b72);
+	--color-prettylights-syntax-markup-changed-bg: light-dark(#ffd8b5, #5a1e02);
+	--color-prettylights-syntax-markup-changed-text: light-dark(#953800, #ffdfb6);
+	--color-prettylights-syntax-markup-deleted-bg: light-dark(#ffebe9, #67060c);
+	--color-prettylights-syntax-markup-deleted-text: light-dark(#82071e, #ffdcd7);
+	--color-prettylights-syntax-markup-heading: light-dark(#0550ae, #1f6feb);
+	--color-prettylights-syntax-markup-ignored-bg: light-dark(#0550ae, #1158c7);
+	--color-prettylights-syntax-markup-ignored-text: light-dark(#d1d9e0, #f0f6fc);
+	--color-prettylights-syntax-markup-inserted-bg: light-dark(#dafbe1, #033a16);
+	--color-prettylights-syntax-markup-inserted-text: light-dark(#116329, #aff5b4);
+	--color-prettylights-syntax-markup-list: light-dark(#3b2300, #f2cc60);
+	--color-prettylights-syntax-meta-diff-range: light-dark(#8250df, #d2a8ff);
+	--color-prettylights-syntax-string: light-dark(#0a3069, #a5d6ff);
+	--color-prettylights-syntax-string-regexp: light-dark(#116329, #7ee787);
+	--color-prettylights-syntax-sublimelinter-gutter-mark: light-dark(#818b98, #3d444d);
+	--color-prettylights-syntax-variable: light-dark(#953800, #ffa657);
+	--color-prettylights-syntax-markup-bold: light-dark(#1f2328, #f0f6fc);
+	--color-prettylights-syntax-markup-italic: light-dark(#1f2328, #f0f6fc);
+	--color-prettylights-syntax-storage-modifier-import: light-dark(#1f2328, #f0f6fc);
 
 	@media (prefers-color-scheme: light) {
-		& {
+		&:not(.dark) {
 			color-scheme: light;
-			--bg: #ffffff;
-			--surface: #fafafa;
-			--surface-muted: #f4f4f5;
-			--surface-elevated: #ffffff;
-			--text: #09090b;
-			--muted: #71717a;
-			--border: #e4e4e7;
-			--accent: #ff8f00;
-			--accent-foreground: #ffffff;
-			--accent-soft: rgba(255, 143, 0, 0.08);
-			--hover-bg: rgba(0, 0, 0, 0.04);
 		}
 	}
 
 	&.light {
 		color-scheme: light;
-		--bg: #ffffff;
-		--surface: #fafafa;
-		--surface-muted: #f4f4f5;
-		--surface-elevated: #ffffff;
-		--text: #09090b;
-		--muted: #71717a;
-		--border: #e4e4e7;
-		--accent: #ff8f00;
-		--accent-foreground: #ffffff;
-		--accent-soft: rgba(255, 143, 0, 0.08);
-		--hover-bg: rgba(0, 0, 0, 0.04);
-
-		/* Starry Night Light Theme */
-		--color-prettylights-syntax-brackethighlighter-angle: #59636e;
-		--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
-		--color-prettylights-syntax-carriage-return-bg: #cf222e;
-		--color-prettylights-syntax-carriage-return-text: #f6f8fa;
-		--color-prettylights-syntax-comment: #59636e;
-		--color-prettylights-syntax-constant: #0550ae;
-		--color-prettylights-syntax-constant-other-reference-link: #0a3069;
-		--color-prettylights-syntax-entity: #6639ba;
-		--color-prettylights-syntax-entity-tag: #0550ae;
-		--color-prettylights-syntax-invalid-illegal-bg: #82071e;
-		--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
-		--color-prettylights-syntax-keyword: #cf222e;
-		--color-prettylights-syntax-markup-changed-bg: #ffd8b5;
-		--color-prettylights-syntax-markup-changed-text: #953800;
-		--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
-		--color-prettylights-syntax-markup-deleted-text: #82071e;
-		--color-prettylights-syntax-markup-heading: #0550ae;
-		--color-prettylights-syntax-markup-ignored-bg: #0550ae;
-		--color-prettylights-syntax-markup-ignored-text: #d1d9e0;
-		--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
-		--color-prettylights-syntax-markup-inserted-text: #116329;
-		--color-prettylights-syntax-markup-list: #3b2300;
-		--color-prettylights-syntax-meta-diff-range: #8250df;
-		--color-prettylights-syntax-string: #0a3069;
-		--color-prettylights-syntax-string-regexp: #116329;
-		--color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
-		--color-prettylights-syntax-variable: #953800;
-		--color-prettylights-syntax-markup-bold: #1f2328;
-		--color-prettylights-syntax-markup-italic: #1f2328;
-		--color-prettylights-syntax-storage-modifier-import: #1f2328;
 	}
 
 	&.dark {
 		color-scheme: dark;
-		--bg: #09090b;
-		--surface: #0c0c0e;
-		--surface-muted: #17171a;
-		--surface-elevated: #1c1c21;
-		--text: #fafafa;
-		--muted: #a1a1aa;
-		--border: #27272a;
-		--accent: #ffa000;
-		--accent-foreground: #ffffff;
-		--accent-soft: rgba(255, 160, 0, 0.1);
-		--radius: 8px;
-		--hover-bg: rgba(255, 255, 255, 0.05);
-
-		/* Starry Night Dark Theme */
-		--color-prettylights-syntax-brackethighlighter-angle: #9198a1;
-		--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
-		--color-prettylights-syntax-carriage-return-bg: #b62324;
-		--color-prettylights-syntax-carriage-return-text: #f0f6fc;
-		--color-prettylights-syntax-comment: #9198a1;
-		--color-prettylights-syntax-constant: #79c0ff;
-		--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
-		--color-prettylights-syntax-entity: #d2a8ff;
-		--color-prettylights-syntax-entity-tag: #7ee787;
-		--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
-		--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
-		--color-prettylights-syntax-keyword: #ff7b72;
-		--color-prettylights-syntax-markup-bold: #f0f6fc;
-		--color-prettylights-syntax-markup-changed-bg: #5a1e02;
-		--color-prettylights-syntax-markup-changed-text: #ffdfb6;
-		--color-prettylights-syntax-markup-deleted-bg: #67060c;
-		--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
-		--color-prettylights-syntax-markup-heading: #1f6feb;
-		--color-prettylights-syntax-markup-ignored-bg: #1158c7;
-		--color-prettylights-syntax-markup-ignored-text: #f0f6fc;
-		--color-prettylights-syntax-markup-inserted-bg: #033a16;
-		--color-prettylights-syntax-markup-inserted-text: #aff5b4;
-		--color-prettylights-syntax-markup-italic: #f0f6fc;
-		--color-prettylights-syntax-markup-list: #f2cc60;
-		--color-prettylights-syntax-meta-diff-range: #d2a8ff;
-		--color-prettylights-syntax-storage-modifier-import: #f0f6fc;
-		--color-prettylights-syntax-string: #a5d6ff;
-		--color-prettylights-syntax-string-regexp: #7ee787;
-		--color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
-		--color-prettylights-syntax-variable: #ffa657;
 	}
 
 	/* Accent Colors */
 	&.accent-rose {
-		--accent: #f43f5e;
-		--accent-soft: rgba(244, 63, 94, 0.15);
-		@media (prefers-color-scheme: light) {
-			--accent: #e11d48;
-			--accent-soft: rgba(225, 29, 72, 0.1);
-		}
-		&.light {
-			--accent: #e11d48;
-			--accent-soft: rgba(225, 29, 72, 0.1);
-		}
-		&.dark {
-			--accent: #f43f5e;
-			--accent-soft: rgba(244, 63, 94, 0.15);
-		}
+		--accent: light-dark(#e11d48, #f43f5e);
+		--accent-soft: light-dark(rgba(225, 29, 72, 0.1), rgba(244, 63, 94, 0.15));
 	}
 
 	&.accent-blue {
-		/* Indigo-Blue */
-		--accent: #818cf8;
-		--accent-soft: rgba(129, 140, 248, 0.15);
-		@media (prefers-color-scheme: light) {
-			--accent: #4f46e5;
-			--accent-soft: rgba(79, 70, 229, 0.1);
-		}
-		&.light {
-			--accent: #4f46e5;
-			--accent-soft: rgba(79, 70, 229, 0.1);
-		}
-		&.dark {
-			--accent: #818cf8;
-			--accent-soft: rgba(129, 140, 248, 0.15);
-		}
+		--accent: light-dark(#4f46e5, #818cf8);
+		--accent-soft: light-dark(rgba(79, 70, 229, 0.1), rgba(129, 140, 248, 0.15));
 	}
 
 	&.accent-green {
-		/* Teal-Emerald */
-		--accent: #2dd4bf;
-		--accent-soft: rgba(45, 212, 191, 0.15);
-		@media (prefers-color-scheme: light) {
-			--accent: #0d9488;
-			--accent-soft: rgba(13, 148, 136, 0.1);
-		}
-		&.light {
-			--accent: #0d9488;
-			--accent-soft: rgba(13, 148, 136, 0.1);
-		}
-		&.dark {
-			--accent: #2dd4bf;
-			--accent-soft: rgba(45, 212, 191, 0.15);
-		}
+		--accent: light-dark(#0d9488, #2dd4bf);
+		--accent-soft: light-dark(rgba(13, 148, 136, 0.1), rgba(45, 212, 191, 0.15));
 	}
 
 	&.accent-purple {
-		/* Violet */
-		--accent: #a78bfa;
-		--accent-soft: rgba(167, 139, 250, 0.15);
-		@media (prefers-color-scheme: light) {
-			--accent: #7c3aed;
-			--accent-soft: rgba(124, 58, 237, 0.1);
-		}
-		&.light {
-			--accent: #7c3aed;
-			--accent-soft: rgba(124, 58, 237, 0.1);
-		}
-		&.dark {
-			--accent: #a78bfa;
-			--accent-soft: rgba(167, 139, 250, 0.15);
-		}
+		--accent: light-dark(#7c3aed, #a78bfa);
+		--accent-soft: light-dark(rgba(124, 58, 237, 0.1), rgba(167, 139, 250, 0.15));
 	}
 }
 
@@ -1190,6 +1073,13 @@ a {
 		margin-bottom: 1rem;
 	}
 
+	img {
+		max-width: 100%;
+		height: auto;
+		border-radius: var(--radius);
+		margin: 1rem 0;
+	}
+
 	p {
 		color: var(--muted);
 		margin-bottom: 1.25rem;

package/themes/default/src/nav-tree.jsx

@@ -0,0 +1,112 @@
+/* Copyright Yukino Song, SudoMaker Ltd.
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * 	http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { If, For, $, signal, onCondition, read, extract } from 'refui'
+import NullProtoObj from 'null-prototype-object'
+import { HTMLRenderer } from 'methanol'
+
+const navEntryMap = new Map()
+
+const currentPath = signal('')
+const matchCurrentPath = onCondition(currentPath)
+
+const toSignal = (i) => {
+	const clone = Object.assign(new NullProtoObj(), i)
+
+	let sig = navEntryMap.get(clone.routePath)
+	if (!sig) {
+		sig = signal(clone)
+		navEntryMap.set(clone.routePath, sig)
+	} else {
+		sig.value = clone
+	}
+
+	if (clone.type === 'directory') {
+		clone.children = clone.children.map(toSignal)
+	}
+
+	return sig
+}
+
+const NavTree = ({ nodes, depth }) => (
+	<For entries={nodes}>
+		{({ item }) => {
+			const node = read(item)
+			const { routeHref: href, routePath, type, name, isRoot } = node
+			const { title } = extract(item, 'title')
+
+			const isActive = matchCurrentPath(routePath)
+
+			if (type === 'directory') {
+				const label = title.or(name)
+				const { children } = extract(item, 'children')
+
+				const isOpen = $(() => {
+					if (depth < 1) {
+						return true
+					}
+					const _active = isActive.value
+					const _currentPath = currentPath.value
+					return _active || _currentPath.startsWith(routePath)
+				})
+
+				const header = href ? (
+					<a class={isActive.choose('nav-dir-link active', 'nav-dir-link')} href={href}>
+						{label}
+					</a>
+				) : (
+					<span class="nav-dir-label">{label}</span>
+				)
+
+				return (
+					<li class={isActive.choose('is-active', null)}>
+						<details class="sidebar-collapsible" open={isOpen.choose(true, null)}>
+							<summary class="sb-dir-header">{header}</summary>
+							<If condition={() => children.value.length}>{() => (
+								<ul data-depth={depth + 1}>
+									<NavTree nodes={children} depth={depth + 1} />
+								</ul>
+							)}
+							</If>
+						</details>
+					</li>
+				)
+			} else {
+				const label = title.or(node.isIndex ? 'Home' : name)
+				return (
+					<li>
+						<a class={isActive.choose('active', null)} href={href}>
+							{label}
+						</a>
+					</li>
+				)
+			}
+		}}
+	</For>
+)
+
+const rootNodes = signal()
+const rootTree = HTMLRenderer.createElement(NavTree, { nodes: rootNodes, depth: 0 })
+
+export const renderNavTree = (nodes, path) => {
+	currentPath.value = path
+	rootNodes.value = nodes.map(toSignal)
+	return rootTree
+}