docs: up sponsors

diff --git a/docs/.vitepress/components/HomeSponsors.vue b/docs/.vitepress/components/HomeSponsors.vue
index eb8a7b317a0b4c5cdd6f7e46384ab6159aba592d..97efc1fff0d3474ace9ff99cdfd43ba55b6a9e46 100644 (file)
--- 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 (file)
index 0000000..346683c
--- /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 d8c79deac2114194ef1efd20acb69e497f93d4a0..d35695ad2d710f2e1f4daba885e54c2d1f6825a2 100644 (file)
--- 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"
     }
   ]
 }