From 3fb54effc71ac76cd0f1cbef98a27bbfb579ad9c Mon Sep 17 00:00:00 2001
From: Michael Glass <me@mike.is>
Date: Fri, 1 Mar 2024 18:37:11 +0100
Subject: [PATCH] support mdx

---
 packages/website/package.json                 |  3 ++
 .../website/src/components/PageContent.tsx    | 30 +++++++++++--------
 packages/website/src/routes.tsx               |  4 +--
 packages/website/vite.config.ts               |  7 ++++-
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/website/package.json b/packages/website/package.json
index 29d5415a..2aab133f 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -8,6 +8,8 @@
   },
   "type": "module",
   "dependencies": {
+    "@mdx-js/react": "^3.0.1",
+    "@mdx-js/rollup": "^3.0.1",
     "@nlxai/chat-core": "*",
     "@nlxai/chat-react": "*",
     "@nlxai/chat-widget": "*",
@@ -26,6 +28,7 @@
   "devDependencies": {
     "@babel/core": "^7.23.3",
     "@tailwindcss/typography": "^0.5.10",
+    "@types/mdx": "^2.0.11",
     "@types/ramda": "0.29.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
diff --git a/packages/website/src/components/PageContent.tsx b/packages/website/src/components/PageContent.tsx
index 4374d808..f770f67b 100644
--- a/packages/website/src/components/PageContent.tsx
+++ b/packages/website/src/components/PageContent.tsx
@@ -1,8 +1,8 @@
 import React, { type FC, type ReactNode, useState } from "react";
+import { MDXProvider } from "@mdx-js/react";
 import Markdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { CheckIcon, ContentCopyIcon } from "./Icons";
-import remarkGfm from "remark-gfm";
 
 const CopyToClipboardButton: FC<{ text: string; className?: string }> = ({
   text,
@@ -41,18 +41,21 @@ export const Prose: FC<{ children: ReactNode; className?: string }> = ({
   </div>
 );
 
-export const PageContent: FC<{ md: string }> = ({ md }) => (
+export const PageContent: FC<{ md: string; children?: React.ReactNode }> = ({
+  md,
+  children,
+}) => (
   <Prose>
-    <Markdown
-      remarkPlugins={[remarkGfm]}
+    <MDXProvider
       components={{
-        pre(props) {
-          return (
-            <pre className="relative group !font-mono">{props.children}</pre>
-          );
+        pre({ children }: React.HTMLAttributes<HTMLPreElement>) {
+          return <pre className="relative group !font-mono">{children}</pre>;
         },
-        code(props) {
-          const { children, className, node, ...rest } = props;
+        code({
+          children,
+          className,
+          ...rest
+        }: React.HTMLAttributes<HTMLElement>) {
           const match = /language-(\w+)/.exec(className || "");
           const lines = String(children).replace(/\n$/, "");
           return (
@@ -80,7 +83,10 @@ export const PageContent: FC<{ md: string }> = ({ md }) => (
         },
       }}
     >
-      {md}
-    </Markdown>
+      <Markdown>{md}</Markdown>
+      <main>{children}</main>
+    </MDXProvider>
   </Prose>
 );
+
+export default PageContent;
diff --git a/packages/website/src/routes.tsx b/packages/website/src/routes.tsx
index 4699865c..8f53caad 100644
--- a/packages/website/src/routes.tsx
+++ b/packages/website/src/routes.tsx
@@ -3,8 +3,8 @@ import { flatten } from "ramda";
 import { Routes, Route } from "react-router-dom";
 import { NextPrevPage } from "./components/NextPrevPage";
 // 1
-import { GettingStarted } from "./content/01-01-getting-started";
-import { Installation } from "./content/01-02-installation";
+import GettingStarted from "./content/01-01-getting-started.mdx";
+import Installation from "./content/01-02-installation.mdx";
 // 2
 import { WebWidgetSetup } from "./content/02-01-web-widget-setup";
 import { WebWidgetTheming } from "./content/02-02-web-widget-theming";
diff --git a/packages/website/vite.config.ts b/packages/website/vite.config.ts
index 67e3496d..d1bf4baa 100644
--- a/packages/website/vite.config.ts
+++ b/packages/website/vite.config.ts
@@ -1,9 +1,14 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import mdx from "@mdx-js/rollup";
+import remarkGfm from "remark-gfm";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    { enforce: "pre", ...mdx({ remarkPlugins: [remarkGfm] }) },
+    react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
+  ],
   define: {},
   server: {
     port: 3010,