markdown parsing with frontmatter and syntax highlight

packages/docs-new/src/helpers/markdown.ts

@@ -1,15 +1,15 @@
+import grayMatter from "gray-matter"
+import MarkdownIt from "markdown-it"
+import prism from "markdown-it-prism"
 import { readFile } from "node:fs/promises"
-import rehypeStringify from "rehype-stringify"
-import remarkParse from "remark-parse"
-import remarkRehype from "remark-rehype"
-import { unified } from "unified"
 
-const processor = unified()
-  .use(remarkParse)
-  .use(remarkRehype)
-  .use(rehypeStringify)
+const renderer = new MarkdownIt({
+  html: true,
+  linkify: true,
+}).use(prism)
 
 export async function renderMarkdownFile(filePath: string) {
-  const result = await processor.process(await readFile(filePath))
-  return result.toString()
+  const { data, content } = grayMatter(await readFile(filePath, "utf8"))
+  const html = renderer.render(content)
+  return { html, data }
 }

packages/docs-new/src/main.tsx

@@ -1,12 +1,15 @@
 import compression from "compression"
+import type { Request } from "express"
 import express from "express"
 import httpTerminator from "http-terminator"
 import pino from "pino"
 import pinoHttp from "pino-http"
 import * as React from "react"
+import { renderMarkdownFile } from "./helpers/markdown"
 import { sendJsx } from "./helpers/send-jsx"
 import { serveFile } from "./helpers/serve-file"
 import { serveTailwindCss } from "./helpers/tailwind"
+import DocsPage from "./pages/docs"
 import { Landing } from "./pages/landing"
 
 const logger = pino()
@@ -22,12 +25,22 @@ const app = express()
     serveFile(new URL("./styles/prism-theme.css", import.meta.url).pathname),
   )
 
-  .get("/", (req, res) => {
-    sendJsx(res, <Landing />)
+  .get("/docs/*", async (req: Request<{ 0: string }>, res) => {
+    const { html, data } = await renderMarkdownFile(
+      `src/docs/${req.params[0]}.md`,
+    )
+    sendJsx(
+      res,
+      <DocsPage
+        title={data.title}
+        description={data.description}
+        html={html}
+      />,
+    )
   })
 
-  .get("/docs/:docPath+", (req: Request<{ docPath: string }>, res) => {
-    res.send("doc: " + req.params.docPath)
+  .get("/", (req, res) => {
+    sendJsx(res, <Landing />)
   })
 
 const server = app.listen(port, () => {

packages/docs-new/src/pages/landing.tsx

@@ -5,7 +5,7 @@ import { renderMarkdownFile } from "../helpers/markdown"
 import { Html } from "../html"
 import { maxWidthContainer } from "../styles/components"
 
-const exampleHtml = await renderMarkdownFile(
+const landingExample = await renderMarkdownFile(
   new URL("../components/landing-example.md", import.meta.url).pathname,
 )
 
@@ -21,7 +21,7 @@ export function Landing() {
             <h1 className="text-6xl font-light">reacord</h1>
             <section
               className="mx-auto text-sm sm:text-base"
-              dangerouslySetInnerHTML={{ __html: exampleHtml }}
+              dangerouslySetInnerHTML={{ __html: landingExample.html }}
             />
             <p className="text-2xl font-light">{packageJson.description}</p>
             <a