methanol 0.0.8 → 0.0.10

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;
@@ -1735,6 +1625,47 @@ a {
 	justify-content: flex-end;
 }
 
+/* --- Tables (GFM) --- */
+
+.main-content table {
+	width: 100%;
+	border-collapse: collapse;
+	margin: 1.5rem 0;
+	font-size: 0.95rem;
+	overflow-x: auto;
+	display: block; /* Enables horizontal scroll for large tables */
+}
+
+.main-content table thead tr {
+	border-bottom: 2px solid var(--border);
+}
+
+.main-content table th {
+	text-align: left;
+	padding: 0.75rem 1rem;
+	font-weight: 600;
+	color: var(--text);
+	white-space: nowrap;
+}
+
+.main-content table tbody tr {
+	border-bottom: 1px solid var(--border);
+	transition: background-color 0.1s ease;
+}
+
+.main-content table tbody tr:last-child {
+	border-bottom: none;
+}
+
+.main-content table td {
+	padding: 0.75rem 1rem;
+	color: var(--muted);
+}
+
+.main-content table tbody tr:hover {
+	background-color: var(--hover-bg);
+}
+
 /* --- View Transitions --- */
 
 @view-transition {
@@ -1747,3 +1678,151 @@ a {
 	view-transition-name: active-sidebar-bg;
 	contain: layout paint;
 }
+
+/* --- Print Styles --- */
+
+@media print {
+	:root {
+		--bg: #ffffff;
+		--surface: #ffffff;
+		--surface-muted: #f4f4f5;
+		--surface-elevated: #ffffff;
+		--text: #09090b;
+		--muted: #52525b;
+		--border: #e4e4e7;
+		--accent: #000000;
+		--accent-soft: #f4f4f5;
+		--hover-bg: transparent;
+	}
+
+	body {
+		background-color: white !important;
+		background-image: none !important;
+		color: black !important;
+		width: 100% !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		overflow: visible !important;
+	}
+
+	/* Hide UI Elements */
+	.sidebar,
+	.toc-panel,
+	.nav-toggle-label,
+	.toc-toggle-label,
+	.search-toggle-label,
+	.search-modal,
+	.page-nav,
+	.copy-btn,
+	.heading-anchor,
+	.theme-switch-wrapper,
+	.lang-switch-wrapper,
+	.page-meta {
+		display: none !important;
+	}
+
+	/* Layout Overrides */
+	.layout-container,
+	.layout-container.no-toc {
+		display: block !important;
+		max-width: none !important;
+		width: 100% !important;
+		margin: 0 !important;
+		padding: 0 !important;
+	}
+
+	.main-content {
+		padding: 0 !important;
+		width: 100% !important;
+		max-width: none !important;
+	}
+
+	/* Typography & Content */
+	body {
+		font-size: 11pt !important;
+		line-height: 1.5 !important;
+	}
+
+	.main-content {
+		h1 {
+			font-size: 24pt !important;
+			margin-bottom: 1rem !important;
+		}
+
+		h2 {
+			font-size: 18pt !important;
+			margin-top: 1.5rem !important;
+			margin-bottom: 0.75rem !important;
+		}
+
+		h3 {
+			font-size: 14pt !important;
+			margin-top: 1.25rem !important;
+			margin-bottom: 0.5rem !important;
+		}
+
+		p, li {
+			font-size: 11pt !important;
+			margin-bottom: 0.75rem !important;
+		}
+
+		pre, code {
+			font-size: 10pt !important;
+		}
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		color: black !important;
+		page-break-after: avoid;
+		break-after: avoid;
+	}
+
+	h2 {
+		border-bottom: 1px solid #000 !important;
+	}
+
+	p, li {
+		orphans: 3;
+		widows: 3;
+	}
+
+	a {
+		text-decoration: underline !important;
+		color: black !important;
+	}
+
+	/* Expand external links */
+	a[href^="http"]::after {
+		content: " (" attr(href) ")";
+		font-size: 0.85em;
+		color: #555;
+	}
+
+	/* Clean up code blocks */
+	pre {
+		border: 1px solid #ccc !important;
+		white-space: pre-wrap !important;
+		break-inside: avoid;
+		background: #fafafa !important;
+	}
+
+	/* Blockquotes */
+	blockquote {
+		border-left: 3px solid #ccc !important;
+		background: transparent !important;
+		color: #333 !important;
+		break-inside: avoid;
+	}
+
+	/* Tables */
+	table {
+		break-inside: avoid;
+	}
+
+	/* Page Setup */
+	@page {
+		margin: 2cm;
+		size: auto;
+	}
+}
+

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.path)
+	if (!sig) {
+		sig = signal(clone)
+		navEntryMap.set(clone.path, 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
+}

package/themes/default/{page.jsx → src/page.jsx}

@@ -18,68 +18,22 @@
  * under the License.
  */
 
-import { HTMLRenderer as R } from 'methanol'
-import { renderToc } from './components/ThemeToCContainer.static.jsx'
+import { HTMLRenderer as R, DOCTYPE_HTML } from 'methanol'
+import { renderToc } from '../components/ThemeToCContainer.static.jsx'
+import { renderNavTree } from './nav-tree.jsx'
 
-const DOCHTML = R.rawHTML`<!DOCTYPE html>`
-
-const renderPageTree = (nodes = [], currentRoute, depth = 0) => {
-	const items = []
-	let hasActive = false
-	for (const node of nodes) {
-		const nodeRoute = node.routeHref || ''
-		if (node.type === 'directory') {
-			const label = node.title || node.name
-			const isActive = nodeRoute === currentRoute
-			const href = node.routeHref
-			const childResult = renderPageTree(node.children || [], currentRoute, depth + 1)
-			const isOpen = depth < 1 || isActive || childResult.hasActive
-			if (isOpen) hasActive = true
-			const header = href ? (
-				<a class={isActive ? 'nav-dir-link active' : 'nav-dir-link'} href={href}>
-					{label}
-				</a>
-			) : (
-				<span class="nav-dir-label">{label}</span>
-			)
-			items.push(
-				<li class={isActive ? 'is-active' : null}>
-					<details class="sidebar-collapsible" open={isOpen ? true : null}>
-						<summary class="sb-dir-header">{header}</summary>
-						{childResult.items.length ? <ul data-depth={depth + 1}>{childResult.items}</ul> : null}
-					</details>
-				</li>
-			)
-			continue
-		}
-		const label = node.title || (node.isIndex ? 'Home' : node.name)
-		const isActive = nodeRoute === currentRoute
-		if (isActive) hasActive = true
-		const href = node.routeHref
-		items.push(
-			<li>
-				<a class={isActive ? 'active' : null} href={href}>
-					{label}
-				</a>
-			</li>
-		)
-	}
-	return { items, hasActive }
-}
-
-const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
+const PAGE_TEMPLATE = async ({ PageContent, ExtraHead, components, ctx }) => {
 	const page = ctx.page
 	const pagesByRoute = ctx.pagesByRoute
 	const pages = ctx.pages || []
 	const pagesTree = ctx.pagesTree || []
 	const siteName = ctx.site.name || 'Methanol Site'
 	const title = page.title || siteName
-	const currentRoute = page.routeHref || ''
-	const baseHref = page.routeHref === '/404' ? ctx.site.base || '/' : null
+	const baseHref =
+		page.routeHref === '/404' || page.routeHref === '/offline' ? ctx.site.base || '/' : null
 	const toc = page.toc?.length ? renderToc(page.toc) : null
 	const hasToc = Boolean(toc)
 	const layoutClass = hasToc ? 'layout-container' : 'layout-container no-toc'
-	const tree = renderPageTree(pagesTree, currentRoute, 0)
 	const { ThemeSearchBox, ThemeColorSwitch, ThemeAccentSwitch, ThemeToCContainer } = components
 	const rootPage = pagesByRoute.get('/') || pages.find((entry) => entry.routeHref === '/')
 	const pageFrontmatter = page.frontmatter || {}
@@ -146,9 +100,10 @@ const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
 			</div>
 		</div>
 	) : null
+
 	return (
 		<>
-			{DOCHTML}
+			{DOCTYPE_HTML}
 			<html lang={htmlLang}>
 				<head>
 					<meta charset="UTF-8" />
@@ -244,7 +199,7 @@ const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
 								{pagefindEnabled ? <ThemeSearchBox options={pagefindOptions} /> : null}
 							</div>
 							<nav>
-								<ul data-depth="0">{tree.items}</ul>
+								<ul data-depth="0">{renderNavTree(pagesTree, page.routePath)}</ul>
 							</nav>
 							<div class="sidebar-footer">
 								{languageSelector}
@@ -294,7 +249,7 @@ const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
 												<span style="margin: 0 0.5rem; opacity: 0.5;">•</span>
 											</>
 										) : null}
-										Updated: {page.updatedAt || '-'}
+										Updated: {page.stats.updatedAt || '-'}
 									</div>
 									<div class="page-meta-item">
 										Powered by{' '}