Skip to main content

Documentation Index

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

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

The navigation bar in the Artisan Developer theme is provided by the SwirlNav component, defined in components/SwirlNav.js. The component reads from a static routes array where each entry has a path and a label. The label is what visitors see in the navigation bar. The path is the route that React Router matches against the current URL to highlight the active link. For most customizations, changing the label text is the only edit you need to make.
The SwirlNav component auto-highlights the active route using React Router’s useLocation hook. The path values in the routes array must exactly match the browser URL path for the active highlight to work. If you change a path value, you must also update the corresponding route in the React Router configuration inside assets/main.js.

​
Default navigation labels

The following is the routes array as defined in components/SwirlNav.js: 
const Mo = [
  { path: '/', label: 'The Swirl' },
  { path: '/about', label: 'Out of the Dye Bath' },
  { path: '/projects', label: 'The Color Wheel' },
  { path: '/skills', label: 'Pigments' },
  { path: '/work', label: 'The Long Strip' },
  { path: '/case-studies', label: 'Deep Dyes' },
  { path: '/blog', label: 'Field Notes' },
  { path: '/contact', label: 'Drop a Note' },
  { path: '/testimonials', label: 'Kind Words' },
];
Each label is a themed, artisan-inspired name for a standard portfolio section. These names are part of the theme’s visual identity, but they are straightforward to change if you prefer more conventional labels or want to match your own brand language.

​
Renaming labels

To rename a navigation item, find the entry in the Mo array and change its label value to whatever fits your portfolio. The path values must continue to match the routes defined in the React Router configuration in assets/main.js — changing only the label is safe and will not affect routing or active-link highlighting. Before: 
{ path: '/blog', label: 'Field Notes' },
After: 
{ path: '/blog', label: 'Writing' },
You can rename any number of labels in a single edit. The navigation bar will display the new text immediately when the page reloads.

​
Link syntax in HTML files

When you add links between pages anywhere in the theme’s HTML files, use relative paths rather than root-relative paths. Root-relative paths (starting with /) will work when a site is hosted at a domain root, but they break when the site is served from a GitHub Pages subdirectory such as https://username.github.io/repository-name/. 
<!-- Correct: relative paths -->
<a href="./index.html">Home</a>
<a href="./pages/About.html">About</a>
<a href="./pages/Projects.html">Projects</a>

<!-- Incorrect: root-relative paths (break on GitHub Pages subdirectory) -->
<a href="/index.html">Home</a>
<a href="/pages/About.html">About</a>
The ./ prefix resolves the path relative to the current file’s location. From index.html at the root, ./pages/About.html correctly points to pages/About.html. From a file inside pages/, use ../index.html to navigate back up to the root.

​
Testing navigation

After editing navigation labels or adding new links, test every link in a browser before pushing to GitHub Pages. A few things to verify:

Check all nav links

Click each item in the SwirlNav on both desktop and mobile widths to confirm every page loads without a 404 error.

Verify active highlighting

On each page, confirm that the correct nav item is highlighted. If highlighting is missing, check that the path value in the routes array matches the current URL path exactly.

Test mobile navigation

Open the site at a narrow viewport to trigger the mobile menu. Confirm the hamburger button opens the menu, each link navigates correctly, and the menu closes after a link is tapped.

Match filename capitalization

GitHub Pages is case-sensitive. A link to ./pages/about.html will return a 404 if the actual file is named About.html. Match the capitalization exactly as it appears in the pages/ folder.

Build docs developers (and LLMs) love

Get started for freeTalk to us