@octanejs/docusaurus 0.0.3 → 0.0.4

package/src/manifest.js

@@ -48,12 +48,22 @@ function moduleId(module) {
 	throw new TypeError(`Expected a Docusaurus module reference, received ${String(module)}.`);
 }
 
+function routeModules(value) {
+	if (typeof value === 'string' || (value && value.__import === true)) {
+		return moduleId(value);
+	}
+	if (Array.isArray(value)) return value.map(routeModules);
+	if (value && typeof value === 'object') {
+		return Object.fromEntries(
+			Object.entries(value).map(([name, item]) => [name, routeModules(item)]),
+		);
+	}
+	throw new TypeError(`Expected a Docusaurus route module, received ${String(value)}.`);
+}
+
 function normalizeRoute(route, index, parentId = 'root') {
 	const id = `${parentId}/${index}:${route.path}`;
-	const modules = {};
-	for (const [name, value] of Object.entries(route.modules ?? {})) {
-		modules[name] = Array.isArray(value) ? value.map(moduleId) : moduleId(value);
-	}
+	const modules = routeModules(route.modules ?? {});
 	const known = new Set([
 		'path',
 		'component',
@@ -79,9 +89,7 @@ function normalizeRoute(route, index, parentId = 'root') {
 		exact: route.exact === true,
 		...(route.priority === undefined ? {} : { priority: Number(route.priority) }),
 		...(Object.keys(modules).length === 0 ? {} : { modules }),
-		...(route.context === undefined
-			? {}
-			: { context: toJsonValue(route.context, `route(${route.path}).context`) }),
+		...(route.context === undefined ? {} : { context: routeModules(route.context) }),
 		...(route.props === undefined
 			? {}
 			: { props: toJsonValue(route.props, `route(${route.path}).props`) }),
@@ -154,6 +162,68 @@ async function createThemeAliases(plugins, siteDir) {
 	return { theme, themeOriginal, themeInit };
 }
 
+async function clientModules(plugins) {
+	const modules = [];
+	const seen = new Set();
+	for (const plugin of plugins) {
+		if (typeof plugin.getClientModules !== 'function') continue;
+		for (const supplied of (await plugin.getClientModules()) ?? []) {
+			if (typeof supplied !== 'string') {
+				throw new TypeError(
+					`Docusaurus plugin ${JSON.stringify(plugin.name)} returned a non-string client module.`,
+				);
+			}
+			const resolved = path.isAbsolute(supplied) ? supplied : path.resolve(plugin.path, supplied);
+			if (seen.has(resolved)) continue;
+			seen.add(resolved);
+			modules.push(resolved);
+		}
+	}
+	return modules;
+}
+
+function siteManifest(siteConfig) {
+	return toJsonValue(
+		{
+			title: siteConfig.title,
+			tagline: siteConfig.tagline,
+			url: siteConfig.url,
+			baseUrl: siteConfig.baseUrl,
+			favicon: siteConfig.favicon,
+			noIndex: siteConfig.noIndex,
+			trailingSlash: siteConfig.trailingSlash,
+			themeConfig: siteConfig.themeConfig,
+			customFields: siteConfig.customFields,
+		},
+		'$.site',
+	);
+}
+
+function i18nManifest(i18n) {
+	return toJsonValue(
+		{
+			defaultLocale: i18n.defaultLocale,
+			locales: i18n.locales,
+			currentLocale: i18n.currentLocale,
+			localeConfigs: i18n.localeConfigs,
+		},
+		'$.i18n',
+	);
+}
+
+function documentManifest(props) {
+	const locale = props.i18n.localeConfigs[props.i18n.currentLocale];
+	return {
+		htmlAttributes: {
+			lang: String(locale.htmlLang),
+			dir: String(locale.direction),
+		},
+		headTags: String(props.headTags ?? ''),
+		preBodyTags: String(props.preBodyTags ?? ''),
+		postBodyTags: String(props.postBodyTags ?? ''),
+	};
+}
+
 function readJsonIfPresent(filename, fallback) {
 	if (!existsSync(filename)) return fallback;
 	return JSON.parse(readFileSync(filename, 'utf8'));
@@ -185,7 +255,11 @@ function contentMetadata(generatedFilesDir) {
 export async function createDocusaurusManifest(loaded) {
 	const { props } = loaded.site;
 	const { siteDir, generatedFilesDir } = props;
-	const themeAliases = await createThemeAliases(props.plugins ?? [], siteDir);
+	const plugins = props.plugins ?? [];
+	const [themeAliases, discoveredClientModules] = await Promise.all([
+		createThemeAliases(plugins, siteDir),
+		clientModules(plugins),
+	]);
 	return {
 		schemaVersion: 1,
 		docusaurusVersion: loaded.docusaurusVersion,
@@ -193,6 +267,13 @@ export async function createDocusaurusManifest(loaded) {
 		generatedFilesDir,
 		outDir: props.outDir,
 		baseUrl: props.baseUrl,
+		site: siteManifest(props.siteConfig),
+		i18n: i18nManifest(props.i18n),
+		siteMetadata: toJsonValue(props.siteMetadata, '$.siteMetadata'),
+		document: documentManifest(props),
+		assets: {
+			clientModules: discoveredClientModules,
+		},
 		routesPaths: [...props.routesPaths],
 		routes: props.routes.map((route, index) => normalizeRoute(route, index)),
 		globalData: readJsonIfPresent(path.join(generatedFilesDir, 'globalData.json'), {}),

package/src/route-modules.js

@@ -0,0 +1,56 @@
+function appendQuery(path, query) {
+	if (query === undefined) return path;
+	const search = new URLSearchParams();
+	for (const key of Object.keys(query).sort()) {
+		const value = query[key];
+		if (Array.isArray(value)) {
+			for (const item of value) search.append(key, String(item));
+		} else if (value !== undefined) {
+			search.append(key, String(value));
+		}
+	}
+	const serialized = search.toString();
+	const separator = path.includes('?') ? '&' : '?';
+	return serialized === '' ? path : `${path}${separator}${serialized}`;
+}
+
+export function docusaurusModuleKey(reference) {
+	return typeof reference === 'string' ? reference : appendQuery(reference.path, reference.query);
+}
+
+function isImportedModule(value) {
+	return (
+		value !== null &&
+		typeof value === 'object' &&
+		value.__import === true &&
+		typeof value.path === 'string'
+	);
+}
+
+function collectModuleReferences(value, result) {
+	if (typeof value === 'string' || isImportedModule(value)) {
+		const key = docusaurusModuleKey(value);
+		result.set(key, key);
+		return;
+	}
+	if (Array.isArray(value)) {
+		for (const item of value) collectModuleReferences(item, result);
+		return;
+	}
+	if (value !== null && typeof value === 'object') {
+		for (const item of Object.values(value)) collectModuleReferences(item, result);
+	}
+}
+
+function collectRouteReferences(route, result) {
+	collectModuleReferences(route.component, result);
+	collectModuleReferences(route.modules, result);
+	collectModuleReferences(route.context, result);
+	for (const child of route.children ?? []) collectRouteReferences(child, result);
+}
+
+export function collectDocusaurusRouteModuleReferences(routes) {
+	const result = new Map();
+	for (const route of routes) collectRouteReferences(route, result);
+	return result;
+}

package/src/routes.js

@@ -0,0 +1,133 @@
+import { createElement } from 'octane';
+import { DocusaurusRouteRenderer } from './client-components.tsrx';
+import { docusaurusModuleKey } from './route-modules.js';
+
+function isImportedModule(value) {
+	return (
+		value !== null &&
+		typeof value === 'object' &&
+		value.__import === true &&
+		typeof value.path === 'string'
+	);
+}
+
+function moduleValue(module) {
+	if (
+		module === null ||
+		typeof module !== 'object' ||
+		!Object.prototype.hasOwnProperty.call(module, 'default')
+	) {
+		return module;
+	}
+	const value = module.default;
+	if (typeof value === 'function' || (value !== null && typeof value === 'object')) {
+		for (const [name, exported] of Object.entries(module)) {
+			if (name !== 'default') value[name] = exported;
+		}
+	}
+	return value;
+}
+
+async function loadModule(reference, registry, cache) {
+	const key = docusaurusModuleKey(reference);
+	const importer = registry[key];
+	if (typeof importer !== 'function') {
+		throw new Error(
+			`[@octanejs/docusaurus] No route importer was generated for ${JSON.stringify(key)}.`,
+		);
+	}
+	let pending = cache.get(key);
+	if (pending === undefined) {
+		pending = Promise.resolve().then(importer);
+		cache.set(key, pending);
+		pending.catch(() => {
+			if (cache.get(key) === pending) cache.delete(key);
+		});
+	}
+	return moduleValue(await pending);
+}
+
+async function loadRouteModules(value, registry, cache) {
+	if (typeof value === 'string' || isImportedModule(value)) {
+		return loadModule(value, registry, cache);
+	}
+	if (Array.isArray(value)) {
+		return Promise.all(value.map((item) => loadRouteModules(item, registry, cache)));
+	}
+	if (value !== null && typeof value === 'object') {
+		const entries = await Promise.all(
+			Object.entries(value).map(async ([name, item]) => [
+				name,
+				await loadRouteModules(item, registry, cache),
+			]),
+		);
+		return Object.fromEntries(entries);
+	}
+	return value;
+}
+
+function routePath(route, parentPath) {
+	let pathname = route.path;
+	if (parentPath !== undefined && pathname.startsWith('/')) {
+		if (pathname === parentPath) {
+			pathname = '';
+		} else {
+			const prefix = parentPath.endsWith('/') ? parentPath : `${parentPath}/`;
+			if (pathname.startsWith(prefix)) pathname = pathname.slice(prefix.length);
+		}
+	}
+	if (
+		pathname === '' ||
+		pathname === '*' ||
+		route.exact === true ||
+		(route.children !== undefined && route.children.length > 0)
+	) {
+		return pathname;
+	}
+	return pathname.endsWith('/') ? `${pathname}*` : `${pathname}/*`;
+}
+
+function createRouteComponent(route, Component, modules, context) {
+	return function DocusaurusResolvedRoute() {
+		return createElement(DocusaurusRouteRenderer, {
+			Component,
+			context,
+			modules,
+			route,
+		});
+	};
+}
+
+function createRoute(route, registry, cache, parentPath) {
+	return {
+		id: route.id,
+		path: routePath(route, parentPath),
+		handle: {
+			docusaurus: route,
+		},
+		async lazy() {
+			const [Component, modules, context] = await Promise.all([
+				loadModule(route.component, registry, cache),
+				loadRouteModules(route.modules ?? {}, registry, cache),
+				loadRouteModules(route.context ?? {}, registry, cache),
+			]);
+			if (typeof Component !== 'function') {
+				throw new TypeError(
+					`[@octanejs/docusaurus] Route ${JSON.stringify(route.path)} component ` +
+						`${JSON.stringify(docusaurusModuleKey(route.component))} has no default component export.`,
+				);
+			}
+			return {
+				Component: createRouteComponent(route, Component, modules, context),
+			};
+		},
+		children: (route.children ?? []).map((child) =>
+			createRoute(child, registry, cache, route.path),
+		),
+	};
+}
+
+export function createDocusaurusRoutes(manifest, registry) {
+	const cache = new Map();
+	return manifest.routes.map((route) => createRoute(route, registry, cache));
+}

package/src/server.js

@@ -0,0 +1,64 @@
+import { prerender } from 'octane/static';
+import { createStaticHandler, createStaticRouter } from '@octanejs/remix-router';
+import { DocusaurusRouterProvider } from './client-components.tsrx';
+import { renderDocusaurusDocument } from './document.js';
+import { createDocusaurusRoutes } from './routes.js';
+
+export { renderDocusaurusDocument };
+
+function toRequest(value) {
+	if (value instanceof Request) return value;
+	return new Request(new URL(value, 'http://localhost'));
+}
+
+export function createDocusaurusStaticHandler(manifest, registry, options) {
+	return createStaticHandler(createDocusaurusRoutes(manifest, registry), options);
+}
+
+export async function prerenderDocusaurusRoute(request, manifest, registry, options = {}) {
+	const { basename, requestContext, ...renderOptions } = options;
+	const handler = createDocusaurusStaticHandler(
+		manifest,
+		registry,
+		basename === undefined ? undefined : { basename },
+	);
+	const context = await handler.query(
+		toRequest(request),
+		requestContext === undefined ? undefined : { requestContext },
+	);
+	if (context instanceof Response) return context;
+
+	const router = createStaticRouter(handler.dataRoutes, context);
+	// Use the hydration provider on both sides so Octane adopts the same
+	// component and control-flow ranges. Router effects are inert on the server.
+	const result = await prerender(
+		DocusaurusRouterProvider,
+		{
+			manifest,
+			router,
+		},
+		{
+			headChannel: 'separate',
+			...renderOptions,
+		},
+	);
+	return {
+		...result,
+		context,
+	};
+}
+
+export async function prerenderDocusaurusDocument(request, manifest, registry, options = {}) {
+	const { document: documentOptions = {}, ...renderOptions } = options;
+	const result = await prerenderDocusaurusRoute(request, manifest, registry, renderOptions);
+	if (result instanceof Response) return result;
+	const bodyHtml = result.html;
+	return {
+		...result,
+		bodyHtml,
+		html: renderDocusaurusDocument(result, manifest, {
+			...documentOptions,
+			nonce: documentOptions.nonce ?? renderOptions.nonce,
+		}),
+	};
+}

package/src/theme/DocCategoryGeneratedIndexPage.js

@@ -0,0 +1 @@
+export { DocCategoryGeneratedIndexPage as default } from '../theme-components.tsrx';

package/src/theme/DocItem.js

@@ -0,0 +1 @@
+export { DocItem as default } from '../theme-components.tsrx';

package/src/theme/DocRoot.js

@@ -0,0 +1 @@
+export { DocRoot as default } from '../theme-components.tsrx';

package/src/theme/DocTagDocListPage.js

@@ -0,0 +1 @@
+export { DocTagDocListPage as default } from '../theme-components.tsrx';

package/src/theme/DocTagsListPage.js

@@ -0,0 +1 @@
+export { DocTagsListPage as default } from '../theme-components.tsrx';

package/src/theme/DocVersionRoot.js

@@ -0,0 +1 @@
+export { DocVersionRoot as default } from '../theme-components.tsrx';

package/src/theme/DocsRoot.js

@@ -0,0 +1 @@
+export { DocsRoot as default } from '../theme-components.tsrx';

package/src/theme/Root.js

@@ -0,0 +1 @@
+export { Root as default } from '../theme-components.tsrx';

package/src/theme/styles.css

@@ -0,0 +1,183 @@
+.octane-docusaurus {
+	--octane-docs-accent: #5a45ff;
+	--octane-docs-border: #d9dce5;
+	--octane-docs-muted: #5f6574;
+	--octane-docs-surface: #f7f7fa;
+	color: #1d2029;
+	font-family:
+		Inter,
+		ui-sans-serif,
+		system-ui,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		sans-serif;
+	line-height: 1.6;
+}
+
+.octane-docusaurus a {
+	color: var(--octane-docs-accent);
+	text-decoration-thickness: 0.08em;
+	text-underline-offset: 0.16em;
+}
+
+.octane-docs-navbar {
+	align-items: center;
+	border-bottom: 1px solid var(--octane-docs-border);
+	display: flex;
+	gap: 1.5rem;
+	min-height: 3.75rem;
+	padding: 0 1.5rem;
+}
+
+.octane-docs-navbar__brand {
+	color: inherit;
+	font-size: 1.05rem;
+	font-weight: 700;
+	text-decoration: none;
+}
+
+.octane-docs-navbar__items {
+	align-items: center;
+	display: flex;
+	gap: 1rem;
+	list-style: none;
+	margin: 0 0 0 auto;
+	padding: 0;
+}
+
+.octane-docs-layout {
+	display: grid;
+	grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
+	margin: 0 auto;
+	max-width: 90rem;
+	min-height: calc(100vh - 7.5rem);
+}
+
+.octane-docs-sidebar {
+	border-right: 1px solid var(--octane-docs-border);
+	padding: 1.5rem;
+}
+
+.octane-docs-sidebar ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.octane-docs-sidebar ul ul {
+	border-left: 1px solid var(--octane-docs-border);
+	margin: 0.35rem 0 0.75rem 0.45rem;
+	padding-left: 0.85rem;
+}
+
+.octane-docs-sidebar a {
+	border-radius: 0.35rem;
+	color: inherit;
+	display: block;
+	padding: 0.35rem 0.5rem;
+	text-decoration: none;
+}
+
+.octane-docs-sidebar a[aria-current='page'] {
+	background: color-mix(in srgb, var(--octane-docs-accent) 12%, transparent);
+	color: var(--octane-docs-accent);
+	font-weight: 650;
+}
+
+.octane-docs-sidebar__category {
+	color: var(--octane-docs-muted);
+	display: block;
+	font-size: 0.8rem;
+	font-weight: 700;
+	letter-spacing: 0.045em;
+	margin: 0.75rem 0 0.25rem;
+	text-transform: uppercase;
+}
+
+.octane-docs-main {
+	min-width: 0;
+	padding: clamp(1.5rem, 4vw, 4rem);
+}
+
+.octane-docs-article,
+.octane-docs-list-page {
+	margin: 0 auto;
+	max-width: 52rem;
+}
+
+.octane-docs-paginator {
+	border-top: 1px solid var(--octane-docs-border);
+	display: grid;
+	gap: 1rem;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	margin-top: 3rem;
+	padding-top: 1.5rem;
+}
+
+.octane-docs-paginator__next {
+	text-align: right;
+}
+
+.octane-docs-card-list {
+	display: grid;
+	gap: 1rem;
+	list-style: none;
+	padding: 0;
+}
+
+.octane-docs-card {
+	border: 1px solid var(--octane-docs-border);
+	border-radius: 0.6rem;
+	padding: 1rem 1.15rem;
+}
+
+.octane-docs-footer {
+	background: var(--octane-docs-surface);
+	border-top: 1px solid var(--octane-docs-border);
+	padding: 2rem 1.5rem;
+}
+
+.octane-docs-footer__links {
+	display: grid;
+	gap: 2rem;
+	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+	list-style: none;
+	margin: 0 auto 1.5rem;
+	max-width: 70rem;
+	padding: 0;
+}
+
+.octane-docs-footer__items {
+	list-style: none;
+	padding: 0;
+}
+
+.octane-docs-footer__copyright {
+	color: var(--octane-docs-muted);
+	margin: 0 auto;
+	max-width: 70rem;
+}
+
+@media (max-width: 48rem) {
+	.octane-docs-navbar {
+		align-items: flex-start;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding-block: 0.85rem;
+	}
+
+	.octane-docs-navbar__items {
+		flex-wrap: wrap;
+		margin-left: 0;
+	}
+
+	.octane-docs-layout {
+		display: block;
+	}
+
+	.octane-docs-sidebar {
+		border-bottom: 1px solid var(--octane-docs-border);
+		border-right: 0;
+	}
+}