docs: add sponsors

Author: posva

docs/.vuepress/components/sponsors.json

@@ -1,4 +1,12 @@
 {
+  "platinum": [
+    {
+      "href": "https://www.finclip.com/#/home?from=vue",
+      "alt": "Finogeeks",
+      "imgSrcLight": "/sponsors/fincliplogo_black_svg.svg",
+      "imgSrcDark": "/sponsors/fincliplogo_white_svg.svg"
+    }
+  ],
   "gold": [
     {
       "href": "https://passionatepeople.io/",
@@ -26,12 +34,6 @@
       "imgSrcLight": "https://www.vuemastery.com/images/vuemastery.svg",
       "imgSrcDark": "https://www.vuemastery.com/images/vuemastery.svg"
     },
-    {
-      "href": "https://www.codestream.com/?utm_source=github&utm_campaign=vuerouter&utm_medium=banner",
-      "alt": "CodeStream",
-      "imgSrcLight": "https://alt-images.codestream.com/codestream_logo_vuerouter.png",
-      "imgSrcDark": "https://alt-images.codestream.com/codestream_logo_vuerouter.png"
-    },
     {
       "href": "https://birdeatsbug.com/?utm_source=vuerouter&utm_medium=sponsor&utm_campaign=silver",
       "alt": "Bird Eats Bug",

docs/.vuepress/public/sponsors/fincliplogo_black_svg.svg

@@ -1,12 +1,6 @@
 <template>
-  <div
-    class="main-container"
-    :class="{ 'has-top-banner': showTopBanner }"
-  >
-    <BannerTop
-      v-if="showTopBanner"
-      @close="closeBannerTop"
-    />
+  <div class="main-container" :class="{ 'has-top-banner': showTopBanner }">
+    <BannerTop v-if="showTopBanner" @close="closeBannerTop" />
     <ParentLayout>
       <template #page-top>
         <CarbonAds
@@ -24,14 +18,26 @@
           :placement="$site.themeConfig.carbonAds.placement"
         />
       </template>
-      <template #sidebar-bottom>
-        <div class="sponsors">
+
+      <template #sidebar-top>
+        <div class="sponsors sponsors-top">
+          <span>Platinum Sponsors</span>
+
           <a
-            href="https://github.com/sponsors/posva"
+            v-for="sponsor in sponsors.platinum"
+            :href="sponsor.href"
+            :key="sponsor.href"
             target="_blank"
             rel="noopener"
-            >Sponsors</a
           >
+            <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
+          </a>
+        </div>
+      </template>
+
+      <template #sidebar-bottom>
+        <div class="sponsors">
+          <span>Sponsors</span>
 
           <a
             v-for="sponsor in sponsors.gold"
@@ -62,17 +68,17 @@ export default {
     BuySellAds,
     BannerTop: () => import('./components/BannerTop.vue')
   },
-  data () {
+  data() {
     return {
       sponsors,
       showTopBanner: false
     }
   },
-  mounted () {
+  mounted() {
     this.showTopBanner = !localStorage.getItem('VS_BTS_BANNER_CLOSED')
   },
   methods: {
-    closeBannerTop () {
+    closeBannerTop() {
       this.showTopBanner = false
       localStorage.setItem('VS_BTS_BANNER_CLOSED', 1)
     }
@@ -97,23 +103,40 @@ export default {
     margin-right: -24px;
   }
 }
+
+img {
+  max-width: 100%;
+}
 </style>
 
 <style scoped>
 .sponsors {
-  padding: 0 1.5rem 2rem;
-  font-size: 0.8rem;
+  margin: 0 0 1rem 1.35rem;
 }
 
-.sponsors a {
+.sponsors-top {
+  margin-top: 1rem;
+  /* workaround padding in vitepress */
+  margin-bottom: -2rem;
+}
+
+.sponsors > span {
+  /* margin: 1.25rem 0; */
+  display: block;
   color: #999;
-  display: inline;
+  font-size: 0.8rem;
+}
+
+.sponsors a:last-child {
+  margin-bottom: 20px;
+}
+.sponsors a:first-child {
+  margin-top: 18px;
 }
 
-.sponsors img {
-  max-width: 200px;
-  max-height: 40px;
+.sponsors a {
+  margin-top: 10px;
+  width: 125px;
   display: block;
-  margin: 1.25rem 0;
 }
 </style>