fix: CardLink link resolution with base

Signed-off-by: Sergej Atamantschuk <[email protected]>

Author: setaman

.vitepress/theme/components/Base/CardLink.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
-defineProps<{
+import { useData } from "vitepress";
+import { computed } from "vue";
+
+const { link } = defineProps<{
   title: string;
   link: string;
 }>();
+
+const data = useData();
+
+const normalizedLink = computed(() => {
+  return `${data.site.value.base}${link}`;
+});
 </script>
 
 <template>
   <a
-    :href="link"
+    :href="normalizedLink"
     class="h-full block max-w-sm p-4 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 no-underline"
     style="text-decoration: none"
   >

guide/index.md

@@ -23,22 +23,22 @@ createApp(App).use(veProgress);
 
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-10">
   <div>
-    <CardLink link="/guide/installation.html" title="Installation options">
+    <CardLink link="guide/installation.html" title="Installation options">
       Learn what possibilities you have to include the component in your project
     </CardLink>
   </div>
   <div>
-    <CardLink class="fill" link="/guide/options/" title="Configuration">
+    <CardLink class="fill" link="guide/options/" title="Configuration">
       Explore wide range of configuration options through the properties and slots
     </CardLink>
   </div>
 <div>
-    <CardLink link="/guide/compatibility.html" title="Compatibility">
+    <CardLink link="guide/compatibility.html" title="Compatibility">
       Check, if the plugin meets your compatibility requirements 
     </CardLink>
   </div>
   <div>
-    <CardLink class="fill" link="/guide/contribution.html" title="Contribution">
+    <CardLink class="fill" link="guide/contribution.html" title="Contribution">
       Any help is very much appreciated
     </CardLink>
   </div>