From 51f68f9b8bc92cc56f7fd2f4f2fd0005b714819a Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Thu, 30 Mar 2023 13:53:54 +0800
Subject: [PATCH] docs: show vite sponsors (#12621)

---
 .../theme/components/HomeSponsors.vue         | 55 ++++++++++++++++++-
 docs/.vitepress/theme/composables/sponsor.ts  |  7 ++-
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/docs/.vitepress/theme/components/HomeSponsors.vue b/docs/.vitepress/theme/components/HomeSponsors.vue
index 16ea073b423820..cb3a5503e58dfa 100644
--- a/docs/.vitepress/theme/components/HomeSponsors.vue
+++ b/docs/.vitepress/theme/components/HomeSponsors.vue
@@ -9,8 +9,59 @@ const { data } = useSponsor()
   <VPHomeSponsors
     v-if="data"
     message="Vite is free and open source, made possible by wonderful sponsors."
-    action-text="Become a sponsor"
-    action-link="https://github.com/sponsors/yyx990803"
     :data="data"
   />
+  <div class="action">
+    <a
+      class="sponsor"
+      href="https://github.com/sponsors/vitejs"
+      target="_blank"
+      rel="noreferrer"
+    >
+      Sponsor Vite
+    </a>
+    <a
+      class="sponsor"
+      href="https://github.com/sponsors/yyx990803"
+      target="_blank"
+      rel="noreferrer"
+    >
+      Sponsor Evan You
+    </a>
+  </div>
 </template>
+
+<style scoped>
+.action {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  padding-top: 4rem;
+}
+
+.sponsor {
+  /* .VPButton */
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  /* .VPButton.medium */
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+  /* .VPButton.sponsor */
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.sponsor:hover {
+  /* .VPButton.sponsor:hover */
+  border-color: var(--vp-button-sponsor-hover-border);
+  color: var(--vp-button-sponsor-hover-text);
+  background-color: var(--vp-button-sponsor-hover-bg);
+}
+</style>
diff --git a/docs/.vitepress/theme/composables/sponsor.ts b/docs/.vitepress/theme/composables/sponsor.ts
index 976dbcfb75103e..3251509acc589d 100644
--- a/docs/.vitepress/theme/composables/sponsor.ts
+++ b/docs/.vitepress/theme/composables/sponsor.ts
@@ -21,6 +21,11 @@ const data = ref()
 const dataHost = 'https://sponsors.vuejs.org'
 const dataUrl = `${dataHost}/vite.json`
 
+// no sponsors yet :(
+const viteSponsors: Pick<Sponsors, 'gold'> = {
+  gold: [],
+}
+
 export function useSponsor() {
   onMounted(async () => {
     if (data.value) {
@@ -48,7 +53,7 @@ function mapSponsors(sponsors: Sponsors) {
     {
       tier: 'Gold Sponsors',
       size: 'medium',
-      items: mapImgPath(sponsors['gold']),
+      items: viteSponsors['gold'].concat(mapImgPath(sponsors['gold'])),
     },
   ]
 }