mostly rendered landing page
This commit is contained in:
15
packages/docs-new/src/helpers/markdown.ts
Normal file
15
packages/docs-new/src/helpers/markdown.ts
Normal file
@@ -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()
|
||||
}
|
||||
5
packages/docs-new/src/helpers/serve-file.ts
Normal file
5
packages/docs-new/src/helpers/serve-file.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import type { RequestHandler } from "express"
|
||||
|
||||
export function serveFile(path: string): RequestHandler {
|
||||
return (req, res) => res.sendFile(path)
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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 />)
|
||||
})
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
Reference in New Issue
Block a user