fix: Support relative image paths in ContributorHeader component

fundamentals/debug/.vitepress/theme/components/ContributorHeader.vue

@@ -1,28 +1,70 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 const props = defineProps<{
-  name: string
-  avatar?: string
-  githubUrl?: string
-  date?: string
-  readingTime?: string
-  size?: number
+  name: string;
+  avatar?: string;
+  githubUrl?: string;
+  date?: string;
+  readingTime?: string;
+  size?: number;
 }>();
+
+const avatarSrc = computed(() => {
+  if (!props.avatar) {
+    return "";
+  }
+
+  if (props.avatar.startsWith("/")) {
+    return props.avatar;
+  }
+
+  const images = (import.meta as any).glob(
+    "/images/contribute/**/*.{png,jpg,jpeg,webp,avif,gif,svg}",
+    { eager: true, import: "default" }
+  );
+
+  const fileName = props.avatar.split("/").pop();
+  const matchedEntry = Object.entries(images).find(([path]) =>
+    path.endsWith(fileName ?? "")
+  );
+
+  if (matchedEntry) {
+    const [_, buildURL] = matchedEntry;
+    return buildURL;
+  }
+
+  return props.avatar;
+});
 </script>
 
 <template>
   <div class="contributor-header">
     <img
-      :src="avatar || ''"
+      :src="avatarSrc"
       :width="size || 50"
       :height="size || 50"
       :alt="name"
       class="contributor-avatar"
     />
     <div class="contributor-info">
-      <a v-if="githubUrl" :href="githubUrl" target="_blank" class="contributor-name">
+      <a
+        v-if="githubUrl"
+        :href="githubUrl"
+        target="_blank"
+        class="contributor-name"
+      >
         {{ name }}
-        <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" style="margin-left: 4px;">
-          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+        <svg
+          viewBox="0 0 16 16"
+          width="14"
+          height="14"
+          fill="currentColor"
+          style="margin-left: 4px"
+        >
+          <path
+            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+          />
         </svg>
       </a>
       <strong v-else class="contributor-name">{{ name }}</strong>
@@ -85,4 +127,4 @@ const props = defineProps<{
 .meta-item {
   display: inline-block;
 }
-</style>
+</style>