refactor: sponsors and add mvp single page (nuxt#1611)

* 📝 (sponsors) update sponsors * ✨ (PageHero) add full width props for description * 🌐 (sponsors) add translation * 🍱 (sponsors) add square sponsors img * ♻️ (sponsors) refactor sustainability page * ✨ (SustainabilityMvpDetail) add single page mvp sponsors * feat: add example page for MVP partners * 📝 (sponsors) add path to sqaure img * ✨ (SustainabilityCard) update * feat: use SVGs instead of jpeg for square logos * 🍱 (sponsors) update sponsors assets * 🐛 (PageHero) overflow ellipsis on title * ✨ (PartnersBanner) update img path * ✨ (sponsors) update sponsors * 📝 (chrome) update img path * 🐛 (branch) fix branch Co-authored-by: Clément Ollivier <[email protected]> Co-authored-by: Yaël GUILLOUX <[email protected]>
Sudeep72 · Aug 16, 2021 · e4c72e3 · e4c72e3
1 parent 6efae8c
commit e4c72e3
Show file tree

Hide file tree

Showing 162 changed files with 1,206 additions and 1,186 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ sw.*
 .output
 .husky
 package-lock.json
+yarn-error.log
diff --git a/components/atoms/icons/IconOpenCollective.vue b/components/atoms/icons/IconOpenCollective.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg viewBox="0 0 39.98 40.05" xmlns="http://www.w3.org/2000/svg" width="2496" height="2500"><path d="M32.76 19.97c0 2.53-.73 4.94-2 6.94l5.14 5.16c2.5-3.36 4.08-7.57 4.08-12.1 0-4.5-1.57-8.7-4.08-12.08l-5.13 5.16c1.26 2 2 4.3 2 6.93z" fill="#b8d3f4"/><path d="M20 32.8c-7.02 0-12.78-5.78-12.78-12.83 0-7.04 5.76-12.82 12.77-12.82 2.6 0 4.9.73 6.9 2.1l5.13-5.15C28.68 1.58 24.5 0 20 0 9 0 0 8.94 0 20.08s9 19.97 20 19.97c4.6 0 8.8-1.57 12.14-4.1L27 30.8c-1.98 1.26-4.4 2-7 2z" fill="#3385ff"/></svg>
+</template>
diff --git a/components/molecules/PageHero.vue b/components/molecules/PageHero.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="relative pt-24 pb-32 bg-gray-100 dark:bg-secondary-darkest">
     <div class="relative d-container-content">
-      <h1 class="text-display-3 font-serif mb-4">{{ title }}</h1>
-      <p class="text-body-xl max-w-3xl">{{ description }}</p>
+      <h1 class="text-display-3 font-serif mb-4 overflow-ellipsis overflow-hidden">{{ title }}</h1>
+       <p :class="{ 'text-body-xl max-w-3xl': !descriptionFullWidth }">{{ description }}</p>
       <Markdown use="bottom" />
     </div>
 
@@ -33,6 +33,10 @@ export default defineComponent({
     description: {
       type: String,
       default: ''
+    },
+    descriptionFullWidth: {
+      type: Boolean,
+      default: false
     }
   }
 })

diff --git a/components/molecules/PartnersBanner.vue b/components/molecules/PartnersBanner.vue
@@ -9,15 +9,15 @@
         <a :href="partner.url" class="opacity-75 hover:opacity-100 w-28" rel="noopener sponsored" target="_blank">
           <img
             loading="lazy"
-            :src="`/img/sponsors/light/${partner.img}`"
+            :src="`/img/sponsors/banner/light/${partner.img}`"
             :alt="partner.title"
             :title="partner.title"
             class="light-img"
             :class="partner.imgClass"
           />
           <img
             loading="lazy"
-            :src="`/img/sponsors/dark/${partner.img}`"
+            :src="`/img/sponsors/banner/dark/${partner.img}`"
             :alt="partner.title"
             :title="partner.title"
             class="dark-img"

