methanol 0.0.4 → 0.0.6

package/README.md

@@ -2,7 +2,7 @@
 
 Opinionated MDX-first static site generator powered by rEFui + Vite.
 
-For full documentation and examples, see the `methanol-docs` project.
+For full documentation and examples, visit [Methanol Docs](https://methanol.netlify.app/).
 
 ## Quick start
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "methanol",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Static site generator powered by rEFui and MDX",
   "main": "./index.js",
   "type": "module",

package/src/build-system.js

@@ -28,7 +28,7 @@ import { renderHtml } from './mdx.js'
 import { buildComponentRegistry } from './components.js'
 import { methanolVirtualHtmlPlugin, methanolResolverPlugin } from './vite-plugins.js'
 import { createStageLogger } from './stage-logger.js'
-import { copyPublicDir } from './public-assets.js'
+import { preparePublicAssets } from './public-assets.js'
 
 const ensureDir = async (dir) => {
 	await mkdir(dir, { recursive: true })
@@ -163,11 +163,11 @@ export const buildHtmlEntries = async () => {
 }
 
 export const runViteBuild = async (entry, htmlCache) => {
-	if (state.STATIC_DIR !== false) {
-		await copyPublicDir({
-			sourceDir: state.THEME_PUBLIC_DIR,
-			targetDir: state.STATIC_DIR,
-			label: 'theme public'
+	if (state.STATIC_DIR !== false && state.MERGED_ASSETS_DIR) {
+		await preparePublicAssets({
+			themeDir: state.THEME_ASSETS_DIR,
+			userDir: state.USER_ASSETS_DIR,
+			targetDir: state.MERGED_ASSETS_DIR
 		})
 	}
 	const copyPublicDirEnabled = state.STATIC_DIR !== false

package/src/config.js

@@ -216,6 +216,7 @@ export const applyConfig = async (config, mode) => {
 	state.ROOT_DIR = root
 	const configSiteName = cli.CLI_SITE_NAME ?? config.site?.name ?? null
 	state.SITE_NAME = configSiteName || basename(root) || 'Methanol Site'
+	state.USER_SITE = config.site && typeof config.site === 'object' ? { ...config.site } : null
 	if (mode) {
 		state.CURRENT_MODE = mode
 	}
@@ -289,15 +290,36 @@ export const applyConfig = async (config, mode) => {
 	if (hasOwn(state.USER_THEME, 'publicDir') && state.THEME_PUBLIC_DIR && !existsSync(state.THEME_PUBLIC_DIR)) {
 		throw new Error(`Theme public directory not found: ${state.THEME_PUBLIC_DIR}`)
 	}
-	if (
-		state.STATIC_DIR !== false &&
-		!userSpecifiedPublicDir &&
-		!existsSync(state.STATIC_DIR) &&
-		state.THEME_PUBLIC_DIR &&
-		existsSync(state.THEME_PUBLIC_DIR)
-	) {
-		state.STATIC_DIR = state.THEME_PUBLIC_DIR
+
+	// Asset Merging Logic
+	const userAssetsDir = userSpecifiedPublicDir 
+		? resolveFromRoot(root, publicDirValue, 'public')
+		: resolveFromRoot(root, 'public', 'public')
+	
+	const hasUserAssets = existsSync(userAssetsDir)
+	state.USER_ASSETS_DIR = hasUserAssets ? userAssetsDir : null
+	state.THEME_ASSETS_DIR = state.THEME_PUBLIC_DIR && existsSync(state.THEME_PUBLIC_DIR) ? state.THEME_PUBLIC_DIR : null
+
+	if (state.STATIC_DIR !== false) {
+		if (!hasUserAssets) {
+			// Optimization: No user assets, just use theme assets directly
+			state.STATIC_DIR = state.THEME_ASSETS_DIR
+			state.MERGED_ASSETS_DIR = null
+		} else {
+			// We need to merge
+			const nodeModulesPath = resolve(root, 'node_modules')
+			if (existsSync(nodeModulesPath)) {
+				state.MERGED_ASSETS_DIR = resolve(nodeModulesPath, '.methanol/assets')
+			} else {
+				state.MERGED_ASSETS_DIR = resolve(state.PAGES_DIR || resolve(root, 'pages'), '.methanol/assets')
+			}
+			state.STATIC_DIR = state.MERGED_ASSETS_DIR
+		}
+	} else {
+		state.STATIC_DIR = false
+		state.MERGED_ASSETS_DIR = null
 	}
+
 	state.SOURCES = normalizeSources(state.USER_THEME.sources, themeRoot)
 	state.USER_VITE_CONFIG = config.vite || null
 	state.USER_MDX_CONFIG = config.mdx || null

package/src/dev-server.js

@@ -39,10 +39,13 @@ import {
 import { buildPagesContext, buildPageEntry, routePathFromFile } from './pages.js'
 import { compilePageMdx, renderHtml } from './mdx.js'
 import { methanolResolverPlugin } from './vite-plugins.js'
-import { copyPublicDir } from './public-assets.js'
+import { preparePublicAssets, updateAsset } from './public-assets.js'
 
 export const runViteDev = async () => {
 	const baseFsAllow = [state.ROOT_DIR, state.USER_THEME.root].filter(Boolean)
+	if (state.MERGED_ASSETS_DIR) {
+		baseFsAllow.push(state.MERGED_ASSETS_DIR)
+	}
 	const baseConfig = {
 		configFile: false,
 		root: state.PAGES_DIR,
@@ -63,11 +66,11 @@ export const runViteDev = async () => {
 	}
 	const userConfig = await resolveUserViteConfig('serve')
 	const finalConfig = userConfig ? mergeConfig(baseConfig, userConfig) : baseConfig
-	if (state.STATIC_DIR !== false) {
-		await copyPublicDir({
-			sourceDir: state.THEME_PUBLIC_DIR,
-			targetDir: state.STATIC_DIR,
-			label: 'theme public'
+	if (state.STATIC_DIR !== false && state.MERGED_ASSETS_DIR) {
+		await preparePublicAssets({
+			themeDir: state.THEME_ASSETS_DIR,
+			userDir: state.USER_ASSETS_DIR,
+			targetDir: state.MERGED_ASSETS_DIR
 		})
 	}
 	if (cli.CLI_PORT != null) {
@@ -94,6 +97,28 @@ export const runViteDev = async () => {
 	}
 	const server = await createServer(finalConfig)
 
+	if (state.MERGED_ASSETS_DIR && state.USER_ASSETS_DIR) {
+		const assetWatcher = chokidar.watch(state.USER_ASSETS_DIR, {
+			ignoreInitial: true
+		})
+		const handleAssetUpdate = (type, filePath) => {
+			const relPath = relative(state.USER_ASSETS_DIR, filePath)
+			enqueue(async () => {
+				await updateAsset({
+					type,
+					filePath,
+					relPath,
+					themeDir: state.THEME_ASSETS_DIR,
+					userDir: state.USER_ASSETS_DIR,
+					targetDir: state.MERGED_ASSETS_DIR
+				})
+			})
+		}
+		assetWatcher.on('add', (filePath) => handleAssetUpdate('add', filePath))
+		assetWatcher.on('change', (filePath) => handleAssetUpdate('change', filePath))
+		assetWatcher.on('unlink', (filePath) => handleAssetUpdate('unlink', filePath))
+	}
+
 	const themeComponentsDir = state.THEME_COMPONENTS_DIR
 	const themeEnv = state.THEME_ENV
 	const themeRegistry = themeComponentsDir

package/src/main.js

@@ -62,6 +62,7 @@ const main = async () => {
 	const mode = isDev ? 'development' : 'production'
 	const config = await loadUserConfig(mode, cli.CLI_CONFIG_PATH)
 	await applyConfig(config, mode)
+	const userSite = state.USER_SITE || {}
 	const hookContext = {
 		mode,
 		root: state.ROOT_DIR,
@@ -71,6 +72,7 @@ const main = async () => {
 		isPreview,
 		HTMLRenderer,
 		site: {
+			...userSite,
 			name: state.SITE_NAME,
 			root: state.ROOT_DIR,
 			pagesDir: state.PAGES_DIR,

package/src/pages.js

@@ -679,7 +679,9 @@ export const buildPagesContext = async ({ compileAll = true } = {}) => {
 	let pagesTree = getPagesTree('/')
 	const notFound = pagesByRoute.get('/404') || null
 	const languages = collectLanguagesFromPages(pages)
+	const userSite = state.USER_SITE || {}
 	const site = {
+		...userSite,
 		name: state.SITE_NAME,
 		root: state.ROOT_DIR,
 		pagesDir: state.PAGES_DIR,

package/src/public-assets.js

@@ -18,56 +18,127 @@
  * under the License.
  */
 
-import { readdir, stat, copyFile, mkdir } from 'fs/promises'
+import { readdir, stat, lstat, copyFile, mkdir, symlink, unlink, rm, link } from 'fs/promises'
 import { existsSync } from 'fs'
-import { resolve, dirname, relative } from 'path'
+import { resolve, dirname, relative, parse } from 'path'
 
 const ensureDir = async (dir) => {
 	await mkdir(dir, { recursive: true })
 }
 
-const copyDir = async (sourceDir, targetDir, onFile) => {
-	await ensureDir(targetDir)
+const isWindows = process.platform === 'win32'
+
+const linkOrCopyFile = async (src, dest) => {
+	try {
+		try {
+			await lstat(dest)
+			await unlink(dest)
+		} catch (e) {
+			if (e.code !== 'ENOENT') {
+				try {
+					await rm(dest, { recursive: true, force: true })
+				} catch (e2) {
+					console.error(`Methanol: Failed to clean destination ${dest}`, e2)
+				}
+			}
+		}
+	} catch (err) {
+		console.error(`Methanol: Failed to remove existing file at ${dest}`, err)
+	}
+
+	try {
+		await ensureDir(dirname(dest))
+		
+		if (isWindows) {
+			// Windows: Check for different drives first
+			if (parse(src).root.toLowerCase() !== parse(dest).root.toLowerCase()) {
+				await copyFile(src, dest)
+				return 'copied'
+			}
+
+			// Try hard link (no admin required)
+			try {
+				await link(src, dest)
+				return 'hardlinked'
+			} catch (err) {
+				// Fallback to copy
+				// console.warn(`Methanol: Hardlink failed for ${src} -> ${dest}. Falling back to copy.`, err.message)
+				await copyFile(src, dest)
+				return 'copied (fallback)'
+			}
+		} else {
+			// macOS/Linux: Symlink
+			await symlink(src, dest)
+			return 'symlinked'
+		}
+	} catch (err) {
+		console.error(`Methanol: Failed to link ${src} to ${dest}`, err)
+		return 'failed'
+	}
+}
+
+const processDir = async (sourceDir, targetDir, accumulated = new Set()) => {
+	if (!existsSync(sourceDir)) return
 	const entries = await readdir(sourceDir)
 	for (const entry of entries) {
-		if (entry.startsWith('.')) {
-			continue
-		}
+		if (entry.startsWith('.')) continue
 		const sourcePath = resolve(sourceDir, entry)
 		const targetPath = resolve(targetDir, entry)
 		const stats = await stat(sourcePath)
+		
 		if (stats.isDirectory()) {
-			await copyDir(sourcePath, targetPath, onFile)
+			await processDir(sourcePath, targetPath, accumulated)
 		} else {
-			if (existsSync(targetPath)) {
-				if (onFile) {
-					onFile(sourcePath, targetPath, { skipped: true })
-				}
-				continue
-			}
-			await ensureDir(dirname(targetPath))
-			await copyFile(sourcePath, targetPath)
-			if (onFile) {
-				onFile(sourcePath, targetPath, { skipped: false })
-			}
+			await linkOrCopyFile(sourcePath, targetPath)
+			accumulated.add(relative(targetDir, targetPath))
 		}
 	}
 }
 
-export const copyPublicDir = async ({ sourceDir, targetDir, label = 'public' }) => {
-	if (!sourceDir || !targetDir) return
-	if (!existsSync(sourceDir)) return
-	const resolvedSource = resolve(sourceDir)
-	const resolvedTarget = resolve(targetDir)
-	if (resolvedSource === resolvedTarget) return
-	const created = !existsSync(resolvedTarget)
-	await ensureDir(resolvedTarget)
-	if (created) {
-		console.log(`Methanol: created ${label} directory`)
+export const preparePublicAssets = async ({ themeDir, userDir, targetDir }) => {
+	if (existsSync(targetDir)) {
+		await rm(targetDir, { recursive: true, force: true })
+	}
+	await ensureDir(targetDir)
+
+	if (themeDir) {
+		await processDir(themeDir, targetDir)
+	}
+	
+	if (userDir) {
+		await processDir(userDir, targetDir)
 	}
-	await copyDir(resolvedSource, resolvedTarget, (sourcePath, targetPath, info) => {
-		const rel = relative(resolvedSource, sourcePath).replace(/\\/g, '/')
-		if (info?.skipped) return
-		console.log(`Methanol: copied ${label}/${rel}`)
-	})
 }
+
+export const updateAsset = async ({ type, filePath, themeDir, userDir, targetDir, relPath }) => {
+	const targetPath = resolve(targetDir, relPath)
+	
+	if (type === 'unlink') {
+		try {
+			try {
+				await unlink(targetPath)
+			} catch (e) {
+				if (e.code !== 'ENOENT') {
+					await rm(targetPath, { recursive: true, force: true })
+				}
+			}
+			
+			if (themeDir) {
+				const themePath = resolve(themeDir, relPath)
+				if (existsSync(themePath)) {
+					await linkOrCopyFile(themePath, targetPath)
+					return 'restored theme asset'
+				}
+			}
+		} catch (err) {
+			console.error(`Methanol: Error updating asset ${relPath}`, err)
+		}
+		return 'removed'
+	} else {
+		const sourcePath = userDir ? resolve(userDir, relPath) : null
+		if (sourcePath && existsSync(sourcePath)) {
+			await linkOrCopyFile(sourcePath, targetPath)
+			return 'updated'
+		}
+	}
+}

package/src/state.js

@@ -160,6 +160,7 @@ export const state = {
 	THEME_PUBLIC_DIR: null,
 	THEME_ENV: null,
 	USER_THEME: null,
+	USER_SITE: null,
 	USER_VITE_CONFIG: null,
 	USER_MDX_CONFIG: null,
 	USER_PUBLIC_OVERRIDE: false,

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

@@ -29,19 +29,21 @@ export default function (props, ...children) {
 	const top = signal(0)
 	const height = signal(0)
 	const opacity = signal(0)
-	
+
 	const updateActive = () => {
 		if (!el.value) return
-		
+
 		const links = Array.from(el.value.querySelectorAll('a'))
 		if (!links.length) return
 
 		// Map links to their corresponding content anchors
-		const anchors = links.map(link => {
-			const href = link.getAttribute('href')
-			if (!href || !href.startsWith('#')) return null
-			return document.getElementById(href.slice(1))
-		}).filter(Boolean)
+		const anchors = links
+			.map((link) => {
+				const href = link.getAttribute('href')
+				if (!href || !href.startsWith('#')) return null
+				return document.getElementById(href.slice(1))
+			})
+			.filter(Boolean)
 
 		if (!anchors.length) return
 
@@ -56,13 +58,13 @@ export default function (props, ...children) {
 		for (let i = 0; i < anchors.length; i++) {
 			const anchor = anchors[i]
 			const nextAnchor = anchors[i + 1]
-			
+
 			const sectionStart = anchor.offsetTop - threshold
 			const sectionEnd = nextAnchor ? nextAnchor.offsetTop - threshold : document.body.offsetHeight
 
 			// A section is visible if its range overlaps with the viewport [scrollY, scrollY + windowHeight]
-			const isVisible = sectionStart < (scrollY + windowHeight - threshold) && sectionEnd > scrollY
-			
+			const isVisible = sectionStart < scrollY + windowHeight - threshold && sectionEnd > scrollY
+
 			if (isVisible) {
 				visibleAnchors.add(anchor)
 			}
@@ -77,10 +79,10 @@ export default function (props, ...children) {
 		let firstActiveLink = null
 		let lastActiveLink = null
 
-		links.forEach(l => {
+		links.forEach((l) => {
 			const href = l.getAttribute('href')
 			const anchorId = href ? href.slice(1) : null
-			const anchor = anchors.find(a => a.id === anchorId)
+			const anchor = anchors.find((a) => a.id === anchorId)
 			if (visibleAnchors.has(anchor)) {
 				l.classList.add('active')
 				if (!firstActiveLink) firstActiveLink = l
@@ -130,7 +132,7 @@ export default function (props, ...children) {
 			ticking = true
 		}
 	}
-	
+
 	// Wait for mount/layout
 	useEffect(() => {
 		updateActive()
@@ -144,9 +146,14 @@ export default function (props, ...children) {
 
 	return (
 		<aside class="toc-panel" $ref={el}>
-			<div class="toc-indicator" style:top={t`${top}px`} style:height={t`${height}px`} style:opacity={t`${opacity}`}></div>
+			<div
+				class="toc-indicator"
+				style:top={t`${top}px`}
+				style:height={t`${height}px`}
+				style:opacity={t`${opacity}`}
+			></div>
 			<div class="toc">
-				<h4>On this page</h4>
+				<div class="toc-heading">On this page</div>
 				<ul>{...children}</ul>
 			</div>
 		</aside>

package/themes/default/components/ThemeToCContainer.static.jsx

@@ -53,7 +53,7 @@ export default function (props, ...children) {
 	return (
 		<aside class="toc-panel">
 			<div class="toc">
-				<h4>On this page</h4>
+				<div class="toc-heading">On this page</div>
 				<ul>{...children}</ul>
 			</div>
 		</aside>

package/themes/default/heading.jsx

@@ -21,7 +21,7 @@
 export function heading(Tag) {
 	return (props, ...children) => (
 		<Tag {...props}>
-			{props.id && <a class="heading-anchor" href={`#${props.id}`} aria-hidden />}
+			{props.id && <a class="heading-anchor" href={`#${props.id}`} aria-label={`Link to ${props.id}`}/>}
 			{...children}
 		</Tag>
 	)

package/themes/default/page.jsx

@@ -21,6 +21,8 @@
 import { HTMLRenderer as R } from 'methanol'
 import { renderToc } from './components/ThemeToCContainer.static.jsx'
 
+const DOCHTML = R.rawHTML`<!DOCTYPE html>`
+
 const renderPageTree = (nodes = [], currentRoute, depth = 0) => {
 	const items = []
 	let hasActive = false
@@ -86,7 +88,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 	const themeFavIcon = '/favicon.png'
 	const logo = pageFrontmatter.logo ?? rootFrontmatter.logo ?? ctx.site?.logo ?? themeLogo
 	const favicon = pageFrontmatter.favicon ?? rootFrontmatter.favicon ?? ctx.site?.favicon ?? themeFavIcon
-	const excerpt = pageFrontmatter.excerpt ?? null
+	const excerpt = pageFrontmatter.excerpt ?? `${title} | ${siteName} - Powered by Methanol`
 	const ogTitle = pageFrontmatter.ogTitle ?? null
 	const ogDescription = pageFrontmatter.ogDescription ?? null
 	const ogImage = pageFrontmatter.ogImage ?? null
@@ -100,8 +102,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 	const nextPage = siblings?.next || null
 	const languages = Array.isArray(ctx.languages) ? ctx.languages : []
 	const currentLanguageHref = ctx.language?.href || ctx.language?.routePath || null
-	const languageCode =
-		pageFrontmatter.langCode ?? rootFrontmatter.langCode ?? ctx.language?.code ?? 'en'
+	const languageCode = pageFrontmatter.langCode ?? rootFrontmatter.langCode ?? ctx.language?.code ?? 'en'
 	const htmlLang = typeof languageCode === 'string' && languageCode.trim() ? languageCode : 'en'
 	const pagefindEnabled = ctx.site?.pagefind?.enabled !== false
 	const pagefindOptions = ctx.site?.pagefind?.options || null
@@ -143,7 +144,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 	) : null
 	return (
 		<>
-			{R.rawHTML`<!DOCTYPE html>`}
+			{DOCHTML}
 			<html lang={htmlLang}>
 				<head>
 					<meta charset="UTF-8" />
@@ -152,8 +153,8 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 						{title} | {siteName}
 					</title>
 					{baseHref ? <base href={baseHref} /> : null}
-					<link rel="icon" href={favicon} />
-					{excerpt ? <meta name="description" content={excerpt} /> : null}
+					{favicon ? <link rel="icon" href={favicon} /> : null}
+					<meta name="description" content={excerpt} />
 					{ogTitle ? <meta property="og:title" content={ogTitle} /> : null}
 					{ogDescription ? <meta property="og:description" content={ogDescription} /> : null}
 					{ogImage ? <meta property="og:image" content={ogImage} /> : null}
@@ -164,23 +165,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 					{twitterImage ? <meta name="twitter:image" content={twitterImage} /> : null}
 					<ExtraHead />
 					<link rel="preload stylesheet" as="style" href="/.methanol_theme_default/style.css" />
-					{R.rawHTML`
-						<script>
-							(function() {
-								const savedTheme = localStorage.getItem('methanol-theme');
-								const systemTheme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
-								const theme = savedTheme || systemTheme;
-								document.documentElement.classList.toggle('light', theme === 'light');
-								document.documentElement.classList.toggle('dark', theme === 'dark');
-
-								const savedAccent = localStorage.getItem('methanol-accent');
-								if (savedAccent && savedAccent !== 'default') {
-									document.documentElement.classList.add('accent-' + savedAccent);
-								}
-							})();
-						</script>
-					`}
-					<script type="module" src="/.methanol_theme_default/prefetch.js" defer></script>
+					<script src="/theme-prepare.js"></script>
 				</head>
 				<body>
 					<input type="checkbox" id="nav-toggle" class="nav-toggle" />
@@ -201,11 +186,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 						</svg>
 					</label>
 					{pagefindEnabled ? (
-						<button
-							class="search-toggle-label"
-							aria-label="Open search"
-							onclick="window.__methanolSearchOpen()"
-						>
+						<button class="search-toggle-label" aria-label="Open search" onclick="window.__methanolSearchOpen()">
 							<svg
 								width="24"
 								height="24"
@@ -249,7 +230,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 						<aside class="sidebar">
 							<div class="sidebar-header">
 								<div class="logo">
-									<img src={logo} />
+									{logo ? <img src={logo} alt="logo" fetchpriority="high"/> : null}
 									<span>{siteName}</span>
 								</div>
 								{pagefindEnabled ? <ThemeSearchBox options={pagefindOptions} /> : null}
@@ -272,7 +253,9 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 											<span class="page-nav-label">Previous</span>
 											<span class="page-nav-title">{prevPage.title || prevPage.routePath}</span>
 										</a>
-									) : <div class="page-nav-spacer"></div>}
+									) : (
+										<div class="page-nav-spacer"></div>
+									)}
 									{nextPage ? (
 										<a class="page-nav-card next" href={nextPage.routeHref || nextPage.routePath}>
 											<span class="page-nav-label">Next</span>
@@ -283,11 +266,17 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 							) : null}
 							{page ? (
 								<footer class="page-meta">
+									<div class="page-meta-item">Updated: {page.updatedAt || '-'}</div>
 									<div class="page-meta-item">
-										Updated: {page.updatedAt || '-'}
-									</div>
-									<div class="page-meta-item">
-										Powered by <a href="https://github.com/SudoMaker/Methanol" target="_blank" rel="noopener noreferrer" class="methanol-link">Methanol</a>
+										Powered by{' '}
+										<a
+											href="https://github.com/SudoMaker/Methanol"
+											target="_blank"
+											rel="noopener noreferrer"
+											class="methanol-link"
+										>
+											Methanol
+										</a>
 									</div>
 								</footer>
 							) : null}

package/themes/default/{sources/prefetch.js → public/theme-prepare.js}

@@ -18,7 +18,19 @@
  * under the License.
  */
 
-(() => {
+;(function initThemeColor() {
+	const savedTheme = localStorage.getItem('methanol-theme')
+	const systemTheme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+	const theme = savedTheme || systemTheme
+	document.documentElement.classList.toggle('light', theme === 'light')
+	document.documentElement.classList.toggle('dark', theme === 'dark')
+
+	const savedAccent = localStorage.getItem('methanol-accent')
+	if (savedAccent && savedAccent !== 'default') {
+		document.documentElement.classList.add('accent-' + savedAccent)
+	}
+})()
+;(function initPrefetch() {
 	const prefetched = new Set()
 	const canPrefetch = (anchor) => {
 		if (!anchor || !anchor.href) return false

package/themes/default/sources/style.css

@@ -270,7 +270,7 @@ a {
 .sidebar {
 	position: sticky;
 	top: 0;
-	height: 100vh;
+	height: 100dvh;
 	overflow: visible;
 	padding: 2rem 0;
 	display: flex;
@@ -1105,7 +1105,7 @@ a {
 }
 
 .toc {
-	h4 {
+	.toc-heading {
 		margin: 0 0 1rem 0.5rem;
 		font-size: 0.8rem;
 		font-weight: 600;
@@ -1420,6 +1420,7 @@ a {
 	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 	position: relative;
 	overflow: hidden;
+	-webkit-tap-highlight-color: transparent;
 
 	&:hover {
 		border-color: var(--accent);
@@ -1473,7 +1474,7 @@ a {
 
 .page-nav-card.next {
 	text-align: right;
-	align-items: flex-end;
+	align-items: stretch;
 
 	.page-nav-label {
 		justify-content: flex-end;
@@ -1493,26 +1494,6 @@ a {
 		grid-template-columns: 1fr;
 		gap: 1rem;
 	}
-
-	.page-nav-card.next {
-		text-align: left;
-		align-items: flex-start;
-
-		.page-nav-label {
-			flex-direction: row;
-		}
-
-		.page-nav-label::after {
-			display: none;
-		}
-
-		.page-nav-label::before {
-			content: '→';
-			font-family: system-ui;
-			margin-right: 0.1rem;
-			transition: transform 0.2s ease;
-		}
-	}
 }
 
 /* --- Mobile / Toggles --- */
@@ -1566,7 +1547,7 @@ a {
 	.toc-panel {
 		position: fixed;
 		top: 0;
-		bottom: 0;
+		height: 100dvh;
 		width: 280px;
 		background: var(--surface);
 		border: 1px solid var(--border);