methanol 0.0.13 → 0.0.15

package/index.js

@@ -19,6 +19,7 @@
  */
 
 import { HTMLRenderer } from './src/renderer.js'
+export { extractExcerpt } from './src/text-utils.js'
 
 export { env } from './src/reframe.js'
 

package/package.json

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

package/src/build-system.js

@@ -147,6 +147,7 @@ export const buildHtmlEntries = async () => {
 			}
 		}
 		pagesContext.refreshPagesTree?.()
+		state.PAGES_CONTEXT = pagesContext
 
 		const titleSnapshot = pages.map((page) => page.title)
 		await runWorkerStage({

package/src/config.js

@@ -20,9 +20,10 @@
 
 import { readFile } from 'fs/promises'
 import { existsSync } from 'fs'
-import { resolve, isAbsolute, extname, basename } from 'path'
-import { pathToFileURL } from 'url'
+import { resolve, isAbsolute, extname, basename, dirname } from 'path'
+import { pathToFileURL, fileURLToPath } from 'url'
 import { mergeConfig } from 'vite'
+import { projectRequire } from './node-loader.js'
 import { cli, state } from './state.js'
 import { logger } from './logger.js'
 import { HTMLRenderer } from './renderer.js'
@@ -239,6 +240,34 @@ const buildConfigContext = (mode) => ({
 	HTMLRenderer
 })
 
+const resolveTheme = async (themeValue, root) => {
+	if (typeof themeValue !== 'string') return themeValue
+
+	const load = async (p) => {
+		const mod = await import(pathToFileURL(p).href)
+		const fn = mod.default ?? mod
+		return typeof fn === 'function' ? fn() : fn
+	}
+
+	// 1. Check Methanol themes dir
+	const __dirname = dirname(fileURLToPath(import.meta.url))
+	const builtInPath = resolve(__dirname, '../themes', themeValue, 'index.js')
+	if (existsSync(builtInPath)) {
+		return load(builtInPath)
+	}
+
+	// 2. Resolve methanol-theme-<name> from user dir
+	try {
+		const pkgName = `methanol-theme-${themeValue}`
+		const pkgPath = projectRequire.resolve(pkgName)
+		return load(pkgPath)
+	} catch (e) {
+		// Ignore
+	}
+
+	throw new Error(`Theme not found: ${themeValue}`)
+}
+
 export const loadUserConfig = async (mode, configPath = null) => {
 	if (configPath) {
 		const filePath = resolveConfigPath(configPath)
@@ -323,7 +352,8 @@ export const applyConfig = async (config, mode) => {
 
 	state.VIRTUAL_HTML_OUTPUT_ROOT = state.PAGES_DIR
 
-	state.USER_THEME = config.theme || await defaultTheme()
+	const themeValue = cli.CLI_THEME || config.theme
+	state.USER_THEME = themeValue ? await resolveTheme(themeValue, root) : await defaultTheme()
 	if (!state.USER_THEME?.root && !config.theme?.root) {
 		throw new Error('Theme root is required.')
 	}

package/src/dev-server.js

@@ -143,6 +143,7 @@ export const runViteDev = async () => {
 	let pagesContextToken = 0
 	const setPagesContext = (next) => {
 		pagesContext = next
+		state.PAGES_CONTEXT = next
 		pagesContextToken += 1
 	}
 	setPagesContext(await buildPagesContext({ compileAll: false }))
@@ -160,6 +161,23 @@ export const runViteDev = async () => {
 		console.error(error?.stack || error)
 	}
 
+	const _invalidate = (id) => {
+		const _module = server.moduleGraph.getModuleById(id)
+		if (_module) {
+			server.moduleGraph.invalidateModule(_module)
+		}
+	}
+	const invalidateRewindInject = () => {
+		_invalidate('\0/.methanol_virtual_module/registry.js')
+		_invalidate('\0methanol:registry')
+		_invalidate('\0/.methanol_virtual_module/inject.js')
+		_invalidate('\0methanol:inject')
+	}
+	const invalidatePagesIndex = () => {
+		_invalidate('\0/.methanol_virtual_module/pages.js')
+		_invalidate('\0methanol:pages')
+	}
+
 	const refreshPagesContext = async () => {
 		setPagesContext(await buildPagesContext({ compileAll: false }))
 	}
@@ -214,6 +232,7 @@ export const runViteDev = async () => {
 				}
 			}
 			pagesContext.refreshPagesTree?.()
+			invalidatePagesIndex()
 			invalidateHtmlCache()
 			const renderEpoch = htmlCacheEpoch
 
@@ -518,19 +537,6 @@ export const runViteDev = async () => {
 	await server.listen()
 	server.printUrls()
 
-	const _invalidate = (id) => {
-		const _module = server.moduleGraph.getModuleById(id)
-		if (_module) {
-			server.moduleGraph.invalidateModule(_module)
-		}
-	}
-	const invalidateRewindInject = () => {
-		_invalidate('\0/.methanol_virtual_module/registry.js')
-		_invalidate('\0methanol:registry')
-		_invalidate('\0/.methanol_virtual_module/inject.js')
-		_invalidate('\0methanol:inject')
-	}
-
 	let queue = Promise.resolve()
 	const enqueue = (task) => {
 		queue = queue.then(task).catch((err) => {
@@ -547,6 +553,7 @@ export const runViteDev = async () => {
 
 	const refreshPages = async () => {
 		await refreshPagesContext()
+		invalidatePagesIndex()
 		invalidateHtmlCache()
 		reload()
 	}
@@ -700,6 +707,7 @@ export const runViteDev = async () => {
 		}
 		const updated = await updatePageEntry(path, resolved)
 		if (updated) {
+			invalidatePagesIndex()
 			invalidateHtmlCache()
 			reload()
 			return

package/src/pages-index.js

@@ -0,0 +1,42 @@
+/* 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 JSON5 from 'json5'
+import { extractExcerpt } from './text-utils.js'
+
+const OMIT_KEYS = new Set(['content', 'mdxComponent', 'mdxCtx', 'getSiblings'])
+
+const sanitizePage = (page) => {
+	const result = {}
+	for (const [key, value] of Object.entries(page || {})) {
+		if (OMIT_KEYS.has(key)) continue
+		if (typeof value === 'function') continue
+		result[key] = value
+	}
+	result.excerpt = extractExcerpt(page)
+	return result
+}
+
+export const serializePagesIndex = (pages) => {
+	const list = Array.isArray(pages)
+		? pages.filter((page) => !page?.hidden).map(sanitizePage)
+		: []
+	return JSON5.stringify(list)
+}

package/src/pages.js

@@ -51,6 +51,7 @@ const cliOverrides = {
 	CLI_VERBOSE: cli.CLI_VERBOSE,
 	CLI_BASE: cli.CLI_BASE,
 	CLI_SEARCH: cli.CLI_SEARCH,
+	CLI_THEME: cli.CLI_THEME,
 	CLI_PWA: cli.CLI_PWA
 }
 

package/src/reframe.js

@@ -65,7 +65,7 @@ export function env(parentEnv) {
 
 			const id = renderCount++
 			const idStr = id.toString(16)
-			const script = `$$rfrm(${JSON.stringify(key)},${id},${Object.keys(props).length ? JSON5.stringify(props) : '{}'})`
+			const script = `$$rfrm(${JSON.stringify(key)},${id},${Object.keys(props).length ? JSON5.stringify(props).replace(/<\/script/ig, '<\\/script') : '{}'})`
 
 			return (R) => {
 				return [

package/src/state.js

@@ -130,6 +130,12 @@ const withCommonOptions = (y) =>
 			type: 'boolean',
 			default: undefined
 		})
+		.option('theme', {
+			describe: 'Theme to use (name or path)',
+			type: 'string',
+			requiresArg: true,
+			nargs: 1
+		})
 		.option('pwa', {
 			describe: 'Enable or disable PWA support',
 			type: 'boolean',
@@ -167,6 +173,7 @@ export const cli = {
 	CLI_VERBOSE: Boolean(argv.verbose),
 	CLI_BASE: argv.base || null,
 	CLI_SEARCH: typeof argv.search === 'boolean' ? argv.search : undefined,
+	CLI_THEME: argv.theme || null,
 	CLI_PWA: typeof argv.pwa === 'boolean' ? argv.pwa : undefined
 }
 
@@ -192,6 +199,7 @@ export const state = {
 	USER_VITE_CONFIG: null,
 	USER_MDX_CONFIG: null,
 	USER_PUBLIC_OVERRIDE: false,
+	PAGES_CONTEXT: null,
 	SOURCES: [],
 	PAGEFIND_ENABLED: false,
 	PAGEFIND_OPTIONS: null,

package/src/text-utils.js

@@ -0,0 +1,60 @@
+/* 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 DEFAULT_EXCERPT_LENGTH = 200
+
+const collapseWhitespace = (value) => value.replace(/\s+/g, ' ').trim()
+
+const stripFirstHeading = (value) => value.replace(/^\s{0,3}#{1,6}\s+.*$/m, ' ')
+
+const stripMarkdown = (value) => {
+	let text = value
+	text = text.replace(/```[\s\S]*?```/g, ' ')
+	text = text.replace(/`[^`]*`/g, ' ')
+	text = stripFirstHeading(text)
+	text = text.replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
+	text = text.replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+	text = text.replace(/<[^>]+>/g, ' ')
+	text = text.replace(/^\s{0,3}#{1,6}\s+/gm, '')
+	text = text.replace(/^\s{0,3}>\s?/gm, '')
+	text = text.replace(/^\s*[-*+]\s+/gm, '')
+	text = text.replace(/^\s*\d+\.\s+/gm, '')
+	return collapseWhitespace(text)
+}
+
+export const extractExcerpt = (page, options = {}) => {
+	if (!page) return ''
+	const length =
+		typeof options.length === 'number' && Number.isFinite(options.length)
+			? options.length
+			: DEFAULT_EXCERPT_LENGTH
+	const raw =
+		page.excerpt ||
+		page.frontmatter?.excerpt ||
+		page.frontmatter?.description ||
+		page.content ||
+		''
+	const sanitized = stripMarkdown(String(raw))
+	if (!sanitized) return ''
+	if (length > 0 && sanitized.length > length) {
+		return `${sanitized.slice(0, length).trim()}...`
+	}
+	return sanitized
+}

package/src/vite-plugins.js

@@ -26,6 +26,7 @@ import { normalizePath } from 'vite'
 import { state } from './state.js'
 import { resolveBasePrefix } from './config.js'
 import { genRegistryScript } from './components.js'
+import { serializePagesIndex } from './pages-index.js'
 import { INJECT_SCRIPT, LOADER_SCRIPT, PAGEFIND_LOADER_SCRIPT, PWA_INJECT_SCRIPT } from './client/virtual-module/assets.js'
 import { projectRequire } from './node-loader.js'
 
@@ -144,6 +145,14 @@ const virtualModuleMap = {
 		}
 
 		return ''
+	},
+	get pages() {
+		const pages = state.PAGES_CONTEXT?.pages || []
+		return `export const pages = ${serializePagesIndex(pages)}\nexport default pages`
+	},
+	get 'pages.js'() {
+		const pages = state.PAGES_CONTEXT?.pages || []
+		return `export const pages = ${serializePagesIndex(pages)}\nexport default pages`
 	}
 }
 

package/src/workers/build-pool.js

@@ -39,6 +39,7 @@ const cliOverrides = {
 	CLI_VERBOSE: cli.CLI_VERBOSE,
 	CLI_BASE: cli.CLI_BASE,
 	CLI_SEARCH: cli.CLI_SEARCH,
+	CLI_THEME: cli.CLI_THEME,
 	CLI_PWA: cli.CLI_PWA
 }
 

package/themes/blog/README.md

@@ -0,0 +1,26 @@
+# Blog Theme
+
+A simple, clean blog theme for Methanol.
+
+## Features
+- Clean typography
+- Post list on homepage
+- Responsive design
+- Dark mode support (via system preference)
+
+## Usage
+
+To use this theme, configure your Methanol project to point to this directory.
+
+```js
+// methanol.config.js
+export default {
+  theme: './themes/blog',
+  // ...
+}
+```
+
+## Structure
+- `src/page.jsx`: Main layout template.
+- `sources/style.css`: Stylesheet.
+- `pages/`: Default pages (Home, 404, Offline).

package/themes/blog/components/CategoryView.client.jsx

@@ -0,0 +1,164 @@
+/* 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, $, For, If, onCondition } from 'refui'
+import pages from 'methanol:pages'
+import { formatDate } from '../src/date-utils.js'
+
+const rawPages = Array.isArray(pages) ? pages : []
+const isPostPage = (p) => {
+	if (!p?.routeHref) return false
+	if (p.routeHref === '/' || p.routeHref === '/404' || p.routeHref === '/offline') return false
+	if (p.routeHref.startsWith('/.methanol')) return false
+	return true
+}
+const resolvePosts = () => {
+	const list = rawPages.filter(isPostPage)
+	list.sort((a, b) => {
+		const dateA = new Date(a.frontmatter?.date || a.stats?.createdAt || 0)
+		const dateB = new Date(b.frontmatter?.date || b.stats?.createdAt || 0)
+		return dateB - dateA
+	})
+	return list.map((p) => ({
+		title: p.title,
+		routeHref: p.routeHref,
+		frontmatter: p.frontmatter || {},
+		stats: p.stats || {},
+		excerpt: p.excerpt || p.frontmatter?.excerpt || ''
+	}))
+}
+const allPosts = resolvePosts()
+const defaultCategories = Array.from(
+	new Set(
+		allPosts.flatMap((p) => {
+			const c = p.frontmatter?.categories
+			return Array.isArray(c) ? c : c ? [c] : []
+		})
+	)
+).sort()
+
+export default function ({ categories = null } = {}) {
+	const currentCategory = signal('')
+	const activeCategory = onCondition(currentCategory)
+	const visibleCount = signal(10)
+	const categoryList = Array.isArray(categories) && categories.length ? categories : defaultCategories
+
+	if (typeof window !== 'undefined') {
+		// Initial setup on client side
+		const params = new URLSearchParams(window.location.search)
+		const cat = params.get('category')
+		if (cat) currentCategory.value = cat
+
+		window.addEventListener('popstate', () => {
+			const p = new URLSearchParams(window.location.search)
+			currentCategory.value = p.get('category') || ''
+		})
+	}
+
+	const filteredPosts = $(() => {
+		const cat = currentCategory.value
+		if (!cat) return allPosts
+		return allPosts.filter((p) => {
+			const pCats = p.frontmatter?.categories || []
+			return Array.isArray(pCats) ? pCats.includes(cat) : pCats === cat
+		})
+	})
+
+	const visiblePosts = $(() => filteredPosts.value.slice(0, visibleCount.value))
+	const hasMore = $(() => visibleCount.value < filteredPosts.value.length)
+	const showEmpty = $(() => filteredPosts.value.length === 0)
+
+	const loadMore = () => {
+		visibleCount.value += 10
+	}
+
+	const setCategory = (cat) => {
+		currentCategory.value = cat
+		visibleCount.value = 10
+		const url = new URL(window.location)
+		if (cat) {
+			url.searchParams.set('category', cat)
+		} else {
+			url.searchParams.delete('category')
+		}
+		window.history.pushState({}, '', url)
+	}
+
+	return (
+		<div class="category-view">
+			<div class="category-list">
+				<button class="category-tag" class:active={activeCategory('')} on:click={() => setCategory('')}>
+					All
+				</button>
+				<For entries={categoryList}>
+					{({ item: cat }) => (
+						<button
+							class="category-tag"
+							class:active={activeCategory(cat.value)}
+							on:click={() => setCategory(cat.value)}
+						>
+							{cat}
+						</button>
+					)}
+				</For>
+			</div>
+
+			<div class="post-list">
+				<For entries={visiblePosts}>
+					{({ item: p }) => {
+						const dateStr = formatDate(p.frontmatter?.date || p.stats?.createdAt)
+
+						return (
+							<article class="post-item">
+								<div class="post-meta">
+									{dateStr && <span class="post-date">{dateStr}</span>}
+									{p.frontmatter.categories && (
+										<span class="post-categories">
+											&middot;{' '}
+											{Array.isArray(p.frontmatter.categories)
+												? p.frontmatter.categories.join(', ')
+												: p.frontmatter.categories}
+										</span>
+									)}
+								</div>
+								<h2 class="post-item-title">
+									<a href={p.routeHref}>{p.title || 'Untitled'}</a>
+								</h2>
+								<div class="post-excerpt">{p.frontmatter.excerpt || p.excerpt || 'No excerpt available.'}</div>
+							</article>
+						)
+					}}
+				</For>
+			</div>
+
+			<If condition={showEmpty}>{() => <p>No posts found in this category.</p>}</If>
+
+			<If condition={hasMore}>
+				{() => (
+					<div class="pagination-container">
+						<button class="load-more-btn" on:click={loadMore}>
+							Load More
+						</button>
+					</div>
+				)}
+			</If>
+		</div>
+	)
+}

package/themes/blog/components/CategoryView.static.jsx

@@ -0,0 +1,35 @@
+/* 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 ({ categories = [] } = {}, ...children) {
+	if (!children.length) return null
+	return (
+		<div class="category-view">
+			<div class="category-list">
+				<button class="category-tag active">All</button>
+				{categories.map((cat) => (
+					<button class="category-tag">{cat}</button>
+				))}
+			</div>
+
+			<div class="post-list">{...children}</div>
+		</div>
+	)
+}