Merge pull request #10 from mintlify/ronan/migrate-to-new-package

feat: migrate to new mdx package

Author: rpmccarter

.gitignore

@@ -11,3 +11,12 @@ dist/
 
 # TypeScript
 *.tsbuildinfo
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.prettierignore

@@ -1,2 +1,4 @@
 /dist
-/node_modules
+/node_modules
+
+.next

.yarn/install-state.gz

@@ -0,0 +1 @@
+nodeLinker: node-modules

.yarnrc.yml

@@ -1,19 +1,12 @@
-import { getCompiledServerMdx } from '@mintlify/mdx';
+import { MDXRemote } from '@mintlify/mdx';
 import { promises as fs } from 'fs';
 
 export default async function Home() {
-  const data = await fs.readFile(process.cwd() + '/examples/highlight-example.mdx');
-
-  const { content, frontmatter } = await getCompiledServerMdx<{
-    title: string;
-  }>({
-    source: data.toString(),
-  });
+  const data = await fs.readFile(process.cwd() + '/examples/highlight-example.mdx', 'utf8');
 
   return (
     <article className="prose mx-auto py-8">
-      <h1>{frontmatter.title}</h1>
-      {content}
+      <MDXRemote source={data} parseFrontmatter />
     </article>
   );
 }

examples/app-router/app/page.tsx

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@mintlify/mdx": "^0.0.44",
+    "@mintlify/mdx": "workspace:^",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18"

examples/app-router/package.json

@@ -10,26 +10,22 @@ You can check out the demo of [this page](https://github.com/mintlify/mdx/blob/m
 
 ## How to use
 
-1. Call the `getCompiledServerMdx` function inside your async React Server Component which will give you the `frontmatter` and `content`.
+1. Use the `MDXRemote` component directly inside your async React Server Component.
 
    ```tsx
-   import { getCompiledServerMdx } from '@mintlify/mdx';
+   import { MDXRemote } from '@mintlify/mdx';
 
    export default async function Home() {
-     const { content, frontmatter } = await getCompiledServerMdx({
-       source: `---
-         title: Title
-         ---
-   
-         ## Markdown H2
-       `,
-     });
+     const source: `---
+      title: Title
+      ---
+
+      ## Markdown H2
+      `;
 
      return (
        <article className="prose mx-auto py-8">
-         <h1>{String(frontmatter.title)}</h1>
-
-         {content}
+         <MDXRemote source={source} parseFrontmatter />
        </article>
      );
    }