From 83405a92d7c788b2be19723c29261d29629cdc5f Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Mon, 3 Jan 2022 01:44:55 -0600
Subject: [PATCH] mostly rendered landing page

---
 .../src/{docs => components}/landing-example.md   |  0
 packages/docs-new/src/helpers/markdown.ts         | 15 +++++++++++++++
 packages/docs-new/src/helpers/serve-file.ts       |  5 +++++
 packages/docs-new/src/html.tsx                    |  1 +
 packages/docs-new/src/main.tsx                    | 11 +++++++++--
 packages/docs-new/src/pages/landing.tsx           |  8 ++++++--
 packages/docs-new/src/styles/tailwind.css         |  3 ---
 7 files changed, 36 insertions(+), 7 deletions(-)
 rename packages/docs-new/src/{docs => components}/landing-example.md (100%)
 create mode 100644 packages/docs-new/src/helpers/markdown.ts
 create mode 100644 packages/docs-new/src/helpers/serve-file.ts
 delete mode 100644 packages/docs-new/src/styles/tailwind.css

diff --git a/packages/docs-new/src/docs/landing-example.md b/packages/docs-new/src/components/landing-example.md
similarity index 100%
rename from packages/docs-new/src/docs/landing-example.md
rename to packages/docs-new/src/components/landing-example.md
diff --git a/packages/docs-new/src/helpers/markdown.ts b/packages/docs-new/src/helpers/markdown.ts
new file mode 100644
index 0000000..c9490eb
--- /dev/null
+++ b/packages/docs-new/src/helpers/markdown.ts
@@ -0,0 +1,15 @@
+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)
+
+export async function renderMarkdownFile(filePath: string) {
+  const result = await processor.process(await readFile(filePath))
+  return result.toString()
+}
diff --git a/packages/docs-new/src/helpers/serve-file.ts b/packages/docs-new/src/helpers/serve-file.ts
new file mode 100644
index 0000000..63887a9
--- /dev/null
+++ b/packages/docs-new/src/helpers/serve-file.ts
@@ -0,0 +1,5 @@
+import type { RequestHandler } from "express"
+
+export function serveFile(path: string): RequestHandler {
+  return (req, res) => res.sendFile(path)
+}
diff --git a/packages/docs-new/src/html.tsx b/packages/docs-new/src/html.tsx
index ee14c85..00658c0 100644
--- a/packages/docs-new/src/html.tsx
+++ b/packages/docs-new/src/html.tsx
@@ -29,6 +29,7 @@ export function Html({
           rel="stylesheet"
         />
         <link href="/tailwind.css" rel="stylesheet" />
+        <link href="/prism-theme.css" rel="stylesheet" />
 
         <title>{title}</title>
       </head>
diff --git a/packages/docs-new/src/main.tsx b/packages/docs-new/src/main.tsx
index 638aa9e..5670d96 100644
--- a/packages/docs-new/src/main.tsx
+++ b/packages/docs-new/src/main.tsx
@@ -1,12 +1,14 @@
 import compression from "compression"
-import type { Request, Response } from "express"
+import type { Response } from "express"
 import express from "express"
+import httpTerminator from "http-terminator"
+import pino from "pino"
 import * as React from "react"
 import { renderToStaticMarkup } from "react-dom/server.js"
+import { serveFile } from "./helpers/serve-file"
 import { serveTailwindCss } from "./helpers/tailwind"
 import { Landing } from "./pages/landing"
 
-const projectRoot = new URL("..", import.meta.url).pathname
 const logger = pino()
 const port = process.env.PORT || 3000
 
@@ -19,6 +21,11 @@ const app = express()
   .use(compression())
   .get("/tailwind.css", serveTailwindCss())
 
+  .get(
+    "/prism-theme.css",
+    serveFile(new URL("./styles/prism-theme.css", import.meta.url).pathname),
+  )
+
   .get("/", (req, res) => {
     sendJsx(res, <Landing />)
   })
diff --git a/packages/docs-new/src/pages/landing.tsx b/packages/docs-new/src/pages/landing.tsx
index bdf763f..728ad53 100644
--- a/packages/docs-new/src/pages/landing.tsx
+++ b/packages/docs-new/src/pages/landing.tsx
@@ -1,9 +1,14 @@
 import packageJson from "reacord/package.json"
 import React from "react"
 import { MainNavigation } from "../components/main-navigation"
+import { renderMarkdownFile } from "../helpers/markdown"
 import { Html } from "../html"
 import { maxWidthContainer } from "../styles/components"
 
+const exampleHtml = await renderMarkdownFile(
+  new URL("../components/landing-example.md", import.meta.url).pathname,
+)
+
 export function Landing() {
   return (
     <Html>
@@ -16,8 +21,7 @@ export function Landing() {
             <h1 className="text-6xl font-light">reacord</h1>
             <section
               className="mx-auto text-sm sm:text-base"
-              // todo
-              // dangerouslySetInnerHTML={{ __html: landingExampleHtml }}
+              dangerouslySetInnerHTML={{ __html: exampleHtml }}
             />
             <p className="text-2xl font-light">{packageJson.description}</p>
             <a
diff --git a/packages/docs-new/src/styles/tailwind.css b/packages/docs-new/src/styles/tailwind.css
deleted file mode 100644
index b5c61c9..0000000
--- a/packages/docs-new/src/styles/tailwind.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;