improve

.vitepress/theme/components/Authors.vue

@@ -1,49 +1,87 @@
-<script setup lang="ts">
-import { computed } from 'vue'
+[
+  {
+    "name": "nbats",
+    "github": "https://github.com/nbats"
+  },
+  {
+    "name": "Kai",
+    "github": "https://github.com/Kai-FMHY"
+  },
+  {
+    "name": "taskylizard",
+    "github": "https://github.com/taskylizard"
+  },
+  {
+    "name": "zinklog",
+    "github": "https://github.com/zinklog2"
+  },
+  {
+    "name": "Q",
+    "github": "https://github.com/qiracy"
+  }
+]
 
-const props = defineProps<{
-  authors: string[]
-}>()
+
+<script setup lang="ts">
+import { computed, withDefaults } from 'vue'
+import authorsData from './authors.json'
 
 interface Author {
   name: string
-  github: string
+  github: `https://github.com/${string}`
 }
 
-const data = [
-  {
-    name: 'nbats',
-    github: 'https://github.com/nbats'
-  },
-  {
-    name: 'Kai',
-    github: 'https://github.com/Kai-FMHY'
-  },
-  {
-    name: 'taskylizard',
-    github: 'https://github.com/taskylizard'
-  },
-  {
-    name: 'zinklog',
-    github: 'https://github.com/zinklog2'
-  },
-  {
-    name: 'Q',
-    github: 'https://github.com/qiracy'
-  }
-] satisfies Author[]
+const props = withDefaults(defineProps<{
+  authors?: string[]
+}>(), {
+  authors: () => []
+})
 
 const authors = computed(() =>
-  data.filter((author) => props.authors.includes(author.name))
+  authorsData.filter((author: Author) => props.authors.includes(author.name))
 )
 </script>
 
 <template>
   <div class="flex flex-wrap gap-4 pt-2">
-    <div v-for="(c, index) of authors" class="flex gap-2 items-center">
+    <div v-for="(c, index) of authors" :key="c.github" class="flex gap-2 items-center">
       <img :src="`${c.github}.png`" class="w-8 h-8 rounded-full" />
       <a :href="c.github">{{ c.name }}</a>
       <span v-if="index < authors.length - 1">•</span>
     </div>
   </div>
 </template>
+
+<style scoped>
+.flex {
+  display: flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.rounded-full {
+  border-radius: 50%;
+}
+</style>