fix: fixed some hydration mismatch

kestra-io · Dec 13, 2024 · f6d1cb7 · f6d1cb7
1 parent 81a23bc
commit f6d1cb7
Show file tree

Hide file tree

Showing 14 changed files with 1,371 additions and 452 deletions.
diff --git a/components/cloud/Header.vue b/components/cloud/Header.vue
@@ -16,7 +16,9 @@
                 </div>
 
                 <div class="col-12 col-md-8 col-lg-5 form-container mx-auto pt-3">
-                    <div id="hubspotForm" data-aos="zoom-in" />
+                    <ClientOnly>
+                        <div id="hubspotForm" data-aos="zoom-in" />
+                    </ClientOnly>
                 </div>
             </div>
         </div>

diff --git a/components/community/Contributors.vue b/components/community/Contributors.vue
@@ -4,19 +4,24 @@
             subtitle="Our contributors"
         >
             <div v-if="contributors" class="contributors d-flex flex-wrap justify-content-center">
-                <template v-for="(contributor) in contributorsRand">
-                    <a :href="'https://github.com/' + contributor.name" target="_blank" class="d-flex flex-column gap-3 align-items-center" data-aos="zoom-in" >
-                        <NuxtImg
-                            width="90px"
-                            height="90px"
-                            loading="lazy"
-                            format="webp"
-                            class="rounded-circle"
-                            :src="contributor.avatar"
-                            :alt="contributor.name"
-                        />
-                        <p>{{contributor.name}}</p>
-                    </a>
+                <template v-for="(contributor, index) in contributorsRand">
+                    <ClientOnly>
+                        <template #fallback>
+                            <a :href="'https://github.com/' + contributors[index].name" />
+                        </template>
+                        <a :href="'https://github.com/' + contributor.name" target="_blank" class="d-flex flex-column gap-3 align-items-center" data-aos="zoom-in" >
+                            <NuxtImg
+                                width="90px"
+                                height="90px"
+                                loading="lazy"
+                                format="webp"
+                                class="rounded-circle"
+                                :src="contributor.avatar"
+                                :alt="contributor.name"
+                            />
+                            <p>{{contributor.name}}</p>
+                        </a>
+                    </ClientOnly>
                 </template>
             </div>
         </Section>
@@ -42,7 +47,7 @@
             try {
                 const { data } = await this.useApi().get('/communities/github/contributors')
                 this.contributors = data
-                this.contributorsRand = this.contributors.sort(() => 0.5 - Math.random())
+                this.contributorsRand = this.contributors.toSorted(() => 0.5 - Math.random())
             } catch (e) {
                 this.contributors = []
             }

diff --git a/components/community/Guidelines.vue b/components/community/Guidelines.vue
@@ -47,18 +47,12 @@
 
 <script>
   import Section from '../../components/layout/Section.vue';
