Fix hardcoded base URLs so PR previews load assets correctly

src/clientModules/analyticsEvents.js

@@ -10,7 +10,9 @@
  *   search_query  — when a user searches via Algolia DocSearch
  */
 
-const BASE_PATH = '/RMC-Software-Documentation/';
+import siteConfig from '@generated/docusaurus.config';
+
+const BASE_PATH = siteConfig.baseUrl;
 
 // ── Latest versions cache ───────────────────────────────────────────
 

src/components/Bibliography.js

@@ -1,17 +1,21 @@
 import React, { useState, useEffect } from "react";
 import { useLocation } from "@docusaurus/router";
+import useBaseUrl from "@docusaurus/useBaseUrl";
 import { useReportId } from "../contexts/ReportIdContext";
 
 const Bibliography = () => {
   const [citations, setCitations] = useState([]);
   const location = useLocation();
   const reportId = useReportId ? useReportId() : null;
+  const docsBase = useBaseUrl("docs/");
+  const bibsBase = useBaseUrl("bibliographies/");
+  const countersBase = useBaseUrl("counters/");
 
   // Extract the current path from the URL
   const pathname = location.pathname;
-  const reportPath = pathname.replace(/^\/RMC-Software-Documentation\/docs\//, "/RMC-Software-Documentation/bibliographies/").replace(/\/[^/]*$/, "");
+  const reportPath = pathname.replace(docsBase, bibsBase).replace(/\/[^/]*$/, "");
   const bibFilePath = `${reportPath}/bib.json`;
-  const countersFilePath = reportId ? `/RMC-Software-Documentation/counters/${reportId}.json` : null;
+  const countersFilePath = reportId ? `${countersBase}${reportId}.json` : null;
 
   useEffect(() => {
     let isMounted = true;

src/components/Citation.js

@@ -1,4 +1,5 @@
 import { useLocation } from '@docusaurus/router';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import { useEffect, useState, useSyncExternalStore } from 'react';
 import { useReportId } from '../contexts/ReportIdContext';
 import '../css/custom.css';
@@ -70,14 +71,13 @@ const Citation = ({ citationKey }) => {
   const location = useLocation();
   const pathname = location.pathname; // treat as docId
   const reportId = useReportId ? useReportId() : null;
+  const docsBase = useBaseUrl('docs/');
+  const bibsBase = useBaseUrl('bibliographies/');
+  const countersBase = useBaseUrl('counters/');
 
-  const reportPath = pathname
-    .replace(/^\/RMC-Software-Documentation\/docs\//, '/RMC-Software-Documentation/bibliographies/')
-    .replace(/\/[^/]*$/, '');
+  const reportPath = pathname.replace(docsBase, bibsBase).replace(/\/[^/]*$/, '');
   const bibFilePath = `${reportPath}/bib.json`;
-  const countersFilePath = reportId
-    ? `/RMC-Software-Documentation/counters/${reportId}.json`
-    : null;
+  const countersFilePath = reportId ? `${countersBase}${reportId}.json` : null;
 
   // Number comes from counters (original logic)
   useEffect(() => {

src/components/CitationFootnote.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useUsedCitations } from "./Citation";
 import { useLocation } from "@docusaurus/router";
+import useBaseUrl from "@docusaurus/useBaseUrl";
 import { useReportId } from "../contexts/ReportIdContext";
 import "../css/custom.css";
 
@@ -9,10 +10,13 @@ const CitationFootnote = () => {
   const location = useLocation();
   const pathname = location.pathname; // docId
   const reportId = useReportId ? useReportId() : null;
+  const docsBase = useBaseUrl("docs/");
+  const bibsBase = useBaseUrl("bibliographies/");
+  const countersBase = useBaseUrl("counters/");
 
-  const reportPath = pathname.replace(/^\/RMC-Software-Documentation\/docs\//, "/RMC-Software-Documentation/bibliographies/").replace(/\/[^/]*$/, "");
+  const reportPath = pathname.replace(docsBase, bibsBase).replace(/\/[^/]*$/, "");
   const bibFilePath = `${reportPath}/bib.json`;
-  const countersFilePath = reportId ? `/RMC-Software-Documentation/counters/${reportId}.json` : null;
+  const countersFilePath = reportId ? `${countersBase}${reportId}.json` : null;
 
   // Subscribe to per-page used keys (for filtering to only those used here)
   const usedKeys = useUsedCitations(pathname);

src/components/Equation.js

@@ -1,3 +1,4 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import 'katex/dist/katex.min.css';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { BlockMath, InlineMath } from 'react-katex';
@@ -10,10 +11,11 @@ const Equation = ({ equationKey, equation, inline = false, id }) => {
   const reportId = useReportId();
   const equationId = id || equationKey;
   const mathRef = useRef(null);
+  const countersBase = useBaseUrl('counters/');
 
   useEffect(() => {
     if (!reportId) return;
-    const jsonPath = `/RMC-Software-Documentation/counters/${reportId}.json`;
+    const jsonPath = `${countersBase}${reportId}.json`;
     (async () => {
       try {
         const res = await fetch(jsonPath);
@@ -26,7 +28,7 @@ const Equation = ({ equationKey, equation, inline = false, id }) => {
         console.error('Error loading counters:', e);
       }
     })();
-  }, [reportId, equationKey]);
+  }, [reportId, equationKey, countersBase]);
 
   const scaleEquation = useCallback(() => {
     const wrapper = mathRef.current;

src/components/EquationReference.js

@@ -1,19 +1,19 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import { useEffect, useMemo, useState } from 'react';
 import { useReportId } from '../contexts/ReportIdContext';
 import '../css/custom.css';
 
-const STATIC_BASE = '/RMC-Software-Documentation';
-const DOCS_ROUTE_BASE = '/RMC-Software-Documentation/docs';
-
 const toDocSlug = (docId = '') => docId.replace(/\.mdx$/i, '').replace(/^\d{1,3}-/, '');
 
 const EquationReference = ({ equationKey }) => {
   const [equationInfo, setEquationInfo] = useState(null);
   const reportId = useReportId();
+  const countersBase = useBaseUrl('counters/');
+  const docsRouteBase = useBaseUrl('docs');
 
   useEffect(() => {
     if (!reportId) return;
-    const jsonPath = `${STATIC_BASE}/counters/${reportId}.json`;
+    const jsonPath = `${countersBase}${reportId}.json`;
     (async () => {
       try {
         const res = await fetch(jsonPath);
@@ -26,16 +26,16 @@ const EquationReference = ({ equationKey }) => {
         console.error('Error loading counters:', e);
       }
     })();
-  }, [reportId, equationKey]);
+  }, [reportId, equationKey, countersBase]);
 
   const targetId = equationKey;
 
   const docSlug = useMemo(() => toDocSlug(equationInfo?.docId), [equationInfo?.docId]);
 
   const targetDocPath = useMemo(() => {
     if (!equationInfo?.parentDocPath || !docSlug) return '';
-    return `${DOCS_ROUTE_BASE}/${equationInfo.parentDocPath}/${docSlug}`;
-  }, [equationInfo?.parentDocPath, docSlug]);
+    return `${docsRouteBase}/${equationInfo.parentDocPath}/${docSlug}`;
+  }, [equationInfo?.parentDocPath, docSlug, docsRouteBase]);
 
   const isSamePage = useMemo(() => {
     const normalize = (p) => (p?.endsWith('/') ? p.slice(0, -1) : p || '');

src/components/Figure.js

@@ -1,3 +1,4 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import { useEffect, useState } from 'react';
 import { useReportId } from '../contexts/ReportIdContext'; // Import the context hook to retrieve the reportId
 import imageDimensions from '../imageDimensions';
@@ -6,6 +7,8 @@ import '../css/custom.css';
 const Figure = ({ figKey, src, alt, caption, width = '80%', background = 'filled', id }) => {
   const [figInfo, setFigInfo] = useState(null);
   const reportId = useReportId(); // Get the reportId from the context
+  const imgUrl = useBaseUrl(src);
+  const countersBase = useBaseUrl('counters/');
 
   // If id is not passed, fall back to figKey
   const figureId = id || figKey;
@@ -17,7 +20,7 @@ const Figure = ({ figKey, src, alt, caption, width = '80%', background = 'filled
   useEffect(() => {
     if (!reportId) return; // If reportId is not available, don't fetch
 
-    const jsonPath = `/RMC-Software-Documentation/counters/${reportId}.json`; // Use reportId to determine the path
+    const jsonPath = `${countersBase}${reportId}.json`;
 
     const loadCounters = async () => {
       try {
@@ -43,13 +46,13 @@ const Figure = ({ figKey, src, alt, caption, width = '80%', background = 'filled
     };
 
     loadCounters();
-  }, [reportId, figKey]);
+  }, [reportId, figKey, countersBase]);
 
   const imgBgClass = background === 'transparent' ? '' : 'bg-surface-page dark:bg-white';
 
   return (
     <figure id={figureId} className="my-[1em] ml-0 mr-auto w-full justify-items-start border-y border-border-color py-5">
-      <img src={`/RMC-Software-Documentation/${src}`} alt={alt} className={`block h-auto ${imgBgClass}`} style={{ maxWidth: width }} width={dims?.width} height={dims?.height} />
+      <img src={imgUrl} alt={alt} className={`block h-auto ${imgBgClass}`} style={{ maxWidth: width }} width={dims?.width} height={dims?.height} />
       <figcaption className="mt-[1em] max-w-full text-left font-usace text-caption italic text-gray-500 dark:text-gray-400">
         {figInfo ? `Figure ${figInfo.figNumber}` : 'Figure'}: {caption}
       </figcaption>

src/components/FigureInline.js

@@ -1,8 +1,9 @@
+import useBaseUrl from "@docusaurus/useBaseUrl";
 import React from "react";
 import "../css/custom.css";
 
 const FigureInline = ({ src }) => {
-  const imgSrc = `/RMC-Software-Documentation/${src}`;
+  const imgSrc = useBaseUrl(src);
 
   return <img src={imgSrc} className="inline-block !h-[1em] !w-auto align-middle" />;
 };

src/components/FigureNoRef.js

@@ -1,3 +1,4 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import imageDimensions from '../imageDimensions';
 import '../css/custom.css';
 
@@ -6,11 +7,12 @@ const FigureNoRef = ({ src, alt, width = '80%', background = 'filled' }) => {
 
   const normalizedSrc = src.replace(/^\//, '');
   const dims = imageDimensions[normalizedSrc];
+  const imgUrl = useBaseUrl(src);
 
   return (
     <figure className="my-[1em] ml-0 mr-auto w-full justify-items-start border-y border-border-color py-5">
       <img
-        src={`/RMC-Software-Documentation/${src}`}
+        src={imgUrl}
         alt={alt}
         className={`block h-auto ${imgBgClass}`}
         style={{ maxWidth: width }}

src/components/FigureReference.js

@@ -1,10 +1,8 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useReportId } from '../contexts/ReportIdContext';
 import '../css/custom.css';
 
-const STATIC_BASE = '/RMC-Software-Documentation'; // for /static assets like /counters
-const DOCS_ROUTE_BASE = '/RMC-Software-Documentation/docs'; // for doc pages
-
 // strip ".mdx" and any leading "digits-" prefix (e.g., "05-schmertmann" -> "schmertmann")
 const toDocSlug = (docId = '') => docId.replace(/\.mdx$/i, '').replace(/^\d{1,3}-/, '');
 
@@ -17,10 +15,13 @@ const FigReference = ({ figKey, suffix }) => {
   const reportId = useReportId();
   const showTimer = useRef(null);
   const hideTimer = useRef(null);
+  const countersBase = useBaseUrl('counters/');
+  const staticBase = useBaseUrl('/');
+  const docsRouteBase = useBaseUrl('docs');
 
   useEffect(() => {
     if (!reportId) return;
-    const jsonPath = `${STATIC_BASE}/counters/${reportId}.json`;
+    const jsonPath = `${countersBase}${reportId}.json`;
     (async () => {
       try {
         const res = await fetch(jsonPath);
@@ -33,16 +34,16 @@ const FigReference = ({ figKey, suffix }) => {
         console.error('Error loading counters:', e);
       }
     })();
-  }, [reportId, figKey]);
+  }, [reportId, figKey, countersBase]);
 
   const targetId = figKey;
 
   const docSlug = useMemo(() => toDocSlug(figInfo?.docId), [figInfo?.docId]);
 
   const targetDocPath = useMemo(() => {
     if (!figInfo?.parentDocPath || !docSlug) return '';
-    return `${DOCS_ROUTE_BASE}/${figInfo.parentDocPath}/${docSlug}`;
-  }, [figInfo?.parentDocPath, docSlug]);
+    return `${docsRouteBase}/${figInfo.parentDocPath}/${docSlug}`;
+  }, [figInfo?.parentDocPath, docSlug, docsRouteBase]);
 
   const isSamePage = useMemo(() => {
     const normalize = (p) => (p?.endsWith('/') ? p.slice(0, -1) : p || '');
@@ -75,7 +76,7 @@ const FigReference = ({ figKey, suffix }) => {
 
   if (!figInfo) return <span className="font-usace text-normal whitespace-nowrap">Figure</span>;
 
-  const imgSrc = figInfo.src ? `${STATIC_BASE}/${figInfo.src}` : '';
+  const imgSrc = figInfo.src ? `${staticBase}${figInfo.src.replace(/^\//, '')}` : '';
 
   return (
     <span className="relative inline whitespace-nowrap" onMouseEnter={handleEnter} onMouseLeave={handleLeave}>

src/components/TableHorizontal.js

@@ -1,3 +1,4 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import { useEffect, useState } from 'react';
 import { useReportId } from '../contexts/ReportIdContext';
 import '../css/custom.css';
@@ -21,10 +22,11 @@ const TableHorizontal = ({
   const [tableInfo, setTableInfo] = useState(null);
   const reportId = useReportId();
   const tableId = id || tableKey;
+  const countersBase = useBaseUrl('counters/');
 
   useEffect(() => {
     if (!reportId) return;
-    const jsonPath = `/RMC-Software-Documentation/counters/${reportId}.json`;
+    const jsonPath = `${countersBase}${reportId}.json`;
     (async () => {
       try {
         const response = await fetch(jsonPath);
@@ -37,7 +39,7 @@ const TableHorizontal = ({
         console.error('Error loading counters:', error);
       }
     })();
-  }, [reportId, tableKey]);
+  }, [reportId, tableKey, countersBase]);
 
   const renderHTML = (content) => ({ __html: content });
 

src/components/TableReference.js

@@ -1,20 +1,20 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import { useEffect, useMemo, useState } from 'react';
 import { useReportId } from '../contexts/ReportIdContext';
 import '../css/custom.css';
 
-const STATIC_BASE = '/RMC-Software-Documentation'; // for /static assets like /counters
-const DOCS_ROUTE_BASE = '/RMC-Software-Documentation/docs'; // for doc pages
-
 // strip ".mdx" and any leading "digits-" prefix (e.g., "05-schmertmann" -> "schmertmann")
 const toDocSlug = (docId = '') => docId.replace(/\.mdx$/i, '').replace(/^\d{1,3}-/, '');
 
 const TableReference = ({ tableKey }) => {
   const [tableInfo, setTableInfo] = useState(null);
   const reportId = useReportId();
+  const countersBase = useBaseUrl('counters/');
+  const docsRouteBase = useBaseUrl('docs');
 
   useEffect(() => {
     if (!reportId) return;
-    const jsonPath = `${STATIC_BASE}/counters/${reportId}.json`;
+    const jsonPath = `${countersBase}${reportId}.json`;
     (async () => {
       try {
         const res = await fetch(jsonPath);
@@ -27,16 +27,16 @@ const TableReference = ({ tableKey }) => {
         console.error('Error loading counters:', e);
       }
     })();
-  }, [reportId, tableKey]);
+  }, [reportId, tableKey, countersBase]);
 
   const targetId = tableKey;
 
   const docSlug = useMemo(() => toDocSlug(tableInfo?.docId), [tableInfo?.docId]);
 
   const targetDocPath = useMemo(() => {
     if (!tableInfo?.parentDocPath || !docSlug) return '';
-    return `${DOCS_ROUTE_BASE}/${tableInfo.parentDocPath}/${docSlug}`;
-  }, [tableInfo?.parentDocPath, docSlug]);
+    return `${docsRouteBase}/${tableInfo.parentDocPath}/${docSlug}`;
+  }, [tableInfo?.parentDocPath, docSlug, docsRouteBase]);
 
   const isSamePage = useMemo(() => {
     const normalize = (p) => (p?.endsWith('/') ? p.slice(0, -1) : p || '');

src/components/TableVertical.js

@@ -1,3 +1,4 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import { useEffect, useState } from 'react';
 import { useReportId } from '../contexts/ReportIdContext';
 import '../css/custom.css';
@@ -21,10 +22,11 @@ const TableVertical = ({
   const [tableInfo, setTableInfo] = useState(null);
   const reportId = useReportId();
   const tableId = id || tableKey;
+  const countersBase = useBaseUrl('counters/');
 
   useEffect(() => {
     if (!reportId) return;
-    const jsonPath = `/RMC-Software-Documentation/counters/${reportId}.json`;
+    const jsonPath = `${countersBase}${reportId}.json`;
     (async () => {
       try {
         const response = await fetch(jsonPath);
@@ -37,7 +39,7 @@ const TableVertical = ({
         console.error('Error loading counters:', error);
       }
     })();
-  }, [reportId, tableKey]);
+  }, [reportId, tableKey, countersBase]);
 
   const renderHTML = (content) => ({ __html: content });