From 6e18aac5bd26609bfea665a39f98815938145d55 Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Fri, 31 Dec 2021 13:16:00 -0600
Subject: [PATCH] dynamic meta
---
packages/docs-new/package.json | 1 +
packages/docs-new/src/{routes.tsx => app.tsx} | 10 +++++--
packages/docs-new/src/entry.client.tsx | 16 +++++-----
packages/docs-new/src/entry.server.tsx | 29 ++++++++++++++-----
packages/docs-new/src/root.tsx | 20 -------------
packages/docs-new/src/server.ts | 8 ++---
pnpm-lock.yaml | 13 +++++++++
7 files changed, 52 insertions(+), 45 deletions(-)
rename packages/docs-new/src/{routes.tsx => app.tsx} (58%)
delete mode 100644 packages/docs-new/src/root.tsx
diff --git a/packages/docs-new/package.json b/packages/docs-new/package.json
index 4af8a7a..556c893 100644
--- a/packages/docs-new/package.json
+++ b/packages/docs-new/package.json
@@ -12,6 +12,7 @@
"reacord": "workspace:*",
"react": "^17.0.2",
"react-dom": "^17.0.2",
+ "react-head": "^3.4.0",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1"
},
diff --git a/packages/docs-new/src/routes.tsx b/packages/docs-new/src/app.tsx
similarity index 58%
rename from packages/docs-new/src/routes.tsx
rename to packages/docs-new/src/app.tsx
index 930e4b7..4cdf098 100644
--- a/packages/docs-new/src/routes.tsx
+++ b/packages/docs-new/src/app.tsx
@@ -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 (
<>
+ Reacord
+
diff --git a/packages/docs-new/src/entry.client.tsx b/packages/docs-new/src/entry.client.tsx
index 2e604f3..640ac6a 100644
--- a/packages/docs-new/src/entry.client.tsx
+++ b/packages/docs-new/src/entry.client.tsx
@@ -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(
-
-
-
-
- ,
- document,
+
+
+
+
+ ,
+ document.body,
)
diff --git a/packages/docs-new/src/entry.server.tsx b/packages/docs-new/src/entry.server.tsx
index 88a03a9..7b07c8f 100644
--- a/packages/docs-new/src/entry.server.tsx
+++ b/packages/docs-new/src/entry.server.tsx
@@ -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 (
-
-
-
-
-
+ const headTags: React.ReactElement[] = []
+
+ const app = renderToString(
+
+
+
+
+ ,
)
+
+ return /* HTML */ `
+
+
+ ${renderToString(<>{headTags})}
+
+
+ ${app}
+
+ `
}
diff --git a/packages/docs-new/src/root.tsx b/packages/docs-new/src/root.tsx
deleted file mode 100644
index 37b84ed..0000000
--- a/packages/docs-new/src/root.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export function Root({ children }: { children: React.ReactNode }) {
- return (
-
-
-
-
-
-
- Reacord
-
-
- {children}
-
- )
-}
diff --git a/packages/docs-new/src/server.ts b/packages/docs-new/src/server.ts
index 2051768..27f183c 100644
--- a/packages/docs-new/src/server.ts
+++ b/packages/docs-new/src/server.ts
@@ -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)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3df7fa5..848b8ea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -124,6 +124,7 @@ importers:
reacord: workspace:*
react: ^17.0.2
react-dom: ^17.0.2
+ react-head: ^3.4.0
react-router: ^6.2.1
react-router-dom: ^6.2.1
typescript: ^4.5.4
@@ -133,6 +134,7 @@ importers:
reacord: link:../reacord
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
+ react-head: 3.4.0_react-dom@17.0.2+react@17.0.2
react-router: 6.2.1_react@17.0.2
react-router-dom: 6.2.1_react-dom@17.0.2+react@17.0.2
devDependencies:
@@ -7489,6 +7491,17 @@ packages:
use-sidecar: 1.0.5_react@17.0.2
dev: false
+ /react-head/3.4.0_react-dom@17.0.2+react@17.0.2:
+ resolution: {integrity: sha512-T+a+WTN2lQECle3KdUBTnXMpjzOTDRFS1f2jCLP9H64XBXgayxadoLkzWSiJD793zE8IMWzQ8xKe3V573es9NQ==}
+ peerDependencies:
+ react: '>=16.3'
+ react-dom: '>=16.3'
+ dependencies:
+ '@babel/runtime': 7.16.5
+ react: 17.0.2
+ react-dom: 17.0.2_react@17.0.2
+ dev: false
+
/react-is/16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}