-  import {useApi} from "~/composables/useApi.js";
   import Card from '../card/Card.vue';
 
   export default {
     components: {Section, Card},
-    setup() {
-      return {useApi}
-    },
     data() {
       return {
-        contributors: undefined,
-        contributorsRand: undefined,
         kestraCommunity: { title: "Be respectful to the Kestra community", descriptionHtml: "Be respectful towards other members of this Slack Community. Do not harass others. <br/><br/> Assume positive intent."},
         makeEasy: {
 
@@ -77,15 +71,6 @@
         relevantChannel: { title: "Use relevant channels", description: "Refrain from asking questions multiple times across different channels." },
         dontSpam: { title: "Don’t spam", descriptionHtml: "While we’ll do our best to help you, there is no guaranteed timeline to answer your question. <br /><br /> If you need support with SLA guarantees, <a href='https://kestra.io/demo' target='_blank'>reach out to us.</a>" },
       };
-    },
-    async created() {
-      try {
-        const { data } = await this.useApi().get('/communities/github/contributors')
-        this.contributors = data
-        this.contributorsRand = this.contributors.sort(() => 0.5 - Math.random())
-      } catch (e) {
-        this.contributors = []
-      }
     }
   }
 </script>

diff --git a/components/contact/Header.vue b/components/contact/Header.vue
@@ -7,7 +7,9 @@
             </div>
             <div class="row justify-content-center">
                 <div class="col-md-6 form-container bg-dark-2" >
-                    <div id="hubspotForm" data-aos="fade-left" />
+                    <ClientOnly>
+                        <div id="hubspotForm" data-aos="fade-left" />
+                    </ClientOnly>
                 </div>
             </div>
         </div>

diff --git a/components/content/HubspotForm.vue b/components/content/HubspotForm.vue
@@ -1,5 +1,7 @@
 <template>
-    <div :id="uuid" />
+    <ClientOnly>
+        <div :id="uuid" />
+    </ClientOnly>
 </template>
 
 <script setup>

diff --git a/components/demo/Companies.vue b/components/demo/Companies.vue
@@ -3,60 +3,66 @@
         <div class="container">
             <p class="title">TRUSTED BY</p>
             <div class="companies">
-                <template v-for="(img, index) in companies" :key="index">
-                    <NuxtImg
-                        data-aos="fade-up"
-                        :class="{'inverted': inverted}"
-                        :data-aos-delay="index*50"
-                        :src="'/landing/companies/' + img.name  + '.svg'"
-                        :alt="img.name"
-                        :width="img.width"
-                        :heigth="img.heigth"
-                    />
+                <template v-for="(img, index) in shuffledCompanies" :key="index">
+                    <ClientOnly :fallback="companies[index].name">
+                        <NuxtImg
+                            data-aos="fade-up"
+                            :class="{'inverted': inverted}"
+                            :data-aos-delay="index*50"
+                            :src="'/landing/companies/' + img.name  + '.svg'"
+                            :alt="img.name"
+                            :width="img.width"
+                            :heigth="img.heigth"
+                        />
+                    </ClientOnly>
                 </template>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-  export default defineComponent({
+    export default defineComponent({
 
-    props: {
-      inverted: {
-        type: Boolean,
-        default: false
-      }
-    },
-    computed: {
-      companies() {
-        return [
-          { name: "acxiom", width: "130px", height: "29px" },
-          { name: "bouygues-immobilier", width: "132px", height: "53px" },
-          { name: "leroymerlin", width: "63px", height: "39px" },
-          { name: "experian", width: "116px", height: "37px" },
-          { name: "sophia-genetics", width: "119px", height: "37px" },
-          { name: "cleverconnect", width: "136px", height: "29px" },
-          { name: "tencent", width: "189px", height: "25px" },
-          { name: "gorgias", width: "118px", height: "29px" },
-          { name: "jcdecaux", width: "140px", height: "53px" },
-          { name: "aimtec", width: "134px", height: "35px" },
-          { name: "hcl", width: "77px", height: "11px" },
-          { name: "clever-cloud", width: "117px", height: "29px" },
-          { name: "quadis", width: "117px", height: "23px" },
-          { name: "huawei", width: "54px", height: "53px" },
-          { name: "ca", width: "63px", height: "45px" },
-          { name: "accredible", width: "167px", height: "27px" },
-          { name: "merkle", width: "140px", height: "19px" },
-          { name: "renault", width: "135px", height: "33px" },
-          { name: "dentsu", width: "83px", height: "24px" },
-          { name: "fila", width: "83px", height: "25px" },
-          { name: "intersport", width: "225px", height: "33px" },
-        ]
-          .sort(() => .5 - Math.random())
-      },
-    }
-  });
+        props: {
+            inverted: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data() {
+            return {
+                companies: [
+                    {name: "acxiom", width: "130px", height: "29px"},
+                    {name: "bouygues-immobilier", width: "132px", height: "53px"},
+                    {name: "leroymerlin", width: "63px", height: "39px"},
+                    {name: "experian", width: "116px", height: "37px"},
+                    {name: "sophia-genetics", width: "119px", height: "37px"},
+                    {name: "cleverconnect", width: "136px", height: "29px"},
+                    {name: "tencent", width: "189px", height: "25px"},
+                    {name: "gorgias", width: "118px", height: "29px"},
+                    {name: "jcdecaux", width: "140px", height: "53px"},
+                    {name: "aimtec", width: "134px", height: "35px"},
+                    {name: "hcl", width: "77px", height: "11px"},
+                    {name: "clever-cloud", width: "117px", height: "29px"},
+                    {name: "quadis", width: "117px", height: "23px"},
+                    {name: "huawei", width: "54px", height: "53px"},
+                    {name: "ca", width: "63px", height: "45px"},
+                    {name: "accredible", width: "167px", height: "27px"},
+                    {name: "merkle", width: "140px", height: "19px"},
+                    {name: "renault", width: "135px", height: "33px"},
+                    {name: "dentsu", width: "83px", height: "19px"},
+                    {name: "fila", width: "83px", height: "25px"},
+                    {name: "intersport", width: "225px", height: "25px"},
+                ]
+            }
+        },
+        computed: {
+            shuffledCompanies() {
+                return this.companies.toSorted(() => .5 - Math.random())
+            },
+        }
+    });
 </script>
 
 <style scoped lang="scss">

diff --git a/components/home/Companies.vue b/components/home/Companies.vue
@@ -4,16 +4,18 @@
             <div class="col-12 p-0">
                 <div class="companies-list-container">
                     <div ref="companies" class="companies companies-list">
-                        <template v-for="(img, index) in companies" :key="index">
-                            <NuxtImg
-                                data-aos="fade-right"
-                                loading="lazy"
-                                format="webp"
-                                :src="'/landing/companies/' + img.name  + '.svg'"
-                                :alt="img.name"
-                                :width="img.width"
-                                :height="img.height"
-                            />
+                        <template v-for="(img, index) in shuffledCompanies" :key="index">
+                            <ClientOnly :fallback="companies[index].name">
+                                <NuxtImg
+                                    data-aos="fade-right"
+                                    loading="lazy"
+                                    format="webp"
+                                    :src="'/landing/companies/' + img.name  + '.svg'"
+                                    :alt="img.name"
+                                    :width="img.width"
+                                    :height="img.height"
+                                />
+                            </ClientOnly>
                         </template>
                     </div>
                 </div>
@@ -30,9 +32,9 @@
                 default: false
             }
         },
