From 3911a4a274663c3e6a260ce06a544b61b12f751e Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Fri, 7 Jan 2022 18:04:43 +0100
Subject: [PATCH 1/9] feat(partners): connect to nuxtlabs api

---
 .env.example                                  |   1 +
 .../organisms/sections/PartnersSection.vue    |  29 +++--
 components/templates/Partner.vue              | 100 +++++++++++-------
 nuxt.config.ts                                |   1 +
 pages/partners/_slug/index.vue                |  21 ++--
 5 files changed, 96 insertions(+), 56 deletions(-)

diff --git a/.env.example b/.env.example
index 078d06cb80..44b1b73617 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,3 @@
 RECAPTCHA_SITE_KEY="6LdSIyAcAAAAABoVED_NebKHYWIMFJjVNVH2Jbl3"
 API_URL=https://api.nuxtjs.org
+API_NUXTLABS_URL=https://api.nuxtlabs.com
diff --git a/components/organisms/sections/PartnersSection.vue b/components/organisms/sections/PartnersSection.vue
index 5114097a94..ade97beb64 100644
--- a/components/organisms/sections/PartnersSection.vue
+++ b/components/organisms/sections/PartnersSection.vue
@@ -7,9 +7,9 @@
       </h2>
     </div>
     <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
-      <LogoCard v-for="partner in partners" :key="partner.title" :item="partner">
+      <LogoCard v-for="partner in partners" :key="partner.id" :item="partner">
         <template #footer>
-          <PartnerServices :services="partner.services" class="text-sm mt-4" />
+          <PartnerServices :services="partner.profile.services" class="text-sm mt-4" />
         </template>
       </LogoCard>
     </div>
@@ -19,6 +19,7 @@
 <script lang="ts">
 import { defineComponent, useContext, ref, useFetch, onMounted } from '@nuxtjs/composition-api'
 import { scrollToHeading } from '@docus/theme/runtime'
