Skip to content

fix(ChartList): Use relative paths in links #107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sjockers merged 4 commits into from
Jul 30, 2025
Merged

fix(ChartList): Use relative paths in links #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2180169
fix(ChartList): Use relative paths in links
sjockers Jul 29, 2025
012aba8
Improve tests (consistency across cases)
sjockers Jul 29, 2025
e2e61c5
Always add `.html` to full URL
sjockers Jul 29, 2025
b1abbbb
use resolve() instead of asset() to fix typescript warning
awesomephant Jul 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions components/src/ChartList/ChartList.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -31,20 +31,18 @@
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).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(resolve('/' + c.slug));
});
});

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();
});
Expand All @@ -69,14 +67,14 @@
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.getAttribute('href')).toBe(asset(c.slug));
expect(el).toBeInstanceOf(HTMLAnchorElement);
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();
});
});
Expand Down
11 changes: 6 additions & 5 deletions components/src/ChartList/ChartList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}`;
Expand Down Expand Up @@ -30,14 +31,14 @@
</thead>
<tbody>
{#each charts as chart}
{@const url = baseUrl ? `${baseUrl}/${chart.slug}` : asset(chart.slug)}
{@const urlPostfixed = `${url}${dev ? '' : '.html'}`}
{@const route = `/${chart.slug}/` as RouteId}
{@const fullUrl = baseUrl ? `${baseUrl}/${chart.slug}.html` : resolve(route)}
<tr>
<td>
<a href={urlPostfixed}>{chart.title}</a>
<a href={dev ? resolve(route) : fullUrl}>{chart.title}</a>
</td>
<td>
<input type="text" value={urlPostfixed} />
<input type="text" value={fullUrl} />
</td>
</tr>
{/each}
Expand Down