methanol 0.0.6 → 0.0.8

package/README.md

@@ -44,6 +44,11 @@ export default () => ({
 	// optional: code highlighting (Starry Night)
 	starryNight: false,
 
+	// optional: site metadata
+	site: {
+		base: '/docs/'
+	},
+
 	// optional: theme sources
 	theme: {
 		sources: {

package/package.json

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

package/src/assets.js

@@ -27,4 +27,4 @@ const __dirname = dirname(__filename)
 
 export const INJECT_SCRIPT = readFileSync(resolve(__dirname, './virtual-module/inject.js'), 'utf-8')
 export const LOADER_SCRIPT = readFileSync(resolve(__dirname, './virtual-module/loader.js'), 'utf-8')
-export const PAGEFIND_SCRIPT = readFileSync(resolve(__dirname, './virtual-module/pagefind.js'), 'utf-8')
+export const PAGEFIND_LOADER_SCRIPT = readFileSync(resolve(__dirname, './virtual-module/pagefind-loader.js'), 'utf-8')

package/src/build-system.js

@@ -61,6 +61,7 @@ const collectHtmlFiles = async (dir, basePath = '') => {
 }
 
 export const buildHtmlEntries = async () => {
+	await resolveUserViteConfig('build') // Prepare `base`
 	if (state.INTERMEDIATE_DIR) {
 		await rm(state.INTERMEDIATE_DIR, { recursive: true, force: true })
 		await ensureDir(state.INTERMEDIATE_DIR)
@@ -174,7 +175,7 @@ export const runViteBuild = async (entry, htmlCache) => {
 	const baseConfig = {
 		configFile: false,
 		root: state.PAGES_DIR,
-		base: '/',
+		appType: 'mpa',
 		publicDir: state.STATIC_DIR === false ? false : state.STATIC_DIR,
 		build: {
 			outDir: state.DIST_DIR,

package/src/config.js

@@ -27,6 +27,7 @@ import { cli, state } from './state.js'
 import { HTMLRenderer } from './renderer.js'
 import { rewindEnv } from './components.js'
 import { env as createEnv } from './rewind.js'
+import { cached, cachedStr } from './utils.js'
 import defaultTheme from '../themes/default/index.js'
 
 const CONFIG_FILENAMES = [
@@ -79,6 +80,52 @@ const resolveThemePublicDir = (root, value) => {
 	return isAbsolute(value) ? value : resolve(root, value)
 }
 
+let devBaseWarningShown = false
+
+const normalizeSiteBase = (value) => {
+	if (value == null) return null
+	if (typeof value !== 'string') return null
+	const trimmed = value.trim()
+	if (!trimmed || trimmed === './') return '/'
+	if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
+		return trimmed
+	}
+	let base = trimmed
+	if (!base.startsWith('/')) {
+		base = `/${base}`
+	}
+	if (!base.endsWith('/')) {
+		base = `${base}/`
+	}
+	return base
+}
+
+const normalizeViteBase = (value) => {
+	if (!value || value === '/' || value === './') return '/'
+	if (typeof value !== 'string') return '/'
+	let base = value.trim()
+	if (!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}/`
+	}
+	return base
+}
+
+const warnDevBase = (value) => {
+	if (devBaseWarningShown) return
+	devBaseWarningShown = true
+	const label = value ? ` (received "${value}")` : ''
+	console.warn(`Methanol: \`base\`${label} is disabled in dev mode due to module resolution inconsistencies in Vite. Using "/".\n`)
+}
+
 const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj || {}, key)
 const normalizeSources = (value, root) => {
 	if (!value) return []
@@ -216,11 +263,20 @@ export const applyConfig = async (config, mode) => {
 	state.ROOT_DIR = root
 	const configSiteName = cli.CLI_SITE_NAME ?? config.site?.name ?? null
 	state.SITE_NAME = configSiteName || basename(root) || 'Methanol Site'
-	state.USER_SITE = config.site && typeof config.site === 'object' ? { ...config.site } : null
+	const userSite = config.site && typeof config.site === 'object' ? { ...config.site } : null
+	const siteBase = normalizeSiteBase(userSite?.base)
+	state.SITE_BASE = siteBase
+	if (userSite) {
+		if (siteBase == null) {
+			delete userSite.base
+		} else {
+			userSite.base = siteBase
+		}
+	}
+	state.USER_SITE = userSite
 	if (mode) {
 		state.CURRENT_MODE = mode
 	}
-	// config.paths / config.dirs are intentionally ignored (deprecated)
 
 	const pagesDirValue = cli.CLI_PAGES_DIR || config.pagesDir
 	const componentsDirValue = cli.CLI_COMPONENTS_DIR || config.componentsDir
@@ -409,14 +465,76 @@ export const resolveUserViteConfig = async (command) => {
 	}
 	const themeConfig = await resolveConfig(state.USER_THEME.vite)
 	const userConfig = await resolveConfig(state.USER_VITE_CONFIG)
+	const userHasBase = userConfig && hasOwn(userConfig, 'base')
 	if (!themeConfig && !userConfig) {
-		state.RESOLVED_VITE_CONFIG = null
-		return null
+		if (state.SITE_BASE) {
+			state.RESOLVED_VITE_CONFIG = { base: state.SITE_BASE }
+		} else {
+			state.RESOLVED_VITE_CONFIG = null
+		}
+		state.VITE_BASE = normalizeViteBase(state.RESOLVED_VITE_CONFIG?.base || state.SITE_BASE || '/')
+		if (command === 'serve') {
+			if (state.VITE_BASE !== '/' || (state.SITE_BASE && state.SITE_BASE !== '/')) {
+				warnDevBase(state.RESOLVED_VITE_CONFIG?.base || state.SITE_BASE || '')
+			}
+			if (state.RESOLVED_VITE_CONFIG) {
+				state.RESOLVED_VITE_CONFIG.base = '/'
+			}
+			state.VITE_BASE = '/'
+		}
+		return state.RESOLVED_VITE_CONFIG
 	}
 	state.RESOLVED_VITE_CONFIG = themeConfig
 		? userConfig
 			? mergeConfig(themeConfig, userConfig)
 			: themeConfig
 		: userConfig
+	if (state.SITE_BASE && !userHasBase) {
+		state.RESOLVED_VITE_CONFIG.base = state.SITE_BASE
+	}
+	state.VITE_BASE = normalizeViteBase(state.RESOLVED_VITE_CONFIG?.base || state.SITE_BASE || '/')
+	if (command === 'serve') {
+		if (state.VITE_BASE !== '/' || (state.SITE_BASE && state.SITE_BASE !== '/')) {
+			warnDevBase(state.RESOLVED_VITE_CONFIG?.base || state.SITE_BASE || '')
+		}
+		state.RESOLVED_VITE_CONFIG.base = '/'
+		state.VITE_BASE = '/'
+	}
 	return state.RESOLVED_VITE_CONFIG
 }
+
+export const resolveBasePrefix = cached(() => {
+	const value = state.VITE_BASE || state.SITE_BASE || '/'
+	if (!value || value === '/' || value === './') return ''
+	if (typeof value !== 'string') return ''
+	let base = value.trim()
+	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
+})
+
+export const withBase = cachedStr((value) => {
+	if (!value || typeof value !== 'string') return value
+	if (
+		value.startsWith('http://') ||
+		value.startsWith('https://') ||
+		value.startsWith('//') ||
+		value.startsWith('data:') ||
+		value.startsWith('mailto:') ||
+		value.startsWith('#')
+	) {
+		return value
+	}
+	if (!value.startsWith('/')) return value
+	const prefix = resolveBasePrefix()
+	if (!prefix || value.startsWith(`${prefix}/`)) return value
+	return `${prefix}${value}`
+})

package/src/dev-server.js

@@ -49,6 +49,7 @@ export const runViteDev = async () => {
 	const baseConfig = {
 		configFile: false,
 		root: state.PAGES_DIR,
+		appType: 'mpa',
 		publicDir: state.STATIC_DIR === false ? false : state.STATIC_DIR,
 		server: {
 			fs: {
@@ -66,6 +67,8 @@ export const runViteDev = async () => {
 	}
 	const userConfig = await resolveUserViteConfig('serve')
 	const finalConfig = userConfig ? mergeConfig(baseConfig, userConfig) : baseConfig
+	const devBase = state.VITE_BASE || '/'
+	const devBasePrefix = devBase === '/' ? '' : devBase.slice(0, -1)
 	if (state.STATIC_DIR !== false && state.MERGED_ASSETS_DIR) {
 		await preparePublicAssets({
 			themeDir: state.THEME_ASSETS_DIR,
@@ -169,7 +172,14 @@ export const runViteDev = async () => {
 	}
 
 	const resolvePageFile = (routePath) => {
-		const name = routePath === '/' ? 'index' : routePath.slice(1)
+		let name = 'index'
+		if (routePath && routePath !== '/') {
+			if (routePath.endsWith('/')) {
+				name = `${routePath.slice(1, -1)}/index`
+			} else {
+				name = routePath.slice(1)
+			}
+		}
 		const mdxPath = resolve(state.PAGES_DIR, `${name}.mdx`)
 		if (existsSync(mdxPath)) return mdxPath
 		const mdPath = resolve(state.PAGES_DIR, `${name}.md`)
@@ -181,6 +191,8 @@ export const runViteDev = async () => {
 		const candidates = []
 		if (pathname === '/' || pathname === '') {
 			candidates.push('/index.html')
+		} else if (pathname.endsWith('/')) {
+			candidates.push(`${pathname}index.html`)
 		} else if (pathname.endsWith('.html')) {
 			candidates.push(pathname)
 		} else {
@@ -196,7 +208,7 @@ export const runViteDev = async () => {
 		if (hasMdx) return false
 		const baseName = basename(relativePath, '.html')
 		if (baseName.startsWith('_') || baseName.startsWith('.')) return false
-		const excludedDirs = pagesContext?.excludedDirs
+		const excludedDirs = pagesContext.excludedDirs
 		if (excludedDirs?.size) {
 			const dir = relativePath.split('/').slice(0, -1).join('/')
 			for (const excludedDir of excludedDirs) {
@@ -206,9 +218,9 @@ export const runViteDev = async () => {
 				}
 			}
 		}
-		const excludedRoutes = pagesContext?.excludedRoutes
+		const excludedRoutes = pagesContext.excludedRoutes
 		if (excludedRoutes?.has(requestedPath)) return false
-		const excludedDirPaths = pagesContext?.excludedDirPaths
+		const excludedDirPaths = pagesContext.excludedDirPaths
 		if (excludedDirPaths?.size) {
 			for (const dirPath of excludedDirPaths) {
 				if (requestedPath === dirPath || requestedPath.startsWith(`${dirPath}/`)) {
@@ -223,9 +235,6 @@ export const runViteDev = async () => {
 		if (!req.url || req.method !== 'GET') {
 			return next()
 		}
-		if (req.url.startsWith('/@vite') || req.url.startsWith('/__vite')) {
-			return next()
-		}
 
 		const url = new URL(req.url, 'http://methanol')
 		let pathname = url.pathname
@@ -233,7 +242,20 @@ export const runViteDev = async () => {
 			pathname = decodeURIComponent(pathname)
 		} catch {}
 		const originalPathname = pathname
-		const hasTrailingSlash = originalPathname.endsWith('/') && originalPathname !== '/'
+		if (devBase !== '/') {
+			const baseNoSlash = devBasePrefix
+			if (originalPathname === baseNoSlash) {
+				pathname = '/'
+			} else if (originalPathname.startsWith(devBase)) {
+				pathname = originalPathname.slice(devBase.length - 1)
+			} else {
+				return next()
+			}
+		}
+
+		if (pathname.startsWith('/@vite') || pathname.startsWith('/__vite')) {
+			return next()
+		}
 
 		if (pathname.includes('.') && !pathname.endsWith('.html')) {
 			return next()
@@ -251,15 +273,11 @@ export const runViteDev = async () => {
 				routePath = '/'
 			}
 		}
-		if (routePath.endsWith('/') && routePath !== '/') {
-			routePath = routePath.slice(0, -1)
-		}
-
 		const requestedPath = routePath
 		const isExcludedPath = () => {
-			const excludedRoutes = pagesContext?.excludedRoutes
+			const excludedRoutes = pagesContext.excludedRoutes
 			if (excludedRoutes?.has(requestedPath)) return true
-			const excludedDirPaths = pagesContext?.excludedDirPaths
+			const excludedDirPaths = pagesContext.excludedDirPaths
 			if (excludedDirPaths?.size) {
 				for (const dirPath of excludedDirPaths) {
 					if (requestedPath === dirPath || requestedPath.startsWith(`${dirPath}/`)) {
@@ -269,10 +287,8 @@ export const runViteDev = async () => {
 			}
 			return false
 		}
-		const notFoundPage = pagesContext?.pagesByRoute?.get('/404') ?? null
-		const pageMeta = hasTrailingSlash
-			? (pagesContext?.pagesByRouteIndex?.get(requestedPath) ?? pagesContext?.pagesByRoute?.get(requestedPath) ?? null)
-			: (pagesContext?.pagesByRoute?.get(requestedPath) ?? null)
+		const notFoundPage = pagesContext.pagesByRoute.get('/404')
+		let pageMeta = pagesContext.pagesByRoute.get(requestedPath)
 		let filePath = pageMeta?.filePath || resolvePageFile(requestedPath)
 		const hasMdx = Boolean(pageMeta) || existsSync(filePath)
 		let status = 200
@@ -291,7 +307,9 @@ export const runViteDev = async () => {
 				}
 				try {
 					const html = await readFile(candidate, 'utf-8')
-					const candidateUrl = `/${relativePath}`
+					const candidateUrl = devBasePrefix
+						? `${devBasePrefix}/${relativePath}`
+						: `/${relativePath}`
 					const transformed = await server.transformIndexHtml(candidateUrl, html)
 					res.statusCode = 200
 					res.setHeader('Content-Type', 'text/html')
@@ -338,6 +356,8 @@ export const runViteDev = async () => {
 				return
 			}
 
+			pageMeta ??= pagesContext.getPageByRoute(renderRoutePath, { filePath })
+
 			const html = await renderHtml({
 				routePath: renderRoutePath,
 				filePath,
@@ -374,16 +394,18 @@ export const runViteDev = async () => {
 	await server.listen()
 	server.printUrls()
 
-	const invalidateRewindInject = () => {
-		const registryModule = server.moduleGraph.getModuleById('\0/.methanol_virtual_module/registry.js')
-		if (registryModule) {
-			server.moduleGraph.invalidateModule(registryModule)
-		}
-		const injectModule = server.moduleGraph.getModuleById('\0/.methanol_virtual_module/inject.js')
-		if (injectModule) {
-			server.moduleGraph.invalidateModule(injectModule)
+	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) => {

package/src/main.js

@@ -32,7 +32,7 @@ const printBanner = async () => {
 		const pkgUrl = new URL('../package.json', import.meta.url)
 		const raw = await readFile(pkgUrl, 'utf-8')
 		const pkg = JSON.parse(raw)
-		const version = pkg?.version ? `v${pkg.version}` : ''
+		const version = `v${pkg.version}`
 		const isTty = Boolean(process.stdout && process.stdout.isTTY)
 		const label = `Methanol ${version}`.trim()
 		if (isTty) {
@@ -63,6 +63,7 @@ const main = async () => {
 	const config = await loadUserConfig(mode, cli.CLI_CONFIG_PATH)
 	await applyConfig(config, mode)
 	const userSite = state.USER_SITE || {}
+	const siteBase = state.VITE_BASE ?? userSite.base ?? null
 	const hookContext = {
 		mode,
 		root: state.ROOT_DIR,
@@ -73,6 +74,7 @@ const main = async () => {
 		HTMLRenderer,
 		site: {
 			...userSite,
+			base: siteBase,
 			name: state.SITE_NAME,
 			root: state.ROOT_DIR,
 			pagesDir: state.PAGES_DIR,

package/src/mdx.js

@@ -32,12 +32,13 @@ import { pathToFileURL } from 'url'
 import { existsSync } from 'fs'
 import { resolve, dirname, basename, relative } from 'path'
 import { state } from './state.js'
-import { resolveUserMdxConfig } from './config.js'
+import { resolveUserMdxConfig, withBase } from './config.js'
 import { methanolCtx } from './rehype-plugins/methanol-ctx.js'
 import { linkResolve } from './rehype-plugins/link-resolve.js'
 
 // Workaround for Vite: it doesn't support resolving module/virtual modules in script src in dev mode
-const RWND_INJECT = HTMLRenderer.rawHTML`<script type="module" src="/.methanol_virtual_module/inject.js"></script>`
+const resolveRewindInject = () =>
+	HTMLRenderer.rawHTML(`<script type="module" src="${withBase('/.methanol_virtual_module/inject.js')}"></script>`)
 const RWND_FALLBACK = HTMLRenderer.rawHTML`<script>
 	if (!window.$$rwnd) {
 		const l = []
@@ -59,12 +60,12 @@ const resolveUserHeadAssets = () => {
 	const pagesDir = state.PAGES_DIR
 	if (!pagesDir) return assets
 	if (existsSync(resolve(pagesDir, 'style.css'))) {
-		assets.push(HTMLRenderer.c('link', { rel: 'stylesheet', href: '/style.css' }))
+		assets.push(HTMLRenderer.c('link', { rel: 'stylesheet', href: withBase('/style.css') }))
 	}
 	if (existsSync(resolve(pagesDir, 'index.js'))) {
-		assets.push(HTMLRenderer.c('script', { type: 'module', src: '/index.js' }))
+		assets.push(HTMLRenderer.c('script', { type: 'module', src: withBase('/index.js') }))
 	} else if (existsSync(resolve(pagesDir, 'index.ts'))) {
-		assets.push(HTMLRenderer.c('script', { type: 'module', src: '/index.ts' }))
+		assets.push(HTMLRenderer.c('script', { type: 'module', src: withBase('/index.ts') }))
 	}
 	if (state.CURRENT_MODE === 'production') {
 		cachedHeadAssets = assets
@@ -73,17 +74,17 @@ const resolveUserHeadAssets = () => {
 }
 
 const resolvePageAssetUrl = (page, filePath) => {
-	const root = page?.source === 'theme' && state.THEME_PAGES_DIR
+	const root = page.source === 'theme' && state.THEME_PAGES_DIR
 		? state.THEME_PAGES_DIR
 		: state.PAGES_DIR
 	if (!root) return null
 	const relPath = relative(root, filePath).replace(/\\/g, '/')
 	if (!relPath || relPath.startsWith('..')) return null
-	return `/${relPath}`
+	return withBase(`/${relPath}`)
 }
 
 const resolvePageHeadAssets = (page) => {
-	if (!page?.filePath) return []
+	if (!page.filePath) return []
 	const baseDir = dirname(page.filePath)
 	const baseName = basename(page.filePath).replace(/\.(mdx|md)$/, '')
 	const pagesRoot = state.PAGES_DIR ? resolve(state.PAGES_DIR) : null
@@ -138,26 +139,28 @@ export const buildPageContext = ({
 	lazyPagesTree = false
 }) => {
 	const page = pageMeta
-	const language = pagesContext?.getLanguageForRoute ? pagesContext.getLanguageForRoute(routePath) : null
-	const getSiblings = pagesContext?.getSiblings
-		? () => pagesContext.getSiblings(routePath, page?.filePath || filePath)
+	const language = pagesContext.getLanguageForRoute ? pagesContext.getLanguageForRoute(routePath) : null
+	const getSiblings = pagesContext.getSiblings
+		? () => pagesContext.getSiblings(routePath, page.filePath || filePath)
 		: null
 	if (page && getSiblings && page.getSiblings !== getSiblings) {
 		page.getSiblings = getSiblings
 	}
 	const ctx = {
 		routePath,
+		routeHref: withBase(routePath),
 		filePath,
 		page,
-		pages: pagesContext?.pages || [],
-		pagesByRoute: pagesContext?.pagesByRoute || new Map(),
-		languages: pagesContext?.languages || [],
+		pages: pagesContext.pages || [],
+		pagesByRoute: pagesContext.pagesByRoute || new Map(),
+		languages: pagesContext.languages || [],
 		language,
-		site: pagesContext?.site || null,
-		getSiblings
+		site: pagesContext.site || null,
+		getSiblings,
+		withBase
 	}
 	const resolvePagesTree = () =>
-		pagesContext?.getPagesTree ? pagesContext.getPagesTree(routePath) : pagesContext?.pagesTree || []
+		pagesContext.getPagesTree ? pagesContext.getPagesTree(routePath) : pagesContext.pagesTree || []
 	if (lazyPagesTree) {
 		let cachedTree = null
 		let hasTree = false
@@ -286,7 +289,7 @@ const resolveMdxConfigForPage = async (frontmatter) => {
 }
 
 export const compileMdx = async ({ content, filePath, ctx }) => {
-	const mdxConfig = await resolveMdxConfigForPage(ctx?.page?.frontmatter)
+	const mdxConfig = await resolveMdxConfigForPage(ctx.page.frontmatter)
 	const runtimeFactory = mdxConfig.development ? JSXDevFactory : JSXFactory
 	const compiled = await compile({ value: content, path: filePath }, mdxConfig)
 
@@ -322,15 +325,15 @@ export const compilePageMdx = async (page, pagesContext, options = {}) => {
 		const nextTitle = findTitleFromToc(page.toc) || page.title
 		if (nextTitle !== page.title) {
 			page.title = nextTitle
-			if (typeof pagesContext?.refreshPagesTree === 'function') {
+			if (typeof pagesContext.refreshPagesTree === 'function') {
 				pagesContext.refreshPagesTree()
 			}
 		}
 	}
-	if (typeof pagesContext?.setDerivedTitle === 'function') {
+	if (typeof pagesContext.setDerivedTitle === 'function') {
 		pagesContext.setDerivedTitle(page.filePath, shouldUseTocTitle ? page.title : null, page.toc)
 	}
-	if (ctx && refreshPagesTree && pagesContext?.getPagesTree) {
+	if (ctx && refreshPagesTree && pagesContext.getPagesTree) {
 		ctx.pagesTree = pagesContext.getPagesTree(activeCtx.routePath)
 	}
 }
@@ -340,14 +343,8 @@ export const renderHtml = async ({
 	filePath,
 	components,
 	pagesContext,
-	pageMeta: explicitPageMeta = null
+	pageMeta
 }) => {
-	const pageMeta =
-		explicitPageMeta ||
-		(pagesContext.getPageByRoute
-			? pagesContext.getPageByRoute(routePath, { filePath })
-			: pagesContext.pagesByRoute.get(routePath))
-
 	const ctx = buildPageContext({
 		routePath,
 		filePath,
@@ -359,7 +356,7 @@ export const renderHtml = async ({
 	const [Head, Outlet] = createPortal()
 	const ExtraHead = () => {
 		return [
-			RWND_INJECT,
+			resolveRewindInject(),
 			...resolveUserHeadAssets(),
 			...resolvePageHeadAssets(pageMeta),
 			Outlet(),
@@ -367,9 +364,9 @@ export const renderHtml = async ({
 		]
 	}
 
-	const mdxComponent = pageMeta?.mdxComponent
+	const mdxComponent = pageMeta.mdxComponent
 
-	const Page = ({ components: extraComponents, ...props }, ...children) =>
+	const PageContent = ({ components: extraComponents, ...props }, ...children) =>
 		mdxComponent({
 			children,
 			...props,
@@ -394,7 +391,9 @@ export const renderHtml = async ({
 			() =>
 				template({
 					ctx,
-					Page,
+					page: ctx.page,
+					withBase,
+					PageContent,
 					ExtraHead,
 					HTMLRenderer,
 					components