docs: sponsors update

Author: posva

docs/.vuepress/components/HomeSponsors.vue

@@ -1,39 +1,9 @@
 <template>
   <div id="sponsors">
     <div class="inner">
-      <template v-if="sponsors.platinum">
-        <h3>Platinum Sponsors</h3>
-
-        <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>
-
-      <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 name="Platinum" size="160" />
+      <HomeSponsorsGroup name="Gold" size="140" />
+      <HomeSponsorsGroup name="Silver" size="120" />
 
       <a
         class="become-sponsor button white"
@@ -45,14 +15,12 @@
 </template>
 
 <script>
-import sponsors from './sponsors.json'
+import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
 
 export default {
   name: 'HomeSponsors',
 
-  created() {
-    this.sponsors = sponsors
-  }
+  components: { HomeSponsorsGroup }
 }
 </script>
 
@@ -74,6 +42,7 @@ export default {
   width: 100px;
   display: inline-block;
   vertical-align: middle;
+  margin: 0 2px;
 }
 
 #sponsors img {

docs/.vuepress/components/HomeSponsorsGroup.vue

@@ -0,0 +1,43 @@
+<template>
+  <div v-if="list && list.length">
+    <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 />
+  </div>
+</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>

docs/.vuepress/components/sponsors.json

@@ -3,30 +3,41 @@
     {
       "href": "https://passionatepeople.io/",
       "alt": "Passionate People",
-      "imgSrc": "https://img2.storyblok.com/0x200/filters::format(webp)/f/86387/x/4cf6a70a8c/logo-white-text.svg"
+      "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": [
     {
       "href": "https://www.vuemastery.com/",
       "alt": "VueMastery",
-      "imgSrc": "https://www.vuemastery.com/images/vuemastery.svg"
+      "imgSrcLight": "https://www.vuemastery.com/images/vuemastery.svg",
+      "imgSrcDark": "https://www.vuemastery.com/images/vuemastery.svg"
     },
     {
       "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"
+    },
+    {
+      "href": "https://www.codestream.com/?utm_source=github&utm_campaign=vuerouter&utm_medium=banner",
+      "alt": "CodeStream",
+      "imgSrcLight": "https://alt-images.codestream.com/codestream_logo_vuerouter.png",
+      "imgSrcDark": "https://alt-images.codestream.com/codestream_logo_vuerouter.png"
     }
   ],
   "bronze": [
     {
       "href": "https://storyblok.com",
-      "imgSrc": "https://a.storyblok.com/f/51376/3856x824/fea44d52a9/colored-full.png",
+      "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",
-      "imgSrc": "https://nuxtjs.org/logos/nuxtjs-typo-white.svg",
+      "imgSrcLight": "https://nuxtjs.org/logos/nuxtjs-typo.svg",
+      "imgSrcDark": "https://nuxtjs.org/logos/nuxtjs-typo-white.svg",
       "alt": "NuxtJS"
     }
   ]