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.
This commit is contained in:
Drew Neil 2026-01-04 23:07:46 +00:00
commit 4d8d98e866
4 changed files with 8 additions and 7 deletions

View file

@ -64,6 +64,7 @@ module.exports = function(eleventyConfig) {
}, },
templateFormats: ["njk", "md", "html"], templateFormats: ["njk", "md", "html"],
htmlTemplateEngine: "njk", htmlTemplateEngine: "njk",
markdownTemplateEngine: "njk" markdownTemplateEngine: "njk",
pathPrefix: "/qmk_userspace/"
}; };
}; };

View file

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }} | QMK Keymap Documentation</title> <title>{{ title }} | QMK Keymap Documentation</title>
<link rel="stylesheet" href="/public/css/theme.css"> <link rel="stylesheet" href="{{ '/public/css/theme.css' | url }}">
<style> <style>
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -191,7 +191,7 @@
<header> <header>
<h1>QMK Keymap Documentation</h1> <h1>QMK Keymap Documentation</h1>
<nav> <nav>
<a href="/">Home</a> <a href="{{ '/' | url }}">Home</a>
</nav> </nav>
</header> </header>

View file

@ -15,7 +15,7 @@ title: Home
<h3>{{ keymap.keyboard }}</h3> <h3>{{ keymap.keyboard }}</h3>
<p><strong>Keymap:</strong> {{ keymap.keymapName }}</p> <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"> <div class="stats">
<p> <p>

View file

@ -18,7 +18,7 @@ eleventyComputed:
<nav style="margin: 2rem 0;"> <nav style="margin: 2rem 0;">
<a href="#diagrams" class="button">Layer Diagrams</a> <a href="#diagrams" class="button">Layer Diagrams</a>
<a href="#symbols" class="button">Symbol Index</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> </nav>
<section id="diagrams" class="layer-diagrams"> <section id="diagrams" class="layer-diagrams">
@ -30,8 +30,8 @@ eleventyComputed:
{% set svgPath = keymap.svgPaths | find('name', layer.name) %} {% set svgPath = keymap.svgPaths | find('name', layer.name) %}
{% if svgPath %} {% if svgPath %}
<div class="svg-container"> <div class="svg-container">
<object data="{{ svgPath.path }}" type="image/svg+xml" style="width: 100%; max-width: 1200px;"> <object data="{{ svgPath.path | url }}" type="image/svg+xml" style="width: 100%; max-width: 1200px;">
<img src="{{ svgPath.path }}" alt="{{ layer.name }} layer diagram" /> <img src="{{ svgPath.path | url }}" alt="{{ layer.name }} layer diagram" />
</object> </object>
</div> </div>
{% else %} {% else %}