json-schema-org · imApoorva36 · Dec 27, 2025
diff --git a/app/components/ColorModeScriptClient.tsx b/app/components/ColorModeScriptClient.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+import { ColorModeScript } from "@chakra-ui/react";
+import { theme } from "../styles/theme";
+
+export function ColorModeScriptClient() {
+  return <ColorModeScript initialColorMode={theme.config.initialColorMode} />;
+}
diff --git a/app/components/Mdx/Mdx.tsx b/app/components/Mdx/Mdx.tsx
@@ -1,12 +1,4 @@
 import { MDXRemote, MDXRemoteProps } from "next-mdx-remote/rsc";
-import {
-  As,
-  Heading,
-  Link,
-  ListItem,
-  OrderedList,
-  UnorderedList,
-} from "@chakra-ui/react";
 import rehypeMdxCodeProps from "rehype-mdx-code-props";
 import { MDXComponents } from "mdx/types";
 import CodeSnippet from "../CodeSnippet/CodeSnippet";
@@ -17,16 +9,6 @@ import styles from "./Mdx.module.css";
 import SideEditorLink from "../SideEditorLink";
 
 function createHeading(level: number): any {
-  const headingSizes: {
-    [key: number]: string;
-  } = {
-    1: "xl",
-    2: "lg",
-    3: "md",
-    4: "sm",
-    5: "xs",
-    6: "xs",
-  };
   if (level < 1 || level > 6) {
     throw new Error("Invalid heading level");
   }
@@ -36,39 +18,27 @@ function createHeading(level: number): any {
   }: {
     children: React.ReactNode;
   }) {
+    const Tag = (`h${level}` as keyof JSX.IntrinsicElements) as any;
     return (
-      <Heading
-        as={`h${level}` as As}
-        size={headingSizes[level]}
-        lineHeight={"tallest"}
-        letterSpacing={level <= 2 ? "tight" : ""}
-        className={styles.heading}
-      >
+      <Tag className={styles.heading} style={{ lineHeight: "1.1" }}>
         {children}
-      </Heading>
+      </Tag>
     );
   };
 }
 
 export const components: MDXComponents = {
-  // chakra-ui overrides heading styles so we need to use the Heading component
-  // see https://github.com/chakra-ui/chakra-ui/issues/107 for more info
-
   h1: createHeading(1),
   h2: createHeading(2),
   h3: createHeading(3),
   h4: createHeading(4),
   h5: createHeading(5),
   h6: createHeading(6),
-  a: (props) => <Link {...props} style={{ color: "hsl(var(--link-color))" }} />,
-  ul: (props) => <UnorderedList {...props} />,
-  ol: (props) => <OrderedList {...props} />,
+  a: (props) => <a {...props} style={{ color: "hsl(var(--link-color))" }} />,
+  ul: (props) => <ul {...props} />,
+  ol: (props) => <ol {...props} />,
   li: (props) => (
-    <ListItem
-      {...props}
-      marginBlock={"0.5rem"}
-      color={"hsl(var(--text) / 0.75)"}
-    />
+    <li {...props} style={{ marginBlock: "0.5rem", color: "hsl(var(--text) / 0.75)" }} />
   ),
   code: (props: any) => <CodeSnippet {...props} />,
   p: (props) => (

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,11 +2,10 @@ import type { Metadata } from "next";
 
 import "./styles/globals.css";
 import { GeistSans } from "geist/font/sans";
-import { ColorModeScript } from "@chakra-ui/react";
-import { theme } from "./styles/theme";
 import { Providers } from "./providers";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import IconLink from "./components/IconLink";
+import { ColorModeScriptClient } from "./components/ColorModeScriptClient";
 
 export const metadata: Metadata = {
   title: "Tour Of Json Schema",
@@ -37,7 +36,7 @@ export default function RootLayout({
         <IconLink />
       </head>
       <body>
-        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+        <ColorModeScriptClient />
         <Providers>
           <main className={GeistSans.className}>{children}</main>
         </Providers>

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -2,7 +2,6 @@ import styles from "./styles/404.module.css";
 import cx from "classnames";
 import { interFont } from "./styles/fonts";
 import Link from "next/link";
-import { Button } from "@chakra-ui/react";
 
 export default function Custom404() {
   return (
@@ -15,11 +14,10 @@ export default function Custom404() {
           The page you are looking for does not exist!
         </p>
       </div>
-      <Link href={"/"}>
-        <Button variant={"default"} borderRadius={"8px"}>
-          BACK TO HOME
-        </Button>
+      <Link href="/" className={styles.link}>
+        BACK TO HOME
       </Link>
+
     </div>
   );
 }
diff --git a/app/styles/404.module.css b/app/styles/404.module.css
@@ -16,3 +16,12 @@
 .message {
   font-size: 1em;
 }
+
+.link {
+  display: inline-block;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: hsl(var(--primary));
+  color: white;
+  text-decoration: none;
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -4,6 +4,8 @@ import createMDX from "@next/mdx";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 
+const isTurbo = process.argv.includes("--turbo");
+
 const withMDX = createMDX({
   // Add markdown plugins here, as desired
   options: {
@@ -18,12 +20,34 @@ const withMDX = createMDX({
 
 const nextConfig = {
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
-
   output: "export",
-
   images: { unoptimized: true },
-  compiler: {
-    styledComponents: true,
+
+  // Completely disable webpack features when using turbopack
+  webpack: isTurbo ? () => ({}) : undefined,
+
+  compiler: isTurbo
+    ? undefined
+    : {
+        styledComponents: true,
+        emotion: true,
+      },
+
+  experimental: {
+    turbo: {
+      rules: {
+        "*.mdx": ["@next/mdx"],
+      },
+      externalPackages: [
+        "@emotion/react",
+        "@emotion/styled",
+        "@emotion/cache",
+      ],
+    },
+
+    // Avoid externalizing packages that are ESM-only (like next-mdx-remote)
+    // so they are bundled instead of being required at runtime.
+    serverComponentsExternalPackages: [],
   },
 };
 

diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "next-dev": "next dev",
+    "dev:turbo": "next dev --turbo",
     "content-watch": "nodemon --ext ts,mdx --watch ./content --ignore ./content/outline.json  --exec \"tsx ./scripts/generateOutline.ts\"",
     "dev": "concurrently \"pnpm run next-dev\" \"pnpm run content-watch\"",
     "build": "tsx ./scripts/generateOutline.ts && next build",