feat: testing sync mode

next.config.mjs

@@ -7,6 +7,7 @@ const config = {
 	reactStrictMode: true,
 	output: "export",
 	images: { unoptimized: true },
+	experimental: { turbopackScopeHoisting: false },
 };
 
 export default withMDX(config);

scripts/link-validation.ts

@@ -86,8 +86,9 @@ async function checkLinks() {
 async function getHeadings({
 	data,
 }: InferPageType<typeof source>): Promise<string[]> {
-	const pageData = await data.load();
-	const tocHeadings = pageData.toc.map((item) => item.url.slice(1));
+	//const pageData = await data.load();
+	//const tocHeadings = pageData.toc.map((item) => item.url.slice(1));
+	const tocHeadings = data.toc.map((item) => item.url.slice(1));
 
 	// Also extract actual anchor IDs from the content for API reference pages
 	const content = await data.getText("raw");

source.config.ts

@@ -10,9 +10,9 @@ import { REPLACEMENTS as cairoContractReplacements } from "content/contracts-cai
 export const docs = defineDocs({
 	dir: "content",
 	// Async mode - enables runtime compilation for faster dev server startup
-	docs: {
-		async: true,
-	},
+	// docs: {
+	// 	async: true,
+	// },
 	// To switch back to sync mode (pre-compilation), comment out the docs config above and uncomment below:
 	// (sync mode - pre-compiles all content at build time)
 	// No additional config needed for sync mode - just remove the docs config
@@ -27,13 +27,10 @@ export default defineConfig({
 				dark: "github-dark",
 			},
 		},
-		remarkPlugins: [remarkMath, remarkMdxMermaid,
-      [
-				remarkReplace,
-				[
-					cairoContractReplacements,
-				]
-			],
+		remarkPlugins: [
+			remarkMath,
+			remarkMdxMermaid,
+			[remarkReplace, [cairoContractReplacements]],
 		],
 		rehypePlugins: (v) => [rehypeKatex, ...v],
 	},

src/app/(docs)/[...slug]/page.tsx

@@ -20,11 +20,11 @@ export default async function Page(props: {
 	if (!page) notFound();
 
 	// Async mode - load the compiled content at runtime
-	const { body: MDXContent, toc } = await page.data.load();
+	//const { body: MDXContent, toc } = await page.data.load();
 
 	// To switch back to sync mode, comment out the line above and uncomment below:
-	// const MDXContent = page.data.body;
-	// const toc = page.data.toc;
+	const MDXContent = page.data.body;
+	const toc = page.data.toc;
 
 	return (
 		<DocsPage toc={toc} full={page.data.full}>

src/components/oz-wizard.tsx

@@ -1,92 +1,23 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import { useEffect, useRef } from "react";
-
-// Declare the custom element type
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			"oz-wizard": React.DetailedHTMLProps<
-				React.HTMLAttributes<HTMLElement>,
-				HTMLElement
-			> & {
-				style?: React.CSSProperties;
-				"data-tab"?: string;
-				"data-lang"?: string;
-				version?: string;
-			};
-		}
-	}
-}
-
 interface OZWizardProps {
 	tab?: string;
 	lang?: string;
 	version?: string;
 }
 
-// Global flag to prevent multiple script loads
-let wizardScriptLoaded = false;
-
-function OZWizardComponent({ tab, lang, version }: OZWizardProps) {
-	const wizardRef = useRef<HTMLElement>(null);
-
-	useEffect(() => {
-		if (!wizardScriptLoaded) {
-			// Check if script is already in DOM
-			const existingScript = document.querySelector(
-				'script[src="https://wizard.openzeppelin.com/build/embed.js"]',
-			);
-
-			if (!existingScript) {
-				wizardScriptLoaded = true;
-
-				// Dynamically load the wizard script
-				const script = document.createElement("script");
-				script.src = "https://wizard.openzeppelin.com/build/embed.js";
-				script.async = true;
-
-				// Add script to head
-				document.head.appendChild(script);
-			}
-		}
-	}, []);
-
+export default function OZWizard({ tab, lang, version }: OZWizardProps) {
 	return (
-		//@ts-expect-error
-		<oz-wizard
-			ref={wizardRef}
-			data-tab={tab}
-			data-lang={lang}
-			version={version}
-			style={{
-				display: "block",
-				minHeight: "40rem",
+		<div
+			dangerouslySetInnerHTML={{
+				__html: `
+				<script async src="https://wizard.openzeppelin.com/build/embed.js"></script>
+				<oz-wizard
+					style="display: 'block'; min-height: '40rem'"
+					${tab && `data-tab=${tab}`}
+					${lang && `data-lang=${lang}`}
+					${version && `version=${version}`}
+				/>
+      `,
 			}}
 		/>
 	);
 }
-
-// Export with SSR disabled to prevent hydration issues
-const OZWizard = dynamic(() => Promise.resolve(OZWizardComponent), {
-	ssr: false,
-	loading: () => (
-		<div
-			style={{
-				display: "flex",
-				minHeight: "40rem",
-				backgroundColor: "#f5f5f5",
-				borderRadius: "8px",
-				//display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
-				color: "#666",
-			}}
-		>
-			Loading OpenZeppelin Contracts Wizard...
-		</div>
-	),
-});
-
-export default OZWizard;

src/lib/export-search-indexes.ts

@@ -23,7 +23,8 @@ export async function exportSearchIndexes() {
 		);
 
 	for (const page of filteredPages) {
-		const data = await page.data.load();
+		//const data = await page.data.load();
+		const data = page.data;
 		results.push({
 			_id: page.url,
 			structured: data.structuredData,