docs: mdx support

oedotme · Jan 16, 2024 · fd803f1 · fd803f1
1 parent 870bc5e
commit fd803f1
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 6 deletions.
diff --git a/examples/react-router-mdx/readme.md b/examples/react-router-mdx/readme.md
@@ -1,7 +1,32 @@
 # Generouted + React Router + MDX Example
 
+## What's different from the default setup of [react-router example](/examples/react-router)
+
+- `@mdx-js/rollup` installation and config at `vite.config.ts` to use `.mdx` files at `src/pages`:
+
+```ts
+// vite.config.ts
+
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import generouted from '@generouted/react-router/plugin'
+import mdx from '@mdx-js/rollup'
+
+export default defineConfig({ plugins: [{ enforce: 'pre', ...mdx() }, react(), generouted()] })
+```
+
+## Adding pages
+
+Add the home page by creating a new file `src/pages/index.mdx` → `/`:
+
+```mdx
+### Header
+
+**Bold**, _italic_ and `inline-code`
+```
+
 ## Preview
 
-Run this example online via [StackBlitz](https://stackblitz.com/github.com/oedotme/generouted/tree/main/examples/react-router):
+Run this example online via [StackBlitz](https://stackblitz.com/github.com/oedotme/generouted/tree/main/examples/react-router-mdx):
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github.com/oedotme/generouted/tree/main/examples/react-router)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github.com/oedotme/generouted/tree/main/examples/react-router-mdx)
diff --git a/examples/react-router-mdx/src/pages/index.mdx b/examples/react-router-mdx/src/pages/index.mdx
@@ -1,6 +1,6 @@
 ### MDX content support
 
-Some `MDX` content from `./src/pages/content.mdx` file.
+Some `MDX` **content** from `./src/pages/content.mdx` file.
 
 #### Setup
 
@@ -26,5 +26,13 @@ export default defineConfig({
 Add the home page by creating a new file `src/pages/index.mdx` → `/`:
 
 ```mdx
-### Home + MDX
+### Header
+
+**Bold**, _italic_ and `inline-code`
 ```
+
+#### Preview
+
+### Header
+
+**Bold**, _italic_ and `inline-code`
diff --git a/examples/react-router-mdx/vite.config.ts b/examples/react-router-mdx/vite.config.ts
@@ -4,6 +4,6 @@ import generouted from '@generouted/react-router/plugin'
 import mdx from '@mdx-js/rollup'
 
 export default defineConfig({
-  plugins: [{ enforce: 'pre', ...mdx() }, , react(), generouted()],
+  plugins: [{ enforce: 'pre', ...mdx() }, react(), generouted()],
   resolve: { alias: { '@': '/src' } },
 })
diff --git a/packages/generouted/readme.md b/packages/generouted/readme.md
@@ -48,7 +48,7 @@ There are also Vite plugins available for some integrations to provide type-safe
 - ⚡ Powered by [Vite](https://vitejs.dev)
 - ✨ React support with [`react-router-dom`](https://github.com/remix-run/react-router) or [`@tanstack/router`](https://github.com/tanstack/router) 🧪 or [`@tanstack/react-location`](https://github.com/tanstack/router/tree/9c8eb043e4ac350fc1d28655542e01defb0c82e5) 🚨
 - ✨ Solid support with [`@solidjs/router`](https://github.com/solidjs/solid-router)
-- ✨ File-based MDX routes with React or Solid using [`@mdx-js/rollup`](https://mdxjs.com/packages/rollup)
+- ✨ File-based MDX routes with React or Solid, requires [`@mdx-js/rollup`](https://mdxjs.com/packages/rollup) [installation and setup](/examples/react-router-mdx)
 - 🔐 Type-safe navigation
 - 🚀 Type-safe global modals
 - 💤 Route-based code-splitting and lazy-loading
@@ -129,6 +129,7 @@ You can find more details about type-safe navigation and global modals at [`@gen
 - [Type-safe navigation + global modals](/examples/react-router)
 - [Custom integration](/examples/react-router-custom)
 - [Custom integration with custom path](/examples/react-router-custom-path)
+- [MDX routes](/examples/react-router-mdx)
 
 <br>