docs: special thanks to nuxt ui

fix #114

Author: Barbapapazes

packages/.vitepress/theme/components/AsideOutlineAfter.vue

@@ -6,15 +6,15 @@ import { computed } from 'vue'
 const route = useRoute()
 
 const show = computed(() => {
-  if (route.path.match(/components\/\w+/)) {
+  if (route.path.match(/\/components\/\w+/)) {
     return true
   }
 
-  if (route.path.match(/composables\/\w+/)) {
+  if (route.path.match(/\/composables\/\w+/)) {
     return true
   }
 
-  if (route.path.match(/keys\/\w+/)) {
+  if (route.path.match(/\/keys\/\w+/)) {
     return true
   }
 
@@ -41,24 +41,37 @@ const openIssue = computed(() => {
 </script>
 
 <template>
-  <div v-if="show" class="mt-6 pt-6 border-t border-dashed border-(--vp-c-divider)">
-    <div role="heading" aria-level="2" class="font-semibold text-sm ml-4 leading-8">
-      Contribute
-    </div>
+  <template v-if="show">
+    <AsideOutlineAfterSection>
+      <AsideOutlineAfterHeading title="Contribute" />
 
-    <a :href="viewComponent" target="_blank" class="flex flex-row items-center text-(--vp-c-text-2)! text-sm transition-colors duration-[250ms] leading-8 hover:text-(--vp-c-text-1)!">
-      <span class="i-simple-icons-github mr-2 size-4" />
-      View on GitHub
-    </a>
+      <AsideOutlineAfterLink
+        :href="viewComponent"
+        label="View Component"
+        icon="i-simple-icons-github"
+      />
 
-    <a :href="openIssue" target="_blank" class="flex flex-row items-center text-(--vp-c-text-2)! text-sm transition-colors duration-[250ms] leading-8 hover:text-(--vp-c-text-1)!">
-      <span class="i-lucide-message-square mr-2 size-4" />
-      Open an issue
-    </a>
+      <AsideOutlineAfterLink
+        :href="openIssue"
+        label="Open an issue"
+        icon="i-lucide-message-square"
+      />
 
-    <a :href="editComponent" target="_blank" class="flex flex-row items-center text-(--vp-c-text-2)! text-sm transition-colors duration-[250ms] leading-8 hover:text-(--vp-c-text-1)!">
-      <span class="i-lucide-pen mr-2 size-4" />
-      Edit the component
-    </a>
-  </div>
+      <AsideOutlineAfterLink
+        :href="editComponent"
+        label="Edit the component"
+        icon="i-lucide-pen"
+      />
+    </AsideOutlineAfterSection>
+
+    <AsideOutlineAfterSection>
+      <AsideOutlineAfterHeading title="Special Thanks" />
+
+      <AsideOutlineAfterLink
+        href="https://ui.nuxt.com"
+        label="Nuxt UI"
+        icon="i-simple-icons-nuxtdotjs"
+      />
+    </AsideOutlineAfterSection>
+  </template>
 </template>

packages/.vitepress/theme/components/AsideOutlineAfterHeading.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+interface Props {
+  title: string
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div role="heading" aria-level="2" class="font-semibold text-sm ml-4 leading-8">
+    {{ props.title }}
+  </div>
+</template>

packages/.vitepress/theme/components/AsideOutlineAfterLink.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+interface Props {
+  href: string
+  label: string
+  icon: string
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <a :href="props.href" target="_blank" class="flex flex-row items-center text-(--vp-c-text-2)! text-sm transition-colors duration-[250ms] leading-8 hover:text-(--vp-c-text-1)!">
+    <span :class="props.icon" class="mr-2 size-4" />
+    {{ props.label }}
+  </a>
+</template>

packages/.vitepress/theme/components/AsideOutlineAfterSection.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+interface Slots {
+  default: (props?: any) => void
+}
+defineSlots<Slots>()
+</script>
+
+<template>
+  <div class="mt-6 pt-6 border-t border-dashed border-(--vp-c-divider)">
+    <slot />
+  </div>
+</template>