sidebar sponsors

Author: yyx990803

.vitepress/theme/components/SponsorsAside.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import SponsorsGroup from './SponsorsGroup.vue'
+import { useData } from 'vitepress'
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <div v-if="frontmatter.sponsors !== false">
+    <a class="sponsors-aside-text" href="/sponsor/">Sponsors</a>
+    <SponsorsGroup tier="special" />
+    <SponsorsGroup tier="platinum" />
+  </div>
+</template>
+
+<style>
+a.sponsors-aside-text {
+  display: block;
+  margin: 2em 0 1em;
+  font-weight: 700;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+</style>

src/sponsor/Sponsors.vue renamed to .vitepress/theme/components/SponsorsGroup.vue

@@ -21,7 +21,10 @@ interface Data {
   bronze: Sponsor[]
 }
 
-const { tier } = defineProps<{ tier: keyof Data }>()
+const { tier, placement = 'aside' } = defineProps<{
+  tier: keyof Data
+  placement?: 'aside' | 'page' | 'landing'
+}>()
 
 onMounted(async () => {
   if (!data) {
@@ -31,7 +34,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="data" class="sponsor-container" :class="tier">
+  <div v-if="data" class="sponsor-container" :class="[tier, placement]">
     <a
       v-for="{ url, img, name } of data[tier]"
       class="sponsor-item"
@@ -73,7 +76,50 @@ onMounted(async () => {
   max-height: 60px;
 }
 
-@media (max-width: 600px) {
+/* aside mode (on content pages) */
+.sponsor-container.aside {
+  justify-content: space-between;
+}
+.aside .sponsor-item {
+  margin: 1px;
+  background-color: var(--vt-c-bg-soft);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 4px;
+  transition: background-color .2s ease;
+}
+.aside .sponsor-item img {
+  transition: filter .2s ease;
+}
+.dark .aside .sponsor-item img {
+  filter: grayscale(1) invert(1);
+}
+.dark .aside .sponsor-item:hover {
+  background-color: var(--vt-c-white-soft);
+}
+.dark .aside .sponsor-item:hover img {
+  filter: none;
+}
+.aside .special .sponsor-item {
+  width: 100%;
+  height: 60px;
+}
+.aside .special .sponsor-item img {
+  width: 120px;
+}
+
+.aside .platinum .sponsor-item {
+  width: 110px;
+  height: 50px;
+}
+.aside .platinum .sponsor-item img,
+.aside .platinum_china .sponsor-item img {
+  max-width: 88px;
+}
+
+/* narrow, aside will be hidden under this state so it's mutually exclusive */
+@media (max-width: 720px) {
   .sponsor-item {
     padding: 6px;
     margin-bottom: 20px;

.vitepress/theme/index.ts

@@ -8,13 +8,15 @@ import {
   preferSFC,
   filterHeadersByPreference
 } from './components/preferences'
+import SponsorsAside from './components/SponsorsAside.vue'
 
 export default Object.assign({}, VPTheme, {
   Layout: () => {
     // @ts-ignore
     return h(VPTheme.Layout, null, {
       banner: () => h(Banner),
-      'sidebar-top': () => h(PreferenceSwitch)
+      'sidebar-top': () => h(PreferenceSwitch),
+      'aside-mid': () => h(SponsorsAside)
     })
   },
   enhanceApp({ app }: { app: App }) {

src/sponsor/index.md

@@ -2,10 +2,11 @@
 sidebar: false
 ads: false
 editLink: false
+sponsors: false
 ---
 
 <script setup>
-import Sponsors from './Sponsors.vue'
+import SponsorsGroup from '/@theme/components/SponsorsGroup.vue'
 </script>
 
 # Become a Vue.js Sponsor
@@ -57,20 +58,20 @@ Sponsorships can be done via [GitHub Sponsors](https://github.com/sponsors/yyx99
 
 ### Special Global Sponsor
 
-<Sponsors tier="special" />
+<SponsorsGroup tier="special" placement="page" />
 
 ### Platinum
 
-<Sponsors tier="platinum" />
+<SponsorsGroup tier="platinum" placement="page" />
 
 ### Platinum (China)
 
-<Sponsors tier="platinum_china" />
+<SponsorsGroup tier="platinum_china" placement="page" />
 
 ### Gold
 
-<Sponsors tier="gold" />
+<SponsorsGroup tier="gold" placement="page" />
 
 ### Silver
 
-<Sponsors tier="silver" />
+<SponsorsGroup tier="silver" placement="page" />