Neat footer

.vitepress/theme/components/Feature.vue

@@ -18,7 +18,7 @@ defineProps<{
 .Feature {
   color: inherit;
   display: block;
-  border: 1px solid var(--vp-c-bg-soft);
+  border: 4px solid var(--vp-c-brand-soft);
   border-radius: var(--vp-border-radius);
   height: 100%;
   overflow-x: hidden;

.vitepress/theme/components/Link.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  href?: string
+  noIcon?: boolean
+  title?: string
+}>()
+
+const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'span'"
+    :class="{ link: href }"
+    :href="href"
+    :target="isExternal ? '_blank' : 'self'"
+    :rel="isExternal ? 'noopener noreferrer' : undefined"
+    :title="title ? title : href"
+  >
+    <slot />
+    <label
+      v-if="isExternal && !noIcon"
+      i-ic-round-arrow-outward
+      :class="$style.icon"
+    />
+  </component>
+</template>
+
+<style module>
+.icon {
+  cursor: pointer;
+  display: inline-block;
+  margin-top: -2px;
+  margin-left: 4px;
+  width: 11px !important;
+  height: 11px !important;
+  transition: fill 0.25s;
+}
+</style>