diff --git a/app/components/ColorModeScriptClient.tsx b/app/components/ColorModeScriptClient.tsx new file mode 100644 index 0000000..da7442c --- /dev/null +++ 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 ; +} diff --git a/app/components/Mdx/Mdx.tsx b/app/components/Mdx/Mdx.tsx index 26ebf41..82711d6 100644 --- 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 ( - + {children} - + ); }; } 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) => , - ul: (props) => , - ol: (props) => , + a: (props) => , + ul: (props) =>
    , + ol: (props) =>
      , li: (props) => ( - +
    1. ), code: (props: any) => , p: (props) => ( diff --git a/app/layout.tsx b/app/layout.tsx index eda4bba..af7dc39 100644 --- 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({ - +
      {children}
       diff --git a/app/not-found.tsx b/app/not-found.tsx index e9eabdc..2cc89c9 100644 --- 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!

      - - + + BACK TO HOME + ); } diff --git a/app/styles/404.module.css b/app/styles/404.module.css index 4d02ea0..ed01967 100644 --- 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 index 71ac1b2..04c69a5 100644 --- 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 index 74fa25b..0f43fef 100644 --- 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",