methanol 0.0.1 → 0.0.3

package/src/state.js

@@ -101,6 +101,19 @@ const withCommonOptions = (y) =>
 			type: 'boolean',
 			default: false
 		})
+		.option('code-highlighting', {
+			describe: 'Enable or disable code highlighting',
+			type: 'string',
+			coerce: (value) => {
+				if (value == null) return null
+				if (value === true || value === '') return true
+				if (typeof value === 'boolean') return value
+				const normalized = String(value).trim().toLowerCase()
+				if (normalized === 'true') return true
+				if (normalized === 'false') return false
+				return null
+			}
+		})
 
 const parser = yargs(hideBin(process.argv))
 	.scriptName('methanol')
@@ -127,7 +140,8 @@ export const cli = {
 	CLI_ASSETS_DIR: argv.assets || null,
 	CLI_OUTPUT_DIR: argv.output || null,
 	CLI_CONFIG_PATH: argv.config || null,
-	CLI_SITE_NAME: argv['site-name'] || null
+	CLI_SITE_NAME: argv['site-name'] || null,
+	CLI_CODE_HIGHLIGHTING: typeof argv['code-highlighting'] === 'boolean' ? argv['code-highlighting'] : null
 }
 
 export const state = {
@@ -149,10 +163,20 @@ export const state = {
 	USER_VITE_CONFIG: null,
 	USER_MDX_CONFIG: null,
 	USER_PUBLIC_OVERRIDE: false,
-	RESOURCES: [],
+	SOURCES: [],
 	PAGEFIND_ENABLED: false,
 	PAGEFIND_OPTIONS: null,
-	PAGEFIND_BUILD_OPTIONS: null,
+	PAGEFIND_BUILD: null,
+	USER_PRE_BUILD_HOOKS: [],
+	USER_POST_BUILD_HOOKS: [],
+	USER_PRE_BUNDLE_HOOKS: [],
+	USER_POST_BUNDLE_HOOKS: [],
+	THEME_PRE_BUILD_HOOKS: [],
+	THEME_POST_BUILD_HOOKS: [],
+	THEME_PRE_BUNDLE_HOOKS: [],
+	THEME_POST_BUNDLE_HOOKS: [],
+	STARRY_NIGHT_ENABLED: false,
+	STARRY_NIGHT_OPTIONS: null,
 	CURRENT_MODE: 'production',
 	RESOLVED_MDX_CONFIG: undefined,
 	RESOLVED_VITE_CONFIG: undefined

package/src/vite-plugins.js

@@ -146,9 +146,9 @@ export const methanolResolverPlugin = () => {
 				}
 			}
 
-			if (state.RESOURCES.length) {
+			if (state.SOURCES.length) {
 				const { pathname, search } = new URL(id, 'http://methanol')
-				for (const entry of state.RESOURCES) {
+				for (const entry of state.SOURCES) {
 					const { find, replacement } = entry
 					if (!find || !replacement) continue
 					if (typeof find === 'string') {

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

@@ -0,0 +1,95 @@
+/* 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 { signal, $ } from 'refui'
+
+const ACCENTS = [
+	{ id: 'default', label: 'Amber', color: '#ffa000' },
+	{ id: 'rose', label: 'Rose', color: '#f43f5e' },
+	{ id: 'blue', label: 'Indigo', color: '#818cf8' },
+	{ id: 'green', label: 'Teal', color: '#2dd4bf' },
+	{ id: 'purple', label: 'Violet', color: '#a78bfa' }
+]
+
+export default function () {
+	const currentAccent = signal('default')
+	const isOpen = signal(false)
+
+	// Initialize theme from localStorage
+	if (typeof window !== 'undefined') {
+		const saved = localStorage.getItem('methanol-accent')
+		if (saved && ACCENTS.some((a) => a.id === saved)) {
+			currentAccent.value = saved
+			if (saved !== 'default') {
+				document.documentElement.classList.add(`accent-${saved}`)
+			}
+		}
+
+		// Close popup when clicking outside
+		document.addEventListener('click', (e) => {
+			if (!e.target.closest('.theme-switch-wrapper')) {
+				isOpen.value = false
+			}
+		})
+	}
+
+	const setAccent = (id) => {
+		const oldId = currentAccent.value
+
+		// Remove old
+		if (oldId !== 'default') {
+			document.documentElement.classList.remove(`accent-${oldId}`)
+		}
+
+		// Add new
+		if (id !== 'default') {
+			document.documentElement.classList.add(`accent-${id}`)
+		}
+
+		currentAccent.value = id
+		localStorage.setItem('methanol-accent', id)
+		isOpen.value = false
+	}
+
+	const togglePopup = () => {
+		isOpen.value = !isOpen.value
+	}
+
+	return (
+		<div class="theme-switch-container">
+			<div class="theme-switch-wrapper">
+				<div class={$(() => `accent-popup ${isOpen.value ? 'open' : ''}`)}>
+					{ACCENTS.map((accent) => (
+						<button
+							class={$(() => `accent-option ${currentAccent.value === accent.id ? 'active' : ''}`)}
+							on:click={() => setAccent(accent.id)}
+						>
+							<span class="option-circle" style={`background-color: ${accent.color}`}></span>
+							{accent.label}
+						</button>
+					))}
+				</div>
+				<button class="theme-switch-btn" on:click={togglePopup} attr:aria-label="Select accent color">
+					<div class="accent-circle"></div>
+				</button>
+			</div>
+		</div>
+	)
+}

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

@@ -0,0 +1,23 @@
+/* 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.
+ */
+
+export default function () {
+	// render nothing on server side
+}

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

@@ -87,7 +87,7 @@ export default function () {
 
 	return (
 		<div class="theme-switch-container">
-			<button class="theme-switch-btn" on:click={toggle} aria-label="Toggle theme">
+			<button class="theme-switch-btn" on:click={toggle} attr:aria-label="Toggle theme">
 				<CurrentIcon />
 			</button>
 		</div>

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

@@ -18,7 +18,7 @@
  * under the License.
  */
 
-import { signal, $, If, For } from 'refui'
+import { signal, $, t, If, For, onCondition } from 'refui'
 import { createPortal } from 'refui/extras'
 import { loadPagefind } from '/.methanol_virtual_module/pagefind.js'
 
@@ -55,7 +55,10 @@ export default function ({ options } = {}) {
 	const isLoading = signal(false)
 	const activeIndex = signal(-1)
 
+	const buttonRef = signal()
 	const inputRef = signal()
+	const resultIdPrefix = `search-result-${Math.random().toString(36).slice(2)}`
+	const activeMatch = onCondition(activeIndex)
 
 	let debounceTimer = null
 	const shortcutLabel = resolveShortcutLabel()
@@ -76,7 +79,7 @@ export default function ({ options } = {}) {
 			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
+				results.value = data.map((value) => ({ value, el: signal() }))
 			}
 		} catch (err) {
 			console.error('Search error:', err)
@@ -117,11 +120,13 @@ export default function ({ options } = {}) {
 		results.value = []
 		activeIndex.value = -1
 		if (debounceTimer) clearTimeout(debounceTimer)
+		if (inputRef.value) inputRef.value.blur()
+		if (buttonRef.value) buttonRef.value.focus()
 	}
 
 	const scrollActiveIntoView = () => {
 		setTimeout(() => {
-			const activeEl = document.querySelector('.search-result-item[aria-selected="true"]')
+			const activeEl = results.value[activeIndex.value]?.el.value
 			if (activeEl) {
 				activeEl.scrollIntoView({ block: 'nearest' })
 			}
@@ -138,19 +143,21 @@ export default function ({ options } = {}) {
 		if (event.key === 'ArrowDown') {
 			event.preventDefault()
 			if (results.value.length > 0) {
-				activeIndex.value = (activeIndex.value + 1) % results.value.length
+				const nextIndex = activeIndex.value >= 0 ? (activeIndex.value + 1) % results.value.length : 0
+				activeIndex.value = nextIndex
 				scrollActiveIntoView()
 			}
 		} else if (event.key === 'ArrowUp') {
 			event.preventDefault()
 			if (results.value.length > 0) {
-				activeIndex.value = (activeIndex.value - 1 + results.value.length) % results.value.length
+				const nextIndex = activeIndex.value > 0 ? activeIndex.value - 1 : results.value.length - 1
+				activeIndex.value = nextIndex
 				scrollActiveIntoView()
 			}
 		} else if (event.key === 'Enter') {
 			event.preventDefault()
-			const selected = results.value[activeIndex.value]
-			const fallback = results.value[0]
+			const selected = results.value[activeIndex.value]?.value
+			const fallback = results.value[0]?.value
 			const target = selected || fallback
 			if (target?.url) {
 				window.location.href = target.url
@@ -159,6 +166,30 @@ export default function ({ options } = {}) {
 		}
 	}
 
+	const onResultKeyDown = (event, indexValue) => {
+		if (event.key === 'Escape') {
+			event.preventDefault()
+			close()
+			return
+		}
+		if (event.key === 'ArrowDown') {
+			event.preventDefault()
+			const nextIndex = (indexValue + 1) % results.value.length
+			activeIndex.value = nextIndex
+			scrollActiveIntoView()
+		} else if (event.key === 'ArrowUp') {
+			event.preventDefault()
+			if (indexValue === 0) {
+				activeIndex.value = -1
+				focusInput()
+				return
+			}
+			const nextIndex = indexValue - 1
+			activeIndex.value = nextIndex
+			scrollActiveIntoView()
+		}
+	}
+
 	const showEmpty = $(() => !query.value)
 	const showNoResults = $(() => {
 		const _query = query.value
@@ -192,28 +223,24 @@ export default function ({ options } = {}) {
 	return (R) => {
 		R.render(document.body, Outlet)
 		return (
-				<button class="search-box" type="button" on:click={open} aria-label="Open search">
-					<svg
-						attr:width="16"
-						attr:height="16"
-						attr:viewBox="0 0 24 24"
-						attr:fill="none"
-						attr:stroke="currentColor"
-						attr:stroke-width="2"
-						attr:stroke-linecap="round"
-						attr:stroke-linejoin="round"
-					>
-						<circle attr:cx="11" attr:cy="11" attr:r="8"></circle>
-						<path attr:d="m21 21-4.3-4.3"></path>
-					</svg>
-					<span>Search</span>
-					<kbd>{shortcutLabel}</kbd>
+			<button class="search-box" type="button" on:click={open} attr:aria-label="Open search" $ref={buttonRef}>
+				<svg
+					attr:width="16"
+					attr:height="16"
+					attr:viewBox="0 0 24 24"
+					attr:fill="none"
+					attr:stroke="currentColor"
+					attr:stroke-width="2"
+					attr:stroke-linecap="round"
+					attr:stroke-linejoin="round"
+				>
+					<circle attr:cx="11" attr:cy="11" attr:r="8"></circle>
+					<path attr:d="m21 21-4.3-4.3"></path>
+				</svg>
+				<span>Search</span>
+				<kbd>{shortcutLabel}</kbd>
 				<Inlet>
-					<div
-						class="search-modal"
-						class:open={isOpen}
-						attr:aria-hidden={$(() => (isOpen.value ? null : 'true'))}
-					>
+					<div class="search-modal" class:open={isOpen} attr:inert={$(() => (isOpen.value ? null : ''))}>
 						<div class="search-modal__scrim" on:click={close}></div>
 						<div class="search-modal__panel">
 							<div class="search-input-wrapper">
@@ -237,6 +264,9 @@ export default function ({ options } = {}) {
 									value={query}
 									on:input={onInput}
 									on:keydown={onKeyDown}
+									attr:aria-activedescendant={$(() =>
+										activeIndex.value >= 0 ? `${resultIdPrefix}-${activeIndex.value}` : null
+									)}
 									attr:autocomplete="off"
 									attr:autocorrect="off"
 									attr:spellcheck="false"
@@ -249,13 +279,20 @@ export default function ({ options } = {}) {
 									{() => <div class="search-status">No results found for "{query}"</div>}
 								</If>
 								<If condition={isLoading}>{() => <div class="search-status">Searching...</div>}</If>
-								<For entries={results} track="url" indexed={true}>
-									{({ item, index }) => (
+								<For entries={results} indexed>
+									{({ item: { value, el }, index }) => (
 										<a
 											class="search-result-item"
-											href={item.url}
+											class:active={activeMatch(index)}
+											href={value.url}
 											on:click={close}
+											on:keydown={(event) => onResultKeyDown(event, index.value)}
+											on:focus={() => {
+												activeIndex.value = index.value
+											}}
 											attr:aria-selected={$(() => (activeIndex.value === index.value ? 'true' : 'false'))}
+											attr:id={t`${resultIdPrefix}-${index.value}`}
+											$ref={el}
 										>
 											<div class="search-result-title">
 												<svg
@@ -271,9 +308,9 @@ export default function ({ options } = {}) {
 													<path attr:d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
 													<polyline attr:points="14 2 14 8 20 8"></polyline>
 												</svg>
-												{item?.meta?.title || item?.title || item?.url}
+												{value?.meta?.title || value?.title || value?.url}
 											</div>
-											<div class="search-result-excerpt" innerHTML={item.excerpt || ''}></div>
+											<div class="search-result-excerpt" innerHTML={value.excerpt || ''}></div>
 										</a>
 									)}
 								</For>
@@ -281,7 +318,7 @@ export default function ({ options } = {}) {
 						</div>
 					</div>
 				</Inlet>
-				</button>
+			</button>
 		)
 	}
 }

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

@@ -35,7 +35,6 @@ export default function () {
 				<path d="m21 21-4.3-4.3"></path>
 			</svg>
 			<span>Search</span>
-			<kbd>Ctrl+K</kbd>
 		</button>
 	)
 }

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

@@ -73,7 +73,7 @@ export default function (props, ...children) {
 
 	return (
 		<div class="code-block-container">
-			<button class="copy-btn" on:click={copy} aria-label="Copy code">
+			<button class="copy-btn" on:click={copy} attr:aria-label="Copy code">
 				<Btn />
 			</button>
 			<pre {...props} $ref={el}>

package/themes/default/components/{pre.jsx → pre.static.jsx}

@@ -24,4 +24,4 @@ export default function (props, ...children) {
 			<pre {...props}>{...children}</pre>
 		</div>
 	)
-}
+}

package/themes/default/index.js

@@ -21,30 +21,21 @@
 import { readFileSync } from 'fs'
 import { fileURLToPath } from 'url'
 import { dirname, resolve } from 'path'
-import rehypeStarryNight from 'rehype-starry-night'
-
 import PAGE_TEMPLATE from './page.jsx'
 import { createHeadings } from './heading.jsx'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
-export default ({ starryNight = true, starryNightOptions } = {}) => {
+export default () => {
 	return {
 		root: __dirname,
-		// componentsDir: './components',
-		// pagesDir: './pages',
-		resources: {
-			'/.methanol_theme_default': './resources'
+		sources: {
+			'/.methanol_theme_default': './sources'
 		},
 		components: {
 			...createHeadings()
 		},
-		template: PAGE_TEMPLATE,
-		mdx: {
-			rehypePlugins: [
-				starryNight && [rehypeStarryNight, starryNightOptions]
-			].filter(Boolean)
-		}
+		template: PAGE_TEMPLATE
 	}
 }

package/themes/default/page.jsx

@@ -78,13 +78,14 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 	const hasToc = Boolean(toc)
 	const layoutClass = hasToc ? 'layout-container' : 'layout-container no-toc'
 	const tree = renderPageTree(pagesTree, currentRoute, 0)
-	const { ThemeSearchBox, ThemeColorSwitch, ThemeToCContainer } = components
+	const { ThemeSearchBox, ThemeColorSwitch, ThemeAccentSwitch, ThemeToCContainer } = components
 	const rootPage = pagesByRoute?.get?.('/') || pages.find((entry) => entry.routePath === '/')
 	const pageFrontmatter = page?.frontmatter || {}
 	const rootFrontmatter = rootPage?.frontmatter || {}
 	const themeLogo = '/logo.png'
+	const themeFavIcon = '/favicon.png'
 	const logo = pageFrontmatter.logo ?? rootFrontmatter.logo ?? ctx.site?.logo ?? themeLogo
-	const favicon = pageFrontmatter.favicon ?? rootFrontmatter.favicon ?? ctx.site?.favicon ?? logo ?? themeLogo
+	const favicon = pageFrontmatter.favicon ?? rootFrontmatter.favicon ?? ctx.site?.favicon ?? themeFavIcon
 	const excerpt = pageFrontmatter.excerpt ?? null
 	const ogTitle = pageFrontmatter.ogTitle ?? null
 	const ogDescription = pageFrontmatter.ogDescription ?? null
@@ -94,8 +95,14 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 	const twitterDescription = pageFrontmatter.twitterDescription ?? ogDescription ?? excerpt
 	const twitterImage = pageFrontmatter.twitterImage ?? ogImage
 	const twitterCard = pageFrontmatter.twitterCard ?? (twitterImage ? 'summary_large_image' : null)
+	const siblings = typeof page?.getSiblings === 'function' ? page.getSiblings() : null
+	const prevPage = siblings?.prev || null
+	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 htmlLang = typeof languageCode === 'string' && languageCode.trim() ? languageCode : 'en'
 	const pagefindEnabled = ctx.site?.pagefind?.enabled !== false
 	const pagefindOptions = ctx.site?.pagefind?.options || null
 	const languageSelector = languages.length ? (
@@ -137,7 +144,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 	return (
 		<>
 			{R.rawHTML`<!DOCTYPE html>`}
-			<html lang="en">
+			<html lang={htmlLang}>
 				<head>
 					<meta charset="UTF-8" />
 					<meta name="viewport" content="width=device-width" />
@@ -155,6 +162,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 					{twitterTitle ? <meta name="twitter:title" content={twitterTitle} /> : null}
 					{twitterDescription ? <meta name="twitter:description" content={twitterDescription} /> : null}
 					{twitterImage ? <meta name="twitter:image" content={twitterImage} /> : null}
+					<ExtraHead />
 					<link rel="preload stylesheet" as="style" href="/.methanol_theme_default/style.css" />
 					{R.rawHTML`
 						<script>
@@ -164,10 +172,15 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 								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>
 					`}
-					<ExtraHead />
+					<script type="module" src="/.methanol_theme_default/prefetch.js" defer></script>
 				</head>
 				<body>
 					<input type="checkbox" id="nav-toggle" class="nav-toggle" />
@@ -187,6 +200,27 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 							<line x1="3" y1="18" x2="21" y2="18"></line>
 						</svg>
 					</label>
+					{pagefindEnabled ? (
+						<button
+							class="search-toggle-label"
+							aria-label="Open search"
+							onclick="window.__methanolSearchOpen()"
+						>
+							<svg
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<circle cx="11" cy="11" r="8"></circle>
+								<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+							</svg>
+						</button>
+					) : null}
 					{hasToc ? (
 						<>
 							<input type="checkbox" id="toc-toggle" class="toc-toggle" />
@@ -226,15 +260,35 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 							<div class="sidebar-footer">
 								{languageSelector}
 								<ThemeColorSwitch />
+								<ThemeAccentSwitch />
 							</div>
 						</aside>
 						<main class="main-content" data-pagefind-body={pagefindEnabled ? '' : null}>
 							<Page />
+							{prevPage || nextPage ? (
+								<nav class="page-nav">
+									{prevPage ? (
+										<a class="page-nav-card prev" href={prevPage.routeHref || prevPage.routePath}>
+											<span class="page-nav-label">Previous</span>
+											<span class="page-nav-title">{prevPage.title || prevPage.routePath}</span>
+										</a>
+									) : <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>
+											<span class="page-nav-title">{nextPage.title || nextPage.routePath}</span>
+										</a>
+									) : null}
+								</nav>
+							) : null}
 							{page ? (
 								<footer class="page-meta">
-									Updated: {page.updatedAt || '-'}
-									<br />
-									Powered by Methanol
+									<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>
+									</div>
 								</footer>
 							) : null}
 						</main>

package/themes/default/pages/index.mdx

@@ -4,6 +4,28 @@ title: Welcome
 
 # Welcome to Methanol
 
-Start by adding docs under `pages/` (or `docs/`) as `.mdx` files, and place shared UI in `components/`.
+Methanol turns your content folder into a static site with rEFui and MDX, file-based routing, and a fast dev server.
 
-Add your own `pages/index.md` or `pages/index.mdx` to replace this page.
+## Quick Start
+
+```bash
+npx methanol dev
+```
+
+Open `http://localhost:5173`.
+
+## Your Content Folder
+
+Pages are currently read from the configured `pagesDir`:
+
+<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.
+
+## Common Folders
+
+```
+components/   # JSX/TSX components for MDX
+public/       # static assets copied as-is
+dist/         # production output
+```

package/themes/default/sources/prefetch.js

@@ -0,0 +1,49 @@
+/* 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.
+ */
+
+(() => {
+	const prefetched = new Set()
+	const canPrefetch = (anchor) => {
+		if (!anchor || !anchor.href) return false
+		if (anchor.dataset && anchor.dataset.prefetch === 'false') return false
+		if (anchor.hasAttribute('download')) return false
+		if (anchor.target && anchor.target !== '_self') return false
+		const url = new URL(anchor.href, window.location.href)
+		if (url.origin !== window.location.origin) return false
+		if (url.protocol !== 'http:' && url.protocol !== 'https:') return false
+		if (url.pathname === window.location.pathname && url.search === window.location.search) {
+			return false
+		}
+		return true
+	}
+	const onHover = (event) => {
+		const anchor = event.target && event.target.closest ? event.target.closest('a') : null
+		if (!canPrefetch(anchor)) return
+		const href = anchor.href
+		if (prefetched.has(href)) return
+		prefetched.add(href)
+		const link = document.createElement('link')
+		link.rel = 'prefetch'
+		link.as = 'document'
+		link.href = href
+		document.head.appendChild(link)
+	}
+	document.addEventListener('pointerover', onHover, { capture: true, passive: true })
+})()