From 21801694d23f2d381a8252da4e746768ee2f5b76 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Tue, 29 Jul 2025 15:43:41 +0200
Subject: [PATCH 1/4] fix(ChartList): Use relative paths in links

---
 components/src/ChartList/ChartList.stories.svelte | 6 ++----
 components/src/ChartList/ChartList.svelte         | 6 +++---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/src/ChartList/ChartList.stories.svelte b/components/src/ChartList/ChartList.stories.svelte
index c85ca2aa..23895c59 100644
--- a/components/src/ChartList/ChartList.stories.svelte
+++ b/components/src/ChartList/ChartList.stories.svelte
@@ -34,10 +34,8 @@
 		await step('All chart list items render as links', async () => {
 			testCharts.forEach((c) => {
 				const el = canvas.getByText(c.title);
-				expect(el).toBeTruthy();
-				expect(el.getAttribute('href')).toBe(
-					`https://static.datenhub.net/apps/p110_wald-klimawandel/main/${c.slug}`
-				);
+				expect(el).toBeInstanceOf(HTMLAnchorElement);
+				expect(el.getAttribute('href')).toBe(c.slug);
 			});
 		});
 
diff --git a/components/src/ChartList/ChartList.svelte b/components/src/ChartList/ChartList.svelte
index fd188c40..851fa85a 100644
--- a/components/src/ChartList/ChartList.svelte
+++ b/components/src/ChartList/ChartList.svelte
@@ -31,13 +31,13 @@
 				<tbody>
 					{#each charts as chart}
 						{@const url = baseUrl ? `${baseUrl}/${chart.slug}` : asset(chart.slug)}
-						{@const urlPostfixed = `${url}${dev ? '' : '.html'}`}
+						{@const postfix = dev ? '' : '.html'}
 						<tr>
 							<td>
-								<a href={urlPostfixed}>{chart.title}</a>
+								<a href="{asset(chart.slug)}{postfix}">{chart.title}</a>
 							</td>
 							<td>
-								<input type="text" value={urlPostfixed} />
+								<input type="text" value="{url}{postfix}" />
 							</td>
 						</tr>
 					{/each}

From 012aba80a6f76650a2a031c408d441887fc42419 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Tue, 29 Jul 2025 15:47:24 +0200
Subject: [PATCH 2/4] Improve tests (consistency across cases)

---
 components/src/ChartList/ChartList.stories.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/src/ChartList/ChartList.stories.svelte b/components/src/ChartList/ChartList.stories.svelte
index 23895c59..024f8d70 100644
--- a/components/src/ChartList/ChartList.stories.svelte
+++ b/components/src/ChartList/ChartList.stories.svelte
@@ -31,11 +31,11 @@
 			expect(titleEl).toHaveTextContent('Grafiken für p110: Wie sieht der Wald von morgen aus?');
 		});
 
