use markdown without mdx

2022-01-02 21:46:41 -06:00
parent 7943e6c672
commit 6d6293042e
6 changed files with 149 additions and 23 deletions
--- a/packages/docs-new/package.json
+++ b/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"
  }
 }
--- a/packages/docs-new/src/pages/index.page.tsx
+++ b/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"
--- a/packages/docs-new/src/react.d.ts
+++ b/packages/docs-new/src/react.d.ts
@@ -0,0 +1,4 @@
+import "react"
+declare module "react" {
+  export function createContext<Value>(): Context<Value | undefined>
+}
--- a/packages/docs-new/src/vite-env.d.ts
+++ b/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
 }
--- a/packages/docs-new/vite.config.ts
+++ b/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(),
  ],
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -118,6 +118,7 @@ importers:
      '@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
@@ -128,6 +129,8 @@ importers:
      esno: ^0.13.0
      express: ^4.17.2
      gray-matter: ^4.0.3
+      markdown-it: ^12.3.0
+      markdown-it-prism: ^2.2.1
      postcss: ^8.4.5
      reacord: workspace:*
      react: ^18.0.0-rc.0
@@ -136,13 +139,12 @@ importers:
      react-head: ^3.4.0
      react-router: ^6.2.1
      react-router-dom: ^6.2.1
-      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
+      vite-plugin-markdown: ^2.0.2
      vite-plugin-ssr: ^0.3.42
-      xdm: ^3.3.1
    dependencies:
      '@heroicons/react': 1.0.5_react@18.0.0-rc.0
      '@reach/rect': 0.16.0_757a802188413a36d4f24237d13b8e90
@@ -162,6 +164,7 @@ importers:
      '@tailwindcss/typography': 0.5.0_tailwindcss@3.0.8
      '@types/compression': 1.7.2
      '@types/express': 4.17.13
+      '@types/markdown-it': 12.2.3
      '@types/node': 17.0.5
      '@types/react': 17.0.38
      '@types/react-dom': 17.0.11
@@ -169,13 +172,17 @@ importers:
      autoprefixer: 10.4.1_postcss@8.4.5
      compression: 1.7.4
      esno: 0.13.0_typescript@4.5.4
+      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_cefe482e8d38053bbf3d5815e0c551b3
+      type-fest: 2.8.0
      typescript: 4.5.4
      vite: 2.7.10
-      xdm: 3.3.1
+      vite-plugin-markdown: 2.0.2_vite@2.7.10
+
+  packages/docs-new/dist/server:
+    specifiers: {}

  packages/reacord:
    specifiers:
@@ -1474,6 +1481,10 @@ packages:
    dependencies:
      '@types/node': 17.0.5

+  /@types/linkify-it/3.0.2:
+    resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
+    dev: true
+
  /@types/lodash-es/4.17.5:
    resolution: {integrity: sha512-SHBoI8/0aoMQWAgUHMQ599VM6ZiSKg8sh/0cFqqlQQMyY9uEplc0ULU5yQNzcvdR4ZKa0ey8+vFmahuRbOCT1A==}
    dependencies:
@@ -1484,6 +1495,13 @@ packages:
    resolution: {integrity: sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==}
    dev: true

+  /@types/markdown-it/12.2.3:
+    resolution: {integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==}
+    dependencies:
+      '@types/linkify-it': 3.0.2
+      '@types/mdurl': 1.0.2
+    dev: true
+
  /@types/mdast/3.0.10:
    resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==}
    dependencies:
@@ -1494,6 +1512,7 @@ packages:

  /@types/mdx/2.0.1:
    resolution: {integrity: sha512-JPEv4iAl0I+o7g8yVWDwk30es8mfVrjkvh5UeVR2sYPpZCK44vrAPsbJpIS+rJAUxLgaSAMKTEH5Vn5qd9XsrQ==}
+    dev: false

  /@types/mime/1.3.2:
    resolution: {integrity: sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==}
@@ -3353,6 +3372,18 @@ packages:
      esutils: 2.0.3
    dev: true

+  /dom-serializer/1.3.2:
+    resolution: {integrity: sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==}
+    dependencies:
+      domelementtype: 2.2.0
+      domhandler: 4.3.0
+      entities: 2.2.0
+    dev: true
+
+  /domelementtype/2.2.0:
+    resolution: {integrity: sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==}
+    dev: true
+
  /domexception/2.0.1:
    resolution: {integrity: sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==}
    engines: {node: '>=8'}
@@ -3360,6 +3391,21 @@ packages:
      webidl-conversions: 5.0.0
    dev: true

+  /domhandler/4.3.0:
+    resolution: {integrity: sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.2.0
+    dev: true
+
+  /domutils/2.8.0:
+    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
+    dependencies:
+      dom-serializer: 1.3.2
+      domelementtype: 2.2.0
+      domhandler: 4.3.0
+    dev: true
+
  /dot-prop/4.2.1:
    resolution: {integrity: sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==}
    engines: {node: '>=4'}
@@ -3444,6 +3490,14 @@ packages:
      ansi-colors: 4.1.1
    dev: true

+  /entities/2.1.0:
+    resolution: {integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==}
+    dev: true
+
+  /entities/2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+    dev: true
+
  /error-ex/1.3.2:
    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
    dependencies:
@@ -4460,6 +4514,12 @@ packages:
    engines: {node: '>= 0.6'}
    dev: false

+  /front-matter/4.0.2:
+    resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==}
+    dependencies:
+      js-yaml: 3.14.1
+    dev: true
+
  /fs-exists-sync/0.1.0:
    resolution: {integrity: sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=}
    engines: {node: '>=0.10.0'}
