docs: update sponsors source (#2554)

Author: jay-es

.vitepress/theme/components/AsideSponsors.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { VPDocAsideSponsors } from '@voidzero-dev/vitepress-theme'
-import { useSponsor, voidZero } from '../composables/sponsor'
+import {
+  VPDocAsideSponsors,
+  type Sponsors,
+} from '@voidzero-dev/vitepress-theme'
+import { useSponsor } from '../composables/sponsor'
 
-const { data } = useSponsor()
+const data = useSponsor()
 
 const sponsors = computed(() => {
-  return [
-    { size: 'small' as const, items: [voidZero] },
-    ...(data.value?.map((sponsor) => {
-      return {
-        size: (sponsor.size === 'big' ? 'mini' : 'xmini') as 'mini' | 'xmini',
-        items: sponsor.items,
-      }
-    }) ?? []),
-  ]
+  return data.value?.map<Sponsors>((s, i) => {
+    return {
+      size: i === 0 ? 'small' : s.size === 'big' ? 'mini' : 'xmini',
+      items: s.items,
+    }
+  })
 })
 </script>
 
@@ -36,7 +36,7 @@ const sponsors = computed(() => {
       <p class="extra-info">リプレイを視聴する</p>
     </span>
   </a>
-  <VPDocAsideSponsors v-if="data" :data="sponsors" />
+  <VPDocAsideSponsors v-if="sponsors" :data="sponsors" />
 </template>
 
 <style scoped>

.vitepress/theme/composables/images/astro.svg

@@ -1,132 +1,46 @@
-import { onMounted, onUnmounted, ref } from 'vue'
-import type {
-  Sponsor,
-  SponsorTier,
-} from '@voidzero-dev/vitepress-theme/src/types/sponsors'
-import voidZeroSvg from './images/voidzero.svg'
-import boltSvg from './images/bolt.svg'
-import nuxtLabsSvg from './images/nuxtlabs.svg'
+import { onMounted, ref } from 'vue'
+import type { Sponsor, SponsorTier } from '@voidzero-dev/vitepress-theme'
 
 interface Sponsors {
-  special: Sponsor[]
+  main: Sponsor[]
+  partnership: Sponsor[]
   platinum: Sponsor[]
-  platinum_china: Sponsor[]
   gold: Sponsor[]
-  silver: Sponsor[]
-  bronze: Sponsor[]
 }
 
 // shared data across instances so we load only once.
 const data = ref<SponsorTier[]>()
 
-const dataHost = 'https://sponsors.vuejs.org'
-const dataUrl = `${dataHost}/vite.json`
-
-export const voidZero = {
-  name: 'VoidZero',
-  url: 'https://voidzero.dev',
-  img: voidZeroSvg,
-} satisfies Sponsor
-
-const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
-  special: [
-    // sponsors patak-dev
-    {
-      name: 'Bolt',
-      url: 'https://bolt.new',
-      img: boltSvg,
-    },
-    // sponsors antfu
-    {
-      name: 'NuxtLabs',
-      url: 'https://nuxtlabs.com',
-      img: nuxtLabsSvg,
-    },
-  ],
-  gold: [
-    // now automated via sponsors.vuejs.org too
-  ],
-}
-
-function toggleDarkLogos() {
-  if (data.value) {
-    const isDark = document.documentElement.classList.contains('dark')
-    data.value.forEach(({ items }) => {
-      items.forEach((s: Sponsor) => {
-        if (s.hasDark) {
-          s.img = isDark
-            ? s.img.replace(/(\.\w+)$/, '-dark$1')
-            : s.img.replace(/-dark(\.\w+)$/, '$1')
-        }
-      })
-    })
-  }
-}
-
 export function useSponsor() {
   onMounted(async () => {
-    const ob = new MutationObserver((list) => {
-      for (const m of list) {
-        if (m.attributeName === 'class') {
-          toggleDarkLogos()
-        }
-      }
-    })
-    ob.observe(document.documentElement, { attributes: true })
-    onUnmounted(() => {
-      ob.disconnect()
-    })
-
-    if (data.value) {
-      return
-    }
-
-    const result = await fetch(dataUrl)
-    const json = await result.json()
-
-    data.value = mapSponsors(json)
-    toggleDarkLogos()
+    if (data.value) return
+
+    const result = await fetch('https://sponsors.vite.dev/sponsors.json')
+    const sponsors: Sponsors = await result.json()
+
+    data.value = [
+      {
+        tier: '提供',
+        size: 'big',
+        items: sponsors.main,
+      },
+      {
+        tier: 'パートナーシップ',
+        size: 'big',
+        items: sponsors.partnership,
+      },
+      {
+        tier: 'プラチナスポンサー',
+        size: 'big',
+        items: sponsors.platinum,
+      },
+      {
+        tier: 'ゴールドスポンサー',
+        size: 'medium',
+        items: sponsors.gold,
+      },
+    ]
   })
 
-  return {
-    data,
-  }
-}
-
-function mapSponsors(sponsors: Sponsors): SponsorTier[] {
-  return [
-    {
-      tier: 'パートナーシップ',
-      size: 'big' as const,
-      items: viteSponsors['special'],
-    },
-    {
-      tier: 'プラチナスポンサー',
-      size: 'big' as const,
-      items: mapImgPath(sponsors['platinum']),
-    },
-    {
-      tier: 'ゴールドスポンサー',
-      size: 'medium' as const,
-      items: [...mapImgPath(sponsors['gold']), ...viteSponsors['gold']],
-    },
-  ]
-}
-
-const viteSponsorNames = new Set(
-  Object.values(viteSponsors).flatMap((sponsors) =>
-    sponsors.map((s) => s.name),
-  ),
-)
-
-/**
- * Map Vue/Vite sponsors data to objects and filter out Vite-specific sponsors
- */
-function mapImgPath(sponsors: Sponsor[]) {
-  return sponsors
-    .filter((sponsor) => !viteSponsorNames.has(sponsor.name))
-    .map((sponsor) => ({
-      ...sponsor,
-      img: `${dataHost}/images/${sponsor.img}`,
-    }))
+  return data
 }

.vitepress/theme/composables/images/bolt.svg

@@ -1,5 +1,6 @@
 <script setup>
 // these components live in @voidzero-dev/vitepress-theme
+import { computed } from 'vue'
 import Hero from './Hero.vue'
 import ViteFeatureGrid1 from './FeatureGrid1.vue'
 import ViteFeatureGrid2 from './FeatureGrid2.vue'
@@ -12,7 +13,11 @@ import Spacer from '@components/shared/Spacer.vue'
 import Footer from '@components/oss/Footer.vue'
 import { useSponsor } from '../composables/sponsor'
 
-const { data: sponsors } = useSponsor()
+const data = useSponsor()
+
+const sponsors = computed(
+  () => data.value?.filter((s) => s.tier !== '提供') ?? [],
+)
 </script>
 
 <template>

.vitepress/theme/composables/images/nuxtlabs.svg

@@ -6,22 +6,10 @@ description: Vite は偉大なプロジェクトの上に成り立っていま
 <script setup>
 import { computed } from 'vue'
 // import { data } from './_data/acknowledgements.data' // 日本語リポジトリには packages/vite がないのでエラーになる。
-import { useSponsor, voidZero } from './.vitepress/theme/composables/sponsor'
+import { useSponsor } from './.vitepress/theme/composables/sponsor'
 import VPSponsors from '@components/vitepress-default/VPSponsors.vue'
 
-const { data: sponsorData } = useSponsor()
-
-const allSponsors = computed(() => {
-  if (!sponsorData.value) return []
-  return [
-    {
-      tier: 'Brought to you by',
-      size: 'big',
-      items: [voidZero],
-    },
-    ...sponsorData.value,
-  ]
-})
+const sponsors = useSponsor()
 
 function npmUrl(name) {
   return `https://www.npmjs.com/package/${name}`
@@ -43,7 +31,7 @@ Vite は国際的なコントリビューターのチームによって開発さ
 Vite の開発は寛大なスポンサーによって支えられています。[GitHub Sponsors](https://github.com/sponsors/vitejs) または [Open Collective](https://opencollective.com/vite) を通じて Vite を支援できます。
 
 <div class="sponsors-container">
-  <VPSponsors :data="allSponsors" />
+  <VPSponsors :data="sponsors ?? []" />
 </div>
 
 <!--