feat: add basic message box support (#12)

postcss.config.js

@@ -4,7 +4,7 @@ import tailwindTypography from '@tailwindcss/typography'
 export default {
   plugins: [
     tailwind({
-      content: ['./src/.vitepress/theme/**/*.vue'],
+      content: ['./src/.vitepress/theme/**/*.vue', './src/.vitepress/components/**/*.vue'],
       plugins: [tailwindTypography],
     }),
   ],

src/.vitepress/components/Message.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const { name, github, avatar, type } = defineProps<{
+  name: string
+  github: string
+  avatar?: string
+  type?: string
+}>()
+
+const avatarUrl = computed(() => {
+  return avatar ?? (github ? `https://github.com/${github}.png` : undefined)
+})
+
+const messageType = computed(() => {
+  const type_ = type ?? 'left'
+  if (!['left', 'right'].includes(type_)) {
+    console.warn(`Message type must be 'left' or 'right', but got '${type_}'`)
+    return 'left'
+  }
+  return type_
+})
+
+const extraLiClasses = computed(() => {
+  const type_ = messageType.value
+  if (type_ === 'left') {
+    return {
+      'mr-10': true,
+    }
+  } else {
+    return {
+      'flex-row-reverse': true,
+      'ml-10': true,
+    }
+  }
+})
+
+const extraMessageDivClasses = computed(() => {
+  const type_ = messageType.value
+  if (type_ === 'left') {
+    return {
+      'items-start': true,
+    }
+  } else {
+    return {
+      'items-end': true,
+    }
+  }
+})
+</script>
+
+<template>
+  <li class="flex items-start space-y-2" :class="extraLiClasses">
+    <img v-if="avatarUrl" :src="avatarUrl" alt="author image" class="w-10 h-10 rounded-md m-0" />
+    <div class="flex flex-col px-3 !mt-0" :class="extraMessageDivClasses">
+      <span class="text-neutral-500 dark:text-neutral-400">{{ name }}</span>
+      <div class="inline-block bg-slate-200 px-2 py-2 rounded-md dark:bg-zinc-700">
+        <slot></slot>
+      </div>
+    </div>
+  </li>
+</template>

src/.vitepress/components/MessageBox.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <ul class="p-0">
+    <slot></slot>
+  </ul>
+</template>

src/posts/shun-story.md

@@ -11,7 +11,7 @@ co_authors:
      github: megemini
 ---
 
-**【开源江湖闲聊录】** 是一项专门为Paddle社区的开发者打造的特色访谈栏目📚。在这里，我们邀请到每一位别具一格且富有热情的开发者，通过文字或语音的方式进行深入采访 🎙️，探索并展现他们背后独一无二的故事，将他们的经历、见解和创意整理成精彩内容，呈现给整个社区。
+**【开源江湖闲聊录】** 是一项专门为 Paddle 社区的开发者打造的特色访谈栏目📚。在这里，我们邀请到每一位别具一格且富有热情的开发者，通过文字或语音的方式进行深入采访 🎙️，探索并展现他们背后独一无二的故事，将他们的经历、见解和创意整理成精彩内容，呈现给整个社区。
 
 ---