feat: partners new list and details page (nuxt#1857)

Co-authored-by: Florent <[email protected]>
Co-authored-by: Sylvain Marroufin <[email protected]>

.github/CODEOWNERS

@@ -3,8 +3,8 @@
 
 # Main content
 /content/en/**      @danielroe @atinux @pi0
-/content/en/partners/**      @clemcode @atinux @alexchopin
-content/en/_collections/sponsors/**  @clemcode @atinux @alexchopin
+/content/en/_collections/partners/**  @clemcode @atinux @alexchopin
+/content/en/_collections/sponsors/**  @clemcode @atinux @alexchopin
 
 # Translations
 /content/fr/**      @atinux @clemcode @alexchopin @flosciante

components/atoms/buttons/ButtonLink.vue

@@ -35,7 +35,7 @@ export default defineComponent({
 
 <style lang="postcss" scoped>
 a.button-link {
-  @apply inline-flex items-center flex-none rounded-md mb-2 sm:mb-0 px-3 py-1.5 text-xs leading-4 text-black transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-400  focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
+  @apply inline-flex items-center flex-none rounded-md px-3 py-1.5 text-xs leading-4 text-black transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-400  focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
   &.medium {
     @apply px-4 py-2.5 text-sm leading-4;
   }

components/atoms/icons/IconEmail.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+    />
+  </svg>
+</template>

components/atoms/icons/IconPhone.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+    />
+  </svg>
+</template>

components/molecules/PartnerServices.vue

@@ -0,0 +1,22 @@
+<template>
+  <ul class="flex flex-wrap">
+    <li
+      v-for="(service, index) in services"
+      :key="index"
+      class="bg-cloud-surface dark:bg-sky-dark rounded-md px-4 py-2 mt-2 mr-2"
+    >
+      {{ service }}
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  props: {
+    services: {
+      type: Array,
+      default: () => [],
+      required: true
+    }
+  }
+}
+</script>

components/molecules/cards/HomePartnersCard.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="flex flex-col space-y-4 items-center text-center">
+    <img :src="`/img/partners/categories/${icon}`" :alt="category" class="w-12 h-12" />
+    <h2 class="font-bold text-md md:text-lg">
+      <Markdown use="title" unwrap="p" />
+    </h2>
+    <p class="text-sm md:text-base px-8 md:px-12 pb-2">
+      <Markdown use="description" unwrap="p" />
+    </p>
+    <SectionButton
+      :aria-label="category"
+      size="sm"
+      class="border border-sky-darker rounded-md hover:border-sky-dark hover:text-sky-dark"
+      :to="`/partners#${category}`"
+    >
+      <Markdown use="button" unwrap="p" />
+    </SectionButton>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    category: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

components/molecules/cards/LogoCard.vue

@@ -31,9 +31,7 @@
       <h3 class="font-bold text-xl py-2">{{ item.title || 'Title' }}</h3>
       <p class="text-sm">{{ item.description || 'Description' }}</p>
     </div>
-    <div class="ListCard-foot">
-      <slot name="footer" />
-    </div>
+    <slot name="footer" />
   </div>
 </template>
 <script lang="ts">
@@ -56,7 +54,4 @@ export default defineComponent({
 .ListCard-external {
   @apply transition-opacity duration-200 opacity-0 absolute top-4 right-4 cursor-pointer h-6;
 }
-.ListCard-foot {
-  @apply text-right text-sm pt-4 font-medium text-gray-400;
-}
 </style>

components/molecules/cards/SustainabilityCard.vue

@@ -1,20 +1,19 @@
 <template>
   <div class="p-4 dark:bg-sky-darker rounded-md shadow-lg flex space-x-4 items-center dark:text-white">
     <img
-      :src="`/img/sponsors/sponsors-square/dark/${sponsor.img_square}`"
+      :src="`/img/companies/square/dark/${sponsor.img_square}`"
       :alt="sponsor.title"
       loading="lazy"
       :class="sponsor.size"
       class="dark-img h-10 object-contain"
     />
     <img
-      :src="`/img/sponsors/sponsors-square/light/${sponsor.img_square}`"
+      :src="`/img/companies/square/light/${sponsor.img_square}`"
       :alt="sponsor.title"
       loading="lazy"
       :class="sponsor.size"
       class="light-img h-10 object-contain"
     />
-    <!-- img :src="`/img/sponsors/sponsors-square/${sponsor.img_square}`" :alt="sponsor.title" /-->
     <div class="flex w-3/4" :class="{ 'justify-between items-center': sponsor.link }">
       <div class="flex flex-col items-start">
         <span class="font-medium">

components/organisms/home/HomeDiscoverPartners.vue

@@ -12,7 +12,9 @@
           <p class="font-normal text-center text-body-base md:text-body-lg 2xl:text-body-xl mb-8">
             <Markdown use="description" unwrap="p" />
           </p>
-          <PartnersBanner class="pb-0" :partners-logo="partners" />
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 md:px-16 pt-16 pb-24">
+            <Markdown use="partners-card" unwrap="p" />
+          </div>
           <p><Markdown use="bottom" unwrap="p" /></p>
         </div>
       </NuxtContainer>

components/organisms/sections/PartnersSection.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="py-4 d-container-content light:text-sky-darker dark:text-white mb-4">
+    <div class="flex space-x-4 items-center pb-4">
+      <img :src="`/img/partners/categories/${icon}`" :alt="category" class="w-8 h-8" />
+      <h2 :id="category" class="font-semibold text-center text-display-6 relative">
+        <Markdown use="category-title" unwrap="p" />
+      </h2>
+    </div>
+    <ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      <LogoCard v-for="partner in partners" :key="partner.title" :item="partner">
+        <template #footer>
+          <PartnerServices :services="partner.services" class="text-sm mt-4" />
+        </template>
+      </LogoCard>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, useContext, ref, useFetch, onMounted } from '@nuxtjs/composition-api'
+import { scrollToHeading } from '@docus/theme/runtime'
+
+export default defineComponent({
+  props: {
+    category: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const { $docus, i18n } = useContext()
+    const partners = ref(null)
+
+    useFetch(async () => {
+      partners.value = (
+        await $docus
+          .search(`/collections/partners/${props.category}`, { deep: true })
+          .where({ language: i18n.locale })
+          .fetch()
+      ).map(partner => ({ ...partner, link: null, to: `/partners/${partner.slug}` }))
+    })
+
+    onMounted(() => {
+      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 {
+      partners
+    }
+  }
+})
+</script>

components/organisms/sections/SustainabilityDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="d-container-content">
     <div class="relative pt-24 pb-4 xl:pb-16">
-      <img :src="`/img/sponsors/sponsors-square/${icon}`" :alt="title" loading="lazy" class="w-32 h-32" />
+      <img :src="`/img/companies/square/${icon}`" :alt="title" loading="lazy" class="w-32 h-32" />
       <h1 class="py-8 text-display-5 font-bold">{{ title }}</h1>
     </div>
     <div class="flex flex-col-reverse xl:flex-row xl:justify-between">

components/templates/PageList.vue

@@ -11,9 +11,11 @@
         <PartnersBottomHero v-if="page.heroType === 'partners'" />
       </template>
     </PageHero>
-    <div class="d-container px-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-6 pt-8">
-      <LogoCard v-for="item in list" :key="item.id" :item="item" />
-    </div>
+    <ul class="d-container px-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-6 pt-8">
+      <li>
+        <LogoCard v-for="item in list" :key="item.id" :item="item" />
+      </li>
+    </ul>
   </div>
 </template>