use markdown without mdx

packages/docs-new/package.json

@@ -27,6 +27,7 @@
     "@tailwindcss/typography": "^0.5.0",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.13",
+    "@types/markdown-it": "^12.2.3",
     "@types/node": "*",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.9",
@@ -34,12 +35,13 @@
     "autoprefixer": "^10.4.1",
     "compression": "^1.7.4",
     "esno": "^0.13.0",
+    "markdown-it": "^12.3.0",
+    "markdown-it-prism": "^2.2.1",
     "postcss": "^8.4.5",
-    "rehype-highlight": "^5.0.2",
-    "remark-frontmatter": "^4.0.1",
     "tailwindcss": "^3.0.8",
+    "type-fest": "^2.8.0",
     "typescript": "^4.5.4",
     "vite": "^2.7.10",
-    "xdm": "^3.3.1"
+    "vite-plugin-markdown": "^2.0.2"
   }
 }

packages/docs-new/src/pages/index.page.tsx

@@ -1,5 +1,5 @@
 import packageJson from "reacord/package.json"
-import LandingExample from "../components/landing-example.md"
+import { html as landingExampleHtml } from "../components/landing-example.md"
 import { MainNavigation } from "../components/main-navigation"
 import { maxWidthContainer } from "../styles/components"
 
@@ -12,9 +12,10 @@ export default function LandingPage() {
       <div className="px-4 pb-8 flex flex-1">
         <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
           <h1 className="text-6xl font-light">reacord</h1>
-          <section className="mx-auto text-sm sm:text-base">
-            <LandingExample />
-          </section>
+          <section
+            className="mx-auto text-sm sm:text-base"
+            dangerouslySetInnerHTML={{ __html: landingExampleHtml }}
+          />
           <p className="text-2xl font-light">{packageJson.description}</p>
           <a
             href="/docs/getting-started"

packages/docs-new/src/react.d.ts

@@ -0,0 +1,4 @@
+import "react"
+declare module "react" {
+  export function createContext<Value>(): Context<Value | undefined>
+}

packages/docs-new/src/vite-env.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="vite/client" />
 
-import "react"
-declare module "react" {
-  export function createContext<Value>(): Context<Value | undefined>
+declare module "*.md" {
+  import type { ComponentType } from "react"
+  export const attributes: Record<string, any>
+  export const html: string
+  export const ReactComponent: ComponentType
 }

packages/docs-new/vite.config.ts

@@ -1,12 +1,15 @@
-// @ts-expect-error
-import rehypePrism from "@mapbox/rehype-prism"
 import react from "@vitejs/plugin-react"
-import remarkFrontmatter from "remark-frontmatter"
+import MarkdownIt from "markdown-it"
+import prism from "markdown-it-prism"
+import { createRequire } from "node:module"
 import { defineConfig } from "vite"
+import type * as markdownType from "vite-plugin-markdown"
 import ssr from "vite-plugin-ssr/plugin"
-import xdm from "xdm/rollup.js"
 import { preval } from "./plugins/preval"
 
+const require = createRequire(import.meta.url)
+const markdown: typeof markdownType = require("vite-plugin-markdown")
+
 export default defineConfig({
   build: {
     target: ["node16", "chrome89", "firefox89"],
@@ -14,9 +17,12 @@ export default defineConfig({
   plugins: [
     ssr(),
     react(),
-    xdm({
-      remarkPlugins: [remarkFrontmatter],
-      rehypePlugins: [rehypePrism],
+    markdown.default({
+      mode: [markdown.Mode.HTML],
+      markdownIt: new MarkdownIt({
+        html: true,
+        linkify: true,
+      }).use(prism),
     }),
     preval(),
   ],