fix: prepend base path to absolute URLs for subdirectory deployments

Add rehype-base-images plugin for image src attributes and update
rehype-markdown-links to prepend base path to absolute hrefs. Fixes
broken links/images when deploying to GitHub Pages project sites
(e.g., user.github.io/repo/).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: alexeyv

website/astro.config.mjs

@@ -3,6 +3,7 @@ import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import sitemap from '@astrojs/sitemap';
 import rehypeMarkdownLinks from './src/rehype-markdown-links.js';
+import rehypeBaseImages from './src/rehype-base-images.js';
 import { getSiteUrl } from './src/lib/site-url.js';
 
 const siteUrl = getSiteUrl();
@@ -28,7 +29,10 @@ export default defineConfig({
   },
 
   markdown: {
-    rehypePlugins: [rehypeMarkdownLinks],
+    rehypePlugins: [
+      [rehypeMarkdownLinks, { base: basePath }],
+      [rehypeBaseImages, { base: basePath }],
+    ],
   },
 
   integrations: [

website/src/rehype-base-images.js

@@ -0,0 +1,49 @@
+/**
+ * Rehype plugin to prepend base path to absolute image URLs
+ *
+ * Transforms:
+ *   /img/foo.png → /BMAD-METHOD/img/foo.png (when base is /BMAD-METHOD/)
+ *   /img/foo.png → /img/foo.png (when base is /)
+ *
+ * Only affects absolute paths (/) - relative paths and external URLs are unchanged.
+ */
+
+import { visit } from 'unist-util-visit';
+
+/**
+ * Create a rehype plugin that prepends the base path to absolute image URLs.
+ *
+ * @param {Object} options - Plugin options
+ * @param {string} options.base - The base path to prepend (e.g., '/BMAD-METHOD/')
+ * @returns {function} A HAST tree transformer
+ */
+export default function rehypeBaseImages(options = {}) {
+  const base = options.base || '/';
+
+  // Normalize base: ensure it ends with / and doesn't have double slashes
+  const normalizedBase = base === '/' ? '/' : base.endsWith('/') ? base : base + '/';
+
+  return (tree) => {
+    visit(tree, 'element', (node) => {
+      // Process img tags with src attribute
+      if (node.tagName === 'img' && node.properties?.src) {
+        const src = node.properties.src;
+
+        if (typeof src !== 'string') {
+          return;
+        }
+
+        // Only transform absolute paths starting with / (but not //)
+        if (src.startsWith('/') && !src.startsWith('//')) {
+          // Don't transform if already has the base path
+          if (normalizedBase !== '/' && src.startsWith(normalizedBase)) {
+            return;
+          }
+
+          // Prepend base path (remove leading / from src since base ends with /)
+          node.properties.src = normalizedBase + src.slice(1);
+        }
+      }
+    });
+  };
+}

website/src/rehype-markdown-links.js

@@ -6,10 +6,11 @@
  *   ./path/index.md → ./path/ (index.md becomes directory root)
  *   ../path/file.md#anchor → ../path/file/#anchor
  *   ./file.md?query=param → ./file/?query=param
- *   /docs/absolute/path/file.md → /absolute/path/file/
+ *   /docs/absolute/path/file.md → {base}/absolute/path/file/
  *
  * For absolute paths starting with /docs/, the /docs prefix is stripped
  * since the Astro site serves content from the docs directory as the root.
+ * The base path is prepended to absolute paths for subdirectory deployments.
  *
  * Affects relative links (./, ../) and absolute paths (/) - external links are unchanged
  */
@@ -21,9 +22,15 @@ import { visit } from 'unist-util-visit';
  *
  * The returned transformer walks the HTML tree and rewrites anchor `href` values that are relative paths (./, ../) or absolute paths (/) pointing to `.md` files. It preserves query strings and hash anchors, rewrites `.../index.md` to the directory root path (`.../`), and rewrites other `.md` file paths by removing the `.md` extension and ensuring a trailing slash. External links (http://, https://) and non-.md links are left unchanged.
  *
+ * @param {Object} options - Plugin options
+ * @param {string} options.base - The base path to prepend to absolute URLs (e.g., '/BMAD-METHOD/')
  * @returns {function} A HAST tree transformer that mutates `a` element `href` properties as described.
  */
-export default function rehypeMarkdownLinks() {
+export default function rehypeMarkdownLinks(options = {}) {
+  const base = options.base || '/';
+  // Normalize base: ensure it ends with / and doesn't have double slashes
+  const normalizedBase = base === '/' ? '' : base.endsWith('/') ? base.slice(0, -1) : base;
+
   return (tree) => {
     visit(tree, 'element', (node) => {
       // Only process anchor tags with href
@@ -82,6 +89,9 @@ export default function rehypeMarkdownLinks() {
         }
       }
 
+      // Track if this was an absolute path (for base path prepending)
+      const isAbsolute = urlPath.startsWith('/');
+
       // Strip /docs/ prefix from absolute paths (repo-relative → site-relative)
       if (urlPath.startsWith('/docs/')) {
         urlPath = urlPath.slice(5); // Remove '/docs' prefix, keeping the leading /
@@ -95,6 +105,11 @@ export default function rehypeMarkdownLinks() {
         urlPath = urlPath.replace(/\.md$/, '/');
       }
 
+      // Prepend base path to absolute URLs for subdirectory deployments
+      if (isAbsolute && normalizedBase) {
+        urlPath = normalizedBase + urlPath;
+      }
+
       // Reconstruct the href
       node.properties.href = urlPath + query + anchor;
     });