@@ -4978,6 +5038,15 @@ packages:
  /html-void-elements/2.0.1:
    resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}

+  /htmlparser2/6.1.0:
+    resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
+    dependencies:
+      domelementtype: 2.2.0
+      domhandler: 4.3.0
+      domutils: 2.8.0
+      entities: 2.2.0
+    dev: true
+
  /http-cache-semantics/4.1.0:
    resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}

@@ -6467,6 +6536,12 @@ packages:
  /lines-and-columns/1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}

+  /linkify-it/3.0.3:
+    resolution: {integrity: sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==}
+    dependencies:
+      uc.micro: 1.0.6
+    dev: true
+
  /listify/1.0.3:
    resolution: {integrity: sha512-083swF7iH7bx8666zdzBColpgEuy46HjN3r1isD4zV6Ix7FuHfb/2/WVnl4CH8hjuoWeFF7P5KkKNXUnJCFEJg==}
    engines: {node: '>= 0.4'}
@@ -6646,6 +6721,24 @@ packages:
    resolution: {integrity: sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==}
    engines: {node: '>=0.10.0'}

+  /markdown-it-prism/2.2.1:
+    resolution: {integrity: sha512-Lo7nQxI+x+MXQkeEXVNIer7fWCGasuEEMxYU63HJCxZNF8bfzWrXDHGsxv0a/qD3mL4sYHj0jUFT0h4fG8WQVw==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      prismjs: 1.25.0
+    dev: true
+
+  /markdown-it/12.3.0:
+    resolution: {integrity: sha512-T345UZZ6ejQWTjG6PSEHplzNy5m4kF6zvUpHVDv8Snl/pEU0OxIK0jGg8YLVNwJvT8E0YJC7/2UvssJDk/wQCQ==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 2.1.0
+      linkify-it: 3.0.3
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: true
+
  /marked/3.0.8:
    resolution: {integrity: sha512-0gVrAjo5m0VZSJb4rpL59K1unJAMb/hm8HRXqasD8VeC8m91ytDPMritgFSlKonfdt+rRYYpP/JfLxgIX8yoSw==}
    engines: {node: '>= 12'}
@@ -6746,6 +6839,7 @@ packages:
      unist-util-generated: 2.0.0
      unist-util-position: 4.0.1
      unist-util-visit: 4.1.0
+    dev: false

  /mdast-util-to-markdown/1.2.6:
    resolution: {integrity: sha512-doJZmTEGagHypWvJ8ltinmwUsT9ZaNgNIQW6Gl7jNdsI1QZkTHTimYW561Niy2s8AEPAqEgV0dIh2UOVlSXUJA==}
@@ -8666,6 +8760,7 @@ packages:
      '@types/mdast': 3.0.10
      mdast-util-to-hast: 12.1.0
      unified: 10.1.1
+    dev: false

  /remark-rehype/9.1.0:
    resolution: {integrity: sha512-oLa6YmgAYg19zb0ZrBACh40hpBLteYROaPLhBXzLgjqyHQrN+gVP9N/FJvfzuNNuzCutktkroXEZBrxAxKhh7Q==}
@@ -9801,6 +9896,10 @@ packages:
    hasBin: true
    dev: true

+  /uc.micro/1.0.6:
+    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
+    dev: true
+
  /unbox-primitive/1.0.1:
    resolution: {integrity: sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==}
    dependencies:
@@ -10223,6 +10322,17 @@ packages:
    resolution: {integrity: sha512-Jh4wanyvJ5QLDrVtw6VsTqT+1yISp1Fa+5v7VSwf5xyRiYZ0VeffMrSQFrQlt50D7g3CpO/aX9/X/SVWCVCa0w==}
    dev: false

+  /vite-plugin-markdown/2.0.2_vite@2.7.10:
+    resolution: {integrity: sha512-vNEd/BGpWg4A4h7Pa9bnp80yfi4CARtlPpw7Lx5aDliDoaJUsb7dv/uElc1PqL3H1vcSNbYmbS7N9AiuGoI5Eg==}
+    peerDependencies:
+      vite: ^2.0.0
+    dependencies:
+      front-matter: 4.0.2
+      htmlparser2: 6.1.0
+      markdown-it: 12.3.0
+      vite: 2.7.10
+    dev: true
+
  /vite-plugin-ssr/0.3.42_vite@2.7.10:
    resolution: {integrity: sha512-oKRv95/kMUmpIxObc+p9Pp6QKt7XYMGbbEwYaOo9AwVq3mOMDHRICHMlfivTuNavjQVoyMWTOPmShUdhVHqsew==}
    engines: {node: '>=12.19.0'}
@@ -10550,6 +10660,7 @@ packages:
      deasync: 0.1.24
    transitivePeerDependencies:
      - supports-color
+    dev: false

  /xml-name-validator/3.0.0:
    resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==}