-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3b6f726
commit 3c9113f
Showing
18 changed files
with
1,018 additions
and
299 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
.yarn/patches/react-helmet-async-npm-2.0.5-f913a66ef6.patch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| diff --git a/package.json b/package.json | ||
| index d74b351267cb7df4c7e578aef227a0f6e7963fe5..8e49f79a11e242f65e96c8abec921c34bd831ca3 100644 | ||
| --- a/package.json | ||
| +++ b/package.json | ||
| @@ -3,8 +3,7 @@ | ||
| "version": "2.0.5", | ||
| "description": "Thread-safe Helmet for React 16+ and friends", | ||
| "sideEffects": false, | ||
| - "main": "./lib/index.js", | ||
| - "module": "./lib/index.esm.js", | ||
| + "main": "./lib/index.esm.js", | ||
| "typings": "./lib/index.d.ts", | ||
| "repository": "http://github.com/staylor/react-helmet-async", | ||
| "author": "Scott Taylor <[email protected]>", | ||
| @@ -12,6 +11,7 @@ | ||
| "files": [ | ||
| "lib/" | ||
| ], | ||
| + "type": "module", | ||
| "dependencies": { | ||
| "invariant": "^2.2.4", | ||
| "react-fast-compare": "^3.2.2", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Hello World</title> | ||
| <meta charSet="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | ||
| <title>Clint Andrew Hall</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> | ||
| <div id="root"><!--app-html--></div> | ||
| <script type="module" src="/src/entry.client.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import fs from 'node:fs'; | ||
| import path from 'node:path'; | ||
| import { type SSRRenderType } from 'src/entry.server.js'; | ||
| import { fileURLToPath } from 'url'; | ||
|
|
||
| const __dirname = path.dirname(fileURLToPath(import.meta.url)); | ||
| const toAbsolute = (p: string) => path.resolve(__dirname, '..', p); | ||
|
|
||
| fs.cpSync(toAbsolute('dist/site'), toAbsolute('dist/static'), { recursive: true }); | ||
|
|
||
| const template = fs.readFileSync(toAbsolute('dist/site/index.html'), 'utf-8'); | ||
|
|
||
| // @ts-expect-error this has to be built, so it's not here during. | ||
| const render: SSRRenderType = (await import('../dist/server/entry.server.js')).SSRRender; | ||
|
|
||
| const portfolioRoutesToPrerender = fs | ||
| .readdirSync(toAbsolute('src/content/portfolio')) | ||
| .map((file) => { | ||
| const name = file.replace(/\.md$/, '').toLowerCase(); | ||
| return `/portfolio/${name}`; | ||
| }); | ||
|
|
||
| const processTemplate = ({ html, helmet }: ReturnType<SSRRenderType>) => { | ||
| let result = template.replace(`<!--app-html-->`, html); | ||
|
|
||
| if (helmet) { | ||
| result = result | ||
| .replace('<title>Clint Andrew Hall</title>', '') | ||
| .replace('</head>', `${helmet.meta.toString()}</head>`) | ||
| .replace('</head>', `${helmet.title.toString()}</head>`) | ||
| .replace('</head>', `${helmet.script.toString()}</head>`); | ||
| } | ||
|
|
||
| return result; | ||
| }; | ||
|
|
||
| (async () => { | ||
| fs.mkdirSync(toAbsolute('dist/static/portfolio'), { recursive: true }); | ||
| fs.writeFileSync(toAbsolute('dist/static/index.html'), processTemplate(render('/'))); | ||
| fs.writeFileSync( | ||
| toAbsolute('dist/static/portfolio/index.html'), | ||
| processTemplate(render('/portfolio')), | ||
| ); | ||
|
|
||
| for (const url of portfolioRoutesToPrerender) { | ||
| const result = processTemplate(render(url)); | ||
| const filePath = `dist/static${url}.html`; | ||
| fs.writeFileSync(toAbsolute(filePath), result); | ||
| } | ||
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import express from 'express'; | ||
| import fs from 'node:fs'; | ||
| import path from 'node:path'; | ||
| import { fileURLToPath } from 'url'; | ||
|
|
||
| const __dirname = path.dirname(fileURLToPath(import.meta.url)); | ||
| const app = express(); | ||
|
|
||
| export async function createServer() { | ||
| const resolve = (p: string) => path.resolve(__dirname, p); | ||
|
|
||
| const vite = null; | ||
|
|
||
| app.use((await import('compression')).default()); | ||
| app.use( | ||
| (await import('serve-static')).default(resolve('../dist/site'), { | ||
| index: false, | ||
| }), | ||
| ); | ||
|
|
||
| app.use('*', async (_req, res) => { | ||
| const url = '/'; | ||
|
|
||
| const template = fs.readFileSync(resolve('../dist/site/index.html'), 'utf-8'); | ||
| // @ts-ignore There might be an error here, if nothing has been built. | ||
| const render = (await import('../dist/server/entry.server.js')).SSRRender; | ||
|
|
||
| const { html, helmet } = render(url); //Rendering component without any client side logic de-hydrated like a dry sponge | ||
|
|
||
| const result = template | ||
| .replace(`<!--app-html-->`, html) | ||
| .replace('<title>Clint Andrew Hall</title>', '') | ||
| .replace('</head>', `${helmet.meta.toString()}</head>`) | ||
| .replace('</head>', `${helmet.title.toString()}</head>`) | ||
| .replace('</head>', `${helmet.script.toString()}</head>`); | ||
|
|
||
| res.status(200).set({ 'Content-Type': 'text/html' }).end(result); //Outputing final html | ||
| }); | ||
|
|
||
| return { app, vite }; | ||
| } | ||
|
|
||
| createServer().then(({ app }) => | ||
| app.listen(3033, () => { | ||
| console.log('http://localhost:3033'); | ||
| }), | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom/client'; | ||
| import { HelmetProvider } from 'react-helmet-async'; | ||
| import { BrowserRouter } from 'react-router-dom'; | ||
|
|
||
| // if (!Object.hasOwn) { | ||
| // Object.hasOwn = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop); | ||
| // } | ||
| import { App } from './app'; | ||
|
|
||
| const root = document.getElementById('root'); | ||
|
|
||
| if (root?.hasChildNodes()) { | ||
| ReactDOM.hydrateRoot( | ||
| root, | ||
| <React.StrictMode> | ||
| <BrowserRouter> | ||
| <HelmetProvider> | ||
| <App /> | ||
| </HelmetProvider> | ||
| </BrowserRouter> | ||
| </React.StrictMode>, | ||
| ); | ||
| } else { | ||
| ReactDOM.createRoot(root!).render( | ||
| <React.StrictMode> | ||
| <BrowserRouter> | ||
| <HelmetProvider> | ||
| <App /> | ||
| </HelmetProvider> | ||
| </BrowserRouter> | ||
| </React.StrictMode>, | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import ReactDOMServer from 'react-dom/server'; | ||
| import { HelmetProvider, type HelmetServerState } from 'react-helmet-async'; | ||
| import { StaticRouter } from 'react-router-dom/server'; | ||
|
|
||
| import { App } from './app'; | ||
|
|
||
| interface HelmetContext { | ||
| helmet?: HelmetServerState; | ||
| } | ||
|
|
||
| export function SSRRender(url: string | Partial<Location>) { | ||
| const helmetContext: HelmetContext = {} as HelmetContext; | ||
|
|
||
| const html = ReactDOMServer.renderToString( | ||
| <StaticRouter location={url}> | ||
| <HelmetProvider context={helmetContext}> | ||
| <App /> | ||
| </HelmetProvider> | ||
| </StaticRouter>, | ||
| ); | ||
|
|
||
| return { html, helmet: helmetContext.helmet }; | ||
| } | ||
|
|
||
| export type SSRRenderType = typeof SSRRender; |
Oops, something went wrong.