Use a custom theme

Author: Andrew Welch

docs/docs/.vitepress/theme/SidebarBottom.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="nys-footer">
+    <span>Brought to you by:</span>
+    <a
+      href="https://github.com/sponsors/khalwat"
+      target="_blank"
+      rel="noopener"
+    >
+    <img
+        src="/resources/img/nys-logo.svg"
+        aria-label="nystudio107 logo"
+        />
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SidebarBottom"
+}
+</script>
+
+<style scoped>
+.nys-footer {
+  padding: 0 1.5rem 2rem;
+  font-size: 0.8rem;
+}
+
+.nys-footer img {
+  box-sizing: border-box;
+  max-width: 200px;
+  height: 80px;
+  display: block;
+  margin: 1rem 0;
+  padding-left: 0.7rem;
+}
+</style>

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

@@ -0,0 +1,12 @@
+:root {
+    --c-brand: #48a391;
+    --c-brand-light: #5db7a5;
+}
+
+.custom-block.tip {
+    border-color: var(--c-brand-light);
+}
+
+.DocSearch {
+    --docsearch-primary-color: var(--c-brand) !important;
+}

docs/docs/.vitepress/theme/index.js

@@ -0,0 +1,15 @@
+import Theme from 'vitepress/theme'
+import {h} from 'vue'
+import './custom.css'
+
+import SidebarBottom from './SidebarBottom.vue';
+
+export default {
+    ...Theme,
+    Layout() {
+        return h(Theme.Layout, null, {
+                'sidebar-bottom': () => h(SidebarBottom)
+            }
+        )
+    }
+}

docs/docs/.vitepress/theme/sponsors.json

@@ -0,0 +1,20 @@
+[
+  {
+    "id": "tailwind",
+    "name": "Tailwind Labs",
+    "href": "https://tailwindcss.com",
+    "src": "/tailwind-labs.svg"
+  },
+  {
+    "id": "vuejobs",
+    "name": "Vue Jobs",
+    "href": "https://vuejobs.com/?ref=vuejs",
+    "src": "/vuejobs.png"
+  },
+  {
+    "id": "mux",
+    "name": "Mux",
+    "href": "https://mux.com",
+    "src": "/mux.svg"
+  }
+]