Feat 0513/plugin markdown rebased

app.vue

@@ -1,28 +1,31 @@
 <template>
-    <NuxtLayout>
+    <DefaultLayout>
         <NuxtPage />
-    </NuxtLayout>
+    </DefaultLayout>
 </template>
 
 <script setup lang="ts">
-useHead({
-    htmlAttrs: {
-        lang: "en",
-    },
-    link: [
-        {
-            rel: "icon",
-            type: "image/png",
-            href: "/favicon-192x192.png",
+    import DefaultLayout from "~/layouts/default.vue";
+    import "@kestra-io/ui-libs/style.css";
+
+    useHead({
+        htmlAttrs: {
+            lang: "en",
+        },
+        link: [
+            {
+                rel: "icon",
+                type: "image/png",
+                href: "/favicon-192x192.png",
+            },
+        ],
+        titleTemplate: (titleChunk) => {
+            return titleChunk &&
+                titleChunk != "Kestra, Open Source Declarative Data Orchestration"
+                ? `${titleChunk}`
+                : "Kestra, Open Source Declarative Data Orchestration";
         },
-    ],
-    titleTemplate: (titleChunk) => {
-        return titleChunk &&
-            titleChunk != "Kestra, Open Source Declarative Data Orchestration"
-            ? `${titleChunk}`
-            : "Kestra, Open Source Declarative Data Orchestration";
-    },
-});
+    });
 </script>
 
 <style lang="scss">

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>

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 = []
             }

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>

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>

components/content/HubspotForm.vue

@@ -1,5 +1,7 @@
 <template>
-    <div :id="uuid" />
+    <ClientOnly>
+        <div :id="uuid" />
+    </ClientOnly>
 </template>
 
 <script setup>

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">

components/docs/NavSideBar.vue

@@ -45,22 +45,13 @@
 <script setup>
   import Magnify from "vue-material-design-icons/Magnify.vue"
   import Keyboard from "vue-material-design-icons/Keyboard.vue"
-
+  import Menu from "vue-material-design-icons/Menu.vue"
+  import RecursiveNavSidebar from "./RecursiveNavSidebar.vue";
 </script>
 
 <script>
-    import ChevronDown from "vue-material-design-icons/ChevronDown.vue"
-    import ChevronUp from "vue-material-design-icons/ChevronUp.vue"
-    import Menu from "vue-material-design-icons/Menu.vue"
-    import RecursiveNavSidebar from "./RecursiveNavSidebar.vue";
 
     export default defineComponent({
-        components: {
-            RecursiveNavSidebar,
-            ChevronDown,
-            ChevronUp,
-            Menu
-        },
         props: {
             type: {
                 type: String,

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())
             },
         }
     });