Ditch mdx-bundler

Author: pomber

.gitpod.yml

@@ -0,0 +1,23 @@
+const { remarkCodeHike } = require("@code-hike/mdx")
+const theme = require("shiki/themes/nord.json")
+
+const withMDX = require("@next/mdx")({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [[remarkCodeHike, { theme }]],
+  },
+})
+
+module.exports = withMDX({
+  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
+
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/test",
+        permanent: false,
+      },
+    ]
+  },
+})

packages/mdx/next.config.js

@@ -0,0 +1,95 @@
+import { compile, runSync } from "@mdx-js/mdx"
+import * as runtime from "react/jsx-runtime.js"
+import fs from "fs"
+import { remarkCodeHike } from "../src/index"
+import { CH } from "../src/components"
+import theme from "shiki/themes/slack-dark.json"
+import Link from "next/link"
+
+export async function getServerSideProps({ params }) {
+  const files = await fs.promises.readdir("./tests/")
+
+  const tests = files
+    .filter(filename => filename.endsWith(".mdx"))
+    .map(filename => filename.slice(0, -4))
+
+  const { name = "test" } = params
+  const mdxSource = await fs.promises.readFile(
+    `./tests/${name}.mdx`,
+    "utf8"
+  )
+  try {
+    const props = {
+      tests,
+      current: name,
+      code: String(
+        await compile(mdxSource, {
+          outputFormat: "function-body",
+          remarkPlugins: [
+            [remarkCodeHike, { autoImport: false, theme }],
+          ],
+        })
+      ),
+    }
+    return { props }
+  } catch (e) {
+    console.error(
+      "getServerSideProps error",
+      JSON.stringify(e, null, 2)
+    )
+  }
+  return { props: { error: true, tests, current: name } }
+}
+
+export default function Page({ current, code, tests }) {
+  const { default: Content } = runSync(code, runtime)
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        gap: 8,
+        margin: "8px",
+      }}
+    >
+      <nav
+        style={{
+          background: "#fafafa",
+          borderRadius: 4,
+          padding: 16,
+          minWidth: 180,
+        }}
+      >
+        <ul style={{ margin: 0, padding: 0 }}>
+          {tests.map(test => (
+            <li key={test} style={{ listStyle: "none" }}>
+              <Link href={`/${encodeURIComponent(test)}`}>
+                <a
+                  style={{
+                    color: "black",
+                    textDecoration: "none",
+                    fontWeight:
+                      test === current ? "bold" : "normal",
+                  }}
+                >
+                  {test}
+                </a>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      <div
+        style={{
+          maxWidth: 900,
+          minWidth: 600,
+          background: "#fafafa",
+          borderRadius: 4,
+          padding: 16,
+        }}
+      >
+        <Content components={{ CH }} />
+      </div>
+    </div>
+  )
+}

packages/mdx/pages/[name].tsx

@@ -4,16 +4,16 @@ body > div:first-child,
 div#__next,
 div#__next > div {
   margin: 0;
-  height: 100%;
-  max-height: 100%;
-  display: flex;
-  flex-direction: column;
   font-family: sans-serif;
   background-color: #444;
+  /* height: 100%;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column; */
   /* --ch-scrollycoding-code-min-height: 500px;
   --ch-scrollycoding-sticker-width: 500px; */
 }
-
+/* 
 nav {
   height: 40px;
   overflow: hidden;
@@ -22,10 +22,10 @@ nav {
 main {
   flex: 1;
   overflow: auto;
-}
+} */
 
 /* main */
-
+/* 
 .columns {
   display: flex;
   min-height: 100%;
@@ -55,11 +55,9 @@ main {
   border-radius: 6px;
 }
 
-/* nav */
 
 nav {
   display: flex;
-  /* justify-content: space-evenly; */
   align-items: center;
   background-color: #222;
   color: #ccc;
@@ -100,18 +98,17 @@ nav .version {
 
 nav label {
   margin-right: 24px;
-}
+} */
 
-nav select {
+/* nav select {
   margin-left: 6px;
   border-radius: 4px;
   background-color: #fafafa;
   height: 24px;
-  /* overflow: hidden; */
-}
+} */
 
 /* result */
-
+/* 
 .result {
   min-width: 900px;
   width: 900px;
@@ -125,4 +122,4 @@ pre.shiki {
 .tailwind-font code {
   font-family: ui-monospace, SFMono-Regular, Consolas,
     "Liberation Mono", Menlo, monospace;
-}
+} */