From 5ac346579c1a3b0ad3737ce4666f46fae7197e94 Mon Sep 17 00:00:00 2001 From: Simon Jockers <449739+sjockers@users.noreply.github.com> Date: Tue, 27 Jan 2026 18:51:23 +0100 Subject: [PATCH 01/19] feat(sophora-components): Add datawrapper-switcher component --- .../src/lib/utils/getDataFromUrl.ts | 19 ++++++ .../routes/datawrapper-switcher/+page.svelte | 63 +++++++++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 sophora-components/src/lib/utils/getDataFromUrl.ts create mode 100644 sophora-components/src/routes/datawrapper-switcher/+page.svelte diff --git a/sophora-components/src/lib/utils/getDataFromUrl.ts b/sophora-components/src/lib/utils/getDataFromUrl.ts new file mode 100644 index 00000000..1496a126 --- /dev/null +++ b/sophora-components/src/lib/utils/getDataFromUrl.ts @@ -0,0 +1,19 @@ +export default function getData(target: HTMLElement): Record { + let url: URL; + if ( + import.meta.env.DEV || + window.location.origin === 'https://static.datenhub.net' || + window.location.href.includes('apidata.googleusercontent.com') || + window.location.href.includes('storage.googleapis.com') + ) { + // Preview mode – use URL of current page + url = new URL(window.location.href); + } else { + // Embedded mode – use URL used to embed the component + // `data-url` is set on the grandparent element, provided by Sophora + const parent = target.parentNode?.parentNode as HTMLElement | null; + url = new URL(parent?.dataset.url || ''); + } + const params: Record = Object.fromEntries(url.searchParams); + return params; +} diff --git a/sophora-components/src/routes/datawrapper-switcher/+page.svelte b/sophora-components/src/routes/datawrapper-switcher/+page.svelte new file mode 100644 index 00000000..72cb6470 --- /dev/null +++ b/sophora-components/src/routes/datawrapper-switcher/+page.svelte @@ -0,0 +1,63 @@ + + + + { + activeIndex = labels.indexOf(currentTarget.value); + }} + /> + + {#each ids as id, index} +
+ +
+ {/each} +
+ + From 6bbe15720de4b6d35094e83d8f0bc80ed02e1b0d Mon Sep 17 00:00:00 2001 From: Simon Jockers <449739+sjockers@users.noreply.github.com> Date: Tue, 27 Jan 2026 20:01:43 +0100 Subject: [PATCH 02/19] Fix issues with chart dimensions, use `fixedHeight` property when set --- .../routes/datawrapper-switcher/+page.svelte | 58 ++++++++++++------- 1 file changed, 36 insertions(+), 22 deletions(-) diff --git a/sophora-components/src/routes/datawrapper-switcher/+page.svelte b/sophora-components/src/routes/datawrapper-switcher/+page.svelte index 72cb6470..bf01fcb5 100644 --- a/sophora-components/src/routes/datawrapper-switcher/+page.svelte +++ b/sophora-components/src/routes/datawrapper-switcher/+page.svelte @@ -3,6 +3,7 @@ import getDataFromUrl from '$lib/utils/getDataFromUrl'; import Switcher from '@components/Switcher'; import { DesignTokens } from '@components/DesignTokens'; + import DevContainer from '@components/DevContainer'; import { onMount } from 'svelte'; @@ -17,36 +18,49 @@ const entries = getDataFromUrl(root); labels = entries.labels.split(',') || []; ids = entries.ids.split(',') || []; - - // TODO: Implement these properties fixedHeight = entries.fixedHeight || null; + + // TODO: Implement active color property activeColor = entries.activeColor || null; }); - - { - activeIndex = labels.indexOf(currentTarget.value); - }} - /> - - {#each ids as id, index} -
- + + + { + activeIndex = labels.indexOf(currentTarget.value); + }} + /> + +
+ {#each ids as id, index} +
+ +
+ {/each}
- {/each} -
+ +
+ + + From 83228a42fb5940a7c4866bdde460afb5478d073c Mon Sep 17 00:00:00 2001 From: Simon Jockers <449739+sjockers@users.noreply.github.com> Date: Wed, 28 Jan 2026 10:29:14 +0100 Subject: [PATCH 04/19] Try a more robust way of rendering the component for deployment --- sophora-components/src/app.html | 2 +- sophora-components/src/hooks.server.js | 13 ++++++++----- sophora-components/src/lib/utils/getDataFromUrl.ts | 2 ++ 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/sophora-components/src/app.html b/sophora-components/src/app.html index 484865d6..6cb0df5c 100644 --- a/sophora-components/src/app.html +++ b/sophora-components/src/app.html @@ -7,6 +7,6 @@ %sveltekit.head% -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/sophora-components/src/hooks.server.js b/sophora-components/src/hooks.server.js index e9f4e1b2..ff731bed 100644 --- a/sophora-components/src/hooks.server.js +++ b/sophora-components/src/hooks.server.js @@ -1,12 +1,15 @@ /** @type {import('@sveltejs/kit').Handle} */ export async function handle({ event, resolve }) { + const routeID = event.route.id ? event.route.id.replace('/', '') : false; + const containerID = `swr-sophora-components${routeID ? '-' + routeID : ''}`; const response = await resolve(event, { transformPageChunk: ({ html }) => - html.replace( - 'document.currentScript.parentElement', - 'document.querySelector("#svelte-container")' - ) + html + .replace(`id="sophora-components-embed"`, `data-lab-components-embed="${containerID}"`) + .replace( + 'document.currentScript.parentElement', + `document.querySelector("[data-lab-components-embed='${containerID}']")` + ) }); - return response; } diff --git a/sophora-components/src/lib/utils/getDataFromUrl.ts b/sophora-components/src/lib/utils/getDataFromUrl.ts index 1496a126..265732d3 100644 --- a/sophora-components/src/lib/utils/getDataFromUrl.ts +++ b/sophora-components/src/lib/utils/getDataFromUrl.ts @@ -1,7 +1,9 @@ export default function getData(target: HTMLElement): Record { let url: URL; if ( + // SvelteKit DEV mode, preview server, or static hosting: import.meta.env.DEV || + window.location.origin === 'http://localhost:4173' || window.location.origin === 'https://static.datenhub.net' || window.location.href.includes('apidata.googleusercontent.com') || window.location.href.includes('storage.googleapis.com') From 64d27837e430eae32f3237d20e47522d965e5ee8 Mon Sep 17 00:00:00 2001 From: Simon Jockers <449739+sjockers@users.noreply.github.com> Date: Wed, 28 Jan 2026 10:31:53 +0100 Subject: [PATCH 05/19] Load SWR fonts for preview --- sophora-components/src/app.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/sophora-components/src/app.html b/sophora-components/src/app.html index 6cb0df5c..ad200d10 100644 --- a/sophora-components/src/app.html +++ b/sophora-components/src/app.html @@ -4,7 +4,26 @@ + %sveltekit.head% + +
%sveltekit.body%
From 673c418ced88947e90bbad369de00f75318c5dea Mon Sep 17 00:00:00 2001 From: Simon Jockers <449739+sjockers@users.noreply.github.com> Date: Wed, 28 Jan 2026 10:33:46 +0100 Subject: [PATCH 06/19] Extract component into separate file, remove DevContainer for deployment --- .../routes/datawrapper-switcher/+page.svelte | 84 ++++--------------- .../DatawrapperSwitcher.svelte | 72 ++++++++++++++++ 2 files changed, 86 insertions(+), 70 deletions(-) create mode 100644 sophora-components/src/routes/datawrapper-switcher/DatawrapperSwitcher.svelte diff --git a/sophora-components/src/routes/datawrapper-switcher/+page.svelte b/sophora-components/src/routes/datawrapper-switcher/+page.svelte index bf01fcb5..8b68bba8 100644 --- a/sophora-components/src/routes/datawrapper-switcher/+page.svelte +++ b/sophora-components/src/routes/datawrapper-switcher/+page.svelte @@ -1,77 +1,21 @@ - - - { - activeIndex = labels.indexOf(currentTarget.value); - }} - /> - -
- {#each ids as id, index} -
- -
- {/each} -
-
-
+{#if dev} + + + +{:else} + +{/if} diff --git a/sophora-components/src/routes/datawrapper-switcher/DatawrapperSwitcher.svelte b/sophora-components/src/routes/datawrapper-switcher/DatawrapperSwitcher.svelte new file mode 100644 index 00000000..c9f5fe90 --- /dev/null +++ b/sophora-components/src/routes/datawrapper-switcher/DatawrapperSwitcher.svelte @@ -0,0 +1,72 @@ + + + + { + activeIndex = labels.indexOf(currentTarget.value); + }} + /> + +
+ {#each ids as id, index} +
+ +
+ {/each} +
+
+ + From 6ea8ff1bc30c3f581264bd5471996c72f7d80815 Mon Sep 17 00:00:00 2001 From: Simon Jockers <449739+sjockers@users.noreply.github.com> Date: Wed, 28 Jan 2026 11:10:30 +0100 Subject: [PATCH 07/19] Update embed ID for consistency --- sophora-components/src/app.html | 2 +- sophora-components/src/hooks.server.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/sophora-components/src/app.html b/sophora-components/src/app.html index ad200d10..f9356578 100644 --- a/sophora-components/src/app.html +++ b/sophora-components/src/app.html @@ -26,6 +26,6 @@ -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/sophora-components/src/hooks.server.js b/sophora-components/src/hooks.server.js index ff731bed..925195d8 100644 --- a/sophora-components/src/hooks.server.js +++ b/sophora-components/src/hooks.server.js @@ -5,7 +5,7 @@ export async function handle({ event, resolve }) { const response = await resolve(event, { transformPageChunk: ({ html }) => html - .replace(`id="sophora-components-embed"`, `data-lab-components-embed="${containerID}"`) + .replace(`id="data-lab-components-embed"`, `data-lab-components-embed="${containerID}"`) .replace( 'document.currentScript.parentElement', `document.querySelector("[data-lab-components-embed='${containerID}']")` From c7770d5f3db147b7f1507f2bcc06256a82ab6038 Mon Sep 17 00:00:00 2001 From: Simon Jockers <449739+sjockers@users.noreply.github.com> Date: Wed, 28 Jan 2026 11:10:56 +0100 Subject: [PATCH 08/19] Use local version of components --- sophora-components/src/routes/+page.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/sophora-components/src/routes/+page.svelte b/sophora-components/src/routes/+page.svelte index e7b9116f..99bb4490 100644 --- a/sophora-components/src/routes/+page.svelte +++ b/sophora-components/src/routes/+page.svelte @@ -1,5 +1,6 @@ diff --git a/sophora-components/src/routes/datawrapper-switcher/DatawrapperSwitcher.svelte b/sophora-components/src/routes/datawrapper-switcher/DatawrapperSwitcher.svelte index c9f5fe90..a80a06cc 100644 --- a/sophora-components/src/routes/datawrapper-switcher/DatawrapperSwitcher.svelte +++ b/sophora-components/src/routes/datawrapper-switcher/DatawrapperSwitcher.svelte @@ -1,7 +1,6 @@ - - { - activeIndex = labels.indexOf(currentTarget.value); - }} - /> +
+ + { + activeIndex = labels.indexOf(currentTarget.value); + }} + /> -
- {#each ids as id, index} -
- -
- {/each} -
-
+
+ {#each ids as id, index} +
+ +
+ {/each} +
+ +