docs: add sponsors on side

vuejs · May 17, 2021 · af538e0 · af538e0
1 parent c7db02a
commit af538e0
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/docs/.vuepress/theme/Layout.vue b/docs/.vuepress/theme/Layout.vue
@@ -16,13 +16,34 @@
         :placement="$site.themeConfig.carbonAds.placement"
       />
     </template>
+    <template #sidebar-bottom>
+      <div class="sponsors">
+        <a
+          href="https://github.com/sponsors/posva"
+          target="_blank"
+          rel="noopener"
+          >Sponsors</a
+        >
+
+        <a
+          v-for="sponsor in sponsors.gold"
+          :href="sponsor.href"
+          :key="sponsor.href"
+          target="_blank"
+          rel="noopener"
+        >
+          <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
+        </a>
+      </div>
+    </template>
   </ParentLayout>
 </template>
 
 <script>
 import ParentLayout from '@parent-theme/layouts/Layout.vue'
 import CarbonAds from './components/CarbonAds.vue'
 import BuySellAds from './components/BuySellAds.vue'
+import sponsors from '../components/sponsors.json'
 
 export default {
   name: 'Layout',
@@ -31,6 +52,10 @@ export default {
     ParentLayout,
     CarbonAds,
     BuySellAds
+  },
+
+  created() {
+    this.sponsors = sponsors
   }
 }
 </script>
@@ -53,3 +78,22 @@ export default {
   }
 }
 </style>
+
+<style scoped>
+.sponsors {
+  padding: 0 1.5rem 2rem;
+  font-size: 0.8rem;
+}
+
+.sponsors a {
+  color: #999;
+  display: inline;
+}
+
+.sponsors img {
+  max-width: 200px;
+  max-height: 40px;
+  display: block;
+  margin: 1.25rem 0;
+}
+</style>