kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mostly rendered landing page

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

0
packages/docs-new/src/docs/landing-example.md → packages/docs-new/src/components/landing-example.md
View File

15
packages/docs-new/src/helpers/markdown.ts Normal file
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()
}

5
packages/docs-new/src/helpers/serve-file.ts Normal file
View File

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

1
packages/docs-new/src/html.tsx
View File

@@ -29,6 +29,7 @@ export function Html({
rel="stylesheet" rel="stylesheet"
/> />
<link href="/tailwind.css" rel="stylesheet" /> <link href="/tailwind.css" rel="stylesheet" />
<link href="/prism-theme.css" rel="stylesheet" />
<title>{title}</title> <title>{title}</title>
</head> </head>

11
packages/docs-new/src/main.tsx
View File

@@ -1,12 +1,14 @@
import compression from "compression" import compression from "compression"
import type { Request, Response } from "express" import type { Response } from "express"
import express from "express" import express from "express"
import httpTerminator from "http-terminator"
import pino from "pino"
import * as React from "react" import * as React from "react"
import { renderToStaticMarkup } from "react-dom/server.js" import { renderToStaticMarkup } from "react-dom/server.js"
import { serveFile } from "./helpers/serve-file"
import { serveTailwindCss } from "./helpers/tailwind" import { serveTailwindCss } from "./helpers/tailwind"
import { Landing } from "./pages/landing" import { Landing } from "./pages/landing"
const projectRoot = new URL("..", import.meta.url).pathname
const logger = pino() const logger = pino()
const port = process.env.PORT || 3000 const port = process.env.PORT || 3000
@@ -19,6 +21,11 @@ const app = express()
.use(compression()) .use(compression())
.get("/tailwind.css", serveTailwindCss()) .get("/tailwind.css", serveTailwindCss())
.get(
"/prism-theme.css",
serveFile(new URL("./styles/prism-theme.css", import.meta.url).pathname),
)
.get("/", (req, res) => { .get("/", (req, res) => {
sendJsx(res, <Landing />) sendJsx(res, <Landing />)
}) })

8
packages/docs-new/src/pages/landing.tsx
View File

@@ -1,9 +1,14 @@
import packageJson from "reacord/package.json" import packageJson from "reacord/package.json"
import React from "react" import React from "react"
import { MainNavigation } from "../components/main-navigation" import { MainNavigation } from "../components/main-navigation"
import { renderMarkdownFile } from "../helpers/markdown"
import { Html } from "../html" import { Html } from "../html"
import { maxWidthContainer } from "../styles/components" import { maxWidthContainer } from "../styles/components"
const exampleHtml = await renderMarkdownFile(
new URL("../components/landing-example.md", import.meta.url).pathname,
)
export function Landing() { export function Landing() {
return ( return (
<Html> <Html>
@@ -16,8 +21,7 @@ export function Landing() {
<h1 className="text-6xl font-light">reacord</h1> <h1 className="text-6xl font-light">reacord</h1>
<section <section
className="mx-auto text-sm sm:text-base" className="mx-auto text-sm sm:text-base"
// todo dangerouslySetInnerHTML={{ __html: exampleHtml }}
// dangerouslySetInnerHTML={{ __html: landingExampleHtml }}
/> />
<p className="text-2xl font-light">{packageJson.description}</p> <p className="text-2xl font-light">{packageJson.description}</p>
<a <a

3
packages/docs-new/src/styles/tailwind.css
View File

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