methanol 0.0.14 → 0.0.16

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,7 +26,8 @@ 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, PWA_INJECT_SCRIPT } from './client/virtual-module/assets.js'
+import { serializePagesIndex } from './pages-index.js'
+import { virtualModuleDir, 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)
@@ -126,13 +127,10 @@ const virtualModuleMap = {
 	get registry() {
 		return `export const registry = ${genRegistryScript()}`
 	},
-	get 'registry.js'() {
-		return `export const registry = ${genRegistryScript()}`
-	},
 	get loader() {
 		return LOADER_SCRIPT()
 	},
-	get 'inject.js'() {
+	get 'inject'() {
 		return INJECT_SCRIPT()
 	},
 	get 'pagefind-loader'() {
@@ -144,6 +142,10 @@ const virtualModuleMap = {
 		}
 
 		return ''
+	},
+	get pages() {
+		const pages = state.PAGES_CONTEXT?.pages || []
+		return `export const pages = ${serializePagesIndex(pages)}\nexport default pages`
 	}
 }
 
@@ -156,20 +158,6 @@ const getSchemeModuleKey = (id) => {
 	return id.slice(virtualModuleScheme.length)
 }
 
-const resolveVirtualModuleId = (id) => {
-	if (id.startsWith(virtualModulePrefix)) {
-		return id
-	}
-	const basePrefix = resolveBasePrefix()
-	if (basePrefix) {
-		const prefixed = `${basePrefix}${virtualModulePrefix}`
-		if (id.startsWith(prefixed)) {
-			return id.slice(basePrefix.length)
-		}
-	}
-	return null
-}
-
 export const methanolResolverPlugin = () => {
 	return {
 		name: 'methanol-resolver',
@@ -186,19 +174,16 @@ export const methanolResolverPlugin = () => {
 				return require.resolve(id)
 			}
 
+			// Very weird workaround for Vite
+			if (id.startsWith(virtualModulePrefix)) {
+				return resolve(virtualModuleDir, id.slice(virtualModulePrefix.length))
+			}
+
 			const schemeKey = getSchemeModuleKey(id)
 			if (schemeKey && Object.prototype.hasOwnProperty.call(virtualModuleMap, schemeKey)) {
 				return '\0' + id
 			}
 
-			const virtualId = resolveVirtualModuleId(id)
-			if (virtualId) {
-				const _moduleId = getModuleIdSegment(virtualId, virtualModulePrefix.length)
-				if (Object.prototype.hasOwnProperty.call(virtualModuleMap, _moduleId)) {
-					return '\0' + virtualId
-				}
-			}
-
 			if (state.SOURCES.length) {
 				const { pathname, search } = new URL(id, 'http://methanol')
 				for (const entry of state.SOURCES) {

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>
+	)
+}

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

@@ -0,0 +1,151 @@
+/* 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 getCollection = (p) => {
+	if (p.collection) return p.collection
+	if (!p.dir) return null
+	return p.dir.split('/')[0]
+}
+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 || '',
+		collection: getCollection(p)
+	}))
+}
+const allPosts = resolvePosts()
+const defaultCollections = Array.from(new Set(allPosts.map((p) => p.collection).filter(Boolean))).sort()
+
+export default function ({ collectionTitles = {} } = {}) {
+	const currentCollection = signal('')
+	const activeCollection = onCondition(currentCollection)
+	const visibleCount = signal(10)
+	const collectionList = Object.keys(collectionTitles || {}).length
+		? Object.keys(collectionTitles).sort()
+		: defaultCollections
+	const resolveLabel = (value) => collectionTitles?.[value] || value
+
+	if (typeof window !== 'undefined') {
+		const params = new URLSearchParams(window.location.search)
+		const col = params.get('collection')
+		if (col) currentCollection.value = col
+
+		window.addEventListener('popstate', () => {
+			const p = new URLSearchParams(window.location.search)
+			currentCollection.value = p.get('collection') || ''
+		})
+	}
+
+	const filteredPosts = $(() => {
+		const col = currentCollection.value
+		if (!col) return allPosts
+		return allPosts.filter((p) => p.collection === col)
+	})
+
+	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 setCollection = (col) => {
+		currentCollection.value = col
+		visibleCount.value = 10
+		const url = new URL(window.location)
+		if (col) {
+			url.searchParams.set('collection', col)
+		} else {
+			url.searchParams.delete('collection')
+		}
+		window.history.pushState({}, '', url)
+	}
+
+	return (
+		<div class="category-view">
+			<div class="category-list">
+				<button class="category-tag" class:active={activeCollection('')} on:click={() => setCollection('')}>
+					All
+				</button>
+				<For entries={collectionList}>
+					{({ item: col }) => (
+						<button class="category-tag" class:active={activeCollection(col)} on:click={() => setCollection(col)}>
+							{resolveLabel(col)}
+						</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.collection && <span class="post-categories"> &middot; {resolveLabel(p.collection)}</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 collection.</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/CollectionView.static.jsx

@@ -0,0 +1,37 @@
+/* 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 ({ collectionTitles = {} } = {}, ...children) {
+	if (!children.length) return null
+	const resolveLabel = (value) => collectionTitles?.[value] || value
+	const collections = Object.keys(collectionTitles || {}).sort()
+	return (
+		<div class="category-view">
+			<div class="category-list">
+				<button class="category-tag active">All</button>
+				{collections.map((col) => (
+					<button class="category-tag">{resolveLabel(col)}</button>
+				))}
+			</div>
+
+			<div class="post-list">{...children}</div>
+		</div>
+	)
+}