decentralize asset transformers
This commit is contained in:
MapleLeaf
@@ -1,67 +0,0 @@
|
||||
import type { RequestHandler } from "express"
|
||||
import express from "express"
|
||||
import { createHash } from "node:crypto"
|
||||
import { mkdir, rm } from "node:fs/promises"
|
||||
import { join, parse } from "node:path"
|
||||
import { Promisable } from "type-fest"
|
||||
import { ensureWrite, normalizeAsFilePath } from "../helpers/filesystem.js"
|
||||
|
||||
export type Asset = {
|
||||
inputFile: string
|
||||
outputFile: string
|
||||
url: string
|
||||
content: string
|
||||
}
|
||||
|
||||
export type AssetTransformer = {
|
||||
transform: (inputFile: string) => Promise<AssetTransformResult | undefined>
|
||||
}
|
||||
|
||||
export type AssetTransformResult = {
|
||||
content: string
|
||||
type: string
|
||||
}
|
||||
|
||||
export class AssetBuilder {
|
||||
private constructor(
|
||||
private cacheFolder: string,
|
||||
private transformers: AssetTransformer[],
|
||||
) {}
|
||||
|
||||
static async create(cacheFolder: string, transformers: AssetTransformer[]) {
|
||||
if (process.env.NODE_ENV !== "production") {
|
||||
await rm(cacheFolder, { recursive: true }).catch(() => {})
|
||||
}
|
||||
await mkdir(cacheFolder, { recursive: true })
|
||||
return new AssetBuilder(cacheFolder, transformers)
|
||||
}
|
||||
|
||||
async build(input: Promisable<string | URL>, name?: string): Promise<Asset> {
|
||||
const inputFile = normalizeAsFilePath(await input)
|
||||
const { content } = await this.transform(inputFile)
|
||||
|
||||
const hash = createHash("sha256").update(content).digest("hex").slice(0, 8)
|
||||
const parsedInputFile = parse(inputFile)
|
||||
const url = `/${name || parsedInputFile.name}.${hash}${parsedInputFile.ext}`
|
||||
|
||||
const outputFile = join(this.cacheFolder, url)
|
||||
await ensureWrite(outputFile, content)
|
||||
|
||||
return { inputFile, outputFile, url, content }
|
||||
}
|
||||
|
||||
middleware(): RequestHandler {
|
||||
return express.static(this.cacheFolder, {
|
||||
immutable: true,
|
||||
maxAge: "1y",
|
||||
})
|
||||
}
|
||||
|
||||
private async transform(inputFile: string) {
|
||||
for (const transformer of this.transformers) {
|
||||
const result = await transformer.transform(inputFile)
|
||||
if (result) return result
|
||||
}
|
||||
throw new Error(`No transformers found for ${inputFile}`)
|
||||
}
|
||||
}
|
||||
96
packages/docs/src/asset-builder/asset-builder.tsx
Normal file
96
packages/docs/src/asset-builder/asset-builder.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import type { RequestHandler } from "express"
|
||||
import express from "express"
|
||||
import { createHash } from "node:crypto"
|
||||
import { mkdir, rm } from "node:fs/promises"
|
||||
import { join, parse } from "node:path"
|
||||
import React from "react"
|
||||
import { renderToStaticMarkup } from "react-dom/server"
|
||||
import ssrPrepass from "react-ssr-prepass"
|
||||
import { Promisable } from "type-fest"
|
||||
import { ensureWrite, normalizeAsFilePath } from "../helpers/filesystem.js"
|
||||
import { AssetBuilderProvider } from "./asset-builder-context.js"
|
||||
|
||||
export type AssetTransformer<Asset> = {
|
||||
transform: (context: AssetTransformContext) => Promise<Asset>
|
||||
}
|
||||
|
||||
export class AssetBuilder {
|
||||
private constructor(private cacheFolder: string) {}
|
||||
|
||||
static async create(cacheFolder: string) {
|
||||
if (process.env.NODE_ENV !== "production") {
|
||||
await rm(cacheFolder, { recursive: true }).catch(() => {})
|
||||
}
|
||||
await mkdir(cacheFolder, { recursive: true })
|
||||
return new AssetBuilder(cacheFolder)
|
||||
}
|
||||
|
||||
async build<Asset>(
|
||||
input: Promisable<string | URL>,
|
||||
transformer: AssetTransformer<Asset>,
|
||||
alias?: string,
|
||||
): Promise<Asset> {
|
||||
const inputFile = normalizeAsFilePath(await input)
|
||||
// TODO: cache assets by inputFile in production
|
||||
|
||||
return transformer.transform(
|
||||
new AssetTransformContext({
|
||||
inputFile,
|
||||
cacheFolder: this.cacheFolder,
|
||||
alias: alias || parse(inputFile).name,
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
async render(element: React.ReactElement) {
|
||||
element = (
|
||||
<AssetBuilderProvider value={this}>
|
||||
<React.Suspense fallback={<></>}>{element}</React.Suspense>
|
||||
</AssetBuilderProvider>
|
||||
)
|
||||
await ssrPrepass(element)
|
||||
return `<!DOCTYPE html>\n${renderToStaticMarkup(element)}`
|
||||
}
|
||||
|
||||
middleware(): RequestHandler {
|
||||
return express.static(this.cacheFolder, {
|
||||
immutable: true,
|
||||
maxAge: "1y",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export type AssetTransformOptions = {
|
||||
inputFile: string
|
||||
cacheFolder: string
|
||||
alias: string
|
||||
}
|
||||
|
||||
export class AssetTransformContext {
|
||||
constructor(private options: AssetTransformOptions) {}
|
||||
|
||||
get inputFile() {
|
||||
return this.options.inputFile
|
||||
}
|
||||
|
||||
get cacheFolder() {
|
||||
return this.options.cacheFolder
|
||||
}
|
||||
|
||||
get alias() {
|
||||
return this.options.alias
|
||||
}
|
||||
|
||||
getOutputFileName(content: string) {
|
||||
const { ext } = parse(this.inputFile)
|
||||
const hash = createHash("sha256").update(content).digest("hex").slice(0, 8)
|
||||
return `${this.alias}.${hash}${ext}`
|
||||
}
|
||||
|
||||
async writeOutputFile(content: string) {
|
||||
const outputFileName = this.getOutputFileName(content)
|
||||
const outputFile = join(this.cacheFolder, outputFileName)
|
||||
await ensureWrite(outputFile, content)
|
||||
return { outputFileName, outputFile }
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,15 @@
|
||||
import React, { ReactNode } from "react"
|
||||
import { normalizeAsFilePath } from "../helpers/filesystem.js"
|
||||
import { useAssetBuilder } from "./asset-builder-context.js"
|
||||
import { Asset, AssetBuilder } from "./asset-builder.js"
|
||||
import { AssetBuilder, AssetTransformer } from "./asset-builder.js"
|
||||
|
||||
type AssetState =
|
||||
| { status: "building"; promise: Promise<unknown> }
|
||||
| { status: "built"; asset: Asset }
|
||||
| { status: "built"; asset: unknown }
|
||||
|
||||
const cache = new Map<string, AssetState>()
|
||||
|
||||
function useAssetBuild(
|
||||
function useAssetBuild<Asset>(
|
||||
cacheKey: string,
|
||||
build: (builder: AssetBuilder) => Promise<Asset>,
|
||||
) {
|
||||
@@ -29,33 +29,37 @@ function useAssetBuild(
|
||||
throw state.promise
|
||||
}
|
||||
|
||||
return state.asset
|
||||
return state.asset as Asset
|
||||
}
|
||||
|
||||
export function LocalFileAsset({
|
||||
export function LocalFileAsset<Asset>({
|
||||
from,
|
||||
as: name,
|
||||
using: transformer,
|
||||
as: alias,
|
||||
children,
|
||||
}: {
|
||||
from: string | URL
|
||||
using: AssetTransformer<Asset>
|
||||
as?: string
|
||||
children: (url: Asset) => ReactNode
|
||||
}) {
|
||||
const inputFile = normalizeAsFilePath(from)
|
||||
|
||||
const asset = useAssetBuild(inputFile, (builder) => {
|
||||
return builder.build(inputFile, name)
|
||||
return builder.build(inputFile, transformer, alias)
|
||||
})
|
||||
|
||||
return <>{children(asset)}</>
|
||||
}
|
||||
|
||||
export function ModuleAsset({
|
||||
export function ModuleAsset<Asset>({
|
||||
from,
|
||||
using: transformer,
|
||||
as: name,
|
||||
children,
|
||||
}: {
|
||||
from: string
|
||||
using: AssetTransformer<Asset>
|
||||
as?: string
|
||||
children: (url: Asset) => ReactNode
|
||||
}) {
|
||||
@@ -63,7 +67,7 @@ export function ModuleAsset({
|
||||
|
||||
const asset = useAssetBuild(cacheKey, async (builder) => {
|
||||
const inputFile = await import.meta.resolve!(from)
|
||||
return await builder.build(inputFile, name)
|
||||
return await builder.build(inputFile, transformer, name)
|
||||
})
|
||||
|
||||
return <>{children(asset)}</>
|
||||
|
||||
29
packages/docs/src/asset-builder/markdown-transformer.ts
Normal file
29
packages/docs/src/asset-builder/markdown-transformer.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import grayMatter from "gray-matter"
|
||||
import MarkdownIt from "markdown-it"
|
||||
import prism from "markdown-it-prism"
|
||||
import { readFile } from "node:fs/promises"
|
||||
import type { AssetTransformer } from "./asset-builder.jsx"
|
||||
|
||||
const renderer = new MarkdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
}).use(prism)
|
||||
|
||||
export type MarkdownAsset = {
|
||||
content: { __html: string }
|
||||
data: Record<string, any>
|
||||
}
|
||||
|
||||
export const markdownTransformer: AssetTransformer<MarkdownAsset> = {
|
||||
async transform(context) {
|
||||
const { data, content } = grayMatter(
|
||||
await readFile(context.inputFile, "utf8"),
|
||||
)
|
||||
const html = renderer.render(content)
|
||||
|
||||
return {
|
||||
content: { __html: html },
|
||||
data,
|
||||
}
|
||||
},
|
||||
}
|
||||
26
packages/docs/src/asset-builder/script-transformer.ts
Normal file
26
packages/docs/src/asset-builder/script-transformer.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { build } from "esbuild"
|
||||
import type { AssetTransformer } from "./asset-builder.jsx"
|
||||
|
||||
type ScriptAsset = {
|
||||
url: string
|
||||
}
|
||||
|
||||
export const scriptTransformer: AssetTransformer<ScriptAsset> = {
|
||||
async transform(context) {
|
||||
const scriptBuild = await build({
|
||||
entryPoints: [context.inputFile],
|
||||
bundle: true,
|
||||
target: ["chrome89", "firefox89"],
|
||||
format: "esm",
|
||||
write: false,
|
||||
minify: process.env.NODE_ENV === "production",
|
||||
})
|
||||
|
||||
const content = scriptBuild.outputFiles[0]!.text
|
||||
const { outputFileName } = await context.writeOutputFile(content)
|
||||
|
||||
return {
|
||||
url: "/" + outputFileName,
|
||||
}
|
||||
},
|
||||
}
|
||||
26
packages/docs/src/asset-builder/stylesheet-transformer.ts
Normal file
26
packages/docs/src/asset-builder/stylesheet-transformer.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import autoprefixer from "autoprefixer"
|
||||
import cssnano from "cssnano"
|
||||
import { readFile } from "node:fs/promises"
|
||||
import type { AcceptedPlugin } from "postcss"
|
||||
import postcss from "postcss"
|
||||
import tailwindcss from "tailwindcss"
|
||||
import type { AssetTransformer } from "./asset-builder.jsx"
|
||||
|
||||
export type StylesheetAsset = { url: string }
|
||||
|
||||
export const stylesheetTransformer: AssetTransformer<StylesheetAsset> = {
|
||||
async transform(context) {
|
||||
const plugins: AcceptedPlugin[] = [tailwindcss, autoprefixer]
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
plugins.push(cssnano)
|
||||
}
|
||||
|
||||
const result = await postcss(plugins).process(
|
||||
await readFile(context.inputFile),
|
||||
{ from: context.inputFile },
|
||||
)
|
||||
|
||||
const { outputFileName } = await context.writeOutputFile(result.css)
|
||||
return { url: "/" + outputFileName }
|
||||
},
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import { build } from "esbuild"
|
||||
import type { AssetTransformer } from "./asset-builder.js"
|
||||
|
||||
export const transformEsbuild: AssetTransformer = {
|
||||
async transform(inputFile) {
|
||||
if (/\.[jt]sx?$/.test(inputFile)) {
|
||||
const scriptBuild = await build({
|
||||
entryPoints: [inputFile],
|
||||
bundle: true,
|
||||
target: ["chrome89", "firefox89"],
|
||||
format: "esm",
|
||||
write: false,
|
||||
minify: process.env.NODE_ENV === "production",
|
||||
})
|
||||
|
||||
return {
|
||||
content: scriptBuild.outputFiles[0]!.text,
|
||||
type: "text/javascript",
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import grayMatter from "gray-matter"
|
||||
import MarkdownIt from "markdown-it"
|
||||
import prism from "markdown-it-prism"
|
||||
import { readFile } from "node:fs/promises"
|
||||
import type { AssetTransformer } from "./asset-builder.js"
|
||||
|
||||
const renderer = new MarkdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
}).use(prism)
|
||||
|
||||
export const transformMarkdown: AssetTransformer = {
|
||||
async transform(inputFile) {
|
||||
if (!/\.md$/.test(inputFile)) return
|
||||
|
||||
const { data, content } = grayMatter(await readFile(inputFile, "utf8"))
|
||||
const html = renderer.render(content)
|
||||
|
||||
return {
|
||||
content: html,
|
||||
type: "text/html",
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import autoprefixer from "autoprefixer"
|
||||
import cssnano from "cssnano"
|
||||
import { readFile } from "node:fs/promises"
|
||||
import type { AcceptedPlugin } from "postcss"
|
||||
import postcss from "postcss"
|
||||
import tailwindcss from "tailwindcss"
|
||||
import type { AssetTransformer } from "./asset-builder.js"
|
||||
|
||||
export const transformPostCss: AssetTransformer = {
|
||||
async transform(inputFile) {
|
||||
if (!/\.css$/.test(inputFile)) return
|
||||
|
||||
const plugins: AcceptedPlugin[] = [tailwindcss, autoprefixer]
|
||||
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
plugins.push(cssnano)
|
||||
}
|
||||
|
||||
const result = await postcss(plugins).process(await readFile(inputFile), {
|
||||
from: inputFile,
|
||||
})
|
||||
|
||||
return {
|
||||
content: result.css,
|
||||
type: "text/css",
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
import { LocalFileAsset } from "../asset-builder/asset.js"
|
||||
import { markdownTransformer } from "../asset-builder/markdown-transformer.js"
|
||||
import { Html } from "../html.js"
|
||||
import { AppLink } from "../navigation/app-link"
|
||||
import { guideLinks } from "../navigation/guide-links"
|
||||
import { MainNavigation } from "../navigation/main-navigation"
|
||||
@@ -8,32 +10,47 @@ import { docsProseClass, linkClass, maxWidthContainer } from "../ui/components"
|
||||
|
||||
export function GuidePage({ url }: { url: string }) {
|
||||
return (
|
||||
<>
|
||||
<header className="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex">
|
||||
<div className={maxWidthContainer}>
|
||||
<MainNavigation />
|
||||
</div>
|
||||
</header>
|
||||
<main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
|
||||
<nav className="w-48 sticky top-24 hidden md:block">
|
||||
<h2 className="text-2xl">Guides</h2>
|
||||
<ul className="mt-3 flex flex-col gap-2 items-start">
|
||||
{guideLinks.map((link) => (
|
||||
<li key={link.to}>
|
||||
<AppLink {...link} className={linkClass} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
<LocalFileAsset from={new URL(`${url}.md`, import.meta.url)}>
|
||||
{(asset) => (
|
||||
<section
|
||||
className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}
|
||||
dangerouslySetInnerHTML={{ __html: asset.content }}
|
||||
/>
|
||||
)}
|
||||
</LocalFileAsset>
|
||||
</main>
|
||||
</>
|
||||
<LocalFileAsset
|
||||
from={new URL(`${url}.md`, import.meta.url)}
|
||||
using={markdownTransformer}
|
||||
>
|
||||
{(asset) => (
|
||||
<Html title={asset.data.title} description={asset.data.description}>
|
||||
<Header />
|
||||
<Body content={asset.content} />
|
||||
</Html>
|
||||
)}
|
||||
</LocalFileAsset>
|
||||
)
|
||||
}
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<header className="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex">
|
||||
<div className={maxWidthContainer}>
|
||||
<MainNavigation />
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
function Body({ content }: { content: { __html: string } }) {
|
||||
return (
|
||||
<main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
|
||||
<nav className="w-48 sticky top-24 hidden md:block">
|
||||
<h2 className="text-2xl">Guides</h2>
|
||||
<ul className="mt-3 flex flex-col gap-2 items-start">
|
||||
{guideLinks.map((link) => (
|
||||
<li key={link.to}>
|
||||
<AppLink {...link} className={linkClass} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
<section
|
||||
className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}
|
||||
dangerouslySetInnerHTML={content}
|
||||
/>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,16 +2,19 @@ import packageJson from "reacord/package.json"
|
||||
import type { ReactNode } from "react"
|
||||
import React from "react"
|
||||
import { LocalFileAsset, ModuleAsset } from "./asset-builder/asset.js"
|
||||
import { scriptTransformer } from "./asset-builder/script-transformer.js"
|
||||
import { stylesheetTransformer } from "./asset-builder/stylesheet-transformer.js"
|
||||
|
||||
export function Html({
|
||||
title = "Reacord",
|
||||
title: titleProp,
|
||||
description = packageJson.description,
|
||||
children,
|
||||
}: {
|
||||
title?: string
|
||||
title: string
|
||||
description?: string
|
||||
children: ReactNode
|
||||
}) {
|
||||
const title = [titleProp, "Reacord"].filter(Boolean).join(" | ")
|
||||
return (
|
||||
<html lang="en" className="bg-slate-900 text-slate-100">
|
||||
<head>
|
||||
@@ -31,17 +34,27 @@ export function Html({
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
|
||||
/>
|
||||
|
||||
<ModuleAsset from="tailwindcss/tailwind.css">
|
||||
<ModuleAsset
|
||||
from="tailwindcss/tailwind.css"
|
||||
using={stylesheetTransformer}
|
||||
>
|
||||
{(asset) => <link rel="stylesheet" href={asset.url} />}
|
||||
</ModuleAsset>
|
||||
|
||||
<LocalFileAsset from={new URL("ui/prism-theme.css", import.meta.url)}>
|
||||
<LocalFileAsset
|
||||
from={new URL("ui/prism-theme.css", import.meta.url)}
|
||||
using={stylesheetTransformer}
|
||||
>
|
||||
{(asset) => <link rel="stylesheet" href={asset.url} />}
|
||||
</LocalFileAsset>
|
||||
|
||||
<title>{title}</title>
|
||||
|
||||
<ModuleAsset from="alpinejs/dist/cdn.js" as="alpine">
|
||||
<ModuleAsset
|
||||
from="alpinejs/dist/cdn.js"
|
||||
as="alpine"
|
||||
using={scriptTransformer}
|
||||
>
|
||||
{(asset) => <script defer src={asset.url} />}
|
||||
</ModuleAsset>
|
||||
</head>
|
||||
|
||||
@@ -1,35 +1,42 @@
|
||||
import packageJson from "reacord/package.json"
|
||||
import React from "react"
|
||||
import { LocalFileAsset } from "../asset-builder/asset.js"
|
||||
import { markdownTransformer } from "../asset-builder/markdown-transformer.js"
|
||||
import { Html } from "../html.js"
|
||||
import { MainNavigation } from "../navigation/main-navigation"
|
||||
import { maxWidthContainer } from "../ui/components"
|
||||
|
||||
export function Landing() {
|
||||
return (
|
||||
<div className="flex flex-col min-w-0 min-h-screen text-center">
|
||||
<header className={maxWidthContainer}>
|
||||
<MainNavigation />
|
||||
</header>
|
||||
<div className="px-4 pb-8 flex flex-1">
|
||||
<main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
|
||||
<h1 className="text-6xl font-light">reacord</h1>
|
||||
<LocalFileAsset from={new URL("landing-example.md", import.meta.url)}>
|
||||
{(asset) => (
|
||||
<section
|
||||
className="mx-auto text-sm sm:text-base"
|
||||
dangerouslySetInnerHTML={{ __html: asset.content }}
|
||||
/>
|
||||
)}
|
||||
</LocalFileAsset>
|
||||
<p className="text-2xl font-light">{packageJson.description}</p>
|
||||
<a
|
||||
href="/guides/getting-started"
|
||||
className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</main>
|
||||
<Html>
|
||||
<div className="flex flex-col min-w-0 min-h-screen text-center">
|
||||
<header className={maxWidthContainer}>
|
||||
<MainNavigation />
|
||||
</header>
|
||||
<div className="px-4 pb-8 flex flex-1">
|
||||
<main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
|
||||
<h1 className="text-6xl font-light">reacord</h1>
|
||||
<LocalFileAsset
|
||||
from={new URL("landing-example.md", import.meta.url)}
|
||||
using={markdownTransformer}
|
||||
>
|
||||
{(asset) => (
|
||||
<section
|
||||
className="mx-auto text-sm sm:text-base"
|
||||
dangerouslySetInnerHTML={asset.content}
|
||||
/>
|
||||
)}
|
||||
</LocalFileAsset>
|
||||
<p className="text-2xl font-light">{packageJson.description}</p>
|
||||
<a
|
||||
href="/guides/getting-started"
|
||||
className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,72 +1,38 @@
|
||||
import compression from "compression"
|
||||
import type { ErrorRequestHandler, Request, Response } from "express"
|
||||
import type { ErrorRequestHandler, Request } from "express"
|
||||
import express from "express"
|
||||
import Router from "express-promise-router"
|
||||
import PromiseRouter from "express-promise-router"
|
||||
import httpTerminator from "http-terminator"
|
||||
import pino from "pino"
|
||||
import pinoHttp from "pino-http"
|
||||
import * as React from "react"
|
||||
import { renderToStaticMarkup } from "react-dom/server.js"
|
||||
import ssrPrepass from "react-ssr-prepass"
|
||||
import { AssetBuilderProvider } from "./asset-builder/asset-builder-context.js"
|
||||
import { AssetBuilder } from "./asset-builder/asset-builder.js"
|
||||
import { transformEsbuild } from "./asset-builder/transform-esbuild.js"
|
||||
import { transformMarkdown } from "./asset-builder/transform-markdown.js"
|
||||
import { transformPostCss } from "./asset-builder/transform-postcss.js"
|
||||
import { fromProjectRoot } from "./constants"
|
||||
import { GuidePage } from "./guides/guide-page"
|
||||
import { renderMarkdownFile } from "./helpers/markdown"
|
||||
import { Html } from "./html.js"
|
||||
import { Landing } from "./landing/landing"
|
||||
|
||||
const logger = pino()
|
||||
const port = process.env.PORT || 3000
|
||||
|
||||
const assets = await AssetBuilder.create(fromProjectRoot(".asset-cache"), [
|
||||
transformEsbuild,
|
||||
transformPostCss,
|
||||
transformMarkdown,
|
||||
])
|
||||
|
||||
async function render(res: Response, element: React.ReactElement) {
|
||||
element = <React.Suspense fallback={<></>}>{element}</React.Suspense>
|
||||
await ssrPrepass(element)
|
||||
res.type("html").send(`<!DOCTYPE html>\n${renderToStaticMarkup(element)}`)
|
||||
}
|
||||
const builder = await AssetBuilder.create(fromProjectRoot(".asset-cache"))
|
||||
const logger = pino()
|
||||
|
||||
const errorHandler: ErrorRequestHandler = (error, request, response, next) => {
|
||||
response.status(500).send(error.message)
|
||||
logger.error(error)
|
||||
}
|
||||
|
||||
const router = Router()
|
||||
const router = PromiseRouter()
|
||||
.use(pinoHttp({ logger }))
|
||||
.use(compression())
|
||||
.use(assets.middleware())
|
||||
.use(builder.middleware())
|
||||
|
||||
.get("/guides/*", async (req: Request<{ 0: string }>, res) => {
|
||||
const { data } = await renderMarkdownFile(
|
||||
new URL(`guides/${req.params[0]}.md`, import.meta.url).pathname,
|
||||
)
|
||||
await render(
|
||||
res,
|
||||
<AssetBuilderProvider value={assets}>
|
||||
<Html title={`${data.title} | Reacord`} description={data.description}>
|
||||
<GuidePage url={req.params[0]} />
|
||||
</Html>
|
||||
</AssetBuilderProvider>,
|
||||
)
|
||||
res
|
||||
.type("html")
|
||||
.send(await builder.render(<GuidePage url={req.params[0]} />))
|
||||
})
|
||||
|
||||
.get("/", async (req, res) => {
|
||||
await render(
|
||||
res,
|
||||
<AssetBuilderProvider value={assets}>
|
||||
<Html>
|
||||
<Landing />
|
||||
</Html>
|
||||
</AssetBuilderProvider>,
|
||||
)
|
||||
res.type("html").send(await builder.render(<Landing />))
|
||||
})
|
||||
|
||||
.use(errorHandler)
|
||||
|
||||
Reference in New Issue
Block a user