chore(website): use new mdx package for the website

sdorra · Mar 21, 2024 · 0d3eca0 · 0d3eca0
1 parent 77cac8e
commit 0d3eca0
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 46 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/app/docs/[category]/[page]/page.tsx b/website/app/docs/[category]/[page]/page.tsx
@@ -1,10 +1,8 @@
 import { Sample, allIntegrations, allSamples } from "content-collections";
 import { notFound } from "next/navigation";
-import { run } from "@mdx-js/mdx";
-import * as runtime from "react/jsx-runtime";
-import { Fragment } from "react";
 import { Metadata } from "next";
 import { createStackBlitzLink } from "@/lib/stackblitz";
+import {MDXContent} from "@content-collections/mdx/react";
 
 type Props = {
   params: {
@@ -54,17 +52,11 @@ export default async function Page({ params: { category, page } }: Props) {
     return notFound();
   }
 
-  const { default: Content } = await run(docPage.body, {
-    ...runtime,
-    baseUrl: import.meta.url,
-    Fragment,
-  });
-
   return (
     <div className="min-w-0">
       <article className="prose prose-base prose-code:text-base hover:prose-a:decoration-primary-600 max-w-3xl prose-invert py-5 px-5 sm:px-10">
         <h1>{docPage.title}</h1>
-        <Content />
+        <MDXContent code={docPage.body} />
       </article>
       {isSample(category, docPage) ? <StackBlitz sample={docPage} /> : null}
     </div>

diff --git a/website/content-collections.ts b/website/content-collections.ts
@@ -1,15 +1,10 @@
 import { defineCollection, defineConfig } from "@content-collections/core";
 import rehypeShiki from "@shikijs/rehype";
-import { compile } from "@mdx-js/mdx";
+import { Options, compileMDX } from "@content-collections/mdx";
 
-async function mdx(content: string) {
-  return String(
-    await compile(content, {
-      outputFormat: "function-body",
-      rehypePlugins: [[rehypeShiki, { theme: "one-dark-pro" }]],
-    })
-  );
-}
+const mdxOptions: Options = {
+  rehypePlugins: [[rehypeShiki, { theme: "one-dark-pro" }]],
+};
 
 const integrations = defineCollection({
   name: "integrations",
@@ -22,7 +17,7 @@ const integrations = defineCollection({
     icon: z.string().optional(),
   }),
   transform: async (data, ctx) => {
-    const body = await ctx.cache(data.content, mdx);
+    const body = await compileMDX(ctx, data, mdxOptions);
 
     let linkText = data.linkText;
     if (!linkText) {
@@ -57,7 +52,7 @@ const samples = defineCollection({
       .optional(),
   }),
   transform: async (data, ctx) => {
-    const body = await ctx.cache(data.content, mdx);
+    const body = await compileMDX(ctx, data, mdxOptions);
 
     let linkText = data.linkText;
     if (!linkText) {

diff --git a/website/package.json b/website/package.json
@@ -9,7 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^3.0.0",
     "@radix-ui/react-radio-group": "^1.1.3",
     "clsx": "^2.1.0",
     "fathom-client": "^3.6.0",
@@ -24,8 +23,9 @@
   "devDependencies": {
     "@content-collections/core": "workspace:*",
     "@content-collections/next": "workspace:*",
-    "@shikijs/rehype": "1.0.0-beta.6",
-    "@shikijs/transformers": "1.0.0-beta.6",
+    "@content-collections/mdx": "workspace:*",
+    "@shikijs/rehype": "1.2.0",
+    "@shikijs/transformers": "1.2.0",
     "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -36,7 +36,7 @@
     "eslint-config-next": "14.1.0",
     "hast-util-to-jsx-runtime": "^2.3.0",
     "postcss": "^8",
-    "shiki": "1.0.0-beta.6",
+    "shiki": "1.2.0",
     "tailwindcss": "^3.4.0",
     "typescript": "^5"
   }