Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/aurora-cosmos/llms.txt

Use this file to discover all available pages before exploring further.

Aurora Cosmos is designed to be deployed as a fully static site — no Node.js server, no edge functions, just a folder of HTML, CSS, and JavaScript files. To make deep-linking and direct URL access work on hosts like GitHub Pages, Netlify (without a _redirects file), or any plain static file host, the template uses hash-based routing: every route lives after a # in the URL, which the browser never sends to the server. This means any URL like https://yoursite.com/portfolio/#/projects resolves to the same index.html that the server already knows how to serve.

​
Route Table

The application declares seven routes, each with a corresponding static HTML entry point in the /pages/ directory.
Hash pathPageStatic HTML file
#/Homeindex.html (root)
#/aboutAboutpages/About.html
#/projectsProjectspages/Projects.html
#/skillsSkillspages/Skills.html
#/writingWritingpages/Writing.html
#/case-studiesCase Studiespages/CaseStudies.html
#/contactContactpages/Contact.html
The navigation array (ua) in components/Navigation.js mirrors these paths exactly: 
const ua = [
  { path: "/",            label: "Home",         icon: HomeIcon       },
  { path: "/about",       label: "About",        icon: UserIcon       },
  { path: "/projects",    label: "Projects",     icon: BriefcaseIcon  },
  { path: "/skills",      label: "Skills",       icon: CodeXmlIcon    },
  { path: "/writing",     label: "Writing",      icon: PenToolIcon    },
  { path: "/case-studies",label: "Case Studies", icon: FileTextIcon   },
  { path: "/contact",     label: "Contact",      icon: MailIcon       },
];

​
How the Redirect Script Works

Each HTML file in /pages/ contains an inline <script> that runs before React mounts. It does two things:
  1. Sets window.__STATIC_PAGE_ROUTE__ — tells the React app which hash route this page corresponds to, so the router can initialise at the right path.
  2. Redirects missing hashes — if a visitor lands on the page without a hash (e.g. a direct link to pages/About.html), the script appends the correct hash and replaces the history entry so the browser never shows a hash-less URL.
Here is the script from pages/About.html: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";

  (function () {
    if (!window.location.hash || window.location.hash === "#") {
      window.location.replace(
        window.location.pathname +
        window.location.search +
        "#/about"
      );
    }
  })();
</script>
The root index.html uses "/" as the route and redirects to #/: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/";

  (function () {
    if (!window.location.hash || window.location.hash === "#") {
      window.location.replace(
        window.location.pathname +
        window.location.search +
        "#/"
      );
    }
  })();
</script>

​
Adding a New Route

1

Add the route to the router config in main.js

The router is defined in the compiled assets/main.js. Because Aurora Cosmos is a pre-built static site, you will need to rebuild from your own source to add a <Route> element. Add it to the router config with a path that matches exactly what you will put in the navigation array and the static HTML file.
<Route path="/gallery" element={<Gallery />} />
2

Create a new page component

Aurora Cosmos is a pre-built static site — there is no src/ directory in the repository. To add a page component, add the compiled output directly to the project. If you are working from your own source, create the file (e.g. pages/Gallery.jsx) and rebuild. At minimum the component should include the <AuroraBackground /> and <Starfield /> wrappers so the visual style is consistent with the rest of the template.
import AuroraBackground from "../components/AuroraBackground";
import Starfield from "../components/Starfield";

export default function Gallery() {
  return (
    <>
      <AuroraBackground />
      <Starfield />
      <main className="relative z-10 ml-24 min-h-screen py-12 px-8">
        <h1 className="font-display text-4xl text-white">Gallery</h1>
      </main>
    </>
  );
}
3

Add the entry to the navigation array in Navigation.js

Import a Lucide icon and push a new object into the ua array so the nav sidebar renders the link automatically.
import { Image } from "lucide-react";

// inside the ua array:
{ path: "/gallery", label: "Gallery", icon: Image },
4

Create a new HTML file in /pages/

Copy any existing page HTML file (e.g. pages/About.html) into pages/Gallery.html. Update both the <title> tag and the __STATIC_PAGE_ROUTE__ value to match the new route.
<title>Gallery | aurora-cosmos</title>
<script>
  window.__STATIC_PAGE_ROUTE__ = "/gallery";

  (function () {
    if (!window.location.hash || window.location.hash === "#") {
      window.location.replace(
        window.location.pathname +
        window.location.search +
        "#/gallery"
      );
    }
  })();
</script>
Do not switch to HTML5 history-mode routing (createBrowserRouter / BrowserRouter) without configuring your host to redirect all 404s back to index.html. On GitHub Pages this requires a custom 404.html workaround; on Netlify it requires a _redirects file (/* /index.html 200); on Vercel it requires a vercel.json rewrite rule. Hash routing avoids all of this complexity and works out of the box on any static file host.

Build docs developers (and LLMs) love

Get started for freeTalk to us