methanol 0.0.7 → 0.0.9

package/src/state.js

@@ -103,10 +103,9 @@ const withCommonOptions = (y) =>
 		})
 		.option('code-highlighting', {
 			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,18 @@ 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
+		})
 
 const parser = yargs(hideBin(process.argv))
 	.scriptName('methanol')
@@ -141,13 +152,17 @@ 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['code-highlighting'] === 'boolean' ? argv['code-highlighting'] : null,
+	CLI_VERBOSE: Boolean(argv.verbose),
+	CLI_BASE: argv.base || null
 }
 
 export const state = {
 	PROJECT_ROOT,
 	ROOT_DIR: PROJECT_ROOT,
 	SITE_NAME: 'Methanol Site',
+	SITE_BASE: null,
+	VITE_BASE: null,
 	PAGES_DIR: resolve(PROJECT_ROOT, 'pages'),
 	COMPONENTS_DIR: resolve(PROJECT_ROOT, 'components'),
 	STATIC_DIR: resolve(PROJECT_ROOT, 'public'),
@@ -178,6 +193,7 @@ export const state = {
 	THEME_POST_BUNDLE_HOOKS: [],
 	STARRY_NIGHT_ENABLED: false,
 	STARRY_NIGHT_OPTIONS: null,
+	GFM_ENABLED: true,
 	CURRENT_MODE: 'production',
 	RESOLVED_MDX_CONFIG: undefined,
 	RESOLVED_VITE_CONFIG: undefined

package/src/utils.js

@@ -0,0 +1,9 @@
+export const cached = (fn) => {
+	let cache = null
+	return () => (cache ?? (cache = fn()))
+}
+
+export const cachedStr = (fn) => {
+	const cache = Object.create(null)
+	return (key) => (cache[key] ?? (cache[key] = fn(key)))
+}

package/src/virtual-module/inject.js

@@ -21,10 +21,9 @@
 import { createDOMRenderer } from 'refui/dom'
 import { defaults } from 'refui/browser'
 import { lazy } from 'refui'
-import { init } from '/.methanol_virtual_module/loader.js'
-
-const reg = import('/.methanol_virtual_module/registry.js')
+import { init } from 'methanol:loader'
+import { registry } from 'methanol:registry'
 
 const R = createDOMRenderer(defaults)
 
-reg.then((m) => init(m.registry, R))
+init(registry, R)

package/src/virtual-module/{pagefind.js → pagefind-loader.js}

@@ -22,6 +22,27 @@ let pagefindInit = null
 let pagefindUiInit = null
 let pagefindUiReady = false
 
+const resolveBasePrefix = () => {
+	let base = import.meta.env?.BASE_URL || '/'
+	if (!base || base === '/' || base === './') return ''
+	if (base.startsWith('http://') || base.startsWith('https://')) {
+		try {
+			base = new URL(base).pathname
+		} catch {
+			return ''
+		}
+	}
+	if (!base.startsWith('/')) return ''
+	if (base.endsWith('/')) base = base.slice(0, -1)
+	return base
+}
+
+const withBase = (path) => {
+	const prefix = resolveBasePrefix()
+	if (!prefix || path.startsWith(`${prefix}/`)) return path
+	return `${prefix}${path}`
+}
+
 const dynamicImport = (path) => {
 	try {
 		const importer = new Function('p', 'return import(p)')
@@ -38,7 +59,7 @@ export const loadPagefind = async () => {
 			resolve(null)
 			return
 		}
-		dynamicImport('/pagefind/pagefind.js')
+		dynamicImport(withBase('/pagefind/pagefind.js'))
 			.then((mod) => {
 				if (!mod) return resolve(null)
 				if (mod.search) return resolve(mod)
@@ -89,7 +110,7 @@ export const loadPagefindUI = async (options = {}) => {
 			return
 		}
 		const script = document.createElement('script')
-		script.src = '/pagefind/pagefind-ui.js'
+		script.src = withBase('/pagefind/pagefind-ui.js')
 		script.async = true
 		script.onload = () => done(initPagefindUI(options))
 		script.onerror = () => done(false)

package/src/vite-plugins.js

@@ -24,8 +24,9 @@ import { existsSync } from 'node:fs'
 import { resolve } from 'node:path'
 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_SCRIPT } from './assets.js'
+import { INJECT_SCRIPT, LOADER_SCRIPT, PAGEFIND_LOADER_SCRIPT } from './assets.js'
 import { projectRequire } from './node-loader.js'
 
 const require = createRequire(import.meta.url)
@@ -60,6 +61,9 @@ export const methanolPreviewRoutingPlugin = (distDir, notFoundPath) => ({
 				cachedHtml = await readFile(notFoundPath, 'utf-8')
 				return cachedHtml
 			}
+
+			const basePrefix = resolveBasePrefix()
+
 			const handler = async (req, res, next) => {
 				if (!req.url || req.method !== 'GET') {
 					return next()
@@ -69,6 +73,13 @@ export const methanolPreviewRoutingPlugin = (distDir, notFoundPath) => ({
 				try {
 					pathname = new URL(req.url, 'http://methanol').pathname
 					pathname = decodeURIComponent(pathname)
+					if (basePrefix) {
+						if (pathname.startsWith(basePrefix)) {
+							pathname = pathname.slice(basePrefix.length)
+						} else {
+							return next()
+						}
+					}
 				} catch {}
 				const hasTrailingSlash = pathname.endsWith('/') && pathname !== '/'
 				if (pathname.includes('.') && !pathname.endsWith('.html')) {
@@ -109,20 +120,43 @@ export const methanolPreviewRoutingPlugin = (distDir, notFoundPath) => ({
 
 const virtualModulePrefix = '/.methanol_virtual_module/'
 const resolvedVirtualModulePrefix = '\0' + virtualModulePrefix
+const virtualModuleScheme = 'methanol:'
 
 const virtualModuleMap = {
+	get registry() {
+		return `export const registry = ${genRegistryScript()}`
+	},
 	get 'registry.js'() {
 		return `export const registry = ${genRegistryScript()}`
 	},
-	'loader.js': LOADER_SCRIPT,
+	loader: LOADER_SCRIPT,
 	'inject.js': INJECT_SCRIPT,
-	'pagefind.js': PAGEFIND_SCRIPT
+	'pagefind-loader': PAGEFIND_LOADER_SCRIPT
 }
 
 const getModuleIdSegment = (id, start) => {
 	return new URL(id.slice(start), 'http://methanol').pathname.slice(1)
 }
 
+const getSchemeModuleKey = (id) => {
+	if (!id.startsWith(virtualModuleScheme)) return null
+	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',
@@ -139,10 +173,16 @@ export const methanolResolverPlugin = () => {
 				return require.resolve(id)
 			}
 
-			if (id.startsWith(virtualModulePrefix)) {
-				const _moduleId = getModuleIdSegment(id, 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' + id
+					return '\0' + virtualId
 				}
 			}
 
@@ -164,6 +204,10 @@ export const methanolResolverPlugin = () => {
 			}
 		},
 		load(id) {
+			if (id.startsWith('\0' + virtualModuleScheme)) {
+				const key = id.slice(1 + virtualModuleScheme.length)
+				return virtualModuleMap[key]
+			}
 			if (id.startsWith(resolvedVirtualModulePrefix)) {
 				const _moduleId = getModuleIdSegment(id, resolvedVirtualModulePrefix.length)
 				return virtualModuleMap[_moduleId]

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

@@ -20,7 +20,13 @@
 
 import { signal, $, t, If, For, onCondition } from 'refui'
 import { createPortal } from 'refui/extras'
-import { loadPagefind } from '/.methanol_virtual_module/pagefind.js'
+
+let pagefindModule = null
+const loadPagefindModule = async () => {
+	if (pagefindModule) return pagefindModule
+	pagefindModule = import('methanol:pagefind-loader')
+	return pagefindModule
+}
 
 let keybindReady = false
 let cachedPagefind = null
@@ -35,7 +41,8 @@ const resolveShortcutLabel = () => {
 
 const ensurePagefind = async (options) => {
 	if (cachedPagefind) return cachedPagefind
-	const pagefind = await loadPagefind()
+	const module = await loadPagefindModule()
+	const pagefind = await module?.loadPagefind?.()
 	if (!pagefind) return null
 	if (pagefind.options) {
 		const nextOptions = { excerptLength: 30, ...(options || {}) }

package/themes/default/page.jsx

@@ -27,11 +27,11 @@ const renderPageTree = (nodes = [], currentRoute, depth = 0) => {
 	const items = []
 	let hasActive = false
 	for (const node of nodes) {
-		const nodeRoute = node.routeHref || node.routePath || ''
+		const nodeRoute = node.routeHref || ''
 		if (node.type === 'directory') {
 			const label = node.title || node.name
 			const isActive = nodeRoute === currentRoute
-			const href = node.routePath ? encodeURI(node.routeHref || node.routePath) : null
+			const href = node.routeHref
 			const childResult = renderPageTree(node.children || [], currentRoute, depth + 1)
 			const isOpen = depth < 1 || isActive || childResult.hasActive
 			if (isOpen) hasActive = true
@@ -55,7 +55,7 @@ const renderPageTree = (nodes = [], currentRoute, depth = 0) => {
 		const label = node.title || (node.isIndex ? 'Home' : node.name)
 		const isActive = nodeRoute === currentRoute
 		if (isActive) hasActive = true
-		const href = encodeURI(node.routeHref || node.routePath)
+		const href = node.routeHref
 		items.push(
 			<li>
 				<a class={isActive ? 'active' : null} href={href}>
@@ -67,27 +67,27 @@ const renderPageTree = (nodes = [], currentRoute, depth = 0) => {
 	return { items, hasActive }
 }
 
-const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
+const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
 	const page = ctx.page
 	const pagesByRoute = ctx.pagesByRoute
 	const pages = ctx.pages || []
 	const pagesTree = ctx.pagesTree || []
-	const siteName = ctx.site?.name || 'Methanol Site'
-	const title = page?.title || siteName
-	const currentRoute = page?.routeHref || page?.routePath || ''
-	const baseHref = page?.routePath === '/404' ? ctx.site?.base || '/' : null
-	const toc = page?.toc?.length ? renderToc(page.toc) : null
+	const siteName = ctx.site.name || 'Methanol Site'
+	const title = page.title || siteName
+	const currentRoute = page.routeHref || ''
+	const baseHref = page.routeHref === '/404' ? ctx.site.base || '/' : null
+	const toc = page.toc?.length ? renderToc(page.toc) : null
 	const hasToc = Boolean(toc)
 	const layoutClass = hasToc ? 'layout-container' : 'layout-container no-toc'
 	const tree = renderPageTree(pagesTree, currentRoute, 0)
 	const { ThemeSearchBox, ThemeColorSwitch, ThemeAccentSwitch, ThemeToCContainer } = components
-	const rootPage = pagesByRoute?.get?.('/') || pages.find((entry) => entry.routePath === '/')
-	const pageFrontmatter = page?.frontmatter || {}
-	const rootFrontmatter = rootPage?.frontmatter || {}
+	const rootPage = pagesByRoute.get('/') || pages.find((entry) => entry.routeHref === '/')
+	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 ?? themeFavIcon
+	const logo = pageFrontmatter.logo ?? rootFrontmatter.logo ?? ctx.site.logo ?? themeLogo
+	const favicon = pageFrontmatter.favicon ?? rootFrontmatter.favicon ?? ctx.site.favicon ?? themeFavIcon
 	const excerpt = pageFrontmatter.excerpt ?? `${title} | ${siteName} - Powered by Methanol`
 	const _ogTitle = pageFrontmatter.ogTitle ?? title ?? null
 	const ogTitle = _ogTitle ? `${_ogTitle} | ${siteName}` : null
@@ -98,15 +98,18 @@ 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 siblings = page.getSiblings()
 	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 currentLanguageHref = ctx.language?.href || ctx.language?.routeHref || 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 pagefindEnabled = ctx.site.pagefind?.enabled !== false
+	const pagefindOptions = ctx.site.pagefind?.options || null
+	const repoBase = ctx.site.repoBase
+	const sourceUrl = pageFrontmatter.sourceURL
+	const editUrl = sourceUrl || (repoBase && page.relativePath ? new URL(page.relativePath, repoBase).href : null)
 	const languageSelector = languages.length ? (
 		<div class="lang-switch-wrapper">
 			<select
@@ -116,7 +119,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 				value={currentLanguageHref || undefined}
 			>
 				{languages.map((lang) => {
-					const optionValue = lang.href || lang.routePath
+					const optionValue = lang.href || lang.routeHref
 					const isSelected = optionValue && optionValue === currentLanguageHref
 					return (
 						<option value={optionValue} selected={isSelected ? true : null}>
@@ -165,7 +168,11 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 					{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" />
+					<link
+						rel="preload stylesheet"
+						as="style"
+						href="/.methanol_theme_default/style.css"
+					/>
 					<script src="/theme-prepare.js"></script>
 				</head>
 				<body>
@@ -246,28 +253,49 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 							</div>
 						</aside>
 						<main class="main-content" data-pagefind-body={pagefindEnabled ? '' : null}>
-							<Page />
+							<PageContent />
 							{prevPage || nextPage ? (
 								<nav class="page-nav">
 									{prevPage ? (
-										<a class="page-nav-card prev" href={prevPage.routeHref || prevPage.routePath}>
+										<a
+											class="page-nav-card prev"
+											href={prevPage.routeHref}
+										>
 											<span class="page-nav-label">Previous</span>
-											<span class="page-nav-title">{prevPage.title || prevPage.routePath}</span>
+											<span class="page-nav-title">{prevPage.title || prevPage.routeHref}</span>
 										</a>
 									) : (
 										<div class="page-nav-spacer"></div>
 									)}
 									{nextPage ? (
-										<a class="page-nav-card next" href={nextPage.routeHref || nextPage.routePath}>
+										<a
+											class="page-nav-card next"
+											href={nextPage.routeHref}
+										>
 											<span class="page-nav-label">Next</span>
-											<span class="page-nav-title">{nextPage.title || nextPage.routePath}</span>
+											<span class="page-nav-title">{nextPage.title || nextPage.routeHref}</span>
 										</a>
 									) : null}
 								</nav>
 							) : null}
 							{page ? (
 								<footer class="page-meta">
-									<div class="page-meta-item">Updated: {page.updatedAt || '-'}</div>
+									<div class="page-meta-item">
+										{editUrl ? (
+											<>
+												<a
+													href={editUrl}
+													target="_blank"
+													rel="noopener noreferrer"
+													class="page-meta-link"
+												>
+													Edit this page
+												</a>
+												<span style="margin: 0 0.5rem; opacity: 0.5;">•</span>
+											</>
+										) : null}
+										Updated: {page.updatedAt || '-'}
+									</div>
 									<div class="page-meta-item">
 										Powered by{' '}
 										<a

package/themes/default/sources/style.css

@@ -1374,11 +1374,11 @@ a {
 	align-items: center;
 }
 
+.page-meta-link,
 .methanol-link {
 	font-weight: 600;
 	color: var(--text);
 	text-decoration: none !important;
-	margin-left: 0.25rem;
 	transition: all 0.2s ease;
 	border-bottom: 1px solid transparent;
 
@@ -1388,6 +1388,10 @@ a {
 	}
 }
 
+.methanol-link {
+	margin-left: 0.25rem;
+}
+
 @media (max-width: 640px) {
 	.page-meta {
 		flex-direction: column;
@@ -1731,6 +1735,47 @@ a {
 	justify-content: flex-end;
 }
 
+/* --- Tables (GFM) --- */
+
+.main-content table {
+	width: 100%;
+	border-collapse: collapse;
+	margin: 1.5rem 0;
+	font-size: 0.95rem;
+	overflow-x: auto;
+	display: block; /* Enables horizontal scroll for large tables */
+}
+
+.main-content table thead tr {
+	border-bottom: 2px solid var(--border);
+}
+
+.main-content table th {
+	text-align: left;
+	padding: 0.75rem 1rem;
+	font-weight: 600;
+	color: var(--text);
+	white-space: nowrap;
+}
+
+.main-content table tbody tr {
+	border-bottom: 1px solid var(--border);
+	transition: background-color 0.1s ease;
+}
+
+.main-content table tbody tr:last-child {
+	border-bottom: none;
+}
+
+.main-content table td {
+	padding: 0.75rem 1rem;
+	color: var(--muted);
+}
+
+.main-content table tbody tr:hover {
+	background-color: var(--hover-bg);
+}
+
 /* --- View Transitions --- */
 
 @view-transition {
@@ -1743,3 +1788,151 @@ a {
 	view-transition-name: active-sidebar-bg;
 	contain: layout paint;
 }
+
+/* --- Print Styles --- */
+
+@media print {
+	:root {
+		--bg: #ffffff;
+		--surface: #ffffff;
+		--surface-muted: #f4f4f5;
+		--surface-elevated: #ffffff;
+		--text: #09090b;
+		--muted: #52525b;
+		--border: #e4e4e7;
+		--accent: #000000;
+		--accent-soft: #f4f4f5;
+		--hover-bg: transparent;
+	}
+
+	body {
+		background-color: white !important;
+		background-image: none !important;
+		color: black !important;
+		width: 100% !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		overflow: visible !important;
+	}
+
+	/* Hide UI Elements */
+	.sidebar,
+	.toc-panel,
+	.nav-toggle-label,
+	.toc-toggle-label,
+	.search-toggle-label,
+	.search-modal,
+	.page-nav,
+	.copy-btn,
+	.heading-anchor,
+	.theme-switch-wrapper,
+	.lang-switch-wrapper,
+	.page-meta {
+		display: none !important;
+	}
+
+	/* Layout Overrides */
+	.layout-container,
+	.layout-container.no-toc {
+		display: block !important;
+		max-width: none !important;
+		width: 100% !important;
+		margin: 0 !important;
+		padding: 0 !important;
+	}
+
+	.main-content {
+		padding: 0 !important;
+		width: 100% !important;
+		max-width: none !important;
+	}
+
+	/* Typography & Content */
+	body {
+		font-size: 11pt !important;
+		line-height: 1.5 !important;
+	}
+
+	.main-content {
+		h1 {
+			font-size: 24pt !important;
+			margin-bottom: 1rem !important;
+		}
+
+		h2 {
+			font-size: 18pt !important;
+			margin-top: 1.5rem !important;
+			margin-bottom: 0.75rem !important;
+		}
+
+		h3 {
+			font-size: 14pt !important;
+			margin-top: 1.25rem !important;
+			margin-bottom: 0.5rem !important;
+		}
+
+		p, li {
+			font-size: 11pt !important;
+			margin-bottom: 0.75rem !important;
+		}
+
+		pre, code {
+			font-size: 10pt !important;
+		}
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		color: black !important;
+		page-break-after: avoid;
+		break-after: avoid;
+	}
+
+	h2 {
+		border-bottom: 1px solid #000 !important;
+	}
+
+	p, li {
+		orphans: 3;
+		widows: 3;
+	}
+
+	a {
+		text-decoration: underline !important;
+		color: black !important;
+	}
+
+	/* Expand external links */
+	a[href^="http"]::after {
+		content: " (" attr(href) ")";
+		font-size: 0.85em;
+		color: #555;
+	}
+
+	/* Clean up code blocks */
+	pre {
+		border: 1px solid #ccc !important;
+		white-space: pre-wrap !important;
+		break-inside: avoid;
+		background: #fafafa !important;
+	}
+
+	/* Blockquotes */
+	blockquote {
+		border-left: 3px solid #ccc !important;
+		background: transparent !important;
+		color: #333 !important;
+		break-inside: avoid;
+	}
+
+	/* Tables */
+	table {
+		break-inside: avoid;
+	}
+
+	/* Page Setup */
+	@page {
+		margin: 2cm;
+		size: auto;
+	}
+}
+