Fix asset and route paths for subdirectory deployment

milanofthe · milanofthe · commit d2e9cd7f41ba · 2026-01-21T17:00:40.000+01:00
diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import Icon from '$lib/components/common/Icon.svelte';
 	import { tooltip } from '$lib/components/common/Tooltip.svelte';
@@ -16,7 +17,7 @@
 	let activePackage = $derived.by(() => {
 		const path = $page.url.pathname;
 		for (const id of packageOrder) {
-			if (path.startsWith(`/${id}`)) {
+			if (path.startsWith(`${base}/${id}`)) {
 				return id;
 			}
 		}
@@ -32,14 +33,14 @@
 					<Icon name="menu" size={14} />
 				</button>
 			{/if}
-			<a href="/" class="icon-btn" use:tooltip={'Docs Home'}>
-				<img src="/favicon.png" alt="PathSim" class="logo-icon" />
+			<a href="{base}/" class="icon-btn" use:tooltip={'Docs Home'}>
+				<img src="{base}/favicon.png" alt="PathSim" class="logo-icon" />
 			</a>
 			<nav class="package-tabs">
 				{#each packageOrder as id}
 					{@const pkg = packages[id]}
 					<a
-						href={pkg.docs}
+						href="{base}/{pkg.docs}"
 						class="package-tab"
 						class:active={activePackage === id}
 						use:tooltip={pkg.name}
diff --git a/src/lib/components/layout/MobileDrawer.svelte b/src/lib/components/layout/MobileDrawer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import Icon from '$lib/components/common/Icon.svelte';
 	import Sidebar from './Sidebar.svelte';
 	import { packages, packageOrder, type PackageId } from '$lib/config/packages';
@@ -48,7 +49,7 @@
 				{#each packageOrder as id}
 					{@const pkg = packages[id]}
 					<a
-						href={pkg.docs}
+						href="{base}/{pkg.docs}"
 						class="mobile-package-link"
 						class:active={packageId === id}
 						onclick={onClose}
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import Icon from '$lib/components/common/Icon.svelte';
@@ -26,7 +27,7 @@
 	let isExamplesListPage = $derived($page.url.pathname.endsWith('/examples'));
 
 	function isActive(path: string): boolean {
-		return $page.url.pathname === path;
+		return $page.url.pathname === `${base}/${path}`;
 	}
 
 	function handleSearchKeydown(event: KeyboardEvent) {
@@ -44,7 +45,7 @@
 			type: result.type,
 			parentClass: result.parentClass
 		});
-		goto(result.path);
+		goto(`${base}/${result.path}`);
 	}
 
 	function handleTocNavigate(id: string) {
@@ -99,7 +100,7 @@
 		{:else}
 			<nav class="sidebar-nav">
 				{#each items as item}
-					<a href={item.path} class="sidebar-item" class:active={isActive(item.path)}>
+					<a href="{base}/{item.path}" class="sidebar-item" class:active={isActive(item.path)}>
 						{#if item.icon}
 							<Icon name={item.icon} size={14} />
 						{/if}
diff --git a/src/lib/components/pages/PackageExamples.svelte b/src/lib/components/pages/PackageExamples.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
+	import { base } from '$app/paths';
 	import { goto } from '$app/navigation';
 	import Icon from '$lib/components/common/Icon.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -34,7 +35,7 @@
 
 	onMount(async () => {
 		try {
-			manifest = await loadManifest(packageId);
+			manifest = await loadManifest(packageId, base);
 			// Populate store for sidebar TOC with grouped data
 			if (manifest) {
 				const grouped = groupByCategory(manifest.notebooks, manifest.categories);
diff --git a/src/lib/components/pages/PackageOverview.svelte b/src/lib/components/pages/PackageOverview.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import Icon from '$lib/components/common/Icon.svelte';
 	import Tooltip, { tooltip } from '$lib/components/common/Tooltip.svelte';
 	import NotebookCell from '$lib/components/common/NotebookCell.svelte';
@@ -34,15 +35,15 @@
 <Tooltip />
 
 <div class="hero">
-	<img src={pkg.logo} alt={pkg.name} class="hero-logo" />
+	<img src="{base}/{pkg.logo}" alt={pkg.name} class="hero-logo" />
 	<p class="description">{pkg.description}</p>
 	<div class="hero-actions">
-		<a href={pkg.api} class="action-card">
+		<a href="{base}/{pkg.api}" class="action-card">
 			<Icon name="braces" size={20} />
 			<span class="action-label">API</span>
 		</a>
 		{#if pkg.examples}
-			<a href={pkg.examples} class="action-card">
+			<a href="{base}/{pkg.examples}" class="action-card">
 				<Icon name="play" size={20} />
 				<span class="action-label">Examples</span>
 			</a>
diff --git a/src/lib/config/packages.ts b/src/lib/config/packages.ts
@@ -64,10 +64,10 @@ export const packages: Record<PackageId, PackageConfig> = {
 		name: 'PathSim',
 		shortName: 'pathsim',
 		description: 'A Python library for building and simulating continuous-time, discrete-time, and hybrid dynamical systems using a block-diagram approach.',
-		logo: '/pathsim_logo.png',
-		docs: '/pathsim',
-		api: '/pathsim/api',
-		examples: '/pathsim/examples',
+		logo: 'pathsim_logo.png',
+		docs: 'pathsim',
+		api: 'pathsim/api',
+		examples: 'pathsim/examples',
 		pypi: `${external.pypi}/pathsim`,
 		github: `${external.github}/pathsim`,
 		features: [
@@ -118,9 +118,9 @@ scope.plot()`,
 		name: 'PathSim-Chem',
 		shortName: 'chem',
 		description: 'Chemical engineering blocks for PathSim, including reactors, heat exchangers, and separation units.',
-		logo: '/pathsim_chem_logo.png',
-		docs: '/chem',
-		api: '/chem/api',
+		logo: 'pathsim_chem_logo.png',
+		docs: 'chem',
+		api: 'chem/api',
 		examples: null,
 		pypi: `${external.pypi}/pathsim-chem`,
 		github: `${external.github}/pathsim-chem`,
@@ -141,9 +141,9 @@ scope.plot()`,
 		name: 'PathSim-Vehicle',
 		shortName: 'vehicle',
 		description: 'Vehicle dynamics blocks for PathSim, including tire models, suspension systems, and powertrain components.',
-		logo: '/pathsim_vehicle_logo.png',
-		docs: '/vehicle',
-		api: '/vehicle/api',
+		logo: 'pathsim_vehicle_logo.png',
+		docs: 'vehicle',
+		api: 'vehicle/api',
 		examples: null,
 		pypi: null,
 		github: `${external.github}/pathsim-vehicle`,
diff --git a/src/lib/notebook/manifest.ts b/src/lib/notebook/manifest.ts
@@ -41,8 +41,8 @@ export interface NotebookManifest {
 /**
  * Load manifest for a package.
  */
-export async function loadManifest(packageId: string): Promise<NotebookManifest> {
-	const response = await fetch(`/notebooks/${packageId}/manifest.json`);
+export async function loadManifest(packageId: string, basePath: string = ''): Promise<NotebookManifest> {
+	const response = await fetch(`${basePath}/notebooks/${packageId}/manifest.json`);
 	if (!response.ok) {
 		throw new Error(`Failed to load manifest for ${packageId}: ${response.status}`);
 	}
@@ -52,8 +52,8 @@ export async function loadManifest(packageId: string): Promise<NotebookManifest>
 /**
  * Load a notebook JSON file.
  */
-export async function loadNotebook(packageId: string, filename: string): Promise<unknown> {
-	const response = await fetch(`/notebooks/${packageId}/${filename}`);
+export async function loadNotebook(packageId: string, filename: string, basePath: string = ''): Promise<unknown> {
+	const response = await fetch(`${basePath}/notebooks/${packageId}/${filename}`);
 	if (!response.ok) {
 		throw new Error(`Failed to load notebook ${filename}: ${response.status}`);
 	}
diff --git a/src/lib/utils/search.ts b/src/lib/utils/search.ts
@@ -33,7 +33,7 @@ function buildSearchIndex(): SearchResult[] {
 	const results: SearchResult[] = [];
 
 	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
@@ -89,6 +89,9 @@ function buildSearchIndex(): SearchResult[] {
 	return results;
 }
 
+// Base path for fetching, set via initExamplesSearch
+let basePath = '';
+
 /**
  * Load example manifests and build example search results
  */
@@ -100,7 +103,7 @@ async function loadExampleManifests(): Promise<SearchResult[]> {
 
 	for (const packageId of packageIds) {
 		try {
-			const response = await fetch(`/notebooks/${packageId}/manifest.json`);
+			const response = await fetch(`${basePath}/notebooks/${packageId}/manifest.json`);
 			if (!response.ok) continue;
 
 			const manifest: NotebookManifest = await response.json();
@@ -110,7 +113,7 @@ async function loadExampleManifests(): Promise<SearchResult[]> {
 					type: 'example',
 					name: notebook.title,
 					description: notebook.description || '',
-					path: `/${packageId}/examples/${notebook.slug}`,
+					path: `${packageId}/examples/${notebook.slug}`,
 					packageId,
 					moduleName: notebook.category,
 					tags: notebook.tags
@@ -140,7 +143,8 @@ function getSearchIndex(): SearchResult[] {
 /**
  * Initialize examples in the search index (call once on app load)
  */
-export async function initExamplesSearch(): Promise<void> {
+export async function initExamplesSearch(base: string = ''): Promise<void> {
+	basePath = base;
 	await loadExampleManifests();
 }
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '../app.css';
 	import { onMount } from 'svelte';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Icon from '$lib/components/common/Icon.svelte';
@@ -17,7 +18,7 @@
 	let currentPackage = $derived.by(() => {
 		const path = $page.url.pathname;
 		for (const id of packageOrder) {
-			if (path.startsWith(`/${id}`)) {
+			if (path.startsWith(`${base}/${id}`)) {
 				return id;
 			}
 		}
@@ -34,7 +35,7 @@
 		document.documentElement.setAttribute('data-theme', theme);
 
 		// Initialize examples in search index
-		initExamplesSearch();
+		initExamplesSearch(base);
 
 		const handleKeydown = (e: KeyboardEvent) => {
 			if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { goto } from '$app/navigation';
 	import Icon from '$lib/components/common/Icon.svelte';
 	import Tooltip, { tooltip } from '$lib/components/common/Tooltip.svelte';
@@ -24,7 +25,7 @@
 			type: result.type,
 			parentClass: result.parentClass
 		});
-		goto(result.path);
+		goto(`${base}/${result.path}`);
 	}
 
 	function getTypeIcon(type: SearchResult['type']): string {
@@ -48,7 +49,7 @@
 <div class="page-wrapper">
 	<main>
 		<header class="hero">
-			<img src="/pathsim_logo.png" alt="PathSim" class="hero-logo" />
+			<img src="{base}/pathsim_logo.png" alt="PathSim" class="hero-logo" />
 			<p class="tagline">Documentation for the PathSim ecosystem</p>
 			<p class="description">
 				API reference, tutorials, and examples for PathSim and its domain-specific toolboxes.
@@ -123,10 +124,10 @@
 					<div class="panel-header">
 						<span>{pkg.shortName}</span>
 						<div class="header-actions">
-							<a href={pkg.api} class="icon-btn" use:tooltip={'API'}>
+							<a href="{base}/{pkg.api}" class="icon-btn" use:tooltip={'API'}>
 								<Icon name="braces" size={14} />
 							</a>
-							<a href={pkg.docs} class="icon-btn" use:tooltip={'Docs'}>
+							<a href="{base}/{pkg.docs}" class="icon-btn" use:tooltip={'Docs'}>
 								<Icon name="book" size={14} />
 							</a>
 							{#if pkg.pypi}
@@ -135,7 +136,7 @@
 								</a>
 							{/if}
 							{#if pkg.examples}
-								<a href={pkg.examples} class="icon-btn" use:tooltip={'Examples'}>
+								<a href="{base}/{pkg.examples}" class="icon-btn" use:tooltip={'Examples'}>
 									<Icon name="play" size={14} />
 								</a>
 							{/if}
@@ -144,8 +145,8 @@
 							</a>
 						</div>
 					</div>
-					<a href={pkg.docs} class="package-body">
-						<img src={pkg.logo} alt={pkg.name} />
+					<a href="{base}/{pkg.docs}" class="package-body">
+						<img src="{base}/{pkg.logo}" alt={pkg.name} />
 					</a>
 				</div>
 			{/each}
diff --git a/src/routes/pathsim/examples/[slug]/+page.ts b/src/routes/pathsim/examples/[slug]/+page.ts
@@ -2,14 +2,15 @@ import type { PageLoad } from './$types';
 import type { NotebookManifest, NotebookMeta } from '$lib/notebook/manifest';
 import { parseNotebook, type NotebookData } from '$lib/notebook/parser';
 import { error } from '@sveltejs/kit';
+import { base } from '$app/paths';
 
 const PACKAGE_ID = 'pathsim';
 
 export const load: PageLoad = async ({ params, fetch }) => {
 	const { slug } = params;
 
 	// Load manifest to find notebook metadata (use SvelteKit's fetch for SSR)
-	const manifestResponse = await fetch(`/notebooks/${PACKAGE_ID}/manifest.json`);
+	const manifestResponse = await fetch(`${base}/notebooks/${PACKAGE_ID}/manifest.json`);
 	if (!manifestResponse.ok) {
 		throw error(500, { message: 'Failed to load manifest' });
 	}
@@ -23,7 +24,7 @@ export const load: PageLoad = async ({ params, fetch }) => {
 	}
 
 	// Load the actual notebook file
-	const response = await fetch(`/notebooks/${PACKAGE_ID}/${notebookMeta.file}`);
+	const response = await fetch(`${base}/notebooks/${PACKAGE_ID}/${notebookMeta.file}`);
 	if (!response.ok) {
 		throw error(404, {
 			message: `Failed to load notebook file: ${notebookMeta.file}`
