Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/a-master-artificer/llms.txt

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

The A Master Artificer theme uses a custom navigation component called AstrolabeNav. It renders as an animated circular ring menu — a compass-style button fixed to the lower-right corner of every page that expands outward into a ring of route links when clicked. The route configuration that drives that ring lives in a single array called rs inside components/grimoire/AstrolabeNav.js. Every label, icon, and path shown in the navigation is defined there.

​
The default routes array

The rs array defines all nine default routes. Each entry has three fields: a path matching the React Router route, a label shown on hover, and an icon rendered as the visible button symbol in the ring. 
const rs = [
  { path: "/",            label: "Cover",           icon: "⚝" },
  { path: "/about",       label: "The Practitioner", icon: "👁" },
  { path: "/projects",    label: "Conjurings",       icon: "✧" },
  { path: "/skills",      label: "Athenaeum",        icon: "⚗" },
  { path: "/work",        label: "Past Covens",      icon: "📜" },
  { path: "/case-studies", label: "Field Notes",     icon: "â˜ū" },
  { path: "/blog",        label: "Loose Pages",      icon: "ðŸŠķ" },
  { path: "/testimonials", label: "Whispers",        icon: "⚕" },
  { path: "/contact",     label: "Send Familiar",    icon: "✉" }
];
The component spaces these entries evenly around the ring by dividing 360° by the total number of routes, so the ring always stays balanced regardless of how many entries are present.

​
Renaming a navigation label

To rename a navigation label, edit the label field for the relevant entry in the rs array. The label appears in a tooltip above the icon button when a visitor hovers over that position in the ring. 
// Before
{ path: "/projects", label: "Conjurings", icon: "✧" },

// After — renaming to a more straightforward label
{ path: "/projects", label: "Projects", icon: "✧" },
The label field has no character limit, but shorter labels fit more cleanly above the small ring buttons. One or two words tends to work best in the ring layout.

​
Changing a route icon

To change a route icon, edit the icon field for the relevant entry. The icon accepts any Unicode character, emoji, or symbol. The component renders it at text-xl size inside the round button. 
// Before
{ path: "/contact", label: "Send Familiar", icon: "✉" },

// After — using a different symbol
{ path: "/contact", label: "Send Familiar", icon: "📎" },
You can use standard emoji, Unicode symbols, or single characters from any script. Avoid multi-character strings — only the first rendered glyph will fit cleanly inside the ring button.

​
Adding a new page

Adding a page to the navigation requires three steps.
1
Create the new HTML file
2
Create the new HTML file at the repository root alongside the other page files. For example, to add a services page:
3
services.html
4
Model the HTML structure on an existing page like about.html. Keep the filename casing consistent with the other lowercase HTML files at the root.
5
Add the route to the rs array in AstrolabeNav.js
6
Open components/grimoire/AstrolabeNav.js and add a new entry to the rs array:
7
const rs = [
  { path: "/",         label: "Cover",           icon: "⚝" },
  { path: "/about",    label: "The Practitioner", icon: "👁" },
  { path: "/projects", label: "Conjurings",       icon: "✧" },
  { path: "/skills",   label: "Athenaeum",        icon: "⚗" },
  { path: "/work",     label: "Past Covens",      icon: "📜" },
  // New entry added below
  { path: "/services", label: "Services",         icon: "⚙" },
  { path: "/case-studies", label: "Field Notes",  icon: "â˜ū" },
  { path: "/blog",     label: "Loose Pages",      icon: "ðŸŠķ" },
  { path: "/testimonials", label: "Whispers",     icon: "⚕" },
  { path: "/contact",  label: "Send Familiar",    icon: "✉" }
];
8
The path value must match exactly — including case — the React Router path you configure in the next step.
9
Add the route to the React Router config in assets/main.js
10
Open assets/main.js and add the new <Route> entry inside the router configuration. The existing routes look like this in the static build:
11
e.jsx(o, { path: '/',            element: e.jsx(R, {}) }),
e.jsx(o, { path: '/about',       element: e.jsx(O, {}) }),
e.jsx(o, { path: '/projects',    element: e.jsx(I, {}) }),
e.jsx(o, { path: '/skills',      element: e.jsx(T, {}) }),
e.jsx(o, { path: '/work',        element: e.jsx(D, {}) }),
e.jsx(o, { path: '/case-studies', element: e.jsx(N, {}) }),
e.jsx(o, { path: '/blog',        element: e.jsx(S, {}) }),
e.jsx(o, { path: '/blog/:slug',  element: e.jsx(z, {}) }),
e.jsx(o, { path: '/contact',     element: e.jsx(V, {}) }),
e.jsx(o, { path: '/testimonials', element: e.jsx(C, {}) }),
12
Add a corresponding line for the new path so the router knows which component to render when a visitor navigates to /services.

​
Removing a page

To remove a page from the navigation, reverse the process above:
  1. Delete the entry from the rs array in AstrolabeNav.js
  2. Delete the corresponding <Route> line from assets/main.js
The HTML file at the repository root can remain or be deleted — removing it from the router config and the navigation array is enough to hide it from visitors.
Test every navigation link after making any changes to the rs array. Click each ring button from multiple pages — not just from the homepage — and confirm that every route resolves to the correct page without a 404 error. A single typo in a path value will silently break that link on the live site.
React Router paths are case-sensitive. The path /case-studies is not the same as /Case-Studies. Make sure the path value in the rs array, the route entry in assets/main.js, and the HTML filename at the repository root all use exactly the same casing. GitHub Pages is also case-sensitive, so this applies to the live site as well as local testing.
Odd numbers of routes space most evenly in the 360° ring because equal angular division produces clean, symmetric button positions. The default theme ships with nine routes for exactly this reason. If you add or remove routes, test the ring visually after the change — some even-numbered totals can produce button clusters near the toggle button that are harder to tap on small screens.

Build docs developers (and LLMs) love

Get started for freeTalk to us