fix(sophora-components): Render DatawrapperSwitcher in SWR Aktuell App

sophora-components/src/hooks.server.js

@@ -8,7 +8,7 @@ export async function handle({ event, resolve }) {
 				.replace(`id="data-lab-components-embed"`, `data-lab-components-embed="${containerID}"`)
 				.replace(
 					'document.currentScript.parentElement',
-					`document.querySelector("[data-lab-components-embed='${containerID}']")`
+					`document.querySelector("[data-lab-components-embed='${containerID}']"); console.log("parent element:", document.currentScript.parentElement);`
 				)
 	});
 	return response;

sophora-components/src/lib/utils/getDataFromUrl.ts

@@ -1,21 +1,16 @@
 export default function getDataFromUrl(target: HTMLElement): Record<string, string> {
-	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')
-	) {
+	const parent = target.parentNode?.parentNode as HTMLElement | null;
+
+	// Default: Embedded mode – use URL used to embed the component
+	// `data-url` is the embeds the grandparent element, provided by Sophora
+	let embedURL = parent?.dataset.url;
+
+	if (!embedURL) {
 		// 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 || '');
+		embedURL = window?.location.href;
 	}
-	const params: Record<string, string> = Object.fromEntries(url.searchParams);
-	return params;
+
+	return URL.canParse(embedURL)
+		? Object.fromEntries(new URL(embedURL).searchParams.entries())
+		: (console.error('Could not parse Embed-URL:', embedURL), {});
 }

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

@@ -1,7 +1,7 @@
 <script>
 	import getDataFromUrl from '$lib/utils/getDataFromUrl';
 	import { Switcher, DesignTokens } from '@swr-data-lab/components';
-	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
 
 	let activeIndex = $state(0);
 	let root = $state(null);
@@ -10,12 +10,23 @@
 	let fixedHeight = $state(null);
 	let layout = $state('auto');
 
-	onMount(() => {
-		const entries = getDataFromUrl(root);
-		labels = entries.labels.split(',') || [];
-		ids = entries.ids.split(',') || [];
-		fixedHeight = entries.fixedHeight || null;
-		layout = entries.layout || 'auto';
+	let url = $state(browser ? window.location.href : null);
+	let error = $state(null);
+
+	console.log('DatawrapperSwitcher initialized with url:', url);
+	$effect(() => {
+		console.log('DatawrapperSwitcher mounted with root:', root);
+
+		try {
+			const entries = getDataFromUrl(root);
+			labels = entries.labels?.split(',') || [];
+			ids = entries.ids?.split(',') || [];
+			fixedHeight = entries.fixedHeight || null;
+			layout = entries.layout || 'auto';
+		} catch (e) {
+			console.error(e);
+			error = e;
+		}
 	});
 </script>
 
@@ -47,6 +58,15 @@
 				</div>
 			{/each}
 		</div>
+
+		<h3>Debug Information:</h3>
+		<p>actual url: {url || 'n/a'}</p>
+		<p>data-url: {root?.parentNode?.parentNode?.dataset.url || 'n/a'}</p>
+		<br />
+		<pre>{JSON.stringify({ labels, ids, fixedHeight, layout }, null, 2)}</pre>
+		{#if error}
+			<pre style="color: red">{error}</pre>
+		{/if}
 	</DesignTokens>
 </div>
 

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

@@ -35,5 +35,10 @@
 		@media (min-width: 1200px) {
 			grid-template-columns: repeat(2, minmax(0, 1fr));
 		}
+
+		/* Explicitly set background color for dark mode, workaround for SWR Aktuell App */
+		@media (prefers-color-scheme: dark) {
+			background-color: #0c0c0c;
+		}
 	}
 </style>