Updated docs project

docs/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import './.next/dev/types/routes.d.ts';
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

docs/next.config.ts

@@ -0,0 +1,76 @@
+import type { NextConfig } from 'next';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings, {
+  Options as AutolinkOptions,
+} from 'rehype-autolink-headings';
+import remarkEmoji from 'remark-emoji';
+import remarkGfm from 'remark-gfm';
+import remarkImages from 'remark-images';
+import rehypeUnwrapImages from 'rehype-unwrap-images';
+import remarkToc, { Options as TocOptions } from 'remark-toc';
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkMdxFrontmatter, {
+  RemarkMdxFrontmatterOptions,
+} from 'remark-mdx-frontmatter';
+import createMDX from '@next/mdx';
+import recmaNextjsStaticProps from 'recma-nextjs-static-props';
+
+const nextConfig: NextConfig = {
+  // Support MDX files as pages:
+  pageExtensions: ['md', 'mdx', 'tsx', 'ts', 'jsx', 'js'],
+  rewrites: async () => [
+    {
+      source: '/docs{/}?',
+      destination: '/docs/overview',
+    },
+  ],
+  webpack: (config, { dev, isServer }) => {
+    if (!dev && isServer) {
+      // we're in build mode so enable shared caching for the GitHub API
+      process.env.USE_CACHE = 'true';
+      const originalEntry = config.entry;
+
+      config.entry = async () => {
+        const entries = { ...(await originalEntry()) };
+        return entries;
+      };
+    }
+
+    return config;
+  },
+};
+
+const withMdx = createMDX({
+  // By default only the `.mdx` extension is supported.
+  extension: /\.mdx?$/,
+  options: {
+    rehypePlugins: [
+      rehypeSlug,
+      rehypeUnwrapImages,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: 'append',
+          properties: {
+            class: ['anchor'],
+            title: 'Direct link to heading',
+          },
+        } satisfies AutolinkOptions,
+      ],
+    ],
+    recmaPlugins: [recmaNextjsStaticProps],
+    remarkPlugins: [
+      remarkEmoji,
+      remarkGfm,
+      remarkImages,
+      remarkFrontmatter,
+      [
+        remarkMdxFrontmatter,
+        { name: 'meta' } satisfies RemarkMdxFrontmatterOptions,
+      ],
+      [remarkToc, { skip: 'Reference' } satisfies TocOptions],
+    ],
+  },
+});
+
+export default withMdx(nextConfig);

docs/package.json

@@ -1,78 +1,71 @@
 {
   "name": "docs",
   "version": "1.0.0",
-  "main": "index.js",
   "author": "Jared Palmer <[email protected]>",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "dev": "next",
-    "build": "next build && npm run sitemap",
+    "dev": "next dev --webpack",
+    "build": "next build --webpack && yarn sitemap",
     "start": "next start",
     "sitemap": "node ./scripts/build-sitemap.js"
   },
   "dependencies": {
-    "@docsearch/css": "1.0.0-alpha.27",
-    "@docsearch/react": "1.0.0-alpha.27",
-    "@mdx-js/loader": "^1.6.18",
-    "@mdx-js/mdx": "^1.6.18",
-    "@mdx-js/react": "^1.6.18",
-    "@mdx-js/tag": "^0.20.3",
-    "@monaco-editor/react": "^4.6.0",
-    "@next/mdx": "^15.4.4",
-    "@octokit/graphql": "^5.0.4",
+    "@docsearch/css": "3.9.0",
+    "@docsearch/react": "3.9.0",
+    "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@monaco-editor/react": "^4.7.0",
+    "@next/mdx": "16.0.0",
+    "@octokit/graphql": "^9.0.1",
     "@reactions/component": "^2.0.2",
-    "@tanstack/react-query": "^4.22.0",
+    "@tanstack/react-query": "^5.85.3",
+    "@types/mdx": "^2.0.13",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
     "axios": "^1.12.0",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",
-    "date-fns": "^2.16.1",
-    "dedent": "^0.7.0",
+    "dedent": "^1.6.0",
     "docsearch.js": "^2.6.3",
-    "framer-motion": "^1.11.1",
-    "gray-matter": "^4.0.3",
-    "intersection-observer": "^0.12.2",
-    "next": "^15.4.4",
-    "orval": "^7.9.0",
-    "prettier": "^2.8.3",
-    "prismjs": "^1.21.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^3.11.0",
-    "react-live": "^2.2.2",
-    "react-select": "^5.7.0",
-    "remark": "^12.0.1",
-    "remark-autolink-headings": "^6.0.0",
-    "remark-emoji": "^2.1.0",
-    "remark-footnotes": "^1.0.0",
-    "remark-github": "^9.0.0",
-    "remark-images": "^2.0.0",
-    "remark-slug": "^6.0.0",
-    "remark-toc": "^7.0.0",
-    "remark-unwrap-images": "^2.0.0",
-    "unist-util-visit": "^2.0.3",
-    "use-debounce": "^10.0.4",
-    "yaml": "^2.2.1"
+    "next": "16.0.0",
+    "orval": "*",
+    "prettier": "3.6.2",
+    "prism-react-renderer": "^2.4.1",
+    "prismjs": "^1.30.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-icons": "^5.5.0",
+    "react-live": "^4.1.8",
+    "react-select": "^5.10.2",
+    "recma-nextjs-static-props": "^2.0.2",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-unwrap-images": "^1.0.0",
+    "remark": "^15.0.1",
+    "remark-emoji": "^5.0.2",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-images": "^4.1.0",
+    "remark-mdx-frontmatter": "^5.2.0",
+    "remark-toc": "^9.0.0",
+    "unist-util-visit": "^5.0.0",
+    "use-debounce": "^10.0.5",
+    "yaml": "^2.8.1"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/ui": "^0.7.2",
-    "algoliasearch": "3.35.1",
-    "autoprefixer": "^10.4.16",
-    "babel-preset-react-app": "^9.1.2",
-    "dotenv-load": "^2.0.0",
-    "github-slugger": "^1.3.0",
-    "md5": "^2.3.0",
-    "mdast-util-to-string": "^1.1.0",
-    "nextjs-sitemap-generator": "^1.1.3",
-    "postcss": "8.4.21",
-    "remark-parse": "^8.0.3",
-    "tailwindcss": "^3.3.5"
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.1.15",
+    "monaco-editor": "^0.52.2",
+    "nextjs-sitemap-generator": "^1.3.1",
+    "postcss": "8.5.6",
+    "tailwindcss": "^4.1.15"
   },
   "engines": {
     "node": "22.x"
   },
   "volta": {
-    "node": "18.18.2"
+    "node": "20.19.4"
   }
 }

