docs: add sponsors block

packages/docs/.vitepress/theme/components/AsideGitHubSponsors.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VPDocAsideSponsors } from 'vitepress/theme'
+import { useSponsor } from '../composables/sponsor'
+
+const { data } = useSponsor()
+
+const sponsors = computed(() => {
+  return (
+    data?.value.map((sponsor) => {
+      return {
+        size: sponsor.size === 'big' ? 'mini' : 'xmini',
+        items: sponsor.items,
+      }
+    }) ?? []
+  )
+})
+</script>
+
+<template>
+  <VPDocAsideSponsors v-if="data" :data="sponsors" />
+</template>
+
+<style>
+.viteconf {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 14px;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+  position: relative;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 1rem;
+  background-color: var(--vp-c-bg-alt);
+  border: 2px solid var(--vp-c-bg-alt);
+  transition: border-color 0.5s;
+}
+.viteconf:hover {
+  border: 2px solid var(--vp-c-brand-light);
+}
+.viteconf img {
+  transition: transform 0.5s;
+  transform: scale(1.25);
+}
+.viteconf:hover img {
+  transform: scale(1.75);
+}
+.viteconf .heading {
+  background-image: linear-gradient(
+    120deg,
+    #b047ff 16%,
+    var(--vp-c-brand-lighter),
+    var(--vp-c-brand-lighter)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.viteconf .extra-info {
+  color: var(--vp-c-text-1);
+  opacity: 0;
+  font-size: 0.7rem;
+  padding-left: 0.1rem;
+  transition: opacity 0.5s;
+}
+.viteconf:hover .extra-info {
+  opacity: 0.9;
+}
+</style>

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

@@ -1,5 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VPDocAsideSponsors } from 'vitepress/theme'
+import sponsors from './sponsors.json'
+
+// to avoid the never[] type in json
+interface Sponsor {
+  alt: string
+  href: string
+  imgSrcDark: string
+  imgSrcLight: string
+}
+
+const asideSponsors = computed(() => {
+  return [
+    {
+      size: 'mini',
+      items: sponsors.platinum.length ? sponsors.platinum.map((sponsor: Sponsor) => ({
+        name: sponsor.alt,
+        url: sponsor.href,
+        img: sponsor.imgSrcLight,
+      })) : [
+        {
+          name: 'Become a sponsor',
+          url: 'https://github.com/sponsors/posva',
+          img: '/your-logo-here.svg'
+        }
+      ],
+    },
+    {
+      size: 'xmini',
+      // TODO: use gold instead once I have some
+      items: sponsors.silver.map((sponsor: Sponsor) => ({
+        name: sponsor.alt,
+        url: sponsor.href,
+        img: sponsor.imgSrcLight,
+      })),
+    },
+  ]
+})
+</script>
+
 <template>
-  <a
+  <VPDocAsideSponsors :data="asideSponsors" />
+
+  <!-- <a
     class="banner mp"
     href="https://masteringpinia.com?utm=pinia-sidebar"
     target="_blank"
@@ -10,7 +54,7 @@
       <p class="heading">Mastering Pinia</p>
       <p class="extra-info">written by its creator</p>
     </span>
-  </a>
+  </a> -->
 
   <a
     class="banner cert"
@@ -27,6 +71,19 @@
 </template>
 
 <style scoped>
+.VPDocAsideSponsors {
+  margin-top: 8px !important;
+}
+
+:deep(.vp-sponsor-grid.mini .vp-sponsor-grid-image) {
+  max-width: 158px;
+  max-height: 48px;
+}
+:deep(.vp-sponsor-grid.xmini .vp-sponsor-grid-image) {
+  max-width: 80px;
+  max-height: 32px;
+}
+
 .banner {
   margin: 0.25rem 0;
   padding: 0.4rem 0;