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

dynamic meta

Browse Source
This commit is contained in:
MapleLeaf
2021-12-31 13:16:00 -06:00
committed by Darius
parent ba6f9b1698
commit 6e18aac5bd
7 changed files with 52 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/docs-new/src/routes.tsx → packages/docs-new/src/app.tsx
View File

@@ -1,14 +1,18 @@
import { description } from "reacord/package.json"
import { Meta, Title } from "react-head"
import { Route, Routes } from "react-router"
import { Link } from "react-router-dom"
import { DocumentPage } from "./document-page"
import { LandingPage } from "./landing-page"
export function AppRoutes() {
export function App() {
return (
<>
<Title>Reacord</Title>
<Meta name="description" content={description} />
<nav>
<Link to="/">Home</Link>
<Link to="docs/getting-started">Getting Started</Link>
<Link to="/">Home</Link>{" "}
<Link to="docs/getting-started">Getting Started</Link>{" "}
<Link to="docs/api">API Reference</Link>
</nav>
<Routes>

16
packages/docs-new/src/entry.client.tsx
View File

@@ -1,13 +1,13 @@
import { hydrate } from "react-dom"
import { HeadProvider } from "react-head"
import { BrowserRouter } from "react-router-dom"
import { Root } from "./root"
import { AppRoutes } from "./routes"
import { App } from "./app"
hydrate(
<Root>
<BrowserRouter>
<AppRoutes />
</BrowserRouter>
</Root>,
document,
<BrowserRouter>
<HeadProvider>
<App />
</HeadProvider>
</BrowserRouter>,
document.body,
)

29
packages/docs-new/src/entry.server.tsx
View File

@@ -1,13 +1,26 @@
import { renderToString } from "react-dom/server"
import { HeadProvider } from "react-head"
import { StaticRouter } from "react-router-dom/server"
import { Root } from "./root"
import { AppRoutes } from "./routes"
import { App } from "./app"
export async function render(url: string) {
return (
<Root>
<StaticRouter location={url}>
<AppRoutes />
</StaticRouter>
</Root>
const headTags: React.ReactElement[] = []
const app = renderToString(
<StaticRouter location={url}>
<HeadProvider headTags={headTags}>
<App />
</HeadProvider>
</StaticRouter>,
)
return /* HTML */ `
<!DOCTYPE html>
<head>
${renderToString(<>{headTags}</>)}
</head>
<body>
${app}
</body>
`
}

20
packages/docs-new/src/root.tsx
View File

@@ -1,20 +0,0 @@
export function Root({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="test description" />
<title>Reacord</title>
<script
type="module"
src={
import.meta.env.PROD ? "/entry.client.js" : "/src/entry.client.tsx"
}
/>
</head>
<body>{children}</body>
</html>
)
}

8
packages/docs-new/src/server.ts
View File

@@ -1,7 +1,6 @@
import compression from "compression"
import express, { Router } from "express"
import { resolve } from "node:path"
import { renderToString } from "react-dom/server"
import { createServer as createViteServer } from "vite"
import type * as entryModule from "./entry.server"
@@ -20,10 +19,7 @@ async function createDevelopmentRouter() {
"/src/entry.server.tsx",
)) as typeof entryModule
const html = await vite.transformIndexHtml(
url,
renderToString(await render(url)),
)
const html = await vite.transformIndexHtml(url, await render(url))
res.status(200).set({ "Content-Type": "text/html" }).end(html)
} catch (error: any) {
@@ -47,7 +43,7 @@ function createProductionRouter() {
res
.status(200)
.set({ "Content-Type": "text/html" })
.end(renderToString(await render(req.originalUrl)))
.end(await render(req.originalUrl))
} catch (error: any) {
console.error(error)
res.status(500).end(error.stack || error.message)