docs/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

docs/scripts/build-sitemap.js

@@ -1,4 +1,5 @@
-const sitemap = require('nextjs-sitemap-generator');
+import sitemap from 'nextjs-sitemap-generator';
+import process from 'node:process';
 
 sitemap({
   baseUrl: 'https://orval.dev',

docs/src/components/CodeBlock.js → docs/src/components/CodeBlock.tsx

@@ -72,7 +72,7 @@ const CodeBlock = ({
   if (language === 'jsx' && live === true) {
     return (
       <LiveProvider {...liveProviderProps}>
-        <div className="border relative rounded shadow-sm">
+        <div className="border relative rounded-sm shadow-xs">
           <LiveCodePreview />
           <EditableNotice />
           {isCollapsed ? (
@@ -90,7 +90,7 @@ const CodeBlock = ({
                 <LiveEditor
                   onChange={handleCodeChange}
                   style={liveEditorStyle}
-                  className="outline-none "
+                  className="outline-hidden "
                 />
                 <div className="absolute right-0 top-0 p-2">
                   <TWButton
@@ -143,7 +143,7 @@ const CodeBlock = ({
   return (
     <LiveProvider disabled {...liveProviderProps}>
       <div className="relative">
-        <LiveEditor style={liveEditorStyle} className="rounded shadow-sm" />
+        <LiveEditor style={liveEditorStyle} className="rounded shadow-xs" />
         <div className="absolute right-0 top-0 p-2">
           <TWButton size="xs" className="font-sans" onClick={onCopy}>
             {hasCopied ? 'Copied' : 'Copy'}

docs/src/components/DocsPageFooter.js → docs/src/components/DocsPageFooter.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import NextLink from 'next/link';
-import { removeFromLast } from '../lib/docs/utils';
-import { siteConfig } from 'siteConfig';
+import { removeFromLast } from '@/lib/docs/utils';
+import { siteConfig } from '@/siteConfig';
 import { FiThumbsDown, FiThumbsUp } from 'react-icons/fi';
 import { TWButton } from './TWButton';
 
@@ -22,7 +22,7 @@ export const DocsPageFooter = React.memo(({ route, prevRoute, nextRoute }) => {
           {prevRoute && prevRoute.path ? (
             <NextLink
               href={removeFromLast(prevRoute.path, '.')}
-              className="flex-grow  block"
+              className="grow  block"
             >
               <span className="text-sm block text-gray-500 mb-1 font-semibold">
                 ← Prev
@@ -37,7 +37,7 @@ export const DocsPageFooter = React.memo(({ route, prevRoute, nextRoute }) => {
           {nextRoute && nextRoute.path && (
             <NextLink
               href={removeFromLast(nextRoute.path, '.')}
-              className="flex-grow text-right block"
+              className="grow text-right block"
             >
               <span className="text-sm block text-gray-500 mb-1 font-semibold">
                 Next →

docs/src/components/Highlight.js → docs/src/components/Highlight.tsx

@@ -1,11 +1,10 @@
-import Highlight, { defaultProps } from 'prism-react-renderer';
-import CodeTheme from 'prism-react-renderer/themes/nightOwl';
-import * as React from 'react';
+import { Highlight, themes } from 'prism-react-renderer';
+import { useState } from 'react';
 import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live'; // Original: https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-ghcolors.css
 
 /*:: import type { PrismTheme } from '../src/types' */
 
-const theme = Object.assign({}, CodeTheme, {
+const theme = Object.assign({}, themes.nightOwl, {
   plain: {
     color: '#d6deed',
     backgroundColor: '#2b3035',
@@ -16,14 +15,9 @@ const theme = Object.assign({}, CodeTheme, {
   },
 });
 
-const Code = ({
-  children,
-  codeString,
-  className = 'language-js',
-  ...props
-}) => {
+const Code = ({ children, className = 'language-js', ...props }) => {
   const language = className.replace(/language-/, '');
-  const [key, setKey] = React.useState(`${Math.random() * 7}`);
+  const [key, setKey] = useState(`${Math.random() * 7}`);
 
   if (props['live']) {
     return (
@@ -68,12 +62,7 @@ const Code = ({
     );
   } else {
     return (
-      <Highlight
-        {...defaultProps}
-        code={children.trim()}
-        language={language}
-        theme={theme}
-      >
+      <Highlight code={children.trim()} language={language} theme={theme}>
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <pre
             className={className + ' bg-gray-50 pb-4 pt-4 pr-4 overflow-scroll'}