-		await step('All chart list items render as links', async () => {
+		await step('All chart list items render as links using project-relative URLs', async () => {
 			testCharts.forEach((c) => {
 				const el = canvas.getByText(c.title);
 				expect(el).toBeInstanceOf(HTMLAnchorElement);
-				expect(el.getAttribute('href')).toBe(c.slug);
+				expect(el.getAttribute('href')).toBe(asset(c.slug));
 			});
 		});
 
@@ -67,7 +67,7 @@
 		await step('All chart list items render as links using project-relative URLs', async () => {
 			testCharts.forEach((c) => {
 				const el = canvas.getByText(c.title);
-				expect(el).toBeTruthy();
+				expect(el).toBeInstanceOf(HTMLAnchorElement);
 				expect(el.getAttribute('href')).toBe(asset(c.slug));
 			});
 		});

From e2e61c5860e1bb3bfd66eea0b8af150af0d185b6 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Tue, 29 Jul 2025 17:13:09 +0200
Subject: [PATCH 3/4] Always add `.html` to full URL

---
 components/src/ChartList/ChartList.stories.svelte | 2 +-
 components/src/ChartList/ChartList.svelte         | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/src/ChartList/ChartList.stories.svelte b/components/src/ChartList/ChartList.stories.svelte
index 024f8d70..76fceac6 100644
--- a/components/src/ChartList/ChartList.stories.svelte
+++ b/components/src/ChartList/ChartList.stories.svelte
@@ -42,7 +42,7 @@
 		await step('Embed URLs render', async () => {
 			testCharts.forEach((c) => {
 				const el = canvas.getByDisplayValue(
-					`https://static.datenhub.net/apps/p110_wald-klimawandel/main/${c.slug}`
+					`https://static.datenhub.net/apps/p110_wald-klimawandel/main/${c.slug}.html`
 				);
 				expect(el).toBeTruthy();
 			});
diff --git a/components/src/ChartList/ChartList.svelte b/components/src/ChartList/ChartList.svelte
index 851fa85a..f34d056f 100644
--- a/components/src/ChartList/ChartList.svelte
+++ b/components/src/ChartList/ChartList.svelte
@@ -30,14 +30,13 @@
 				</thead>
 				<tbody>
 					{#each charts as chart}
-						{@const url = baseUrl ? `${baseUrl}/${chart.slug}` : asset(chart.slug)}
-						{@const postfix = dev ? '' : '.html'}
+						{@const fullUrl = baseUrl ? `${baseUrl}/${chart.slug}.html` : asset(chart.slug)}
 						<tr>
 							<td>
-								<a href="{asset(chart.slug)}{postfix}">{chart.title}</a>
+								<a href="{asset(chart.slug)}{dev ? '' : '.html'}">{chart.title}</a>
 							</td>
 							<td>
-								<input type="text" value="{url}{postfix}" />
+								<input type="text" value={fullUrl} />
 							</td>
 						</tr>
 					{/each}

From b1abbbb73ae09c64c48132d28f45e50d4f2e88f0 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 30 Jul 2025 10:09:46 +0200
Subject: [PATCH 4/4] use resolve() instead of asset() to fix typescript
 warning

---
 components/src/ChartList/ChartList.stories.svelte | 8 ++++----
 components/src/ChartList/ChartList.svelte         | 8 +++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/src/ChartList/ChartList.stories.svelte b/components/src/ChartList/ChartList.stories.svelte
index 76fceac6..78d0c4fc 100644
--- a/components/src/ChartList/ChartList.stories.svelte
+++ b/components/src/ChartList/ChartList.stories.svelte
@@ -1,7 +1,7 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import { within, expect } from 'storybook/test';
-	import { asset } from '$app/paths';
+	import { resolve } from '$app/paths';
 
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
@@ -35,7 +35,7 @@
 			testCharts.forEach((c) => {
 				const el = canvas.getByText(c.title);
 				expect(el).toBeInstanceOf(HTMLAnchorElement);
-				expect(el.getAttribute('href')).toBe(asset(c.slug));
+				expect(el.getAttribute('href')).toBe(resolve('/' + c.slug));
 			});
 		});
 
@@ -68,13 +68,13 @@
 			testCharts.forEach((c) => {
 				const el = canvas.getByText(c.title);
 				expect(el).toBeInstanceOf(HTMLAnchorElement);
-				expect(el.getAttribute('href')).toBe(asset(c.slug));
+				expect(el.getAttribute('href')).toBe(resolve('/' + c.slug));
 			});
 		});
 
 		await step('Embed paths render using project-relative URLs', async () => {
 			testCharts.forEach((c) => {
-				const el = canvas.getByDisplayValue(asset(c.slug));
+				const el = canvas.getByDisplayValue(resolve('/' + c.slug));
 				expect(el).toBeTruthy();
 			});
 		});
diff --git a/components/src/ChartList/ChartList.svelte b/components/src/ChartList/ChartList.svelte
index f34d056f..fdd7254a 100644
--- a/components/src/ChartList/ChartList.svelte
+++ b/components/src/ChartList/ChartList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { dev } from '$app/environment';
-	import { asset } from '$app/paths';
+	import { resolve } from '$app/paths';
+	import type { RouteId } from '$app/types';
 
 	type ProjectPrefix = 'p' | 't';
 	type ProjectIdentifier = `${ProjectPrefix}${number}: ${string}`;
@@ -30,10 +31,11 @@
 				</thead>
 				<tbody>
 					{#each charts as chart}
-						{@const fullUrl = baseUrl ? `${baseUrl}/${chart.slug}.html` : asset(chart.slug)}
+						{@const route = `/${chart.slug}/` as RouteId}
+						{@const fullUrl = baseUrl ? `${baseUrl}/${chart.slug}.html` : resolve(route)}
 						<tr>
 							<td>
-								<a href="{asset(chart.slug)}{dev ? '' : '.html'}">{chart.title}</a>
+								<a href={dev ? resolve(route) : fullUrl}>{chart.title}</a>
 							</td>
 							<td>
 								<input type="text" value={fullUrl} />