Download links

content/.vitepress/theme/DownloadLink.vue

@@ -0,0 +1,31 @@
+<script setup>
+  import icon from './pdf.png';
+
+  const { file, text } = defineProps([ 'file', 'text' ]);
+</script>
+
+<template>
+  <a class="downloadlink" :href="'/bijlagen/' + file">
+    <span>{{ text }}</span>
+  </a>
+</template>
+
+<style scoped>
+  .downloadlink {
+    display: block;
+  }
+
+  .downloadlink::before {
+    display: inline-block;
+    content: '';
+    background-image: url('./pdf.png');
+    background-size: 2.5em;
+    width: 2.5em;
+    height: 2.5em;
+    vertical-align: -0.75em;
+  }
+
+  .downloadlink + .downloadlink {
+    margin-top: 8px;
+  }
+</style>

content/.vitepress/theme/index.js

@@ -1,7 +1,11 @@
 import DefaultTheme from 'vitepress/theme-without-fonts';
+import DownloadLink from './DownloadLink.vue';
 import './custom.css';
 
 /** @type {import('vitepress').Theme} */
 export default {
   extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('DownloadLink', DownloadLink);
+  }
 };