docs: add voidzero logo to the sidebar (#18769)

docs/.vitepress/theme/components/AsideSponsors.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { VPDocAsideSponsors } from 'vitepress/theme'
-import { useSponsor } from '../composables/sponsor'
+import { useSponsor, voidZero } from '../composables/sponsor'
 
 const { data } = useSponsor()
 
 const sponsors = computed(() => {
-  return (
-    data?.value.map((sponsor) => {
+  return [
+    { size: 'small', items: [voidZero] },
+    ...(data?.value.map((sponsor) => {
       return {
         size: sponsor.size === 'big' ? 'mini' : 'xmini',
         items: sponsor.items,
       }
-    }) ?? []
-  )
+    }) ?? []),
+  ]
 })
 </script>
 

docs/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useSponsor } from '../../../composables/sponsor'
+import { useSponsor, voidZero } from '../../../composables/sponsor'
 import { VPSponsors } from 'vitepress/theme'
 
 const { data } = useSponsor()
@@ -54,8 +54,8 @@ const { data } = useSponsor()
 
     <h4>Brought to you by</h4>
     <div class="voidzero">
-      <a href="https://voidzero.dev" target="_blank">
-        <img src="./voidzero.svg" />
+      <a :href="voidZero.url" target="_blank">
+        <img :src="voidZero.img" />
       </a>
     </div>
 
@@ -121,6 +121,7 @@ const { data } = useSponsor()
       position: relative;
       display: inline-block;
       max-width: 260px;
+      filter: grayscale(1) invert(1);
     }
   }
 

docs/.vitepress/theme/composables/sponsor.ts

@@ -25,6 +25,12 @@ const data = ref()
 const dataHost = 'https://sponsors.vuejs.org'
 const dataUrl = `${dataHost}/vite.json`
 
+export const voidZero = {
+  name: 'VoidZero',
+  url: 'https://voidzero.dev',
+  img: '/voidzero.svg',
+} satisfies Sponsor
+
 const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
   special: [
     // sponsors patak-dev