Skip to main content

Documentation Index

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

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

witch-dev is hosted on GitHub Pages, which serves files directly from a repository’s output directory without any server-side URL rewriting. Traditional BrowserRouter-style paths (e.g. /about) would return a 404 when accessed directly because GitHub Pages has no fallback index.html mechanism for arbitrary paths. witch-dev solves this by using hash-based routing: the hash fragment (#/about) is never sent to the server, so GitHub Pages always serves the correct HTML file while React Router reads the fragment and renders the right component entirely in the browser.

​
Route Table

Every navigation entry maps a hash URL to a React Router path, a thematic label drawn from the site’s occult aesthetic, and a Lucide React icon.
Hash URLRouteTheme LabelIcon
/#//SummonHexagon
/#/about/aboutOriginsSparkles
/#/projects/projectsGrimoireBookOpen
/#/skills/skillsAffinitiesBrainCircuit
/#/writing/writingScrollsScroll
/#/contact/contactRavenMail

​
Static HTML Shell Pattern

The root index.html doubles as the Home page shell. It sets window.__STATIC_PAGE_ROUTE__ and then runs a redirect IIFE that ensures the URL always carries the hash fragment before React boots: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/";

  (function () {
    if (!window.location.hash || window.location.hash === "#") {
      window.location.replace(
        window.location.pathname +
        window.location.search +
        "#/"
      );
    }
  })();
</script>
The guard condition (!window.location.hash || window.location.hash === "#") means the redirect only fires when the hash is absent or empty. If the user already has a full hash URL (e.g. from a bookmark or a link), the page loads immediately without an extra navigation.

​
Per-Route Shell Files

Each route under pages/ has its own HTML file that follows the same pattern. pages/About.html sets the route to /about and redirects to #/about: 
<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>
All shells load the same compiled bundle (../assets/main.js) and mount into <div id="root"></div>. The shells are thin wrappers — they contain no component logic of their own.
pages/CaseStudies.html also exists in the repository as a shell stub, though it does not appear in the navigation array and has no corresponding page component in the current bundle.

​
canvas.manifest.js

canvas.manifest.js is a screen manifest generated by the visual canvas tooling used during development. It maps internal screen identifiers to their route paths and display names. At runtime, useScreenInit.js imports this manifest to initialise router state before the first render, ensuring the correct page is active on first load without relying solely on the hash fragment. 
const e = {
  screens: {
    scr_4sn1by: { name: "Home", route: "/" }
  }
};

export { e as m };
Currently the manifest only registers the Home screen (scr_4sn1by). Additional screens added through the canvas tool would appear here as new entries under screens.

​
Adding a New Route

Follow these four steps to add a new page to witch-dev:
1

Create the static HTML shell

Add pages/MyPage.html. Copy the pattern from any existing shell and update the route string:
<script>
  window.__STATIC_PAGE_ROUTE__ = "/my-page";

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

Add the entry to the navigation array

In the navigation config (inside the compiled bundle source, corresponding to Navigation.js), add a new object to the ua array:
import { Wand2 } from "lucide-react";

const ua = [
  // ... existing routes
  { path: "/my-page", label: "Conjure", icon: Wand2 },
];
3

Create the page component

Build your page as a React component and register it with the router alongside the existing routes (e.g. <Route path="/my-page" element={<MyPage />} />).
4

Update canvas.manifest.js

Register the new screen so useScreenInit.js can initialise the router correctly on direct load:
const e = {
  screens: {
    scr_4sn1by:  { name: "Home",    route: "/"        },
    scr_newpage: { name: "MyPage",  route: "/my-page" },
  }
};

export { e as m };

Build docs developers (and LLMs) love

Get started for freeTalk to us