diff --git a/components/molecules/SustainabilityCard.vue b/components/molecules/SustainabilityCard.vue
@@ -0,0 +1,32 @@
+<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/${$colorMode.value}/${sponsor.img_square}`" :alt="sponsor.title" :class="sponsor.size" class="w-1/4 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">
+          {{ sponsor.title }}
+        </span>
+        <!--TODO: sponsor description
+        < span class="text-sm">
+        </span -->
+      </div>
+      <IconChevronRight v-if="sponsor.link" class="w-4 h-4"/>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    sponsor: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+
+  },
+})
+</script>
diff --git a/components/molecules/SustainabilityCardDonation.vue b/components/molecules/SustainabilityCardDonation.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="flex space-x-4 justify-between items-center rounded-md shadow-lg p-8 dark:bg-sky-darker">
+    <component :is="icon" class="hidden sm:block w-12 h-12 object-contain" />
+    <span class="font-bold text-sm sm:text-lg truncate">{{ text }}</span>
+    <SectionButton
+      :to="url"
+      :aria-label="text"
+      size="lg"
+      class="bg-primary text-gray-800 hover:bg-primary-400 focus:bg-primary-400 text-sm"
+      >{{ $t('sustainability.tiers.donations') }}</SectionButton
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  setup() {
+
+  },
+})
+</script>
diff --git a/components/organisms/section/SectionSponsors.vue b/components/organisms/section/SectionSponsors.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="text-center">
-    <h2 class="font-semibold text-display-6">{{ tier }}</h2>
-    <div class="flex flex-wrap justify-center pt-8 pb-16 -mx-8">
-      <NuxtHref
+  <div>
+    <h2 class="font-semibold text-lg border-b border-b border-b-sky-dark dark:border-b-white mb-4">{{ tier }}</h2>
+    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+      <Link
         v-for="sponsor in sponsors"
         :key="sponsor.title"
-        :href="sponsor.url"
+        :to="sponsor.url ? `${sponsor.url}` : `${$route.path}/${sponsor.link}`"
         :aria-label="sponsor.title"
-        class="mx-8 my-4"
+        :blank="sponsor.url ? true : false"
       >
-        <img :src="`/img/sponsors/${$colorMode.value}/${sponsor.img}`" :alt="sponsor.title" :class="sponsor.size" />
-      </NuxtHref>
+        <SustainabilityCard :sponsor="sponsor" />
+      </Link>
     </div>
   </div>
 </template>

diff --git a/components/organisms/sustainability/SustainabilityDonation.vue b/components/organisms/sustainability/SustainabilityDonation.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="grid md:grid-cols-2 gap-8 w-full pb-16">
+    <div v-for="donation in donations" :key="donation.text">
+      <SustainabilityCardDonation :icon="donation.icon" :text="donation.name" :url="donation.url" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    donations: {
+      type: Array,
+      default: () => []
+    }
+  }
+})
+</script>
diff --git a/components/organisms/sustainability/SustainabilityMvpDetail.vue b/components/organisms/sustainability/SustainabilityMvpDetail.vue
@@ -0,0 +1,80 @@
+<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" 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">
+      <p class="text-md sm:text-lg w-full xl:w-3/4 pr-20">
+        {{ description }}
+      </p>
+      <div class="w-full xl:w-1/4 flex flex-col pb-12 xl:pl-12">
+        <div>
+          <span class="font-semibold text-md">{{ $t('sustainability.mvp_detail.services') }}</span>
+          <ul class="flex flex-col sm:flex-row sm:space-x-4 mt-4 xl:space-x-0 xl:flex-col ">
+            <li v-for="(service, index) in services" :key="index">
+              <div class="flex space-x-2">
+                <IconBadgeCheck class="h-5 w-5 mt-0.5"/>
+                <span>{{ service }}</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <span class="font-semibold text-md py-4">{{ $t('sustainability.mvp_detail.location') }}</span>
+        <span>{{ location }}</span>
+      </div>
+    </div>
+    <div class="flex pt-16 space-x-4 text-sm">
+      <SectionButton
+        :to="partnerContactUrl"
+        :aria-label="partnerContactUrl"
+        size="lg"
+        class="bg-primary text-gray-800 hover:bg-primary-400 focus:outline-none">
+          {{ $t('sustainability.mvp_detail.contact_partner') }}
+      </SectionButton>
+      <SectionButton
+        :to="websiteUrl"
+        :aria-label="websiteUrl"
+        size="lg"
+        class="bg-white dark:bg-secondary-black hover:light:bg-gray-50 hover:dark:bg-secondary-darkest border focus:outline-none">
+          {{ $t('sustainability.mvp_detail.visit_website') }}
+      </SectionButton>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    partnerContactUrl: {
+      type: String,
+      default: ''
+    },
+    websiteUrl: {
+      type: String,
+      default: ''
+    },
+    services: {
+      type: Array,
+      default: () => []
+    },
+    location: {
+      type: String,
+      default: ''
+    },
+  }
+})
+</script>
diff --git a/...nisms/resources/SustainabilitySection.vue → .../sustainability/SustainabilitySection.vue b/...nisms/resources/SustainabilitySection.vue → .../sustainability/SustainabilitySection.vue
@@ -1,27 +1,29 @@
 <template>
   <div class="py-4 d-container-content">
-    <div class="flex flex-col items-center pt-8 space-y-4 light:text-sky-darker dark:text-white">
-      <h2 class="font-semibold text-center text-display-6">
+    <div class="flex flex-col pt-8 space-y-4 light:text-sky-darker dark:text-white">
+      <!-- h2 class="font-semibold text-center text-display-6">
         <Markdown use="titleSection" unwrap="p" />
       </h2>
 
       <div class="flex justify-center w-full pb-16 text-lg">
         <p class="text-center md:w-2/3">
           <Markdown use="descriptionSection" unwrap="p" />
         </p>
-      </div>
+      </div-->
 
-      <section-sponsors :tier="$t('sustainability.tiers.mvp_partners')" :sponsors="mvpPartners" />
-      <section-sponsors :tier="$t('sustainability.tiers.partners')" :sponsors="partners" />
-      <section-sponsors :tier="$t('sustainability.tiers.sponsors')" :sponsors="sponsors" />
+      <SustainabilityDonation :donations="donations" />
 
-      <SectionButton
+      <SectionSponsors :tier="$t('sustainability.tiers.mvp_partners')" :sponsors="mvpPartners" class="pb-12" />
+      <SectionSponsors :tier="$t('sustainability.tiers.partners')" :sponsors="partners" class="pb-12" />
+      <SectionSponsors :tier="$t('sustainability.tiers.sponsors')" :sponsors="sponsors" />
+
+      <!-- SectionButton
         to="https://github.com/sponsors/nuxt"
         :aria-label="buttonText"
         size="md"
         class="text-gray-800 bg-primary hover:bg-primary-400 focus:bg-primary-400">
           {{ buttonText }}
-      </SectionButton>
+      </SectionButton -->
     </div>
   </div>
 </template>
@@ -43,6 +45,7 @@ export default defineComponent({
     const mvpPartners = ref()
     const partners = ref()
     const sponsors = ref()
+    const donations = ref()
 
     useFetch(async () => {
       const documents = await $docus
@@ -53,12 +56,14 @@ export default defineComponent({
       mvpPartners.value = documents.filter(sponsor => sponsor.tier === 'MVP Partners')
       partners.value = documents.filter(sponsor => sponsor.tier === 'Partners')
       sponsors.value = documents.filter(sponsor => sponsor.tier === 'Sponsors')
+      donations.value = documents.filter(sponsor => sponsor.tier === 'Donations')
     })
 
     return {
       mvpPartners,
       partners,
-      sponsors
+      sponsors,
+      donations
     }
   }
 })

diff --git a/content/_sponsors/donation/1.github.md b/content/_sponsors/donation/1.github.md
@@ -0,0 +1,6 @@
+---
+name: 'GitHub Sponsors'
+icon: 'IconGitHub'
+url: 'https://github.com/sponsors/nuxt'
+tier: 'Donations'
+---
diff --git a/content/_sponsors/donation/2.openCollective.md b/content/_sponsors/donation/2.openCollective.md
@@ -0,0 +1,6 @@
+---
+name: 'OpenCollective'
+icon: 'IconOpenCollective'
+url: 'https://opencollective.com/nuxtjs'
+tier: 'Donations'
+---
diff --git a/content/_sponsors/mvp-partners/1.netlify.md b/content/_sponsors/mvp-partners/1.netlify.md
@@ -1,7 +1,9 @@
 ---
 title: 'Netlify'
+img_square: 'netlify.svg'
 img: 'netlify.png'
-url: 'https://www.netlify.com/'
+#link: 'netlify'
+url: https://www.netlify.com/
 tier: 'MVP Partners'
 size: 'h-12'
 ---
diff --git a/content/_sponsors/mvp-partners/2.chrome.md b/content/_sponsors/mvp-partners/2.chrome.md
@@ -1,7 +1,9 @@
 ---
 title: 'Google Chrome'
 img: 'google-chrome.png'
-url: 'https://www.google.com/chrome/'
+img_square: 'chrome.svg'
+#link: chrome
+url: https://www.google.com/chrome/
 tier: 'MVP Partners'
 size: 'h-12'
 ---
diff --git a/content/_sponsors/mvp-partners/3.vercel.md b/content/_sponsors/mvp-partners/3.vercel.md
@@ -1,7 +1,9 @@
 ---
 title: 'Vercel'
 img: 'vercel.png'
-url: 'https://vercel.com'
+img_square: 'vercel.svg'
+#link: vercel
+url: https://vercel.com
 tier: 'MVP Partners'
-size: 'h-10'
+size: 'h-12'
 ---
diff --git a/content/_sponsors/partners/1.swell.md b/content/_sponsors/partners/1.swell.md
@@ -2,6 +2,7 @@
 title: 'Swell'
 url: 'https://swell.is/'
 img: 'swell.png'
+img_square: 'swell.svg'
 tier: 'Partners'
 size: 'h-12'
 ---
diff --git a/content/_sponsors/partners/2.ship-shape.md b/content/_sponsors/partners/2.ship-shape.md
@@ -2,6 +2,7 @@
 title: 'Ship Shape'
 url: 'https://shipshape.io/'
 img: 'shipshape.png'
+img_square: 'shipshape.jpeg'
 tier: 'Partners'
 size: 'h-12'
 ---
diff --git a/content/_sponsors/partners/3.layer-0.md b/content/_sponsors/partners/3.layer-0.md
@@ -2,6 +2,7 @@
 title: 'Layer0'
 url: 'https://www.layer0.co/?ref=nuxt'
 img: 'layer0.png'
+img_square: 'layer0.svg'
 tier: 'Partners'
 size: 'h-12'
 ---
diff --git a/content/_sponsors/partners/4.storyblok.md b/content/_sponsors/partners/4.storyblok.md
@@ -2,6 +2,7 @@
 title: 'Storyblok'
 url: 'https://www.storyblok.com/?ref=nuxt'
 img: 'storyblok.png'
+img_square: 'storyblok.svg'
 tier: 'Partners'
 size: 'h-12'
 ---
diff --git a/content/_sponsors/partners/5.64robots.md b/content/_sponsors/partners/5.64robots.md
@@ -2,6 +2,7 @@
 title: '64 Robots'
 url: 'https://www.64robots.com/?ref=nuxt'
 img: '64-robots.png'
+img_square: '64-robots.svg'
 tier: 'Partners'
 size: 'h-12'
 ---
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,3 +11,4 @@ sw.* @@
     .output
     .husky
     package-lock.json
+    yarn-error.log