From 04e6a15b55cca1930465b02b6b856ef162fbcaea Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Mon, 3 Jan 2022 02:33:53 -0600
Subject: [PATCH] markdown parsing with frontmatter and syntax highlight

---
 packages/docs-new/src/helpers/markdown.ts | 20 ++++++++++----------
 packages/docs-new/src/main.tsx            | 21 +++++++++++++++++----
 packages/docs-new/src/pages/landing.tsx   |  4 ++--
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/packages/docs-new/src/helpers/markdown.ts b/packages/docs-new/src/helpers/markdown.ts
index c9490eb..7839602 100644
--- a/packages/docs-new/src/helpers/markdown.ts
+++ b/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 }
 }
diff --git a/packages/docs-new/src/main.tsx b/packages/docs-new/src/main.tsx
index 7783125..fe98cb1 100644
--- a/packages/docs-new/src/main.tsx
+++ b/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, () => {
diff --git a/packages/docs-new/src/pages/landing.tsx b/packages/docs-new/src/pages/landing.tsx
index 728ad53..c44159a 100644
--- a/packages/docs-new/src/pages/landing.tsx
+++ b/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