refactor: extract contributor (#75)

Author: xiaowangxiaowang256256

src/utils/contributor.ts

@@ -10,6 +10,7 @@ export interface RawContributor {
   github: string
   blog?: string
   twitter?: string
+  title?: string
   audios?: Link[]
   videos?: Link[]
   description: string

src/views/contributor.vue

@@ -26,40 +26,66 @@ if (contributor.value)
 </script>
 
 <template>
-  <div v-if="contributor" mx-auto mt-5 px-4 container>
-    <div mb-5>
-      <h1 mb-2 text-center text-2xl font-bold v-html="contributor.name" />
+  <div v-if="contributor" mx10>
+    <div flex="~ col items-center">
+      <!-- avatars -->
+      <img
+        :src="`https://avatars.githubusercontent.com/${contributor.github}`"
+        :alt="contributor.name"
+        my5
+        w-100px
+        rd-3
+      />
 
-      <a :href="`https://github.com/${contributor.github}`" target="_blank">
-        <img
-          :src="`https://avatars.githubusercontent.com/${contributor.github}`"
-          :alt="contributor.github"
-          class="w-128px"
-        />
-      </a>
+      <!-- name -->
+      <h1 text-2xl font-bold v-html="contributor.name" />
 
-      <span v-if="contributor.twitter">
-        Twitter:
-        <a :href="`https://twitter.com/${contributor.twitter}`" target="_blank">
-          {{ contributor.twitter }}
-        </a>
-      </span>
+      <!-- title -->
+      <span v-if="contributor.title">{{ contributor.title }}</span>
 
-      <component :is="contributor.default" />
+      <!-- social -->
+      <div flex="~ row gap-2 wrap justify-center">
+        <span v-if="contributor.github" flex="~  items-center">
+          <div i-carbon-logo-github text="[var(--text-color)]" mr1 />
+          <a :href="`https://github.com/${contributor.github}`" target="_blank">
+            {{ contributor.github }}
+          </a>
+        </span>
+        <span v-if="contributor.twitter" flex="~  items-center">
+          <div i-carbon-logo-x text="[var(--text-color)]" mr1 />
+          <a
+            :href="`https://twitter.com/${contributor.twitter}`"
+            target="_blank"
+          >
+            {{ contributor.twitter }}
+          </a>
+        </span>
+      </div>
 
-      <span v-if="contributor.audios">
-        Podcast List:
-        <li v-for="audio in contributor.audios" :key="audio.title">
-          <a :href="`${audio.link}`" target="_blank">{{ audio.title }}</a>
-        </li>
-      </span>
+      <!-- history -->
+      <div mt5>
+        <div v-if="contributor.audios">
+          Podcast List:
+          <li v-for="audio in contributor.audios" :key="audio.title">
+            <a :href="`${audio.link}`" target="_blank" break-all>{{
+              audio.title
+            }}</a>
+          </li>
+        </div>
+        <div v-if="contributor.videos" mt2>
+          Video List:
+          <li v-for="video in contributor.videos" :key="video.title">
+            <a :href="`${video.link}`" target="_blank" break-all>{{
+              video.title
+            }}</a>
+          </li>
+        </div>
+      </div>
 
-      <span v-if="contributor.videos">
-        Video List:
-        <li v-for="video in contributor.videos" :key="video.title">
-          <a :href="`${video.link}`" target="_blank">{{ video.title }}</a>
-        </li>
-      </span>
+      <!-- profile -->
+      <div mt5 pb10 pt5 container border-y="1px solid [var(--border-color)]">
+        <component :is="contributor.default" />
+      </div>
     </div>
   </div>
 </template>