mostly rendered landing page

This commit is contained in:
MapleLeaf
2022-01-03 01:44:55 -06:00
committed by Darius
parent 3b42f25e45
commit 83405a92d7
7 changed files with 36 additions and 7 deletions

View 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()
}

View File

@@ -0,0 +1,5 @@
import type { RequestHandler } from "express"
export function serveFile(path: string): RequestHandler {
return (req, res) => res.sendFile(path)
}

View File

@@ -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>

View File

@@ -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 />)
})

View File

@@ -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

View File

@@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;