feat: add sponsor button to team members settings (#1351)

Author: kiaking

package.json

@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "@vue/repl": "^0.4.3",
-    "@vue/theme": "^0.1.15",
+    "@vue/theme": "^0.1.16",
     "vue": "^3.2.23"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -9,6 +9,7 @@ export interface Member {
   languages: string[]
   website?: Link
   socials: Socials
+  sponsor?: string
 }
 
 export interface Link {

src/about/team/Member.ts

@@ -5,6 +5,7 @@ import {
   VTIconCodePen,
   VTIconGitHub,
   VTIconGlobe,
+  VTIconHeart,
   VTIconLink,
   VTIconLinkedIn,
   VTIconMapPin,
@@ -24,6 +25,10 @@ const avatarUrl = computed(() => {
 
 <template>
   <article class="TeamMember">
+    <VTLink v-if="member.sponsor" class="sponsor" :href="member.sponsor" no-icon>
+      <VTIconHeart class="sponsor-icon" /> Sponsor
+    </VTLink>
+
     <figure class="avatar">
       <img class="avatar-img" :src="avatarUrl" :alt="`${member.name}'s Profile Picture`">
     </figure>
@@ -142,6 +147,7 @@ const avatarUrl = computed(() => {
 
 <style scoped>
 .TeamMember {
+  position: relative;
   background-color: var(--vt-c-bg-soft);
   transition: background-color 0.5s;
 }
@@ -158,6 +164,33 @@ const avatarUrl = computed(() => {
   }
 }
 
+.sponsor {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  border: 1px solid #fd1d7c;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #fd1d7c;
+  transition: color 0.25s, background-color 0.25s;
+}
+
+.sponsor:hover {
+  color: var(--vt-c-white);
+  background-color: #fd1d7c;
+}
+
+.sponsor-icon {
+  margin-right: 6px;
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
 .avatar {
   flex-shrink: 0;
   padding: 32px 32px 0;

src/about/team/TeamMember.vue

@@ -22,7 +22,8 @@
     "socials": {
       "github": "yyx990803",
       "twitter": "youyuxi"
-    }
+    },
+    "sponsor": "https://github.com/sponsors/yyx990803"
   },
   {
     "name": "Ben Hong",
@@ -478,7 +479,8 @@
     "socials": {
       "github": "kiaking",
       "twitter": "KiaKing85"
-    }
+    },
+    "sponsor": "https://github.com/sponsors/kiaking"
   },
   {
     "name": "Anthony Fu",