hornwitser.no/src/components/BasePage.tsx

import type { Node } from "antihtml";

interface BaseProps {
	title: string;
	children: Node | Node[],
}
export default function BasePage(props: BaseProps) {
	let reloadScript = null;
	if (process.env.DEV_EVENT_PORT) {
		const content = `const url = new URL("/events", location);
url.port = ${process.env.DEV_EVENT_PORT};
const source = new EventSource(url);
source.addEventListener("reload", () => location.reload());`;
		reloadScript = <script type="module" defer="">{content}</script>;
	}
	return <html lang="en">
		<head>
			<meta charset="utf-8" />
			<title>{props.title}</title>
			<meta name="viewport" content="width=device-width" />
			<link rel="stylesheet" href="/assets/styles/base.css" />
			<script type="module" defer="" src="/assets/scripts/viewport.js" />
			{ reloadScript }
		</head>
		<body>
			<header class="header">
				<nav>
					<a href="/about.html">About</a>
					<a href="/updates.html">Updates</a>
					<a href="/words.html">Words</a>
					<a href="/projects.html">Projects</a>
					<a href="/links.html">Links</a>
				</nav>
			</header>
			{props.children}
		</body>
	</html>
}
Scaffold basic page layout and site generation Set up the basic layout of the site and greybox its content based on statically generated pages. Content pages uses general base layouts defined centrally to avoid duplicating code. 2025-01-22 04:54:03 +01:00			`import type { Node } from "antihtml";`

			`interface BaseProps {`
			`title: string;`
			`children: Node \| Node[],`
			`}`
Reorganise source files into src and web Use a more traditional source code layout with the code located in the src/ dir and static web content in the web/ dir, while the other places are for data not related to code or content. 2025-02-02 10:37:42 +01:00			`export default function BasePage(props: BaseProps) {`
Reload page when watch restarts serve Host an EventSource server that notifies current open browser windows to reload the page when the watch mode has restarted the server. This is the last piece to making the page update live after editing and saving a source file. 2025-02-03 10:30:35 +01:00			`let reloadScript = null;`
			`if (process.env.DEV_EVENT_PORT) {`
			const content = `const url = new URL("/events", location);
			`url.port = ${process.env.DEV_EVENT_PORT};`
			`const source = new EventSource(url);`
			source.addEventListener("reload", () => location.reload());`;
			`reloadScript = <script type="module" defer="">{content}</script>;`
			`}`
Scaffold basic page layout and site generation Set up the basic layout of the site and greybox its content based on statically generated pages. Content pages uses general base layouts defined centrally to avoid duplicating code. 2025-01-22 04:54:03 +01:00			`return <html lang="en">`
			`<head>`
			`<meta charset="utf-8" />`
			`<title>{props.title}</title>`
Set viewport size to inital width Declare the website width as being responsive to agents so that it renders at a friendly size on devices that emulate a scaled viewport by default. 2025-02-02 13:48:59 +01:00			`<meta name="viewport" content="width=device-width" />`
Move scripts and stylesheets into /assets To keep things organised put the assets supporting pages into sub-folders in /assets. 2025-02-03 13:32:15 +01:00			`<link rel="stylesheet" href="/assets/styles/base.css" />`
			`<script type="module" defer="" src="/assets/scripts/viewport.js" />`
Reload page when watch restarts serve Host an EventSource server that notifies current open browser windows to reload the page when the watch mode has restarted the server. This is the last piece to making the page update live after editing and saving a source file. 2025-02-03 10:30:35 +01:00			`{ reloadScript }`
Scaffold basic page layout and site generation Set up the basic layout of the site and greybox its content based on statically generated pages. Content pages uses general base layouts defined centrally to avoid duplicating code. 2025-01-22 04:54:03 +01:00			`</head>`
			`<body>`
			`<header class="header">`
			`<nav>`
Rename home page to about This page is all about me and what I've been doing, so it makes more sense to call it the about page rather than home or index. 2025-02-03 12:57:04 +01:00			`<a href="/about.html">About</a>`
Early draft of website content 2025-01-25 08:55:26 +01:00			`<a href="/updates.html">Updates</a>`
			`<a href="/words.html">Words</a>`
			`<a href="/projects.html">Projects</a>`
Draft links page 2025-01-25 10:46:08 +01:00			`<a href="/links.html">Links</a>`
Scaffold basic page layout and site generation Set up the basic layout of the site and greybox its content based on statically generated pages. Content pages uses general base layouts defined centrally to avoid duplicating code. 2025-01-22 04:54:03 +01:00			`</nav>`
			`</header>`
			`{props.children}`
			`</body>`
			`</html>`
			`}`