override VPFooter

docs/.vitepress/config.mts

@@ -1,4 +1,5 @@
-import { defineConfig } from 'vitepress'
+import { fileURLToPath, URL } from 'node:url';
+import { defineConfig } from 'vitepress';
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -9,6 +10,18 @@ export default defineConfig({
     ['link', { rel: 'icon', href: '/favicon.svg' }],
     ['meta', { property: 'og:image', content: 'https://fedecan.ca/img/social-share.png' }]
   ],
+  vite: {
+    resolve: {
+      alias: [
+        {
+          find: /^.*\/VPFooter\.vue$/,
+          replacement: fileURLToPath(
+            new URL('./theme/components/overrides/VPFooter.vue', import.meta.url),
+          ),
+        }
+      ],
+    },
+  },
   cleanUrls: true,
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
@@ -55,10 +68,6 @@ export default defineConfig({
       ],
     },
 
-    footer: {
-      message: '<a href="https://status.lemmy.ca/">Uptime Status</a> | <a href="https://github.com/fedecan-ca/">GitHub Organization</a>',
-    },
-
     logo: { light: '/img/icons/maple-leaf.svg', dark: '/img/icons/maple-leaf.svg'},
 
     search: {

docs/.vitepress/theme/components/overrides/VPFooter.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useData } from "vitepress/dist/client/theme-default/composables/data";
+import { useSidebar } from "vitepress/dist/client/theme-default/composables/sidebar";
+
+const { theme, frontmatter } = useData();
+const { hasSidebar } = useSidebar();
+</script>
+
+<template>
+  <footer
+    v-if="theme.footer && frontmatter.footer !== false"
+    class="VPFooter"
+    :class="{ 'has-sidebar': hasSidebar }"
+  >
+    <div class="container">
+      <p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p>
+      <p
+        v-if="theme.footer.copyright"
+        class="copyright"
+        v-html="theme.footer.copyright"
+      ></p>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.VPFooter {
+  position: relative;
+  z-index: var(--vp-z-index-footer);
+  border-top: 1px solid var(--vp-c-gutter);
+  padding: 32px 24px;
+  background-color: var(--vp-c-bg);
+}
+
+.VPFooter.has-sidebar {
+  display: none;
+}
+
+.VPFooter :deep(a) {
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+  transition: color 0.25s;
+}
+
+.VPFooter :deep(a:hover) {
+  color: var(--vp-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .VPFooter {
+    padding: 32px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: var(--vp-layout-max-width);
+  text-align: center;
+}
+
+.message,
+.copyright {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+</style>

package.json

@@ -1,6 +1,7 @@
 {
   "devDependencies": {
     "@iconify/vue": "^4.1.2",
+    "@types/node": "^20.14.11",
     "vitepress": "^1.2.3"
   },
   "scripts": {