fix(docs): use relative paths for CSS and JS assets in generated HTML

goedelsoup · goedelsoup · commit 0e37faba0173 · 2025-08-06T18:50:38.000-04:00
- Calculate correct relative paths based on file depth
- Fix styling issues on sub-pages by using proper asset paths
- Ensure CSS and JavaScript load correctly on all documentation pages
- Support nested directory structures with appropriate path calculations
diff --git a/docs/scripts/build-docs.js b/docs/scripts/build-docs.js
@@ -21,15 +21,19 @@ function convertMarkdownToHtml(markdownPath, outputPath) {
       mkdirSync(outputDir, { recursive: true });
     }
     
+    // Calculate relative path to build root for assets
+    const relativePath = relative(outputDir, join(process.cwd(), 'build'));
+    const assetPrefix = relativePath === '' ? '.' : relativePath;
+    
     // Create HTML page with proper structure
     const fullHtml = `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Rhema Documentation</title>
-    <link rel="stylesheet" href="/_app/immutable/assets/0.CUkH5Dtm.css">
-    <script type="module" data-sveltekit-hydrate="1" src="/_app/immutable/entry/start.Dh5_5E8I.js"></script>
+    <link rel="stylesheet" href="${assetPrefix}/_app/immutable/assets/0.CUkH5Dtm.css">
+    <script type="module" data-sveltekit-hydrate="1" src="${assetPrefix}/_app/immutable/entry/start.Dh5_5E8I.js"></script>
 </head>
 <body data-sveltekit-preload-data="hover">
     <div style="display: contents">
