Fix cross-references and example image paths with base path

Author: milanofthe

src/lib/components/api/DocstringRenderer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, tick } from 'svelte';
+	import { base } from '$app/paths';
 	import { goto } from '$app/navigation';
 	import { loadKatex, getKatexCssUrl } from '$lib/utils/katexLoader';
 	import { loadCodeMirrorModules, createEditorExtensions, type CodeMirrorModules } from '$lib/utils/codemirror';
@@ -15,7 +16,7 @@
 	let { html }: Props = $props();
 
 	// Process HTML for cross-references
-	let processedHtml = $derived(processCrossRefs(html));
+	let processedHtml = $derived(processCrossRefs(html, base));
 
 	let container: HTMLDivElement | undefined = $state();
 	let katexLoaded = $state(false);

src/lib/components/common/MarkdownRenderer.svelte

@@ -4,6 +4,7 @@
 	 * Mirrors DocstringRenderer functionality: KaTeX math, CodeMirror code blocks, cross-refs
 	 */
 	import { onMount, tick } from 'svelte';
+	import { base } from '$app/paths';
 	import { goto } from '$app/navigation';
 	import { marked } from 'marked';
 	import { loadKatex, getKatexCssUrl } from '$lib/utils/katexLoader';
@@ -62,7 +63,7 @@
 		// Protect math blocks before marked processes them
 		const { text: protected_, blocks } = protectMath(markdown);
 		const rawHtml = marked.parse(protected_, { async: false }) as string;
-		return { html: processCrossRefs(rawHtml), mathBlocks: blocks };
+		return { html: processCrossRefs(rawHtml, base), mathBlocks: blocks };
 	});
 
 	let html = $derived(processedMarkdown.html);

src/lib/components/common/RstRenderer.svelte

@@ -5,6 +5,7 @@
 	 * For full RST rendering, content should be pre-processed to HTML
 	 */
 	import { onMount, tick } from 'svelte';
+	import { base } from '$app/paths';
 	import { goto } from '$app/navigation';
 	import { loadKatex, getKatexCssUrl } from '$lib/utils/katexLoader';
 	import { loadCodeMirrorModules, createEditorExtensions, type CodeMirrorModules } from '$lib/utils/codemirror';
@@ -255,7 +256,7 @@
 				.replace(/``([^`]+)``/g, '<code>$1</code>');
 
 			// Process cross-references for class/function names
-			para = processCrossRefs(para);
+			para = processCrossRefs(para, base);
 
 			blocks.push({ type: 'paragraph', content: para });
 		}

src/lib/utils/crossref.ts

@@ -23,7 +23,7 @@ function buildCrossRefIndex(): Map<string, CrossRefTarget> {
 	const index = new Map<string, CrossRefTarget>();
 
 	for (const [packageId, pkg] of Object.entries(apiData)) {
-		const basePath = `/${packageId}/api`;
+		const basePath = `${packageId}/api`;
 
 		for (const [moduleName, module] of Object.entries(pkg.modules)) {
 			// Add module
@@ -118,17 +118,20 @@ export function lookupRef(name: string): CrossRefTarget | undefined {
  * - Title tag references from docutils: <cite>ClassName</cite>
  * - Single-quoted class names in text: 'ClassName'
  */
-export function processCrossRefs(html: string, currentPackageId?: string): string {
+export function processCrossRefs(html: string, basePath: string = '', currentPackageId?: string): string {
 	const index = getCrossRefIndex();
 
+	// Helper to build full path with base
+	const fullPath = (path: string) => `${basePath}/${path}`;
+
 	// 1. Handle RST role syntax: :class:`Name`, :func:`Name`, :meth:`Name`, :mod:`Name`
 	// These often get converted to various forms by docutils
 	html = html.replace(
 		/<code class="xref[^"]*">([^<]+)<\/code>/g,
 		(match, name) => {
 			const target = index.get(name.trim());
 			if (target) {
-				return `<a href="${target.path}" class="crossref crossref-${target.type}">${name}</a>`;
+				return `<a href="${fullPath(target.path)}" class="crossref crossref-${target.type}">${name}</a>`;
 			}
 			return match;
 		}
@@ -141,7 +144,7 @@ export function processCrossRefs(html: string, currentPackageId?: string): strin
 			const trimmed = name.trim();
 			const target = index.get(trimmed);
 			if (target) {
-				return `<a href="${target.path}" class="crossref crossref-${target.type}">${name}</a>`;
+				return `<a href="${fullPath(target.path)}" class="crossref crossref-${target.type}">${name}</a>`;
 			}
 			return match;
 		}
@@ -155,7 +158,7 @@ export function processCrossRefs(html: string, currentPackageId?: string): strin
 			// Skip if it looks like it's already part of a link
 			const target = index.get(name);
 			if (target && target.type === 'class') {
-				return `<a href="${target.path}" class="crossref crossref-class"><code>${name}</code></a>`;
+				return `<a href="${fullPath(target.path)}" class="crossref crossref-class"><code>${name}</code></a>`;
 			}
 			return match;
 		}
@@ -167,7 +170,7 @@ export function processCrossRefs(html: string, currentPackageId?: string): strin
 		(match, title, text) => {
 			const target = index.get(title) || index.get(text);
 			if (target) {
-				return `<a href="${target.path}" class="crossref crossref-${target.type}">${text}</a>`;
+				return `<a href="${fullPath(target.path)}" class="crossref crossref-${target.type}">${text}</a>`;
 			}
 			return match;
 		}
@@ -180,7 +183,7 @@ export function processCrossRefs(html: string, currentPackageId?: string): strin
 		(match, name) => {
 			const target = index.get(name);
 			if (target && target.type === 'class') {
-				return `<a href="${target.path}" class="crossref crossref-class">'${name}'</a>`;
+				return `<a href="${fullPath(target.path)}" class="crossref crossref-class">'${name}'</a>`;
 			}
 			return match;
 		}

src/routes/pathsim/examples/[slug]/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { Notebook } from '$lib/components/notebook';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import type { PageData } from './$types';
 
 	let { data }: { data: PageData } = $props();
 
-	let basePath = $derived(`/notebooks/${data.packageId}`);
+	let basePath = $derived(`${base}/notebooks/${data.packageId}`);
 </script>
 
 <svelte:head>