Skip to content

Commit 0ced422

Browse files
sjockerssjockers
committed
Alternative setup: Svelte only, clientside rendering
1 parent 9f6a09f commit 0ced422

20 files changed

+317
-166
lines changed

‎package-lock.json‎

Lines changed: 165 additions & 82 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sophora-components/datawrapper-switcher.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
7+
<style>
8+
@font-face {
9+
font-family: 'SWR-VAR-Sans';
10+
font-weight: 400 600 700;
11+
font-display: swap;
12+
src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Sans.woff2')
13+
format('woff2');
14+
}
15+
16+
@font-face {
17+
font-family: 'SWR-VAR-Text';
18+
font-weight: 400 600 700;
19+
font-display: swap;
20+
src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Text.woff2')
21+
format('woff2');
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<div data-lab-components-embed="swr-sophora-components-datawrapper-switcher"></div>
27+
<script type="module" src="/src/entries/datawrapper-switcher.ts"></script>
28+
</body>
29+
</html>

‎sophora-components/highlight-cards.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
7+
<style>
8+
@font-face {
9+
font-family: 'SWR-VAR-Sans';
10+
font-weight: 400 600 700;
11+
font-display: swap;
12+
src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Sans.woff2')
13+
format('woff2');
14+
}
15+
16+
@font-face {
17+
font-family: 'SWR-VAR-Text';
18+
font-weight: 400 600 700;
19+
font-display: swap;
20+
src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Text.woff2')
21+
format('woff2');
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<div data-lab-components-embed="swr-sophora-components-highlight-cards"></div>
27+
<script type="module" src="/src/entries/highlight-cards.ts"></script>
28+
</body>
29+
</html>

sophora-components/src/app.html renamed to sophora-components/index.html

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
65
<meta name="viewport" content="width=device-width, initial-scale=1" />
76

8-
%sveltekit.head%
9-
107
<style>
118
@font-face {
129
font-family: 'SWR-VAR-Sans';
@@ -25,7 +22,8 @@
2522
}
2623
</style>
2724
</head>
28-
<body data-sveltekit-preload-data="hover">
29-
<div id="data-lab-components-embed">%sveltekit.body%</div>
25+
<body>
26+
<div data-lab-components-embed="swr-sophora-components"></div>
27+
<script type="module" src="/src/entries/index.ts"></script>
3028
</body>
3129
</html>

‎sophora-components/package.json‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,17 @@
44
"version": "0.0.1",
55
"type": "module",
66
"scripts": {
7-
"dev": "vite dev",
8-
"build": "svelte-kit sync && vite build",
7+
"dev": "vite",
8+
"build": "vite build",
99
"preview": "vite preview",
10-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
11-
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
10+
"check": "svelte-check --tsconfig ./tsconfig.json",
11+
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
1212
"format": "prettier --write .",
1313
"lint": "prettier --check . && eslint ."
1414
},
1515
"devDependencies": {
1616
"@eslint/compat": "^2.0.2",
1717
"@eslint/js": "^9.39.2",
18-
"@sveltejs/adapter-static": "^3.0.10",
19-
"@sveltejs/kit": "^2.53.4",
2018
"@sveltejs/vite-plugin-svelte": "^6.2.4",
2119
"@swr-data-lab/components": "^2.43.0",
2220
"@types/node": "^22",

‎sophora-components/src/app.d.ts‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

sophora-components/src/routes/datawrapper-switcher/DatawrapperSwitcher.svelte renamed to sophora-components/src/components/DatawrapperSwitcher.svelte

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script>
22
import getDataFromUrl from '$lib/utils/getDataFromUrl';
3-
import { Switcher, DesignTokens } from '@swr-data-lab/components';
3+
import Switcher from '../../../components/src/Switcher/Switcher.svelte';
4+
import DesignTokens from '../../../components/src/DesignTokens/DesignTokens.svelte';
45
import { onMount } from 'svelte';
5-
import { browser } from '$app/environment';
66
77
let activeIndex = $state(0);
88
let root = $state(null);
@@ -11,11 +11,13 @@
1111
let fixedHeight = $state(null);
1212
let layout = $state('auto');
1313
14-
let url = $state(browser ? window.location.href : null);
14+
let url = $state('');
1515
let error = $state(null);
1616
1717
console.log('DatawrapperSwitcher initialized with url:', url);
18+
1819
onMount(() => {
20+
url = window.location.href;
1921
console.log('DatawrapperSwitcher mounted with root:', root);
2022
2123
try {

sophora-components/src/routes/highlight-cards/HighlightCards.svelte renamed to sophora-components/src/components/HighlightCards.svelte

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script>
22
import getDataFromUrl from '$lib/utils/getDataFromUrl';
3-
import { DesignTokens, HighlightCard } from '@swr-data-lab/components';
3+
import DesignTokens from '../../../components/src/DesignTokens/DesignTokens.svelte';
4+
import HighlightCard from '../../../components/src/HighlightCard/HighlightCard.svelte';
45
import { onMount } from 'svelte';
56
67
let root;
@@ -14,7 +15,7 @@
1415

1516
<div class="highlight-cards" bind:this={root}>
1617
<DesignTokens>
17-
{#each entries as entry}
18+
{#each entries as entry, index (index)}
1819
<HighlightCard
1920
topline={entry.topline}
2021
value={entry.value}

‎sophora-components/src/entries/datawrapper-switcher.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { mount } from 'svelte';
2+
import DatawrapperSwitcherPage from '../pages/DatawrapperSwitcherPage.svelte';
3+
4+
mount(DatawrapperSwitcherPage, {
5+
target: document.querySelector(
6+
'[data-lab-components-embed="swr-sophora-components-datawrapper-switcher"]'
7+
)!
8+
});

‎sophora-components/src/entries/highlight-cards.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { mount } from 'svelte';
2+
import HighlightCardsPage from '../pages/HighlightCardsPage.svelte';
3+
4+
mount(HighlightCardsPage, {
5+
target: document.querySelector(
6+
'[data-lab-components-embed="swr-sophora-components-highlight-cards"]'
7+
)!
8+
});

0 commit comments

Comments
 (0)