feat: client-only oEmbed on debug page

packages/portal/src/components/feedback/FeedbackWidget.vue

@@ -24,13 +24,22 @@
 </template>
 
 <script>
+  import ClientOnly from 'vue-client-only';
+
   export default {
+    name: 'FeedbackWidget',
+
+    components: {
+      ClientOnly
+    },
+
     props: {
       faqUrl: {
         type: String,
         default: '/faq'
       }
     },
+
     data() {
       return {
         feedbackEnabled: this.$features?.jiraServiceDeskFeedbackForm && !!this.$config?.app?.baseUrl

packages/portal/src/components/generic/AlertMessage.vue

@@ -5,7 +5,7 @@
     data-qa="error notice"
     class="mt-3"
   >
-    <strong>{{ $t('error') }}:</strong> {{ error }}
+    <strong>{{ $t('error') }}:</strong> {{ error?.message || error }}
   </b-alert>
 </template>
 
@@ -18,7 +18,7 @@
     },
     props: {
       error: {
-        type: String,
+        type: [String, Object],
         default: ''
       }
     }

packages/portal/src/components/home/HomePage.vue

@@ -46,6 +46,8 @@
 </template>
 
 <script>
+  import ClientOnly from 'vue-client-only';
+
   import pageMetaMixin from '@/mixins/pageMeta';
   import CallToActionBanner from '@/components/generic/CallToActionBanner';
   import HomeHero from '@/components/home/HomeHero';
@@ -58,6 +60,7 @@
 
     components: {
       CallToActionBanner,
+      ClientOnly,
       HomeHero,
       HomeLatestGalleries,
       HomeLatestStories,

packages/portal/src/components/search/SearchInterface.vue

@@ -166,6 +166,7 @@
 </template>
 
 <script>
+  import ClientOnly from 'vue-client-only';
   import merge from 'deepmerge';
   import isEqual from 'lodash/isEqual';
 
@@ -184,6 +185,7 @@
     name: 'SearchInterface',
 
     components: {
+      ClientOnly,
       ErrorMessage: () => import('../error/ErrorMessage'),
       SearchBoostingForm: () => import('./SearchBoostingForm'),
       SearchQueryBuilder: () => import('./SearchQueryBuilder'),

packages/portal/src/layouts/ds4ch.vue

@@ -28,6 +28,8 @@
 </template>
 
 <script>
+  import ClientOnly from 'vue-client-only';
+
   import DS4CHPageHeader from '@/components/DS4CH/DS4CHPageHeader';
   import DS4CHPageFooter from '@/components/DS4CH/DS4CHPageFooter';
   import klaroMixin from '@/mixins/klaro.js';
@@ -37,6 +39,7 @@
     name: 'DS4CHLayout',
 
     components: {
+      ClientOnly,
       DS4CHPageHeader,
       DS4CHPageFooter,
       PageCookieConsent: () => import('@/components/page/PageCookieConsent')

packages/portal/src/pages/account/index.vue

@@ -160,6 +160,7 @@
 </template>
 
 <script>
+  import ClientOnly from 'vue-client-only';
   import { BNav } from 'bootstrap-vue';
   import { mapState } from 'vuex';
 
@@ -174,11 +175,12 @@
     name: 'AccountIndexPage',
 
     components: {
+      AlertMessage,
       BNav,
+      ClientOnly,
       ItemPreviewCardGroup,
-      UserSets,
-      AlertMessage,
-      LoadingSpinner
+      LoadingSpinner,
+      UserSets
     },
 
     mixins: [

packages/portal/src/pages/debug/index.vue

@@ -1,58 +1,60 @@
 <template>
-  <b-container data-qa="debug page">
-    <ContentHeader
-      :title="pageMeta.title"
-    />
-    <b-row class="flex-md-row pb-5">
-      <b-col cols="12">
-        <b-form
-          @submit.stop.prevent="submitForm"
-        >
-          <b-form-group
-            :description="$t('debug.settings.form.enabled.description')"
+  <div class="page white-page">
+    <b-container data-qa="debug page">
+      <ContentHeader
+        :title="pageMeta.title"
+      />
+      <b-row class="flex-md-row pb-5">
+        <b-col cols="12">
+          <b-form
+            @submit.stop.prevent="submitForm"
           >
-            <b-form-checkbox
-              v-model="settings.enabled"
-              switch
-              data-qa="enable debug menu switch"
+            <b-form-group
+              :description="$t('debug.settings.form.enabled.description')"
             >
-              {{ $t('debug.settings.form.enabled.label') }}
-            </b-form-checkbox>
-          </b-form-group>
-          <b-form-group
-            v-if="fieldBoostingFeature"
-            :description="$t('debug.settings.form.boosting.description')"
-          >
-            <b-form-checkbox
-              v-model="settings.boosting"
-              switch
-              data-qa="enable boosting form switch"
+              <b-form-checkbox
+                v-model="settings.enabled"
+                switch
+                data-qa="enable debug menu switch"
+              >
+                {{ $t('debug.settings.form.enabled.label') }}
+              </b-form-checkbox>
+            </b-form-group>
+            <b-form-group
+              v-if="fieldBoostingFeature"
+              :description="$t('debug.settings.form.boosting.description')"
             >
-              {{ $t('debug.settings.form.boosting.label') }}
-            </b-form-checkbox>
-          </b-form-group>
-          <b-form-group
-            :label="$t('debug.settings.form.apiKey.label')"
-            label-for="debug-input-api-key"
-            :description="$t('debug.settings.form.apiKey.description')"
-          >
-            <b-form-input
-              id="debug-input-api-key"
-              v-model="settings.apiKey"
-            />
-          </b-form-group>
+              <b-form-checkbox
+                v-model="settings.boosting"
+                switch
+                data-qa="enable boosting form switch"
+              >
+                {{ $t('debug.settings.form.boosting.label') }}
+              </b-form-checkbox>
+            </b-form-group>
+            <b-form-group
+              :label="$t('debug.settings.form.apiKey.label')"
+              label-for="debug-input-api-key"
+              :description="$t('debug.settings.form.apiKey.description')"
+            >
+              <b-form-input
+                id="debug-input-api-key"
+                v-model="settings.apiKey"
+              />
+            </b-form-group>
 
-          <b-button
-            type="submit"
-            variant="primary"
-            data-qa="save debug settings button"
-          >
-            {{ $t('actions.save') }}
-          </b-button>
-        </b-form>
-      </b-col>
-    </b-row>
-  </b-container>
+            <b-button
+              type="submit"
+              variant="primary"
+              data-qa="save debug settings button"
+            >
+              {{ $t('actions.save') }}
+            </b-button>
+          </b-form>
+        </b-col>
+      </b-row>
+    </b-container>
+  </div>
 </template>
 
 <script>
@@ -100,3 +102,11 @@
     }
   };
 </script>
+
+<style lang="scss" scoped>
+  @import '@europeana/style/scss/variables';
+
+  .page {
+    padding: 3rem 0 7rem;
+  }
+</style>

packages/portal/src/pages/debug/oembed.vue

@@ -1,57 +1,63 @@
 <template>
-  <b-container data-qa="debug page">
-    <ContentHeader
-      :title="pageMeta.title"
-    />
-    <b-row class="flex-md-row pb-5">
-      <b-col cols="12">
-        <b-form
-          @submit.stop.prevent="handleSubmitForm"
-        >
-          <b-form-group
-            label="Endpoint"
-            label-for="debug-oembed-endpoint"
+  <div class="page white-page">
+    <b-container data-qa="debug page">
+      <ContentHeader
+        :title="pageMeta.title"
+      />
+      <b-row class="flex-md-row pb-5">
+        <b-col cols="12">
+          <b-form
+            @submit.stop.prevent="handleSubmitForm"
           >
-            <b-form-input
-              id="debug-oembed-endpoint"
-              v-model="formEndpoint"
-              name="endpoint"
-            />
-          </b-form-group>
+            <b-form-group
+              label="Endpoint"
+              label-for="debug-oembed-endpoint"
+            >
+              <b-form-input
+                id="debug-oembed-endpoint"
+                v-model="formEndpoint"
+                name="endpoint"
+              />
+            </b-form-group>
 
-          <b-form-group
-            label="URL"
-            label-for="debug-oembed-url"
-          >
-            <b-form-input
-              id="debug-oembed-url"
-              v-model="formUrl"
-              name="url"
-            />
-          </b-form-group>
+            <b-form-group
+              label="URL"
+              label-for="debug-oembed-url"
+            >
+              <b-form-input
+                id="debug-oembed-url"
+                v-model="formUrl"
+                name="url"
+              />
+            </b-form-group>
 
-          <b-button
-            type="submit"
-            variant="primary"
-          >
-            {{ $t('actions.preview') }}
-          </b-button>
-        </b-form>
-      </b-col>
-    </b-row>
-    <b-row class="flex-md-row pb-5">
-      <b-col cols="12">
-        <EmbedOEmbed
-          v-if="url && endpoint"
-          :url="url"
-          :endpoint="endpoint"
-        />
-      </b-col>
-    </b-row>
-  </b-container>
+            <b-button
+              type="submit"
+              variant="primary"
+            >
+              {{ $t('actions.preview') }}
+            </b-button>
+          </b-form>
+        </b-col>
+      </b-row>
+      <b-row class="flex-md-row pb-5">
+        <b-col cols="12">
+          <client-only>
+            <EmbedOEmbed
+              v-if="url && endpoint"
+              :url="url"
+              :endpoint="endpoint"
+            />
+          </client-only>
+        </b-col>
+      </b-row>
+    </b-container>
+  </div>
 </template>
 
 <script>
+  import ClientOnly from 'vue-client-only';
+
   import ContentHeader from '@/components/content/ContentHeader';
   import EmbedOEmbed from '@/components/embed/EmbedOEmbed';
   import pageMetaMixin from '@/mixins/pageMeta';
@@ -60,6 +66,7 @@
     name: 'DebugOEmbedPage',
 
     components: {
+      ClientOnly,
       ContentHeader,
       EmbedOEmbed
     },
@@ -103,3 +110,11 @@
     }
   };
 </script>
+
+<style lang="scss" scoped>
+  @import '@europeana/style/scss/variables';
+
+  .page {
+    padding: 3rem 0 7rem;
+  }
+</style>

packages/portal/src/pages/exhibitions/_exhibition/credits.vue

@@ -90,7 +90,9 @@
 </template>
 
 <script>
+  import ClientOnly from 'vue-client-only';
   import { marked } from 'marked';
+
   import ShareSocialModal from '../../../components/share/ShareSocialModal.vue';
   import ShareButton from '../../../components/share/ShareButton.vue';
   import exhibitionChapters from '../../../mixins/exhibitionChapters';
@@ -100,10 +102,11 @@
   export default {
     name: 'ExhibitionCreditsPage',
     components: {
+      ClientOnly,
+      EntityBadges: () => import('@/components/entity/EntityBadges'),
+      LinkList: () => import('../../../components/generic/LinkList'),
       ShareButton,
       ShareSocialModal,
-      LinkList: () => import('../../../components/generic/LinkList'),
-      EntityBadges: () => import('@/components/entity/EntityBadges'),
       ThemeBadges: () => import('@/components/theme/ThemeBadges')
     },
     mixins: [