-        computed: {
-            companies() {
-                return [
+        data() {
+            return {
+                companies: [
                     { name: "acxiom", width: "130px", height: "29px" },
                     { name: "bouygues-immobilier", width: "132px", height: "53px" },
                     { name: "leroymerlin", width: "63px", height: "39px" },
@@ -55,7 +57,11 @@
                     { name: "fila", width: "83px", height: "25px" },
                     { name: "intersport", width: "225px", height: "25px" },
                 ]
-                    .sort(() => .5 - Math.random())
+            }
+        },
+        computed: {
+            async shuffledCompanies() {
+                return this.companies.toSorted(() => .5 - Math.random())
             },
         }
     });

diff --git a/components/layout/Announce.vue b/components/layout/Announce.vue
@@ -29,7 +29,7 @@
                 required: true,
             },
             scrolled: {
-                type: String,
+                type: Boolean,
                 required: false
             }
         },

diff --git a/components/layout/Companies.vue b/components/layout/Companies.vue
@@ -4,19 +4,21 @@
             <div class="col-12 p-0">
                 <div class="companies-list-container">
                     <div ref="companies" class="companies companies-list scrolling">
-                        <template v-for="(img, index) in companies" :key="index">
-                            <NuxtImg
-                                v-if="img.name"
-                                loading="lazy"
-                                format="webp"
-                                data-aos="fade-up"
-                                :class="{'inverted': inverted}"
-                                :data-aos-delay="index*50"
-                                :src="'/landing/companies/' + img.name  + '.svg'"
-                                :alt="img.name"
-                                :width="img.width"
-                                :height="img.height"
-                            />
+                        <template v-for="(img, index) in shuffledCompanies" :key="index">
+                            <ClientOnly :fallback="companies[index].name">
+                                <NuxtImg
+                                    v-if="img.name"
+                                    loading="lazy"
+                                    format="webp"
+                                    data-aos="fade-up"
+                                    :class="{'inverted': inverted}"
+                                    :data-aos-delay="index*50"
+                                    :src="'/landing/companies/' + img.name  + '.svg'"
+                                    :alt="img.name"
+                                    :width="img.width"
+                                    :height="img.height"
+                                />
+                            </ClientOnly>
                         </template>
                     </div>
                 </div>
@@ -35,12 +37,7 @@
         },
         data() {
             return {
-                random: .5 - Math.random()
-            };
-        },
-        computed: {
-            companies() {
-                return [
+                companies: [
                     { name: "acxiom", width: "130px", height: "29px" },
                     { name: "bouygues-immobilier", width: "132px", height: "53px" },
                     { name: "leroymerlin", width: "63px", height: "39px" },
@@ -63,7 +60,11 @@
                     { name: "fila", width: "83px", height: "25px" },
                     { name: "intersport", width: "225px", height: "25px" },
                 ]
-                    .sort(() => this.random)
+            }
+        },
+        computed: {
+            shuffledCompanies() {
+                return this.companies.toSorted(() => .5 - Math.random())
             },
         }
     });

diff --git a/components/layout/Header.vue b/components/layout/Header.vue
@@ -857,7 +857,7 @@ export default {
     },
     props: {
       scrolled: {
-        type: String,
+        type: Boolean,
         required: true
       }
     },

diff --git a/components/partners/BecomeAPartner.vue b/components/partners/BecomeAPartner.vue
@@ -13,7 +13,9 @@
                     <div class="card">
                         <div class="card-body">
                             <div class="card-text">
-                                <div id="hubspotForm" data-aos="fade-left" />
+                                <ClientOnly>
+                                    <div id="hubspotForm" data-aos="fade-left" />
+                                </ClientOnly>
                             </div>
                         </div>
                     </div>

diff --git a/middleware/redirect.js → middleware/redirect.global.js b/middleware/redirect.js → middleware/redirect.global.js
@@ -11,7 +11,7 @@ export default function ({ route, redirect }) {
             const standardPath = `/plugins/plugin-${plugin.base}/task-runners/io.kestra.plugin.${plugin.base}.runner.${taskRunner}`;
             const eePath = `/plugins/plugin-ee-${plugin.base}/task-runners/io.kestra.plugin.ee.${plugin.base}.runner.${taskRunner}`;
 
-            if (route.path === standardPath) {
+            if (route?.path === standardPath) {
                 return redirect(eePath);
             }
         });