From 7c46712cd0d5256cbd231b68883f18cdc14f2f95 Mon Sep 17 00:00:00 2001
From: Hofstetter Benjamin <benjamin.hofstetter@zazuko.com>
Date: Thu, 18 Sep 2025 17:24:46 +0200
Subject: [PATCH 1/3] Breadcrumbs are not working with SSR on Distribution Page
 Fixes #31

---
 .../datasets/[datasetId]/distribution/[distributionId].vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue b/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
index a865159..650d758 100644
--- a/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
+++ b/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
@@ -44,9 +44,10 @@ const distribution = computed(() => {
   return dists
 })
 
+const firstBreadcrumb = await homePageBreadcrumb(locale)
 
-const breadcrumbs = [
-  await homePageBreadcrumb(locale),
+const breadcrumbs = computed(()=> [
+  firstBreadcrumb,
   {
     title: t('message.header.navigation.datasets'),
     path: '/datasets',
@@ -61,7 +62,7 @@ const breadcrumbs = [
   {
     title: distribution.value?.title
   }
-]
+])
 
 useSeoMeta({
   title: `${distribution.value?.title} | ${resultEnhanced.value?.getTitle} | ${t('message.header.navigation.datasets')} | opendata.swiss`,

From 3ee419e0be2d4701af6b1f77be1429c07bd326a0 Mon Sep 17 00:00:00 2001
From: Hofstetter Benjamin <benjamin.hofstetter@zazuko.com>
Date: Fri, 19 Sep 2025 10:04:07 +0200
Subject: [PATCH 2/3] Breadcrumbs are not working with SSR on Distribution Page
 Fixes #31

---
 .../distribution/[distributionId].vue         | 52 ++++++++++-----
 ...-dataset-breadcrumb-from-session-stoage.ts | 29 +++++++++
 .../ui/pages/datasets/[datasetId]/index.vue   | 65 ++++++++++++++-----
 opendata.swiss/ui/pages/datasets/index.vue    | 24 ++++---
 4 files changed, 127 insertions(+), 43 deletions(-)
 create mode 100644 opendata.swiss/ui/pages/datasets/[datasetId]/get-dataset-breadcrumb-from-session-stoage.ts

diff --git a/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue b/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
index 650d758..0cdccb7 100644
--- a/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
+++ b/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
@@ -13,6 +13,7 @@ import OdsDownloadList from '../../../../app/components/distribution/OdsDownload
 import OdsRelativeDateToggle from '../../../../app/components/OdsRelativeDateToggle.vue';
 import { DcatApChV2DatasetAdapter } from '../../../../app/components/dataset-detail/model/dcat-ap-ch-v2-dataset-adapter.js'
 import { useSeoMeta } from 'nuxt/app';
+import { getDatasetBreadcrumbFromSessionStorage } from '../get-dataset-breadcrumb-from-session-stoage.js';
 
 
 const { locale, t } = useI18n();
@@ -45,24 +46,37 @@ const distribution = computed(() => {
 })
 
 const firstBreadcrumb = await homePageBreadcrumb(locale)
-
-const breadcrumbs = computed(()=> [
-  firstBreadcrumb,
-  {
-    title: t('message.header.navigation.datasets'),
-    path: '/datasets',
-  },
-  {
-    title: resultEnhanced.value?.getTitle,
-    path: {
-      name: 'datasets-datasetId',
-      params: { datasetId: datasetId.value },
-    },
-  },
-  {
-    title: distribution.value?.title
+const storedBreadcrumbs = import.meta.client ? getDatasetBreadcrumbFromSessionStorage(datasetId.value) : null;
+
+const breadcrumbs = computed(()=>{
+  const bc = []
+  if (storedBreadcrumbs && import.meta.client) {
+    bc.push(...storedBreadcrumbs)
+    bc.push({
+      title: distribution.value?.title
+    })
+  }
+  else {
+    bc.push(firstBreadcrumb)
+    bc.push({
+      title: t('message.header.navigation.datasets'),
+      path: '/datasets',
+      },
+      {
+        title: resultEnhanced.value?.getTitle,
+        path: {
+          name: 'datasets-datasetId',
+          params: { datasetId: datasetId.value },
+        },
+      },
+      {
+        title: distribution.value?.title
+      }
+    )
   }
-])
+  return bc
+})
+
 
 useSeoMeta({
   title: `${distribution.value?.title} | ${resultEnhanced.value?.getTitle} | ${t('message.header.navigation.datasets')} | opendata.swiss`,
@@ -74,7 +88,9 @@ await suspense()
 <template>
   <main v-if="isSuccess && distribution" id="main-content">
     <header id="main-header">
-      <OdsBreadcrumbs :breadcrumbs="breadcrumbs" />
+      <ClientOnly>
+        <OdsBreadcrumbs :breadcrumbs="breadcrumbs" />
+      </ClientOnly>
     </header>
     <section class="hero hero--default">
       <div class="container container--grid gap--responsive">
diff --git a/opendata.swiss/ui/pages/datasets/[datasetId]/get-dataset-breadcrumb-from-session-stoage.ts b/opendata.swiss/ui/pages/datasets/[datasetId]/get-dataset-breadcrumb-from-session-stoage.ts
new file mode 100644
index 0000000..0c9c2b4
--- /dev/null
+++ b/opendata.swiss/ui/pages/datasets/[datasetId]/get-dataset-breadcrumb-from-session-stoage.ts
@@ -0,0 +1,29 @@
+import type { BreadcrumbItem } from '../../../app/components/OdsBreadcrumbs.vue';
+const DATASET_BREADCRUMBS_STORAGE_KEY = 'ch.opendata-swiss.datasets.breadcrumbs';
+
+
+export function getDatasetBreadcrumbFromSessionStorage(datasetId: string) {
+  const stored = sessionStorage.getItem(DATASET_BREADCRUMBS_STORAGE_KEY)
+  if (stored) {
+    try {
+      const sessionBreadcrumbs = JSON.parse(stored) as Record<string, BreadcrumbItem[]>;
+      if (sessionBreadcrumbs[datasetId]) {
+        console.log('Using stored breadcrumbs for dataset', datasetId, sessionBreadcrumbs[datasetId]);
+        return sessionBreadcrumbs[datasetId]
+      }
+    } catch {
+      sessionStorage.removeItem(DATASET_BREADCRUMBS_STORAGE_KEY)
+    }
+  }
+  return null;
+}
+
+
+export function storeDatasetBreadcrumbInSessionStorage(datasetId: string, breadcrumbs: BreadcrumbItem[]) {
+  const breadcrumbsObject = { [datasetId]: breadcrumbs } as Record<string, BreadcrumbItem[]>;
+  sessionStorage.setItem(DATASET_BREADCRUMBS_STORAGE_KEY, JSON.stringify(breadcrumbsObject));
+}
+
+export function clearDatasetBreadcrumbFromSessionStorage() {
+  sessionStorage.removeItem(DATASET_BREADCRUMBS_STORAGE_KEY)
+}
diff --git a/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue b/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue
index 3182692..5d53884 100644
--- a/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue
+++ b/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n';
 
@@ -7,7 +7,7 @@ import { useDatasetsSearch } from '../../../app/piveau/search'
 import { DcatApChV2DatasetAdapter } from '../../../app/components/dataset-detail/model/dcat-ap-ch-v2-dataset-adapter';
 
 import { homePageBreadcrumb } from "../../../app/composables/breadcrumbs";
-import OdsBreadcrumbs from "../../../app/components/OdsBreadcrumbs.vue";
+import OdsBreadcrumbs, { type BreadcrumbItem } from "../../../app/components/OdsBreadcrumbs.vue";
 import OdsDetailTermsOfUse from '../../../app/components/dataset-detail/OdsDetailTermsOfUse.vue'
 import OdsDetailsTable from '../../../app/components/dataset-detail/OdsDetailsTable.vue'
 import OdsTagList from '../../../app/components/dataset-detail/OdsTagList.vue'
@@ -16,8 +16,8 @@ import OdsDistributionList from '../../../app/components/dataset-detail/OdsDistr
 import OdsButton from '../../../app/components/OdsButton.vue';
 import OdsDatasetCatalogPanel from '../../../app/components/dataset-detail/OdsDatasetCatalogPanel.vue'
 import OdsMetadataDownloadList from '../../../app/components/dataset-detail/OdsMetadataDownloadList.vue'
-
 import { useSeoMeta } from 'nuxt/app';
+import { getDatasetBreadcrumbFromSessionStorage, storeDatasetBreadcrumbInSessionStorage } from './get-dataset-breadcrumb-from-session-stoage';
 
 const { locale, t } = useI18n();
 const route = useRoute()
@@ -38,9 +38,19 @@ const dataset = computed(() => {
 
 const distributions = computed(() => (dataset.value?.distributions ?? []).sort((a, b) => a.title.localeCompare(b.title)))
 
+const searchBreadcrumb = ref<BreadcrumbItem | null>(null)
+
 
 const homePage = await homePageBreadcrumb(locale)
 const breadcrumbs = computed(() => {
+  if (import.meta.client) {
+    const storedBreadcrumbs = getDatasetBreadcrumbFromSessionStorage(datasetId.value);
+    if (storedBreadcrumbs) {
+      console.log('Using stored breadcrumbs for dataset', datasetId.value, storedBreadcrumbs);
+      return storedBreadcrumbs;
+    }
+  }
+
   const result = [
     homePage,
     {
@@ -49,17 +59,9 @@ const breadcrumbs = computed(() => {
     },
   ]
 
-  if(route.query.search || typeof route.query.search === 'string') {
-    const searchQuery = Array.isArray(route.query.search) ? route.query.search[0] : route.query.search;
-    result.push({
-      title: t('message.dataset_search.search_results'),
-      route: {
-        path: '/datasets',
-        query: searchQuery
-          ? Object.fromEntries(new URLSearchParams(decodeURIComponent(searchQuery)))
-          : {}
-      }
-    })
+
+  if (searchBreadcrumb.value) {
+    result.push(searchBreadcrumb.value);
   }
 
   result.push({
@@ -70,6 +72,12 @@ const breadcrumbs = computed(() => {
     },
   })
 
+  if (import.meta.client) {
+    storeDatasetBreadcrumbInSessionStorage(datasetId.value, result);
+    console.log('%cStoring breadcrumbs for dataset', 'color: green;');
+  }
+
+
   return result
 })
 
@@ -79,6 +87,31 @@ useSeoMeta({
 })
 
 
+
+watch(() => route.query.search,
+  (newVal, oldVal) => {
+    console.log('%croute.query.search changed:', 'color: blue;', { oldVal, newVal });
+    if (import.meta.client) {
+      const { search, ...rest } = route.query;
+      router.replace({ query: rest });
+      if(search && typeof search === 'string') {
+        searchBreadcrumb.value = {
+          id: 'search',
+          title: t('message.dataset_search.search_results'),
+          route: {
+            path: '/datasets',
+            query: search
+              ? Object.fromEntries(new URLSearchParams(decodeURIComponent(search)))
+              : {}
+          }
+        }
+      }
+
+    }
+    }
+, { immediate: true }
+)
+
 await suspense()
 
 </script>
@@ -86,7 +119,9 @@ await suspense()
 <template>
   <div v-if="isSuccess && dataset">
   <header id="main-header">
-    <OdsBreadcrumbs :breadcrumbs="breadcrumbs" />
+    <ClientOnly>
+      <OdsBreadcrumbs :breadcrumbs="breadcrumbs" />
+    </ClientOnly>
   </header>
   <main id="main-content">
    <section class="hero hero--default">
diff --git a/opendata.swiss/ui/pages/datasets/index.vue b/opendata.swiss/ui/pages/datasets/index.vue
index 8891818..71f891f 100644
--- a/opendata.swiss/ui/pages/datasets/index.vue
+++ b/opendata.swiss/ui/pages/datasets/index.vue
@@ -18,6 +18,7 @@ import {homePageBreadcrumb} from "../../app/composables/breadcrumbs";
 import SvgIcon from "../../app/components/SvgIcon.vue";
 import OdsButton from "../../app/components/OdsButton.vue";
 import { useSeoMeta } from 'nuxt/app';
+import { clearDatasetBreadcrumbFromSessionStorage } from './[datasetId]/get-dataset-breadcrumb-from-session-stoage';
 
 const { t, locale} = useI18n()
 
@@ -29,6 +30,10 @@ const facetRefs = Object.fromEntries(
   ACTIVE_FACETS.map(facet => [facet, ref<string[]>([])])
 );
 
+if(import.meta.client) {
+  clearDatasetBreadcrumbFromSessionStorage()
+}
+
 function syncFacetsFromRoute() {
   ACTIVE_FACETS.forEach(facet => {
     const val = route.query[facet]
@@ -252,20 +257,19 @@ await suspense()
 
 <template>
   <div>
+    <header id="main-header">
+        <OdsBreadcrumbs :breadcrumbs="breadcrumbs" />
+    </header>
 
-  <header id="main-header">
-    <OdsBreadcrumbs :breadcrumbs="breadcrumbs" />
-  </header>
-
- <main id="main-content">
+    <main id="main-content">
 
-  <!-- search panel -->
-   <section class="section section--default bg--secondary-50">
+    <!-- search panel -->
+      <section class="section section--default bg--secondary-50">
 
-      <div class="container">
+        <div class="container">
 
-         <h1 class="h1">{{ t('message.dataset_search.search_results') }}</h1>
-         <div class="search search--large search--page-result">
+          <h1 class="h1">{{ t('message.dataset_search.search_results') }}</h1>
+          <div class="search search--large search--page-result">
             <div class="search__group">
                <input
                 id="search-input"

From af5ee9bd2792c059852457f68604d0ec8e685b23 Mon Sep 17 00:00:00 2001
From: Hofstetter Benjamin <benjamin.hofstetter@zazuko.com>
Date: Fri, 19 Sep 2025 10:46:44 +0200
Subject: [PATCH 3/3] don't render breacrumbs on server side

---
 ...stoage.ts => breadcrumb-session-stoage.ts} |  1 -
 .../distribution/[distributionId].vue         | 11 +++++++++-
 .../ui/pages/datasets/[datasetId]/index.vue   | 21 ++++++++++++-------
 opendata.swiss/ui/pages/datasets/index.vue    |  2 +-
 4 files changed, 24 insertions(+), 11 deletions(-)
 rename opendata.swiss/ui/pages/datasets/[datasetId]/{get-dataset-breadcrumb-from-session-stoage.ts => breadcrumb-session-stoage.ts} (91%)

diff --git a/opendata.swiss/ui/pages/datasets/[datasetId]/get-dataset-breadcrumb-from-session-stoage.ts b/opendata.swiss/ui/pages/datasets/[datasetId]/breadcrumb-session-stoage.ts
similarity index 91%
rename from opendata.swiss/ui/pages/datasets/[datasetId]/get-dataset-breadcrumb-from-session-stoage.ts
rename to opendata.swiss/ui/pages/datasets/[datasetId]/breadcrumb-session-stoage.ts
index 0c9c2b4..5de4406 100644
--- a/opendata.swiss/ui/pages/datasets/[datasetId]/get-dataset-breadcrumb-from-session-stoage.ts
+++ b/opendata.swiss/ui/pages/datasets/[datasetId]/breadcrumb-session-stoage.ts
@@ -8,7 +8,6 @@ export function getDatasetBreadcrumbFromSessionStorage(datasetId: string) {
     try {
       const sessionBreadcrumbs = JSON.parse(stored) as Record<string, BreadcrumbItem[]>;
       if (sessionBreadcrumbs[datasetId]) {
-        console.log('Using stored breadcrumbs for dataset', datasetId, sessionBreadcrumbs[datasetId]);
         return sessionBreadcrumbs[datasetId]
       }
     } catch {
diff --git a/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue b/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
index 045e92c..c1859d6 100644
--- a/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
+++ b/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
@@ -13,7 +13,7 @@ import OdsDownloadList from '../../../../app/components/distribution/OdsDownload
 import OdsRelativeDateToggle from '../../../../app/components/OdsRelativeDateToggle.vue';
 import { DcatApChV2DatasetAdapter } from '../../../../app/components/dataset-detail/model/dcat-ap-ch-v2-dataset-adapter.js'
 import { useSeoMeta } from 'nuxt/app';
-import { getDatasetBreadcrumbFromSessionStorage } from '../get-dataset-breadcrumb-from-session-stoage.js';
+import { getDatasetBreadcrumbFromSessionStorage } from '../breadcrumb-session-stoage';
 
 
 const { locale, t } = useI18n();
@@ -171,4 +171,13 @@ await suspense()
   vertical-align: middle;
   border: 1px solid #b3d4fc;
 }
+
+#main-header {
+   @media (min-width: 1024px) {
+    min-height: 65.5px;
+  }
+  @media (min-width: 1280px) {
+    min-height: 73.5px;
+  }
+}
 </style>
diff --git a/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue b/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue
index a708096..9f75a44 100644
--- a/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue
+++ b/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue
@@ -17,7 +17,7 @@ import OdsButton from '../../../app/components/OdsButton.vue';
 import OdsDatasetCatalogPanel from '../../../app/components/dataset-detail/OdsDatasetCatalogPanel.vue'
 import OdsMetadataDownloadList from '../../../app/components/dataset-detail/OdsMetadataDownloadList.vue'
 import { useSeoMeta } from 'nuxt/app';
-import { getDatasetBreadcrumbFromSessionStorage, storeDatasetBreadcrumbInSessionStorage } from './get-dataset-breadcrumb-from-session-stoage';
+import { getDatasetBreadcrumbFromSessionStorage, storeDatasetBreadcrumbInSessionStorage } from './breadcrumb-session-stoage';
 
 const { locale, t } = useI18n();
 const route = useRoute()
@@ -44,9 +44,8 @@ const searchBreadcrumb = ref<BreadcrumbItem | null>(null)
 const homePage = await homePageBreadcrumb(locale)
 const breadcrumbs = computed(() => {
   if (import.meta.client) {
-    const storedBreadcrumbs = getDatasetBreadcrumbFromSessionStorage(datasetId.value);
+    const storedBreadcrumbs = getDatasetBreadcrumbFromSessionStorage(datasetId);
     if (storedBreadcrumbs) {
-      console.log('Using stored breadcrumbs for dataset', datasetId.value, storedBreadcrumbs);
       return storedBreadcrumbs;
     }
   }
@@ -73,8 +72,7 @@ const breadcrumbs = computed(() => {
   })
 
   if (import.meta.client) {
-    storeDatasetBreadcrumbInSessionStorage(datasetId.value, result);
-    console.log('%cStoring breadcrumbs for dataset', 'color: green;');
+    storeDatasetBreadcrumbInSessionStorage(datasetId, result);
   }
 
 
@@ -89,8 +87,7 @@ useSeoMeta({
 
 
 watch(() => route.query.search,
-  (newVal, oldVal) => {
-    console.log('%croute.query.search changed:', 'color: blue;', { oldVal, newVal });
+  () => {
     if (import.meta.client) {
       const { search, ...rest } = route.query;
       router.replace({ query: rest });
@@ -194,5 +191,13 @@ await suspense()
 </template>
 
 <style lang="scss" scoped>
-
+#main-header {
+  // avoid layout shift from ssr to csr
+   @media (min-width: 1024px) {
+    min-height: 65.5px;
+  }
+  @media (min-width: 1280px) {
+    min-height: 73.5px;
+  }
+}
 </style>
diff --git a/opendata.swiss/ui/pages/datasets/index.vue b/opendata.swiss/ui/pages/datasets/index.vue
index 71f891f..efb3d14 100644
--- a/opendata.swiss/ui/pages/datasets/index.vue
+++ b/opendata.swiss/ui/pages/datasets/index.vue
@@ -18,7 +18,7 @@ import {homePageBreadcrumb} from "../../app/composables/breadcrumbs";
 import SvgIcon from "../../app/components/SvgIcon.vue";
 import OdsButton from "../../app/components/OdsButton.vue";
 import { useSeoMeta } from 'nuxt/app';
-import { clearDatasetBreadcrumbFromSessionStorage } from './[datasetId]/get-dataset-breadcrumb-from-session-stoage';
+import { clearDatasetBreadcrumbFromSessionStorage } from './[datasetId]/breadcrumb-session-stoage';
 
 const { t, locale} = useI18n()