methanol 0.0.8 → 0.0.10

package/src/state.js

@@ -101,12 +101,11 @@ const withCommonOptions = (y) =>
 			type: 'boolean',
 			default: false
 		})
-		.option('code-highlighting', {
+		.option('highlight', {
 			describe: 'Enable or disable code highlighting',
-			type: 'string',
+			type: 'boolean',
 			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
@@ -114,6 +113,26 @@ const withCommonOptions = (y) =>
 				return null
 			}
 		})
+		.option('verbose', {
+			alias: 'v',
+			describe: 'Enable verbose output',
+			type: 'boolean',
+			default: false
+		})
+		.option('base', {
+			describe: 'Base URL override',
+			type: 'string',
+			requiresArg: true,
+			nargs: 1
+		})
+		.option('search', {
+			describe: 'Enable search indexing (pagefind)',
+			type: 'boolean'
+		})
+		.option('pwa', {
+			describe: 'Enable PWA support',
+			type: 'boolean'
+		})
 
 const parser = yargs(hideBin(process.argv))
 	.scriptName('methanol')
@@ -141,7 +160,11 @@ export const cli = {
 	CLI_OUTPUT_DIR: argv.output || null,
 	CLI_CONFIG_PATH: argv.config || null,
 	CLI_SITE_NAME: argv['site-name'] || null,
-	CLI_CODE_HIGHLIGHTING: typeof argv['code-highlighting'] === 'boolean' ? argv['code-highlighting'] : null
+	CLI_CODE_HIGHLIGHTING: typeof argv.highlight === 'boolean' ? argv.highlight : null,
+	CLI_VERBOSE: Boolean(argv.verbose),
+	CLI_BASE: argv.base || null,
+	CLI_SEARCH: argv.search,
+	CLI_PWA: argv.pwa
 }
 
 export const state = {
@@ -170,6 +193,7 @@ export const state = {
 	PAGEFIND_ENABLED: false,
 	PAGEFIND_OPTIONS: null,
 	PAGEFIND_BUILD: null,
+	PWA_ENABLED: false,
 	USER_PRE_BUILD_HOOKS: [],
 	USER_POST_BUILD_HOOKS: [],
 	USER_PRE_BUNDLE_HOOKS: [],
@@ -180,6 +204,9 @@ export const state = {
 	THEME_POST_BUNDLE_HOOKS: [],
 	STARRY_NIGHT_ENABLED: false,
 	STARRY_NIGHT_OPTIONS: null,
+	GFM_ENABLED: true,
+	PWA_ENABLED: false,
+	PWA_OPTIONS: null,
 	CURRENT_MODE: 'production',
 	RESOLVED_MDX_CONFIG: undefined,
 	RESOLVED_VITE_CONFIG: undefined

package/src/utils.js

@@ -1,9 +1,31 @@
+/* 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 NullProtoObj from 'null-prototype-object'
+
 export const cached = (fn) => {
 	let cache = null
 	return () => (cache ?? (cache = fn()))
 }
 
 export const cachedStr = (fn) => {
-	const cache = Object.create(null)
+	const cache = new NullProtoObj()
 	return (key) => (cache[key] ?? (cache[key] = fn(key)))
 }

package/src/vite-plugins.js

@@ -26,7 +26,7 @@ import { normalizePath } from 'vite'
 import { state } from './state.js'
 import { resolveBasePrefix } from './config.js'
 import { genRegistryScript } from './components.js'
-import { INJECT_SCRIPT, LOADER_SCRIPT, PAGEFIND_LOADER_SCRIPT } from './assets.js'
+import { INJECT_SCRIPT, LOADER_SCRIPT, PAGEFIND_LOADER_SCRIPT, PWA_INJECT_SCRIPT } from './client/virtual-module/assets.js'
 import { projectRequire } from './node-loader.js'
 
 const require = createRequire(import.meta.url)
@@ -129,9 +129,22 @@ const virtualModuleMap = {
 	get 'registry.js'() {
 		return `export const registry = ${genRegistryScript()}`
 	},
-	loader: LOADER_SCRIPT,
-	'inject.js': INJECT_SCRIPT,
-	'pagefind-loader': PAGEFIND_LOADER_SCRIPT
+	get loader() {
+		return LOADER_SCRIPT()
+	},
+	get 'inject.js'() {
+		return INJECT_SCRIPT()
+	},
+	get 'pagefind-loader'() {
+		return PAGEFIND_LOADER_SCRIPT()
+	},
+	get 'pwa-inject'() {
+		if (state.PWA_ENABLED) {
+			return PWA_INJECT_SCRIPT()
+		}
+
+		return ''
+	}
 }
 
 const getModuleIdSegment = (id, start) => {

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](/)