Layout: add donate button.

Author: alek13

.vitepress/config.mts

@@ -19,8 +19,10 @@ export default defineConfig({
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
+      { component: 'VPButton', props: { type: 'secondary', text: '❤️ donate', href: 'https://boosty.to/lord-server' } },
+      { text: ' ', link: '' }, // spacer/divider
       { text: 'Home', link: '/' },
-      { component: 'NavBadge', props: { type: 'tip', text: docs.voxrame.version } }
+      { component: 'NavBadge', props: { type: 'tip', text: docs.voxrame.version } },
     ],
 
     // Sidebar for other languages is described in their configs (es/config.ts, ru/config.ts, etc.)

.vitepress/theme/custom.pcss

@@ -3,3 +3,4 @@
 @import './styles/code-blocks.pcss';
 @import './styles/toc.pcss';
 @import './styles/rtl.pcss';
+@import './styles/fund-button.pcss';

.vitepress/theme/index.js

@@ -6,19 +6,31 @@ import { NolebaseHighlightTargetedHeading } from '@nolebase/vitepress-plugin-hig
 import '@nolebase/vitepress-plugin-highlight-targeted-heading/client/style.css'
 
 import NavBadge from './components/NavBadge.vue'
+import { VPButton } from 'vitepress/theme'
 
 /** @type {import('vitepress').Theme} */
 export default {
   extends: DefaultTheme,
   enhanceApp({ app }) {
     app.component('NavBadge', NavBadge)
+    app.component('VPButton', VPButton)
   },
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // other configurations...
       'layout-top': () => [
         h(NolebaseHighlightTargetedHeading),
       ],
+      'nav-bar-content-before': () => [
+        h('div', { class: 'mobile-fund-button' }, [
+          h('a', {
+            href: 'https://boosty.to/lord-server',
+            class: 'VPButton secondary',
+            target: '_blank',
+            rel: 'noopener noreferrer'
+          }, '❤️ donate')
+        ])
+      ],
     })
   },
 }

.vitepress/theme/styles/fund-button.pcss

@@ -0,0 +1,28 @@
+
+.VPNav {
+  .VPButton {
+    color: var(--vp-c-text-1) !important;
+    background-color: var(--vp-c-brand-soft) !important;
+    border-radius: 8px !important;
+    align-self: center;
+  }
+}
+
+/* Mobile fund button */
+.mobile-fund-button {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .mobile-fund-button {
+    display: flex !important;
+    align-items: center;
+    margin-right: 12px;
+  }
+  
+  .mobile-fund-button .VPButton {
+    padding: 6px 12px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+}