feat: add co-authors support

src/.vitepress/theme/Article.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Date from './Date.vue'
-import Author from './Author.vue'
+import Authors from './Authors.vue'
 import { computed } from 'vue'
 import { useData, useRoute } from 'vitepress'
 import { data as posts } from './posts.data.js'
@@ -34,7 +34,7 @@ const prevPost = computed(() => posts[findCurrentIndex() + 1])
       class="divide-y xl:divide-y-0 divide-gray-200 dark:divide-slate-200/5 xl:grid xl:grid-cols-4 xl:gap-x-10 pb-16 xl:pb-20"
       style="grid-template-rows: auto 1fr"
     >
-      <Author />
+      <Authors />
       <div
         class="divide-y divide-gray-200 dark:divide-slate-200/5 xl:pb-0 xl:col-span-3 xl:row-span-2"
       >

src/.vitepress/theme/Author.vue

@@ -1,53 +1,33 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
-import { computed } from 'vue'
+import { computed, defineProps } from 'vue'
 
-const { frontmatter } = useData()
+const { name, github, avatar } = defineProps<{
+  name: string
+  github: string
+  avatar?: string
+}>()
 
 const avatarUrl = computed(() => {
-  return (
-    frontmatter.value.author.avatar ??
-    (frontmatter.value.author.github
-      ? `https://github.com/${frontmatter.value.author.github}.png`
-      : undefined)
-  )
+  return avatar ?? (github ? `https://github.com/${github}.png` : undefined)
 })
 
 const githubUrl = computed(() => {
-  return frontmatter.value.author.github
-    ? `https://github.com/${frontmatter.value.author.github}`
-    : undefined
+  return github ? `https://github.com/${github}` : undefined
 })
-
-// TODO(SigureMo):
-// 1. Support multiple authors / co-authors
-// 2. Support title
 </script>
 
 <template>
-  <dl class="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200 dark:xl:border-slate-200/5">
-    <dt class="sr-only">Authors</dt>
-    <dd>
-      <ul class="flex justify-center xl:block space-x-8 sm:space-x-12 xl:space-x-0 xl:space-y-8">
-        <li class="flex items-center space-x-2">
-          <img
-            v-if="avatarUrl"
-            :src="avatarUrl"
-            alt="author image"
-            class="w-10 h-10 rounded-full"
-          />
-          <dl class="text-sm font-medium leading-5 whitespace-nowrap">
-            <dt class="sr-only">Name</dt>
-            <dd class="text-gray-900 dark:text-white">{{ frontmatter.author.name }}</dd>
-            <dt v-if="githubUrl" class="sr-only">GitHub</dt>
-            <dd v-if="githubUrl">
-              <a :href="githubUrl" target="_blank" rel="noopnener noreferrer" class="link"
-                >@{{ frontmatter.author.github }}</a
-              >
-            </dd>
-          </dl>
-        </li>
-      </ul>
-    </dd>
-  </dl>
+  <li class="flex items-center space-x-2">
+    <img v-if="avatarUrl" :src="avatarUrl" alt="author image" class="w-10 h-10 rounded-full" />
+    <dl class="text-sm font-medium leading-5 whitespace-nowrap">
+      <dt class="sr-only">Name</dt>
+      <dd class="text-gray-900 dark:text-white">{{ name }}</dd>
+      <dt v-if="githubUrl" class="sr-only">GitHub</dt>
+      <dd v-if="githubUrl">
+        <a :href="githubUrl" target="_blank" rel="noopnener noreferrer" class="link"
+          >@{{ github }}</a
+        >
+      </dd>
+    </dl>
+  </li>
 </template>

src/.vitepress/theme/Authors.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import Author from './Author.vue'
+
+const { frontmatter } = useData()
+
+const coAuthors = frontmatter.value.co_authors ?? []
+const authors = [frontmatter.value.author, ...coAuthors]
+</script>
+
+<template>
+  <dl class="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200 dark:xl:border-slate-200/5">
+    <dt class="sr-only">Authors</dt>
+    <dd>
+      <ul class="flex justify-center xl:block space-x-8 sm:space-x-12 xl:space-x-0 xl:space-y-8">
+        <template v-for="author in authors">
+          <Author :name="author.name" :github="author.github" :avatar="author.avatar" />
+        </template>
+      </ul>
+    </dd>
+  </dl>
+</template>