Support dynamic loading of special sponsors

.vitepress/theme/components/Home.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
+import { onMounted } from 'vue';
 import NewsLetter from './NewsLetter.vue'
+import { load, data, base } from './sponsors';
 import SponsorsGroup from './SponsorsGroup.vue';
 import VueMasteryModal from './VueMasteryModal.vue';
+
+onMounted(async () => {
+  await load()
+})
 </script>
 
 <template>
@@ -35,21 +41,20 @@ import VueMasteryModal from './VueMasteryModal.vue';
     </p>
   </section>
 
-  <!-- TODO make dynamic based on data -->
   <section id="special-sponsor">
     <span>Special Sponsor</span>
-    <a href="https://www.dcloud.io/hbuilderx.html?hmsr=vue-en&hmpl=&hmcu=&hmkw=&hmci=">
-      <picture>
-        <source type="image/avif" srcset="/images/sponsors/hbuilder.avif" />
-        <img
-          alt="hbuilder logo"
-          width="97"
-          height="36"
-          src="/images/sponsors/hbuilder.png"
-        />
-      </picture>
-    </a>
-    <span>Advanced IDE for Vue</span>
+    <template v-if="data && data.special">
+      <template v-for="{ url, img, name, description } of data.special">
+        <a :href="url" target="_blank" rel="sponsored noopener">
+          <picture v-if="img.endsWith('png')">
+            <source type="image/avif" :srcset="`${base}/images/${img.replace(/\.png$/, '.avif')}`" />
+            <img :src="`${base}/images/${img}`" :alt="name" />
+          </picture>
+          <img v-else :src="`${base}/images/${img}`" :alt="name" />
+        </a>
+        <span v-if="description">{{ description }}</span>
+      </template>
+    </template>
   </section>
 
   <section id="highlights" class="vt-box-container">
@@ -181,13 +186,14 @@ html:not(.dark) .accent,
   font-weight: 500;
   font-size: 13px;
   vertical-align: middle;
-  margin: 0 24px;
+  margin-right: 24px;
 }
 
 #special-sponsor img {
   display: inline-block;
   vertical-align: middle;
   height: 36px;
+  margin-right: 24px;
 }
 
 .dark #special-sponsor img {
@@ -279,4 +285,4 @@ html:not(.dark) .accent,
     font-size: 36px;
   }
 }
-</style>
+</style>

.vitepress/theme/components/SponsorsGroup.vue

@@ -1,28 +1,6 @@
-<script lang="ts">
-interface Sponsor {
-  url: string
-  img: string
-  name: string
-}
-
-interface SponsorData {
-  special: Sponsor[]
-  platinum: Sponsor[]
-  platinum_china: Sponsor[]
-  gold: Sponsor[]
-  silver: Sponsor[]
-  bronze: Sponsor[]
-}
-
-// shared data across instances so we load only once
-let data = $ref<SponsorData>()
-let pending = false
-
-const base = `https://sponsors.vuejs.org`
-</script>
-
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
+import { SponsorData, data, base, load } from './sponsors';
 
 const { tier, placement = 'aside' } = defineProps<{
   tier: keyof SponsorData
@@ -47,10 +25,7 @@ onMounted(async () => {
   onUnmounted(() => observer.disconnect())
 
   // load data
-  if (!pending) {
-    pending = true
-    data = await (await fetch(`${base}/data.json`)).json()
-  }
+  await load()
 })
 </script>
 

.vitepress/theme/components/sponsors.ts

@@ -0,0 +1,31 @@
+// shared data across instances so we load only once
+
+import { ref } from 'vue'
+
+export interface Sponsor {
+  url: string
+  img: string
+  name: string
+  description?: string
+}
+
+export interface SponsorData {
+  special: Sponsor[]
+  platinum: Sponsor[]
+  platinum_china: Sponsor[]
+  gold: Sponsor[]
+  silver: Sponsor[]
+  bronze: Sponsor[]
+}
+
+export const data = ref<SponsorData>()
+export const pending = ref<boolean>(false)
+
+export const base = `https://sponsors.vuejs.org`
+
+export const load = async () => {
+  if (!pending.value) {
+    pending.value = true
+    data.value = await (await fetch(`${base}/data.json`)).json()
+  }
+}