feat: add dynamic page titles

Signed-off-by: Raphael Arce <[email protected]>
technologiestiftung · Aug 22, 2024 · a29a98a · a29a98a
1 parent eb35024
commit a29a98a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/generate.js b/generate.js
@@ -12,14 +12,18 @@ const toAbsolute = (p) => path.resolve(__dirname, p)
 const template = fs.readFileSync(toAbsolute('dist/index.html'), 'utf-8');
 const { render } = await import('./dist/server/entry-server.js');
 const { routes } = await import('./dist/assets/routes/routes.js');
+const { content } = await import('./dist/assets/content/content.js');
 
 function generateStaticPages() {
   for (const { path } of routes) {
     console.log('path:', path);
 
     const appHtml = render(path)
+    const pageTitle = content[path].title
 
-    const html = template.replace(`<!--app-html-->`, appHtml)
+    const html = template
+      .replace('<title></title>', `<title>${pageTitle}</title>`)
+      .replace(`<!--app-html-->`, appHtml)
 
     const filePath = `dist${path}index.html`
     writeFileSyncRecursive(toAbsolute(filePath), html)

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite React SSG</title>
+    <title></title>
   </head>
   <body>
     <div id="root"><!--app-html--></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,10 +2,14 @@ import React from "react";
 import { Route, Routes } from 'react-router-dom'
 import { routes } from './routes/routes'
 import { content } from "./content/content";
+import { usePageTitle } from "./hooks/use-page-title";
 
 const pages: Record<string, { default: React.FC }> = import.meta.glob('./pages/**/*.tsx', { eager: true })
 
 export function App() {
+
+  usePageTitle();
+
   return (
     <>
       <nav>

diff --git a/src/hooks/use-page-title.tsx b/src/hooks/use-page-title.tsx
@@ -0,0 +1,8 @@
+import {useEffect} from "react";
+import {content} from "../content/content.ts";
+
+export function usePageTitle() {
+	useEffect(() => {
+		document.title = content[window.location.pathname].title
+	}, [])
+}