From 80fc788099d9529b955f5101f4866fd2599a0dc5 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 28 Jan 2021 11:00:47 +0100
Subject: [PATCH] docs: up sponsors

---
 docs/.vitepress/components/HomeSponsors.vue   | 36 +++-------------
 .../components/HomeSponsorsGroup.vue          | 41 +++++++++++++++++++
 docs/.vitepress/components/sponsors.json      | 32 +++++++++++++--
 3 files changed, 74 insertions(+), 35 deletions(-)
 create mode 100644 docs/.vitepress/components/HomeSponsorsGroup.vue

diff --git a/docs/.vitepress/components/HomeSponsors.vue b/docs/.vitepress/components/HomeSponsors.vue
index eb8a7b31..97efc1ff 100644
--- a/docs/.vitepress/components/HomeSponsors.vue
+++ b/docs/.vitepress/components/HomeSponsors.vue
@@ -1,39 +1,11 @@
 <template>
   <div id="sponsors">
     <div class="inner">
-      <template v-if="sponsors.platinum">
-        <h3>Platinum Sponsors</h3>
+      <HomeSponsorsGroup v-if="sponsors.platinum" name="Platinum" size="160" />
 
-        <a
-          v-for="sponsor in sponsors.platinum"
-          :key="sponsor.href"
-          :href="sponsor.href"
-          target="_blank"
-          rel="sponsored noopener"
-          style="width: 160px"
-        >
-          <img :src="sponsor.imgSrc" style="width: 160px" :alt="sponsor.alt" />
-        </a>
-        <br />
-        <br />
-      </template>
+      <HomeSponsorsGroup v-if="sponsors.gold" name="Gold" size="140" />
 
-      <template v-if="sponsors.silver">
-        <h3>Silver Sponsors</h3>
-
-        <a
-          v-for="sponsor in sponsors.silver"
-          :href="sponsor.href"
-          target="_blank"
-          rel="sponsored noopener"
-          style="width: 120px"
-        >
-          <img :src="sponsor.imgSrc" style="width: 120px" :alt="sponsor.alt" />
-        </a>
-
-        <br />
-        <br />
-      </template>
+      <HomeSponsorsGroup v-if="sponsors.silver" name="Silver" size="120" />
 
       <a
         class="become-sponsor button white"
@@ -45,10 +17,12 @@
 </template>
 
 <script>
+import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
 import sponsors from './sponsors.json'
 
 export default {
   name: 'HomeSponsors',
+  components: { HomeSponsorsGroup },
 
   created() {
     this.sponsors = sponsors
diff --git a/docs/.vitepress/components/HomeSponsorsGroup.vue b/docs/.vitepress/components/HomeSponsorsGroup.vue
new file mode 100644
index 00000000..346683c1
--- /dev/null
+++ b/docs/.vitepress/components/HomeSponsorsGroup.vue
@@ -0,0 +1,41 @@
+<template>
+  <h3>{{ name }} Sponsors</h3>
+
+  <a
+    v-for="sponsor in list"
+    :key="sponsor.href"
+    :href="sponsor.href"
+    target="_blank"
+    rel="sponsored noopener"
+    :style="{ width: size + 'px' }"
+  >
+    <img :src="sponsor.imgSrcLight" :style="{ width: size + 'px' }" />
+  </a>
+  <br />
+  <br />
+</template>
+
+<script>
+import sponsors from './sponsors.json'
+
+export default {
+  name: 'HomeSponsorsGroup',
+
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: [Number, String],
+      default: 140,
+    },
+  },
+
+  computed: {
+    list() {
+      return sponsors[this.name.toLowerCase()]
+    },
+  },
+}
+</script>
diff --git a/docs/.vitepress/components/sponsors.json b/docs/.vitepress/components/sponsors.json
index d8c79dea..d35695ad 100644
--- a/docs/.vitepress/components/sponsors.json
+++ b/docs/.vitepress/components/sponsors.json
@@ -1,14 +1,38 @@
 {
+  "gold": [
+    {
+      "href": "https://passionatepeople.io/",
+      "alt": "Passionate People",
+      "imgSrcLight": "https://img2.storyblok.com/672x0/filters::format(webp)/f/86387/x/21aa32ed18/logo-normal.svg",
+      "imgSrcDark": "https://img2.storyblok.com/0x200/filters::format(webp)/f/86387/x/4cf6a70a8c/logo-white-text.svg"
+    }
+  ],
   "silver": [
     {
-      "alt": "VueMastery",
       "href": "https://www.vuemastery.com/",
-      "imgSrc": "https://www.vuemastery.com/images/vuemastery.svg"
+      "alt": "VueMastery",
+      "imgSrcLight": "https://www.vuemastery.com/images/vuemastery.svg",
+      "imgSrcDark": "https://www.vuemastery.com/images/vuemastery.svg"
     },
     {
-      "alt": "Vuetify",
       "href": "https://www.vuetifyjs.com/",
-      "imgSrc": "https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-light-text.svg"
+      "imgSrcLight": "https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-light-text.svg",
+      "imgSrcDark": "https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-light-text.svg",
+      "alt": "Vuetify"
+    }
+  ],
+  "bronze": [
+    {
+      "href": "https://storyblok.com",
+      "imgSrcLight": "https://a.storyblok.com/f/51376/3856x824/fea44d52a9/colored-full.png",
+      "imgSrcDark": "https://a.storyblok.com/f/51376/3856x824/fea44d52a9/colored-full.png",
+      "alt": "Storyblok"
+    },
+    {
+      "href": "https://nuxtjs.org",
+      "imgSrcLight": "https://nuxtjs.org/logos/nuxtjs-typo.svg",
+      "imgSrcDark": "https://nuxtjs.org/logos/nuxtjs-typo-white.svg",
+      "alt": "NuxtJS"
     }
   ]
 }
-- 
2.47.3