Adding a new page to y2k-web involves four coordinated steps: writing the React component, registering it as a route in theDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/y2k-web/llms.txt
Use this file to discover all available pages before exploring further.
HashRouter, surfacing a link in the Navbar, and creating a static HTML stub so the page is directly accessible by URL. The guide below walks through all four steps using a hypothetical Gallery page as the example.
Add a new component function in
assets/main.js. The component should return JSX wrapped in a centred container that respects the site’s spacing and typography conventions:const GalleryPage = () => (
<div className="max-w-4xl mx-auto p-4 my-8">
<h1 className="font-impact text-4xl text-retro-blue mb-6">
Gallery
</h1>
<p className="font-times text-lg">Coming soon!</p>
</div>
);
Use
font-impact or font-pixel for headings and font-times or font-comic for body copy to stay consistent with the Y2K aesthetic. See Fonts & Colors for the full reference.Inside the
App component, locate the <Routes> block inside the HashRouter and add a new <Route> element pointing to your component:Place it alongside the other existing routes. React Router will render
GalleryPage whenever the hash path is #/gallery.The
Navbar maps over this array to render each link, so adding the entry here is all that is required to make the page visible in the navigation bar.Create
pages/Gallery.html alongside the existing static page files. This file bootstraps the React app and forces the hash router to the correct route when the page is loaded directly. Copy the exact pattern used by the existing pages — the <link rel="modulepreload"> entries and the inline script are required:<!doctype html>
<html lang="en">
<head>
<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>Gallery | y2k-web</title>
<script type="module" crossorigin src="../assets/main.js"></script>
<link rel="modulepreload" crossorigin href="./components/Primitives.js">
<link rel="modulepreload" crossorigin href="./components/Guestbook.js">
<link rel="stylesheet" crossorigin href="../assets/main.css">
<script>
window.__STATIC_PAGE_ROUTE__ = "/gallery";
if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
window.location.hash = "/gallery";
}
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
../assets/main.js and ../assets/main.css — relative paths that point up from pages/ to the assets/ directory at the repo root.<link rel="modulepreload"> — preloads the two component chunk files (Primitives.js and Guestbook.js in the components/ directory) so the SPA boots without additional round trips.window.__STATIC_PAGE_ROUTE__ — tells the app which route this file corresponds to.if block — redirects the hash to /gallery if the page is opened without one, preventing the app from defaulting to #/ and rendering the home page instead.<div id="root"></div> — the React mount point; the SPA takes over from here.The static HTML stub in step 4 is only necessary if you want users (or search engines) to be able to load the page directly via a URL such as
yoursite.com/pages/Gallery.html. If you only need the SPA hash route (#/gallery) — for example, when navigating from within the site — step 4 is entirely optional.