don't render breacrumbs on server side

Author: Hofstetter Benjamin

opendata.swiss/ui/pages/datasets/[datasetId]/get-dataset-breadcrumb-from-session-stoage.ts renamed to 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 {

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>

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>

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()