FMHYedit/.vitepress/theme/components/Authors.vue

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  authors: string[]
}>()

interface Author {
  name: string
  github: 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 authors = computed(() =>
  data.filter((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">
      <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>