Migrate remarkDynamicContent and remarkInstall to docs generator

Author: fuma-nama

.changeset/mighty-books-occur.md

@@ -0,0 +1,49 @@
+---
+"fumadocs-core": major
+"fumadocs-typescript": major
+---
+
+**Introduce `fumadocs-docgen` package.**
+
+Offer a better authoring experience for advanced use cases.
+
+- Move `remark-dynamic-content` and `remark-install` plugins to the new package `fumadocs-docgen`.
+- Support Typescript generator by default
+
+**Usage**
+
+Add the `remarkDocGen` plugin to your remark plugins.
+
+```ts
+import { remarkDocGen, fileGenerator } from "fumadocs-docgen";
+
+remark().use(remarkDocGen, { generators: [fileGenerator()] })
+```
+
+Generate docs with code blocks.
+
+````mdx
+```json doc-gen:<generator>
+{
+    // options
+}
+```
+````
+
+**Migrate**
+
+For `remarkDynamicContent`, enable `fileGenerator` and use this syntax:
+
+````mdx
+```json doc-gen:file
+{
+    "file": "./path/to/my-file.txt"
+}
+```
+````
+
+For `remarkInstall`, it remains the same:
+
+```ts
+import { remarkInstall } from "fumadocs-docgen"
+```

.changeset/strange-pumas-sit.md

@@ -97,8 +97,13 @@ Make sure to wrap your content in the [Page](/docs/ui/blocks/page) component, th
 <Accordions>
 <Accordion title="Example with Fumadocs MDX">
 
-```tsx title="app/docs/[[...slug]]/page.tsx"
-|reference:../../examples/next-mdx/app/docs/[[...slug]]/page.tsx|
+```json doc-gen:file
+{
+  "file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx",
+  "codeblock": {
+    "meta": "title=\"app/docs/[[...slug]]/page.tsx\""
+  }
+}
 ```
 
 </Accordion>
@@ -111,8 +116,13 @@ By default, it uses the built-in document search based on Flexsearch. [Learn to
 <Accordions>
 <Accordion title="Example with Fumadocs MDX">
 
-```tsx title="app/api/search/route.ts"
-|reference:../../examples/next-mdx/app/api/search/route.ts|
+```json doc-gen:file
+{
+  "file": "../../examples/next-mdx/app/api/search/route.ts",
+  "codeblock": {
+    "meta": "title=\"app/api/search/route.ts\""
+  }
+}
 ```
 
 </Accordion>

apps/docs/content/docs/ui/index.mdx

@@ -1,14 +1,14 @@
 import createBundleAnalyzer from '@next/bundle-analyzer';
 import createMDX from 'fumadocs-mdx/config';
+import { rehypeCodeDefaultOptions } from 'fumadocs-core/mdx-plugins';
 import {
-  remarkDynamicContent,
-  remarkInstall,
-  rehypeCodeDefaultOptions,
   remarkDocGen,
-} from 'fumadocs-core/mdx-plugins';
+  remarkInstall,
+  fileGenerator,
+  typescriptGenerator,
+} from 'fumadocs-docgen';
 import { transformerTwoslash } from 'fumadocs-twoslash';
 import rehypeKatex from 'rehype-katex';
-import { typescriptGen } from 'fumadocs-typescript';
 import remarkMath from 'remark-math';
 
 const withAnalyzer = createBundleAnalyzer({
@@ -63,9 +63,8 @@ const withMDX = createMDX({
     lastModifiedTime: 'git',
     remarkPlugins: [
       remarkMath,
-      remarkDynamicContent,
       [remarkInstall, { Tabs: 'InstallTabs' }],
-      [remarkDocGen, { generators: [typescriptGen()] }],
+      [remarkDocGen, { generators: [typescriptGenerator(), fileGenerator()] }],
     ],
     rehypePlugins: (v) => [rehypeKatex, ...v],
   },

apps/docs/next.config.mjs

@@ -16,6 +16,7 @@
     "algoliasearch": "^4.23.3",
     "class-variance-authority": "^0.7.0",
     "fumadocs-core": "workspace:*",
+    "fumadocs-docgen": "workspace:^",
     "fumadocs-mdx": "workspace:*",
     "fumadocs-twoslash": "workspace:^",
     "fumadocs-typescript": "workspace:^",

apps/docs/package.json

@@ -4,8 +4,5 @@ export {
 } from 'remark-gfm';
 export * from './rehype-code';
 export * from './remark-image';
-export * from './remark-dynamic-content';
 export * from './remark-structure';
 export * from './remark-heading';
-export * from './remark-install';
-export * from './remark-doc-gen';