+import { $fetch } from 'ohmyfetch'
 
 export default defineComponent({
   props: {
@@ -32,14 +33,28 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { $docus, i18n } = useContext()
+    const { $config } = useContext()
     const partners = ref(null)
 
     useFetch(async () => {
-      partners.value = (await $docus.search(`/collections/partners/${props.category}`, { deep: true }).fetch())
-        .map(partner => ({ ...partner, link: null, to: `/partners/${partner.slug}` }))
-        /* Filter by logo presence to eliminate wrong items sent by Docus API */
-        .filter(partner => partner.logo)
+      const apiURL = $config.apiNuxtlabsURL || 'https://api.nuxtlabs.com'
+
+      const results = await $fetch(`${apiURL}/api/partners`, {
+        params: {
+          type: props.category
+        }
+      })
+      // mapping for LogoCard
+      partners.value = results.map(partner => ({
+        ...partner,
+        to: '/partners/' + partner.slug,
+        logo: {
+          dark: partner.profile.logoDark?.url,
+          light: partner.profile.logoLight?.url
+        },
+        title: partner.name,
+        description: partner.profile.shortDescription
+      }))
     })
 
     onMounted(() => {
diff --git a/components/templates/Partner.vue b/components/templates/Partner.vue
index df8a36ab82..495295efcb 100644
--- a/components/templates/Partner.vue
+++ b/components/templates/Partner.vue
@@ -1,18 +1,32 @@
 <template>
   <div>
     <div class="h-80 p-6 flex justify-center items-center bg-sky-darkest">
-      <img v-if="page.logoFull" loading="lazy" :src="`${page.logoFull}`" :alt="page.title" class="h-20" />
+      <img
+        v-if="page.profile.logoFull"
+        loading="lazy"
+        :src="`${page.profile.logoFull.url}`"
+        :alt="page.name"
+        class="h-20"
+      />
     </div>
 
     <div class="d-container-content">
       <div class="relative flex gap-8 -mt-6 sm:-mt-8 pb-8 xl:pb-16">
         <div class="w-24 h-24 sm:w-32 sm:h-32 p-4 bg-cloud-surface dark:bg-sky-darker rounded-md flex">
-          <img :src="`/img/companies/square/light/${page.icon}`" :alt="page.title" class="light-img text-white" />
-          <img :src="`/img/companies/square/dark/${page.icon}`" :alt="page.title" class="dark-img text-white" />
+          <img
+            :src="`${page.profile.logoLight && page.profile.logoLight.url}`"
+            :alt="page.name"
+            class="light-img text-white"
+          />
+          <img
+            :src="`${page.profile.logoDark && page.profile.logoDark.url}`"
+            :alt="page.name"
+            class="dark-img text-white"
+          />
         </div>
         <div class="flex flex-col justify-end gap-1">
-          <h1 class="text-display-5 sm:text-display-4 font-bold">{{ page.title }}</h1>
-          <AppLink :href="page.link" rel="noopener">
+          <h1 class="text-display-5 sm:text-display-4 font-bold">{{ page.name }}</h1>
+          <AppLink :href="page.url" rel="noopener">
             <IconExternalLink class="inline w-4 h-4 mr-1" /> {{ websiteDomain }}
           </AppLink>
         </div>
@@ -21,7 +35,7 @@
       <div class="flex flex-col-reverse gap-8 xl:gap-12 xl:flex-row xl:justify-between">
         <div class="w-full xl:w-[70%]">
           <p class="text-md sm:text-lg">
-            <span style="white-space: pre-wrap">{{ page.fullDescription }}</span>
+            <span style="white-space: pre-wrap">{{ page.profile.longDescription }}</span>
           </p>
 
           <div
@@ -37,54 +51,58 @@
               overflow-hidden
             "
           >
-            <div class="text-white p-6" :class="page.emailAddress ? 'sm:w-1/3' : 'w-full'" :style="customBackground">
+            <div class="text-white p-6" :class="page.email ? 'sm:w-1/3' : 'w-full'" :style="customBackground">
               <div class="flex flex-col h-full">
-                <h2 v-if="page.emailAddress" class="font-semibold text-lg">
-                  {{ $t('sustainability.mvp_detail.contact_partner', { partner: page.title }) }}
+                <h2 v-if="page.email" class="font-semibold text-lg">
+                  {{ $t('sustainability.mvp_detail.contact_partner', { partner: page.name }) }}
                 </h2>
                 <h2 v-else class="font-semibold text-lg">
-                  {{ $t('sustainability.mvp_detail.follow_partner', { partner: page.title }) }}
+                  {{ $t('sustainability.mvp_detail.follow_partner', { partner: page.name }) }}
                 </h2>
-                <span v-if="page.emailAddress" class="block text-gray-100 mt-2">{{
+                <span v-if="page.email" class="block text-gray-100 mt-2">{{
                   $t('sustainability.mvp_detail.they_will_get_back_to_you')
                 }}</span>
                 <span v-else class="block text-gray-100 mt-2">{{
                   $t('sustainability.mvp_detail.find_them_on_the_web')
                 }}</span>
-                <div class="flex justify-between" :class="!page.emailAddress ? 'flex-row-reverse' : 'flex-col h-full'">
+                <div class="flex justify-between" :class="!page.email ? 'flex-row-reverse' : 'flex-col h-full'">
                   <div>
-                    <AppLink :href="page.link" rel="noopener" class="flex items-center mt-4">
+                    <AppLink :href="page.url" rel="noopener" class="flex items-center mt-4">
                       <IconExternalLink class="inline flex-shrink-0 w-4 h-4 mr-1" />
                       <span class="truncate">{{ websiteDomain }}</span>
                     </AppLink>
 
-                    <AppLink v-if="page.phoneNumber" :href="`tel:${page.phoneNumber}`" class="flex items-center mt-4">
+                    <AppLink v-if="page.phone" :href="`tel:${page.phone}`" class="flex items-center mt-4">
                       <IconPhone class="inline flex-shrink-0 w-4 h-4 mr-1" />
-                      <span class="truncate">{{ page.phoneNumber }}</span>
+                      <span class="truncate">{{ page.phone }}</span>
                     </AppLink>
                   </div>
 
-                  <div class="flex gap-10" :class="page.emailAddress ? 'items-end' : 'items-end'">
+                  <div class="flex gap-10" :class="page.email ? 'items-end' : 'items-end'">
                     <AppLink
-                      v-if="page.twitter"
-                      :href="`https://twitter.com/${page.twitter}`"
+                      v-if="page.profile.twitter"
+                      :href="`https://twitter.com/${page.profile.twitter}`"
                       aria-label="twitter link"
                     >
                       <IconTwitter class="inline w-6 h-6" />
                     </AppLink>
-                    <AppLink v-if="page.github" :href="`https://github.com/${page.github}`" aria-label="github link">
+                    <AppLink
+                      v-if="page.profile.github"
+                      :href="`https://github.com/${page.profile.github}`"
+                      aria-label="github link"
+                    >
                       <IconGitHub class="inline w-6 h-6" />
                     </AppLink>
                     <AppLink
-                      v-if="page.linkedin"
-                      :href="`https://www.linkedin.com/company/${page.linkedin}`"
+                      v-if="page.profile.linkedin"
+                      :href="`https://www.linkedin.com/company/${page.profile.linkedin}`"
                       aria-label="linkedin link"
                     >
                       <IconLinkedIn class="inline w-6 h-6" />
                     </AppLink>
                     <AppLink
-                      v-if="page.facebook"
-                      :href="`https://www.facebook.com/${page.facebook}`"
+                      v-if="page.profile.facebook"
+                      :href="`https://www.facebook.com/${page.profile.facebook}`"
                       aria-label="facebook link"
                     >
                       <IconFacebook class="inline w-6 h-6" />
@@ -95,7 +113,7 @@
             </div>
 
             <form
-              v-if="page.emailAddress"
+              v-if="page.email"
               class="contact-form sm:w-2/3 h-full grid grid-cols-1 lg:grid-cols-2 p-6 gap-6"
               @submit.prevent="validateForm"
             >
@@ -131,15 +149,15 @@
 
         <div class="relative w-full xl:w-[30%]">
           <div class="xl:sticky xl:top-header px-6 py-3 bg-cloud-surface dark:bg-sky-darker rounded-md">
-            <div v-if="page.location" class="py-3">
+            <div v-if="page.profile.location" class="py-3">
               <h2 class="font-semibold text-lg mb-2">{{ $t('sustainability.mvp_detail.location') }}</h2>
-              <span class="text-sm text-sky-dark dark:text-gray-300">{{ page.location }}</span>
+              <span class="text-sm text-sky-dark dark:text-gray-300">{{ page.profile.location }}</span>
             </div>
-            <div v-if="page.services && page.services.length" class="py-3">
+            <div v-if="page.profile.services && page.profile.services.length" class="py-3">
               <h2 class="font-semibold text-lg mb-2">{{ $t('sustainability.mvp_detail.services') }}</h2>
               <ul class="flex flex-row flex-wrap gap-3">
                 <li
-                  v-for="(service, index) in page.services"
+                  v-for="(service, index) in page.profile.services"
                   :key="index"
                   class="text-sm rounded-md bg-cloud-lightest dark:bg-sky-dark px-2 py-1"
                 >
@@ -147,10 +165,10 @@
                 </li>
               </ul>
             </div>
-            <div v-if="page.resources && page.resources.length" class="py-3">
+            <div v-if="page.profile.resources && page.profile.resources.length" class="py-3">
               <h2 class="font-semibold text-lg mb-2">{{ $t('sustainability.mvp_detail.resources') }}</h2>
               <ul>
-                <li v-for="(link, index) in page.resources" :key="index">
+                <li v-for="(link, index) in page.profile.resources" :key="index">
                   <AppLink
                     :href="link.url"
                     rel="noopener"
@@ -195,7 +213,7 @@ export default defineComponent({
       app: { i18n },
       $recaptcha
     } = useContext()
-    const { validateForm, result, form } = usePartnerContact(props.page.emailAddress)
+    const { validateForm, result, form } = usePartnerContact(props.page.email)
 
     const resultText = computed(() => {
       switch (result.value) {
@@ -219,10 +237,10 @@ export default defineComponent({
     const websiteDomain = computed(() => {
       let domain
 
-      if (props.page.link.includes('//')) {
-        domain = props.page.link.split('/')[2]
+      if (props.page.url.includes('//')) {
+        domain = props.page.url.split('/')[2]
       } else {
-        domain = props.page.link.split('/')[0]
+        domain = props.page.url.split('/')[0]
       }
 
       return domain
@@ -233,16 +251,16 @@ export default defineComponent({
     onBeforeUnmount(() => $recaptcha.destroy())
 
     const customBackground = computed(() => {
-      if (typeof props.page.color === 'object') {
-        if (props.page.color?.length === 1) {
-          return `background-color: ${props.page.color[0]}`
+      if (typeof props.page.profile.colors === 'object') {
+        if (props.page.profile.colors?.length === 1) {
+          return `background-color: ${props.page.profile.colors[0]}`
         }
-        const colors = props.page.color
-          .map((value, index) => `${value} ${Math.round((index / (props.page.color.length - 1)) * 100)}%`)
+        const colors = props.page.profile.colors
+          .map((value, index) => `${value} ${Math.round((index / (props.page.profile.colors.length - 1)) * 100)}%`)
           .join(', ')
         return `background: radial-gradient(100% 100% at 0% 0%, ${colors})`
-      } else if (props.page.color) {
-        return `background-color: ${props.page.color}`
+      } else if (props.page.profile.colors) {
+        return `background-color: ${props.page.profile.colors}`
       } else {
         return 'background-color: #255461' // sky-dark
       }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 30f91ceaa5..ef92316ae6 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -179,6 +179,7 @@ export default withDocus({
   },
   publicRuntimeConfig: {
     apiURL: process.env.API_URL,
+    apiNuxtlabsURL: process.env.API_NUXTLABS_URL,
     plausible: {
       domain: process.env.PLAUSIBLE_DOMAIN
     },
diff --git a/pages/partners/_slug/index.vue b/pages/partners/_slug/index.vue
index 54095be585..57f47c9ebb 100644
--- a/pages/partners/_slug/index.vue
+++ b/pages/partners/_slug/index.vue
@@ -4,13 +4,15 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+import { $fetch } from 'ohmyfetch'
 
 // Some code has been imported from Docus to make this working
 // @docus/app/dist/app/pages/_.vue
 
 export default defineComponent({
-  async asyncData({ $docus, i18n, route, error }) {
+  async asyncData({ $docus, $config, route, error }) {
     const { slug } = route.params
+    const { token } = route.query
     if (!slug) {
       return error({
         statusCode: 404,
@@ -18,19 +20,22 @@ export default defineComponent({
       })
     }
 
-    const pages = await $docus
-      .search('/collections/partners', { deep: true })
-      .where({ slug: { $in: route.params.slug } })
-      .fetch()
-    if (!pages?.length) {
+    const apiURL = $config.apiNuxtlabsURL || 'https://api.nuxtlabs.com'
+
+    let page
+    try {
+      page = await $fetch(`${apiURL}/api/partners/${slug}`, {
+        params: token ? { token } : {}
+      })
+    } catch {}
+
+    if (!page) {
       return error({
         statusCode: 404,
         message: 'Partner not found'
       })
     }
 
-    const page = pages[0]
-
     const templateOptions = {
       ...$docus.settings.value.layout,
       aside: false,

From 30427cb8d231ed5bffc29cb99e40ccf4ea61375d Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Mon, 10 Jan 2022 18:32:39 +0100
Subject: [PATCH 2/9] feat(partners): avoid partners pages being generated

---
 components/organisms/sections/PartnersSection.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/organisms/sections/PartnersSection.vue b/components/organisms/sections/PartnersSection.vue
index ade97beb64..a10a9c6f9e 100644
--- a/components/organisms/sections/PartnersSection.vue
+++ b/components/organisms/sections/PartnersSection.vue
@@ -6,7 +6,7 @@
         <Markdown use="category-title" unwrap="p" />
       </h2>
     </div>
-    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div v-if="partners && partners.length" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
       <LogoCard v-for="partner in partners" :key="partner.id" :item="partner">
         <template #footer>
           <PartnerServices :services="partner.profile.services" class="text-sm mt-4" />
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, ref, useFetch, onMounted } from '@nuxtjs/composition-api'
+import { defineComponent, useContext, ref, onMounted } from '@nuxtjs/composition-api'
 import { scrollToHeading } from '@docus/theme/runtime'
 import { $fetch } from 'ohmyfetch'
 
@@ -36,7 +36,7 @@ export default defineComponent({
     const { $config } = useContext()
     const partners = ref(null)
 
-    useFetch(async () => {
+    const fetch = async () => {
       const apiURL = $config.apiNuxtlabsURL || 'https://api.nuxtlabs.com'
 
       const results = await $fetch(`${apiURL}/api/partners`, {
@@ -55,9 +55,11 @@ export default defineComponent({
         title: partner.name,
         description: partner.profile.shortDescription
       }))
-    })
+    }
 
     onMounted(() => {
+      fetch()
+
       if (window.location.hash) {
         const hash = window.location.hash.replace('#', '')
 

From 19fcfa5d07ee140be1a1c6c74d1246406267644f Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Tue, 11 Jan 2022 11:36:40 +0100
Subject: [PATCH 3/9] feat(partner): update meta

---
 pages/partners/_slug/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/partners/_slug/index.vue b/pages/partners/_slug/index.vue
index 57f47c9ebb..197a2977a1 100644
--- a/pages/partners/_slug/index.vue
+++ b/pages/partners/_slug/index.vue
@@ -48,8 +48,8 @@ export default defineComponent({
     }
   },
   head() {
-    const title = this.page.title
-    const description = this.page.description
+    const title = this.page.name
+    const description = this.page.profile?.shortDescription
 
     return {
       title,

From 9d34881e091817b80db33fa35dbcc6c36a358aae Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Tue, 11 Jan 2022 14:02:59 +0100
Subject: [PATCH 4/9] feat(partners): move to `api.nuxtlabs.com` contact route

---
 components/templates/Partner.vue |  2 +-
 plugins/partner.js               | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/templates/Partner.vue b/components/templates/Partner.vue
index 495295efcb..91ec2208d1 100644
--- a/components/templates/Partner.vue
+++ b/components/templates/Partner.vue
@@ -213,7 +213,7 @@ export default defineComponent({
       app: { i18n },
       $recaptcha
     } = useContext()
-    const { validateForm, result, form } = usePartnerContact(props.page.email)
+    const { validateForm, result, form } = usePartnerContact(props.page.slug)
 
     const resultText = computed(() => {
       switch (result.value) {
diff --git a/plugins/partner.js b/plugins/partner.js
index 64a55078e3..d6ae630171 100644
--- a/plugins/partner.js
+++ b/plugins/partner.js
@@ -1,11 +1,11 @@
 import { ref, useContext, reactive } from '@nuxtjs/composition-api'
 import { $fetch } from 'ohmyfetch'
 
-export function usePartnerContact(partnersEmail) {
+export function usePartnerContact(partnerSlug) {
   // @ts-ignore
   const { $recaptcha, $config } = useContext()
 
-  const apiURL = $config.apiURL || 'https://api.nuxtjs.org'
+  const apiURL = $config.apiNuxtlabsURL || 'https://api.nuxtlabs.com'
 
   const form = reactive({
     first_name: '',
@@ -21,7 +21,7 @@ export function usePartnerContact(partnersEmail) {
     $recaptcha
       .execute('login')
       .then(token => {
-        submitForm(partnersEmail, token)
+        submitForm(partnerSlug, token)
       })
       .catch(() => {
         result.value = 'failure'
@@ -31,14 +31,13 @@ export function usePartnerContact(partnersEmail) {
       })
   }
 
-  const submitForm = (partnersEmail, recaptchaToken) => {
-    $fetch(`${apiURL}/api/partners/contact`, {
+  const submitForm = (partnerSlug, recaptchaToken) => {
+    $fetch(`${apiURL}/api/organizations/${partnerSlug}/contact`, {
       method: 'POST',
       headers: {
         Accept: 'application/json'
       },
       body: {
-        partner_email: partnersEmail,
         token: recaptchaToken,
         ...form
       }

From edb2e769d5600f2da7077bd24d8b5c19dae59367 Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Tue, 11 Jan 2022 15:19:42 +0100
Subject: [PATCH 5/9] refactor(partners): move partners fetch to plugin

---
 .../organisms/sections/PartnersSection.vue    | 40 +++++++------------
 plugins/partners.js                           | 18 +++++++++
 2 files changed, 33 insertions(+), 25 deletions(-)
 create mode 100644 plugins/partners.js

diff --git a/components/organisms/sections/PartnersSection.vue b/components/organisms/sections/PartnersSection.vue
index a10a9c6f9e..3e7e8d6d28 100644
--- a/components/organisms/sections/PartnersSection.vue
+++ b/components/organisms/sections/PartnersSection.vue
@@ -6,7 +6,7 @@
         <Markdown use="category-title" unwrap="p" />
       </h2>
     </div>
-    <div v-if="partners && partners.length" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div v-if="partners" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
       <LogoCard v-for="partner in partners" :key="partner.id" :item="partner">
         <template #footer>
           <PartnerServices :services="partner.profile.services" class="text-sm mt-4" />
@@ -17,9 +17,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, ref, onMounted } from '@nuxtjs/composition-api'
+import { defineComponent, ref, onMounted } from '@nuxtjs/composition-api'
 import { scrollToHeading } from '@docus/theme/runtime'
-import { $fetch } from 'ohmyfetch'
+import { usePartners } from '~/plugins/partners'
 
 export default defineComponent({
   props: {
@@ -33,17 +33,20 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { $config } = useContext()
-    const partners = ref(null)
+    const { fetch: fetchPartners } = usePartners()
+    const partners = ref([])
 
-    const fetch = async () => {
-      const apiURL = $config.apiNuxtlabsURL || 'https://api.nuxtlabs.com'
+    onMounted(async () => {
+      if (window.location.hash) {
+        const hash = window.location.hash.replace('#', '')
+
+        // do not remove setTimeout (wrong scroll pos)
+        setTimeout(() => {
+          scrollToHeading(hash, '--docs-scroll-margin-block')
+        }, 300)
+      }
 
-      const results = await $fetch(`${apiURL}/api/partners`, {
-        params: {
-          type: props.category
-        }
-      })
+      const results = await fetchPartners(props.category)
       // mapping for LogoCard
       partners.value = results.map(partner => ({
         ...partner,
@@ -55,19 +58,6 @@ export default defineComponent({
         title: partner.name,
         description: partner.profile.shortDescription
       }))
-    }
-
-    onMounted(() => {
-      fetch()
-
-      if (window.location.hash) {
-        const hash = window.location.hash.replace('#', '')
-
-        // do not remove setTimeout (wrong scroll pos)
-        setTimeout(() => {
-          scrollToHeading(hash, '--docs-scroll-margin-block')
-        }, 300)
-      }
     })
 
     return {
diff --git a/plugins/partners.js b/plugins/partners.js
new file mode 100644
index 0000000000..0b11ae671a
--- /dev/null
+++ b/plugins/partners.js
@@ -0,0 +1,18 @@
+import { useContext } from '@nuxtjs/composition-api'
+import { $fetch } from 'ohmyfetch'
+
+export function usePartners() {
+  const { $config } = useContext()
+
+  const apiURL = $config.apiNuxtlabsURL || 'https://api.nuxtlabs.com'
+
+  const fetch = async type => {
+    return await $fetch(`${apiURL}/api/partners`, {
+      params: type ? { type } : {}
+    })
+  }
+
+  return {
+    fetch
+  }
+}

From 41486f03a60a0af3d9c9c5cde431b35bac74b6bc Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Tue, 11 Jan 2022 15:19:56 +0100
Subject: [PATCH 6/9] feat(partners): update ui

---
 components/molecules/cards/LogoCard.vue | 9 ++++++---
 components/templates/Partner.vue        | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/molecules/cards/LogoCard.vue b/components/molecules/cards/LogoCard.vue
index 8d70080734..6c6a07a105 100644
--- a/components/molecules/cards/LogoCard.vue
+++ b/components/molecules/cards/LogoCard.vue
@@ -10,20 +10,23 @@
     </template>
     <div class="ListCard-body">
       <div class="w-full flex flex-row justify-between">
-        <NuxtImg
+        <img
           v-if="item.logo && item.logo.dark"
+          loading="lazy"
           :alt="`${item.title} logo`"
           :src="item.logo.dark"
           class="dark-img w-12 h-12 mr-4 rounded-md"
         />
-        <NuxtImg
+        <img
           v-if="item.logo && item.logo.light"
+          loading="lazy"
           :alt="`${item.title} logo`"
           :src="item.logo.light"
           class="light-img w-12 h-12 mr-4 rounded-md"
         />
-        <NuxtImg
+        <img
           v-if="typeof item.logo === 'string'"
+          loading="lazy"
           :alt="`${item.title} logo`"
           :src="item.logo || ''"
           class="w-12 h-12 mr-4 rounded-md"
diff --git a/components/templates/Partner.vue b/components/templates/Partner.vue
index 91ec2208d1..f868c53a1d 100644
--- a/components/templates/Partner.vue
+++ b/components/templates/Partner.vue
@@ -16,12 +16,12 @@
           <img
             :src="`${page.profile.logoLight && page.profile.logoLight.url}`"
             :alt="page.name"
-            class="light-img text-white"
+            class="light-img text-white rounded-md"
           />
           <img
             :src="`${page.profile.logoDark && page.profile.logoDark.url}`"
             :alt="page.name"
-            class="dark-img text-white"
+            class="dark-img text-white rounded-md"
           />
         </div>
         <div class="flex flex-col justify-end gap-1">

From d18c056110bf93f8edce6a059c25d18e96994d37 Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Tue, 11 Jan 2022 16:17:50 +0100
Subject: [PATCH 7/9] feat(partners): update links

---
 components/organisms/heroes/PartnersBottomHero.vue | 2 +-
 components/templates/Partner.vue                   | 2 +-
 content/en/index.md                                | 2 +-
 content/es/index.md                                | 2 +-
 content/fr/index.md                                | 2 +-
 content/ja/index.md                                | 2 +-
 content/pt/index.md                                | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/organisms/heroes/PartnersBottomHero.vue b/components/organisms/heroes/PartnersBottomHero.vue
index be81755497..7e2edf2dd2 100644
--- a/components/organisms/heroes/PartnersBottomHero.vue
+++ b/components/organisms/heroes/PartnersBottomHero.vue
@@ -1,6 +1,6 @@
 <template>
   <AppButton
-    to="mailto:partners@nuxtlabs.com"
+    href="https://nuxtlabs.com/partners"
     extra-class="gap-2 px-4 app-button-secondary-color"
     icon="IconStar"
     size="large"
diff --git a/components/templates/Partner.vue b/components/templates/Partner.vue
index f868c53a1d..24c9437ee0 100644
--- a/components/templates/Partner.vue
+++ b/components/templates/Partner.vue
@@ -188,7 +188,7 @@
         <img loading="lazy" :src="`/img/partners/banner.svg`" alt="A landscape image" />
         <div class="absolute inset-0 flex lg:flex-col items-center justify-center gap-4 sm:gap-12 lg:gap-8">
           <span class="block text-2xl sm:text-4xl font-bold">{{ $t('sustainability.mvp_detail.join_us') }}</span>
-          <AppButton href="mailto:partners@nuxtlabs.com" :size="$mq === 'xs' ? 'small' : 'large'">{{
+          <AppButton href="https://nuxtlabs.com/partners" :size="$mq === 'xs' ? 'small' : 'large'">{{
             $t('partners.become_partner')
           }}</AppButton>
         </div>
diff --git a/content/en/index.md b/content/en/index.md
index 68cdb0f2a8..255f5694ad 100644
--- a/content/en/index.md
+++ b/content/en/index.md
@@ -153,7 +153,7 @@ Nuxt development is carried out by passionate developers, but the amount of effo
   ::
 
 #bottom
-  :app-button[Become a partner]{href="mailto:partners@nuxtlabs.com"}
+  :app-button[Become a partner]{href="https://nuxtlabs.com/partners"}
 ::
 
 ::home-learn-guides
diff --git a/content/es/index.md b/content/es/index.md
index 40ac58b4d1..933fd38ed1 100644
--- a/content/es/index.md
+++ b/content/es/index.md
@@ -153,7 +153,7 @@ El desarrollo de Nuxt lo llevan a cabo desarrolladores apasionados, pero la cant
   ::
 
 #bottom
-  :app-button[Conviertete en un patrocinador]{href="mailto:partners@nuxtlabs.com"}
+  :app-button[Conviertete en un patrocinador]{href="https://nuxtlabs.com/partners"}
 ::
 
 ::home-learn-guides
diff --git a/content/fr/index.md b/content/fr/index.md
index d01d54af17..701cef4be1 100644
--- a/content/fr/index.md
+++ b/content/fr/index.md
@@ -145,7 +145,7 @@ Nuxt est construit et maintenu par des développeurs passionnés mais il serait
   ::
 
 #bottom
-  :app-button[Devenez un partenaire]{href="mailto:partners@nuxtlabs.com"}
+  :app-button[Devenez un partenaire]{href="https://nuxtlabs.com/partners"}
 ::
 
 ::home-learn-guides
diff --git a/content/ja/index.md b/content/ja/index.md
index 1741e362b3..ef7b11836a 100644
--- a/content/ja/index.md
+++ b/content/ja/index.md
@@ -155,7 +155,7 @@ Nuxt の開発は情熱を持った開発者によって行われています、
   ::
 
 #bottom
-  :app-button[Become a partner]{href="mailto:partners@nuxtlabs.com"}
+  :app-button[Become a partner]{href="https://nuxtlabs.com/partners"}
 ::
 
 ::home-learn-guides
diff --git a/content/pt/index.md b/content/pt/index.md
index 68cdb0f2a8..255f5694ad 100644
--- a/content/pt/index.md
+++ b/content/pt/index.md
@@ -153,7 +153,7 @@ Nuxt development is carried out by passionate developers, but the amount of effo
   ::
 
 #bottom
-  :app-button[Become a partner]{href="mailto:partners@nuxtlabs.com"}
+  :app-button[Become a partner]{href="https://nuxtlabs.com/partners"}
 ::
 
 ::home-learn-guides

From 605d0f57e16163a33b80688c2624a061778f4384 Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Tue, 11 Jan 2022 17:22:43 +0100
Subject: [PATCH 8/9] fix(partner): banner size

---
 components/templates/Partner.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/templates/Partner.vue b/components/templates/Partner.vue
index 24c9437ee0..15f8124e9f 100644
--- a/components/templates/Partner.vue
+++ b/components/templates/Partner.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <div class="h-80 p-6 flex justify-center items-center bg-sky-darkest">
+    <div class="h-80 flex justify-center items-center bg-sky-darkest">
       <img
         v-if="page.profile.logoFull"
         loading="lazy"
         :src="`${page.profile.logoFull.url}`"
         :alt="page.name"
-        class="h-20"
+        class="h-full w-full object-cover"
       />
     </div>
 

From 2802a2ba20a193e72a573df568e27807a1e0bd54 Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Tue, 25 Jan 2022 19:01:00 +0100
Subject: [PATCH 9/9] chore: update linkedin link handling

---
 components/templates/Partner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/templates/Partner.vue b/components/templates/Partner.vue
index 15f8124e9f..2b80ae235c 100644
--- a/components/templates/Partner.vue
+++ b/components/templates/Partner.vue
@@ -95,7 +95,7 @@
                     </AppLink>
                     <AppLink
                       v-if="page.profile.linkedin"
-                      :href="`https://www.linkedin.com/company/${page.profile.linkedin}`"
+                      :href="`https://www.linkedin.com/${page.profile.linkedin}`"
                       aria-label="linkedin link"
                     >
                       <IconLinkedIn class="inline w-6 h-6" />