Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/telemetry/llms.txt

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

Telemetry deploys as a folder of static files — there is no web server that can map /about to the right HTML file. Hash-based routing solves this elegantly: every URL uses the # fragment (/#/about instead of /about), so every deep link points at the same index.html and the browser never makes a new document request. React Router reads the fragment and renders the correct page component entirely in JavaScript.
In development the URL looks like http://localhost:5173/#/about. In production it looks identical — the hash prefix is always present. Sharing or bookmarking any page URL works without any server configuration.

​
Router setup

The router is created by Nd() — a hash history factory that reads window.location.hash.substr(1) as the pathname. This factory is wrapped by the Xp component (exported as H from Navigation.js and aliased as Le in main.js). The top-level Ss component wires everything together: 
// Simplified from assets/main.js
function App() {
  return (
    <HashRouter>       {/* Le / Xp — hash history wrapper */}
      <Routes>         {/* Oe — route matching */}
        <Route path="/" element={<Layout />}>
          <Route index           element={<Home />} />
          <Route path="about"    element={<About />} />
          <Route path="projects" element={<Projects />} />
          <Route path="skills"   element={<Skills />} />
          <Route path="writing"  element={<Writing />} />
          <Route path="case-studies" element={<CaseStudies />} />
          <Route path="contact"  element={<Contact />} />
        </Route>
      </Routes>
    </HashRouter>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
The Vp array in Navigation.js drives every nav link. Each entry is consumed by a NavLink from react-router-dom v6.30.4:
PathLabelID
/HOMEhome
/aboutABOUTabout
/projectsPROJECTSprojects
/skillsSKILLSskills
/writingWRITINGwriting
/case-studiesCASE STUDIEScase-studies
/contactCONTACTcontact
// components/Navigation.js — Vp array
const Vp = [
  { path: "/",            label: "HOME",         id: "home" },
  { path: "/about",       label: "ABOUT",        id: "about" },
  { path: "/projects",    label: "PROJECTS",     id: "projects" },
  { path: "/skills",      label: "SKILLS",       id: "skills" },
  { path: "/writing",     label: "WRITING",      id: "writing" },
  { path: "/case-studies",label: "CASE STUDIES", id: "case-studies" },
  { path: "/contact",     label: "CONTACT",      id: "contact" },
];
Each entry in Vp is rendered with NavLink, which receives an isActive boolean from React Router. When isActive is true, a Framer Motion motion.div with layoutId="nav-pill" is rendered behind the link text. Because all pills share the same layoutId, Framer Motion automatically animates the pill sliding from the old active link to the new one as you navigate: 
// Inside Navigation.js — simplified
<NavLink
  to={item.path}
  className={({ isActive }) =>
    `relative px-4 py-2 rounded-full font-mono text-xs tracking-widest transition-colors
     ${isActive ? "text-white" : "text-slate-400 hover:text-aurora-cyan"}`
  }
>
  {({ isActive }) => (
    <>
      {item.label}
      {isActive && (
        <motion.div
          layoutId="nav-pill"
          className="absolute inset-0 bg-aurora-teal/20 border border-aurora-teal/50 rounded-full -z-10"
          transition={{ type: "spring", stiffness: 300, damping: 30 }}
        />
      )}
    </>
  )}
</NavLink>

​
Static page shells

Each file under pages/ exists so that a user who navigates directly to a path like /pages/About.html is immediately redirected to the correct hash URL. Every shell follows the same pattern: set window.__STATIC_PAGE_ROUTE__ for introspection, then check whether the hash is already correct and redirect if not.
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 same <div id="root"> and the same assets/main.js script tag appear in every shell, so once the redirect fires, the full React app boots and renders the correct route.

​
Adding a new route

1

Create the page component

Write your new page as a React component in your source. It will be rendered inside the <Outlet> in the layout component, so it receives the aurora background, navigation, and page-transition animation for free.
2

Register the route in main.js

Add a <Route> entry inside the root route in assets/main.js, pointing path at your new slug and element at your component:
<Route path="labs" element={<Labs />} />
3

Add the nav link to the Vp array

Open components/Navigation.js and append an entry to the Vp array so the link appears in the header:
{ path: "/labs", label: "LABS", id: "labs" }
4

Create the static HTML shell

Copy any existing file from pages/ into a new file, e.g. pages/Labs.html, and update both window.__STATIC_PAGE_ROUTE__ and the hash string to #/labs. This ensures direct navigation to the shell URL redirects correctly.

Build docs developers (and LLMs) love

Get started for freeTalk to us