Change reality characters to use component

ShadowRZ · May 31, 2023 · 07b5f5a · 07b5f5a
1 parent aab6f69
commit 07b5f5a
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 5 deletions.
diff --git a/components/Avatar.vue b/components/Avatar.vue
@@ -0,0 +1,7 @@
+<script setup>
+defineProps(['src', 'alt'])
+</script>
+
+<template>
+  <img class="aspect-square rounded-full mx-0 my-0 px-0 py-0" :src="src" :alt="alt"/>
+</template>
diff --git a/components/CharacterDescription.vue b/components/CharacterDescription.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { withBase } from 'vitepress'
+import Avatar from './Avatar.vue'
+defineProps(['name', 'desc', 'image'])
+</script>
+
+<template>
+  <div class="flex items-center px-1 py-1 space-x-2 w-64">
+      <Avatar class="w-10 h-10 block mb-0.5 border-[0.5px] border-orange-300" :src="withBase(image)" :alt="'[Avatar of ' + name + ']'"/>
+    <div class="flex flex-col">
+      <strong>{{ name }}</strong>
+      <span class="text-gray-400">{{ desc }}</span>
+    </div>
+  </div>
+</template>
diff --git a/components/RealityCharacters.vue b/components/RealityCharacters.vue
@@ -0,0 +1,13 @@
+<script setup>
+import CharacterDescription from './CharacterDescription.vue'
+</script>
+
+<template>
+  <div class="mt-4 flex flex-wrap flex-col sm:flex-row">
+    <CharacterDescription name='祢洛子' desc='@ShadowRZ' image='/avatars/1589275_k0mxyaNR.webp'/>
+    <CharacterDescription name='Alynx Zhou' desc='@AlynxZhou' image='/avatars/Mikoto_Karon_White.webp'/>
+    <CharacterDescription name='叶琴玉' desc='@Ken_Ookami_Horo' image='/avatars/d1fb2d725bf54240.webp'/>
+    <CharacterDescription name='莫洛洛' desc='@outloudvi' image='/avatars/0f54bd1f-bf35-4729-82cf-ec2836cede1a.webp'/>
+    <CharacterDescription name='喵咪卡' desc='@felixonmars' image='/avatars/eb748f0984baec13.webp'/>
+  </div>
+</template>
diff --git a/docs/characters/index.md b/docs/characters/index.md
@@ -2,6 +2,11 @@
 prev: false
 next: false
 ---
+<script setup>
+import RealityCharacters from '../../components/RealityCharacters.vue'
+</script>
+
+
 # 角色列表 <Badge type="warning" text="TODO" />
 
 ::: warning
@@ -19,11 +24,11 @@ next: false
 
 ### 现实角色
 
-* AlynxZhou
-* 祢洛子
-* 叶琴玉
-* 莫洛洛
-* 喵咪卡
+::: info
+[祢洛子的头像来源（外部链接）](https://picrew.me/share?cd=FnEWfMRQF5)
+:::
+
+<RealityCharacters />
 
 ### 作品角色
 

diff --git a/docs/public/avatars/0f54bd1f-bf35-4729-82cf-ec2836cede1a.webp b/docs/public/avatars/0f54bd1f-bf35-4729-82cf-ec2836cede1a.webp
diff --git a/docs/public/avatars/1589275_k0mxyaNR.webp b/docs/public/avatars/1589275_k0mxyaNR.webp
diff --git a/docs/public/avatars/Mikoto_Karon_White.webp b/docs/public/avatars/Mikoto_Karon_White.webp
diff --git a/docs/public/avatars/d1fb2d725bf54240.webp b/docs/public/avatars/d1fb2d725bf54240.webp
diff --git a/docs/public/avatars/eb748f0984baec13.webp b/docs/public/avatars/eb748f0984baec13.webp
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,6 +2,7 @@
 module.exports = {
   content: [
     "./docs/**/*.{md,html,js,vue}",
+    "./components/**/*.{js,vue}",
   ],
   theme: {
     extend: {},