diff --git a/docs/jsconfig.json b/docs/jsconfig.json deleted file mode 100644 index 738e8a465..000000000 --- a/docs/jsconfig.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./src" - } -} diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts new file mode 100644 index 000000000..d3956e140 --- /dev/null +++ b/docs/next-env.d.ts @@ -0,0 +1,6 @@ +/// +/// +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. diff --git a/docs/next.config.js b/docs/next.config.js deleted file mode 100644 index c649448a1..000000000 --- a/docs/next.config.js +++ /dev/null @@ -1,45 +0,0 @@ -const webpack = require('webpack'); -const fs = require('fs'); -const path = require('path'); -const visit = require('unist-util-visit'); -const remarkPlugins = require('./src/lib/docs/remark-plugins.js'); - -module.exports = { - pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'], - rewrites() { - return [ - { - source: '/docs{/}?', - destination: '/docs/overview', - }, - ]; - }, - webpack: (config, { dev, isServer, ...options }) => { - config.module.rules.push({ - test: /.mdx?$/, // load both .md and .mdx files - use: [ - options.defaultLoaders.babel, - { - loader: '@mdx-js/loader', - options: { - remarkPlugins, - }, - }, - path.join(__dirname, 'src/lib/docs/md-loader.js'), - ], - }); - - 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; - }, -}; diff --git a/docs/next.config.ts b/docs/next.config.ts new file mode 100644 index 000000000..14e553cb6 --- /dev/null +++ b/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); diff --git a/docs/package.json b/docs/package.json index d6a1e4bba..e9ebf3e61 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,78 +1,71 @@ { "name": "docs", "version": "1.0.0", - "main": "index.js", "author": "Jared Palmer ", "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" } } diff --git a/docs/postcss.config.js b/docs/postcss.config.js deleted file mode 100644 index 4a15258b0..000000000 --- a/docs/postcss.config.js +++ /dev/null @@ -1,7 +0,0 @@ -// postcss.config.js -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/docs/postcss.config.mjs b/docs/postcss.config.mjs new file mode 100644 index 000000000..a34a3d560 --- /dev/null +++ b/docs/postcss.config.mjs @@ -0,0 +1,5 @@ +export default { + plugins: { + '@tailwindcss/postcss': {}, + }, +}; diff --git a/docs/scripts/build-sitemap.js b/docs/scripts/build-sitemap.js index 4133f3e3f..07fd4830b 100644 --- a/docs/scripts/build-sitemap.js +++ b/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', diff --git a/docs/src/components/ArrowRight.js b/docs/src/components/ArrowRight.tsx similarity index 100% rename from docs/src/components/ArrowRight.js rename to docs/src/components/ArrowRight.tsx diff --git a/docs/src/components/Banner.js b/docs/src/components/Banner.tsx similarity index 100% rename from docs/src/components/Banner.js rename to docs/src/components/Banner.tsx diff --git a/docs/src/components/CodeBlock.js b/docs/src/components/CodeBlock.tsx similarity index 97% rename from docs/src/components/CodeBlock.js rename to docs/src/components/CodeBlock.tsx index daf021aa9..dd8730f99 100644 --- a/docs/src/components/CodeBlock.js +++ b/docs/src/components/CodeBlock.tsx @@ -72,7 +72,7 @@ const CodeBlock = ({ if (language === 'jsx' && live === true) { return ( -
+
{isCollapsed ? ( @@ -90,7 +90,7 @@ const CodeBlock = ({
- +
{hasCopied ? 'Copied' : 'Copy'} diff --git a/docs/src/components/Container.js b/docs/src/components/Container.tsx similarity index 100% rename from docs/src/components/Container.js rename to docs/src/components/Container.tsx diff --git a/docs/src/components/DocsPageFooter.js b/docs/src/components/DocsPageFooter.tsx similarity index 92% rename from docs/src/components/DocsPageFooter.js rename to docs/src/components/DocsPageFooter.tsx index cffd2d20b..90a0df09e 100644 --- a/docs/src/components/DocsPageFooter.js +++ b/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 ? ( ← Prev @@ -37,7 +37,7 @@ export const DocsPageFooter = React.memo(({ route, prevRoute, nextRoute }) => { {nextRoute && nextRoute.path && ( Next → diff --git a/docs/src/components/ExternalLink.js b/docs/src/components/ExternalLink.tsx similarity index 100% rename from docs/src/components/ExternalLink.js rename to docs/src/components/ExternalLink.tsx diff --git a/docs/src/components/Footer.js b/docs/src/components/Footer.tsx similarity index 100% rename from docs/src/components/Footer.js rename to docs/src/components/Footer.tsx diff --git a/docs/src/components/Highlight.js b/docs/src/components/Highlight.tsx similarity index 85% rename from docs/src/components/Highlight.js rename to docs/src/components/Highlight.tsx index 9b54214b3..f21408a20 100644 --- a/docs/src/components/Highlight.js +++ b/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 ( - + {({ className, style, tokens, getLineProps, getTokenProps }) => ( 
 {
+const Code = ({ children, className = 'language-js' }) => {
   const language = className.replace(/language-/, '');
   return (
-    
+    
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         
 {
+function getSlugAndTag(path: string) {
   const parts = path.split('/');
 
   if (parts[2] === '1.5.8' || parts[2] === '2.1.4') {
@@ -34,30 +31,34 @@ const getSlugAndTag = (path) => {
   return {
     slug: path,
   };
-};
+}
 
 const addTagToSlug = (slug, tag) => {
   return tag ? `/docs/${tag}/${slug.replace('/docs/', '')}` : slug;
 };
 
-export const LayoutDocs = (props) => {
+interface Metadata {
+  id: string;
+  title: string;
+  description?: string;
+  toc?: boolean;
+}
+
+interface Props extends ComponentPropsWithoutRef<'div'> {
+  meta: Metadata;
+}
+
+export default function LayoutDocs({ meta, children }: Props) {
   const router = useRouter();
   const { slug, tag } = getSlugAndTag(router.asPath);
   const { routes } = getManifest(tag);
-
-  const _route = findRouteByPath(removeFromLast(slug, '#'), routes); // @ts-ignore
-
+  const _route = findRouteByPath(removeFromLast(slug, '#'), routes);
   const isMobile = useIsMobile();
   const { route, prevRoute, nextRoute } = getRouteContext(_route, routes);
   const title = route && `${route.title}`;
 
   return (
     <>
-      {tag && (
-        
-          
-        
-      )}
       

         {isMobile ? (
           <>
@@ -73,10 +74,7 @@ export const LayoutDocs = (props) => {