Confetti

content/.vitepress/config.js

@@ -1,5 +1,6 @@
+import { fileURLToPath } from 'url';
 import { defineConfig } from 'vitepress';
-import footnote from 'markdown-it-footnote'
+import footnote from 'markdown-it-footnote';
 
 export default defineConfig({
   title: 'HPG Romein',
@@ -59,4 +60,14 @@ export default defineConfig({
       md.use(footnote);
     },
   },
+
+  vite: {
+    resolve: {
+      alias: [
+        { find: /^.*\/VPDocFooter\.vue$/,
+          replacement: fileURLToPath(new URL('./theme/VPDocFooter.vue', import.meta.url)),
+        },
+      ],
+    },
+  },
 });

content/.vitepress/theme/VPDocFooter.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { computed } from 'vue'
+import confetti from 'canvas-confetti'
+import { useData } from 'vitepress/dist/client/theme-default/composables/data'
+import { useEditLink } from 'vitepress/dist/client/theme-default/composables/edit-link'
+import { usePrevNext } from 'vitepress/dist/client/theme-default/composables/prev-next'
+import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
+import VPDocFooterLastUpdated from 'vitepress/dist/client/theme-default/components/VPDocFooterLastUpdated.vue'
+
+const { theme, page, frontmatter } = useData()
+
+const editLink = useEditLink()
+const control = usePrevNext()
+
+const hasEditLink = computed(
+  () => theme.value.editLink && frontmatter.value.editLink !== false
+)
+const hasLastUpdated = computed(() => page.value.lastUpdated)
+const showFooter = computed(
+  () =>
+    hasEditLink.value ||
+    hasLastUpdated.value ||
+    control.value.prev ||
+    control.value.next
+)
+
+function showConfetti(event) {
+  confetti({
+    particleCount: 100,
+    spread: 100,
+    origin: {
+      x: event.clientX / window.innerWidth,
+      y: event.clientY / window.innerHeight
+    }
+  })
+}
+</script>
+
+<template>
+  <footer v-if="showFooter" class="VPDocFooter">
+    <slot name="doc-footer-before" />
+
+    <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
+      <div v-if="hasEditLink" class="edit-link">
+        <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
+          <span class="vpi-square-pen edit-link-icon" />
+          {{ editLink.text }}
+        </VPLink>
+      </div>
+
+      <div v-if="hasLastUpdated" class="last-updated">
+        <VPDocFooterLastUpdated />
+      </div>
+    </div>
+
+    <nav
+      v-if="control.prev?.link || control.next?.link"
+      class="prev-next"
+      aria-labelledby="doc-footer-aria-label"
+    >
+      <span class="visually-hidden" id="doc-footer-aria-label">Pager</span>
+
+      <div class="pager">
+        <VPLink
+          v-if="control.prev?.link"
+          class="pager-link prev"
+          :href="control.prev.link"
+        >
+          <span
+            class="desc"
+            v-html="theme.docFooter?.prev || 'Previous page'"
+          ></span>
+          <span class="title" v-html="control.prev.text"></span>
+        </VPLink>
+      </div>
+      <div class="pager">
+        <VPLink
+          v-if="control.next?.link"
+          class="pager-link next"
+          :href="control.next.link"
+          @click="showConfetti"
+        >
+          <span
+            class="desc"
+            v-html="theme.docFooter?.next || 'Next page'"
+          ></span>
+          <span class="title" v-html="control.next.text"></span>
+        </VPLink>
+      </div>
+    </nav>
+  </footer>
+</template>
+
+<style scoped>
+.VPDocFooter {
+  margin-top: 64px;
+}
+
+.edit-info {
+  padding-bottom: 18px;
+}
+
+@media (min-width: 640px) {
+  .edit-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 14px;
+  }
+}
+
+.edit-link-button {
+  display: flex;
+  align-items: center;
+  border: 0;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+}
+
+.edit-link-button:hover {
+  color: var(--vp-c-brand-2);
+}
+
+.edit-link-icon {
+  margin-right: 8px;
+}
+
+.prev-next {
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 24px;
+  display: grid;
+  grid-row-gap: 8px;
+}
+
+@media (min-width: 640px) {
+  .prev-next {
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 16px;
+  }
+}
+
+.pager-link {
+  display: block;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 11px 16px 13px;
+  width: 100%;
+  height: 100%;
+  transition: border-color 0.25s;
+}
+
+.pager-link:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.pager-link.next {
+  margin-left: auto;
+  text-align: right;
+}
+
+.desc {
+  display: block;
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.title {
+  display: block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+}
+</style>

content/.vitepress/theme/index.js

@@ -1,4 +1,7 @@
 import DefaultTheme from 'vitepress/theme';
 import './custom.css';
 
-export default DefaultTheme;
+/** @type {import('vitepress').Theme} */
+export default {
+  extends: DefaultTheme,
+};

package-lock.json

@@ -4,6 +4,9 @@
   "requires": true,
   "packages": {
     "": {
+      "dependencies": {
+        "canvas-confetti": "^1.9.3"
+      },
       "devDependencies": {
         "@garraflavatra/yeslint": "^1.1.0",
         "eslint": "^8.57.0",
@@ -1714,6 +1717,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.3.tgz",
+      "integrity": "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",

package.json

@@ -17,5 +17,8 @@
     "parserOptions": {
       "sourceType": "module"
     }
+  },
+  "dependencies": {
+    "canvas-confetti": "^1.9.3"
   }
 }