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"
/>
+
{title}
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, )
})
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 (
@@ -16,8 +21,7 @@ export function Landing() {
reacord
{packageJson.description}