From 4d8d98e8665c8b00b506f989938e00c8dace28d7 Mon Sep 17 00:00:00 2001
From: Drew Neil <andrew.jr.neil@gmail.com>
Date: Sun, 4 Jan 2026 23:07:46 +0000
Subject: [PATCH] Fix GitHub Pages deployment with correct path prefix

Configures Eleventy to use the /qmk_userspace/ path prefix for GitHub Pages
deployment since the site is hosted at nelstrom.github.io/qmk_userspace/
instead of the root domain.

Changes:
- Add pathPrefix: "/qmk_userspace/" to .eleventy.js config
- Update all href and src attributes to use Eleventy's url filter
- Navigation links: / becomes {{ '/' | url }}
- CSS link: /public/css/theme.css becomes {{ '/public/css/theme.css' | url }}
- SVG paths: Use url filter for SVG diagram references
- Keymap links: Dynamically build paths with url filter

This ensures all assets and links work correctly when deployed to GitHub Pages
under a subdirectory path.
---
 website/.eleventy.js                   | 3 ++-
 website/src/_includes/layouts/base.njk | 4 ++--
 website/src/index.njk                  | 2 +-
 website/src/keymaps.njk                | 6 +++---
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/website/.eleventy.js b/website/.eleventy.js
index 72628dae..67f919f7 100644
--- a/website/.eleventy.js
+++ b/website/.eleventy.js
@@ -64,6 +64,7 @@ module.exports = function(eleventyConfig) {
     },
     templateFormats: ["njk", "md", "html"],
     htmlTemplateEngine: "njk",
-    markdownTemplateEngine: "njk"
+    markdownTemplateEngine: "njk",
+    pathPrefix: "/qmk_userspace/"
   };
 };
diff --git a/website/src/_includes/layouts/base.njk b/website/src/_includes/layouts/base.njk
index c664a7bf..4a7d3748 100644
--- a/website/src/_includes/layouts/base.njk
+++ b/website/src/_includes/layouts/base.njk
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title }} | QMK Keymap Documentation</title>
-  <link rel="stylesheet" href="/public/css/theme.css">
+  <link rel="stylesheet" href="{{ '/public/css/theme.css' | url }}">
   <style>
     * {
       box-sizing: border-box;
@@ -191,7 +191,7 @@
   <header>
     <h1>QMK Keymap Documentation</h1>
     <nav>
-      <a href="/">Home</a>
+      <a href="{{ '/' | url }}">Home</a>
     </nav>
   </header>
 
diff --git a/website/src/index.njk b/website/src/index.njk
index 65344509..26d7e2b2 100644
--- a/website/src/index.njk
+++ b/website/src/index.njk
@@ -15,7 +15,7 @@ title: Home
       <h3>{{ keymap.keyboard }}</h3>
       <p><strong>Keymap:</strong> {{ keymap.keymapName }}</p>
 
-      <a href="/keymaps/{{ keymap.id }}/index.html" class="button">View Keymap Documentation</a>
+      <a href="{{ ('/keymaps/' + keymap.id + '/') | url }}" class="button">View Keymap Documentation</a>
 
       <div class="stats">
         <p>
diff --git a/website/src/keymaps.njk b/website/src/keymaps.njk
index 439dccf6..1a37d8e3 100644
--- a/website/src/keymaps.njk
+++ b/website/src/keymaps.njk
@@ -18,7 +18,7 @@ eleventyComputed:
 <nav style="margin: 2rem 0;">
   <a href="#diagrams" class="button">Layer Diagrams</a>
   <a href="#symbols" class="button">Symbol Index</a>
-  <a href="/" class="button secondary">← Back to Home</a>
+  <a href="{{ '/' | url }}" class="button secondary">← Back to Home</a>
 </nav>
 
 <section id="diagrams" class="layer-diagrams">
@@ -30,8 +30,8 @@ eleventyComputed:
       {% set svgPath = keymap.svgPaths | find('name', layer.name) %}
       {% if svgPath %}
         <div class="svg-container">
-          <object data="{{ svgPath.path }}" type="image/svg+xml" style="width: 100%; max-width: 1200px;">
-            <img src="{{ svgPath.path }}" alt="{{ layer.name }} layer diagram" />
+          <object data="{{ svgPath.path | url }}" type="image/svg+xml" style="width: 100%; max-width: 1200px;">
+            <img src="{{ svgPath.path | url }}" alt="{{ layer.name }} layer diagram" />
           </object>
         </div>
       {% else %}