docs: fix button

Author: posva

packages/docs/.vitepress/components/HomeSponsors.vue

@@ -48,24 +48,5 @@ onMounted(() => {
 .cta {
   margin-top: 1rem;
 }
-
-.become-sponsor {
-  font-size: 0.9em;
-  font-weight: 700;
-  width: auto;
-  background-color: transparent;
-  padding: 0.75em 2em;
-  border-radius: 2em;
-  transition: all 0.15s ease;
-  box-sizing: border-box;
-  border: 2px solid var(--c-text);
-  color: var(--c-text);
-}
-
-.become-sponsor:hover {
-  background-color: var(--c-yellow);
-  text-decoration: none;
-  border-color: var(--c-yellow);
-  color: var(--c-text-light-1);
-}
 </style>
+

packages/docs/.vitepress/theme/Layout.ts

@@ -25,17 +25,36 @@ export const Layout: FunctionalComponent = () => {
       'sidebar-top': () =>
         h('div', { class: 'sponsors sponsors-top' }, [
           h('span', 'Platinum Sponsors'),
-          ...sponsors.platinum.map(({ href, imgSrcDark, imgSrcLight, alt }) =>
-            h(
-              'a',
-              {
-                href,
-                target: '_blank',
-                rel: 'noopener',
-              },
-              [h('img', { src: isDark.value ? imgSrcDark : imgSrcLight, alt })]
-            )
-          ),
+          ...(sponsors.platinum.length
+            ? sponsors.platinum.map(({ href, imgSrcDark, imgSrcLight, alt }) =>
+                h(
+                  'a',
+                  {
+                    href,
+                    target: '_blank',
+                    rel: 'noopener',
+                  },
+                  [
+                    h('img', {
+                      src: isDark.value ? imgSrcDark : imgSrcLight,
+                      alt,
+                    }),
+                  ]
+                )
+              )
+            : [
+                h(
+                  'a',
+                  {
+                    class: 'become-sponsor',
+                    href: 'https://github.com/sponsors/posva',
+                    target: '_blank',
+                    rel: 'noopener',
+                    alt: 'Your logo here',
+                  },
+                  'Become a Sponsor!'
+                ),
+              ]),
         ]),
       'sidebar-bottom': () =>
         h('div', { class: 'sponsors' }, [

packages/docs/.vitepress/theme/custom.css

@@ -183,3 +183,31 @@ code {
   font-size: 0.95em;
   padding: 0.175em 0.35em;
 }
+
+.become-sponsor {
+  font-size: 0.9em;
+  font-weight: 700;
+  width: auto;
+  text-align: center;
+  background-color: transparent;
+  padding: 0.75em 2em;
+  border-radius: 2em;
+  transition: all 0.15s ease;
+  box-sizing: border-box;
+  border: 2px solid var(--c-text);
+  color: var(--c-text);
+}
+
+.become-sponsor:hover {
+  background-color: var(--c-yellow);
+  text-decoration: none;
+  border-color: var(--c-yellow);
+  color: var(--c-text-light-1);
+}
+
+.sponsors-top .become-sponsor {
+  font-size: 0.75em;
+  padding: 0.2em;
+  width: auto;
+  max-width: 150px;
+}