feat: ✨ markdown支持emoji解析

xiaohuohumax · Sep 30, 2024 · fd81ee6 · fd81ee6
1 parent 78dc7be
commit fd81ee6
Show file tree

Hide file tree

Showing 17 changed files with 70 additions and 29 deletions.
diff --git a/app/web/CHANGELOG.md b/app/web/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @xiaohuohumax/miaoji-web
 
+## 1.1.0
+
+### Minor Changes
+
+- markdown 支持 emoji 解析
+
 ## 1.0.1
 
 ### Patch Changes

diff --git a/app/web/package.json b/app/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@xiaohuohumax/miaoji-web",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "description": "MiaoJi web client",
   "author": {
@@ -25,6 +25,7 @@
     "@xiaohuohumax/miaoji-func-label": "workspace:^",
     "@xiaohuohumax/miaoji-util": "workspace:^",
     "await-to-js": "^3.0.0",
+    "markdown-it-emoji": "^3.0.0",
     "md-editor-v3": "^4.20.2",
     "naive-ui": "^2.39.0",
     "octokit": "^4.0.2",
@@ -37,6 +38,7 @@
   "devDependencies": {
     "@intlify/core-base": "^10.0.3",
     "@octokit/types": "^13.5.1",
+    "@types/markdown-it-emoji": "^3.0.1",
     "@vitejs/plugin-vue": "^5.1.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",

diff --git a/app/web/src/components/CSubTitle.vue b/app/web/src/components/CSubTitle.vue
@@ -1,9 +1,5 @@
-<script setup lang='ts'>
-defineProps<{ title: string }>()
-</script>
-
 <template>
-  <h2 class="text-lg mb-2  dark:text-green-300 text-orange-500">
-    {{ title }}
+  <h2 class="text-lg mb-2 dark:text-green-300 text-orange-500">
+    <slot />
   </h2>
 </template>
diff --git a/app/web/src/components/CTitle.vue b/app/web/src/components/CTitle.vue
@@ -1,9 +1,5 @@
-<script setup lang='ts'>
-defineProps<{ title: string }>()
-</script>
-
 <template>
-  <h1 class="text-2xl mb-2  dark:text-green-300 text-orange-500">
-    {{ title }}
+  <h1 class="text-2xl mb-2 dark:text-green-300 text-orange-500">
+    <slot />
   </h1>
 </template>
diff --git a/app/web/src/views/VAbout.vue b/app/web/src/views/VAbout.vue
@@ -31,7 +31,9 @@ async function queryDataFunc(): Promise<Issue> {
   <NSpace :vertical="true">
     <NCard :bordered="false">
       <NSpace :vertical="true">
-        <CSubTitle :title="t('page.about.title')" />
+        <CSubTitle>
+          {{ t('page.about.title') }}
+        </CSubTitle>
         <CLoadData v-model:data="issue" :query-data-func="queryDataFunc">
           <template #success="{ data }">
             <CMarkdown :id="data.number" :content="data.body" />

diff --git a/app/web/src/views/VAlbum.vue b/app/web/src/views/VAlbum.vue
@@ -44,7 +44,9 @@ function issueToAlbum(issues: Issue[]): Album[] {
 <template>
   <NCard :bordered="false">
     <NSpace :vertical="true">
-      <CSubTitle :title="t('page.album.title')" />
+      <CSubTitle>
+        {{ t('page.album.title') }}
+      </CSubTitle>
       <CLoadPages :query-pages-func="queryPagesFunc">
         <template #default="{ datas }">
           <NGrid cols="1 s:2 m:3 l:3 xl:4" responsive="screen" :x-gap="12" :y-gap="12">

diff --git a/app/web/src/views/VAlbumDetails.vue b/app/web/src/views/VAlbumDetails.vue
@@ -44,7 +44,7 @@ async function queryDataFunc(): Promise<IssueImage> {
       <CLoadData v-model:data="issueImage" :query-data-func="queryDataFunc">
         <template #success="{ data: { issue, images } }">
           <NSpace :vertical="true">
-            <CTitle :title="issue.title" />
+            <CTitle>{{ issue.title }}</CTitle>
             <NSpace align="center">
               <CLink v-if="issue.user" :href="issue.user.html_url">
                 {{ issue.user.login }}

diff --git a/app/web/src/views/VArticle.vue b/app/web/src/views/VArticle.vue
@@ -36,7 +36,7 @@ async function queryDataFunc(): Promise<Issue> {
       <CLoadData v-model:data="issue" :query-data-func="queryDataFunc">
         <template #success="{ data }">
           <NSpace :vertical="true">
-            <CTitle :title="data.title" />
+            <CTitle>{{ data.title }}</CTitle>
             <NSpace align="center">
               <CLink v-if="data.user" :href="data.user.html_url" target="_blank">
                 {{ data.user.login }}

diff --git a/app/web/src/views/VHistory.vue b/app/web/src/views/VHistory.vue
@@ -36,7 +36,9 @@ function getHistoryColor(issue: Issue) {
 <template>
   <NCard :bordered="false">
     <NSpace :vertical="true">
-      <CSubTitle :title="t('page.history.title')" />
+      <CSubTitle>
+        {{ t('page.history.title') }}
+      </CSubTitle>
       <CLoadPages :query-pages-func="queryPagesFunc">
         <template #default="{ datas }">
           <NTimeline>

diff --git a/app/web/src/views/VLink.vue b/app/web/src/views/VLink.vue
@@ -58,7 +58,9 @@ const applyHref = computed(() => {
   <NSpace :vertical="true">
     <NCard :bordered="false">
       <NSpace :vertical="true">
-        <CSubTitle :title="t('page.link.title')" />
+        <CSubTitle>
+          {{ t('page.link.title') }}
+        </CSubTitle>
         <CLoadPages :query-pages-func="queryPagesFunc">
           <template #default="{ datas }">
             <NGrid cols="1 s:2 m:3 l:4 xl:5 2xl:6" responsive="screen" :x-gap="12" :y-gap="12">
@@ -69,7 +71,7 @@ const applyHref = computed(() => {
           </template>
         </CLoadPages>
         <CLink :href="applyHref" target="_blank">
-          <NButton class="w-full" quaternary>
+          <NButton class="w-full" secondary type="info">
             {{ t('page.link.toApply') }}
           </NButton>
         </CLink>

diff --git a/app/web/src/views/VMessage.vue b/app/web/src/views/VMessage.vue
@@ -32,7 +32,9 @@ async function queryDataFunc(): Promise<Issue> {
   <NSpace :vertical="true">
     <NCard :bordered="false">
       <NSpace :vertical="true">
-        <CSubTitle :title="t('page.message.title')" />
+        <CSubTitle>
+          {{ t('page.message.title') }}
+        </CSubTitle>
         <CLoadData v-model:data="issue" :query-data-func="queryDataFunc">
           <template #success="{ data }">
             <CMarkdown :id="data.number" :content="data.body" />

diff --git a/app/web/src/views/VTag.vue b/app/web/src/views/VTag.vue
@@ -12,7 +12,9 @@ const appStore = useAppStore()
 <template>
   <NCard :bordered="false">
     <NSpace :vertical="true">
-      <CSubTitle :title="t('page.tag.title')" />
+      <CSubTitle>
+        {{ t('page.tag.title') }}
+      </CSubTitle>
       <CLabels v-if="appStore.labels.length > 0" :labels="appStore.labels" />
       <NEmpty v-else />
     </NSpace>

diff --git a/app/web/src/views/components/CAlbumCard.vue b/app/web/src/views/components/CAlbumCard.vue
@@ -27,7 +27,7 @@ defineProps<Album>()
         </template>
       </NImage>
       <NSpace vertical>
-        <div class="text-lg mt-2 hover:text-orange-500 dark:hover:text-green-300">
+        <div class="text-lg">
           {{ issue.title }}
         </div>
         <CReactions :reaction="issue.reactions" :issue-url="issue.html_url" />

diff --git a/app/web/src/views/components/CArticleCard.vue b/app/web/src/views/components/CArticleCard.vue
@@ -20,7 +20,7 @@ const config = markdown.parseConfig<ArticleMarkdownConfig>(props.issue.body || '
   <RouterLink :to="{ name: RouteName.Article, params: { id: issue.number } }">
     <NCard :bordered="false">
       <NSpace :vertical="true">
-        <h1 class="text-xl">
+        <h1 class="text-xl dark:text-green-300 text-orange-500">
           {{ issue.title }}
         </h1>
         <NSpace align="center">

diff --git a/app/web/src/views/components/CComment.vue b/app/web/src/views/components/CComment.vue
@@ -49,7 +49,9 @@ watch(() => props.issue, () => {
 <template>
   <NCard :bordered="false">
     <NSpace :vertical="true">
-      <CSubTitle :title="t('component.comment.title')" />
+      <CSubTitle>
+        {{ t('component.comment.title') }}
+      </CSubTitle>
       <div v-if="isHidden" class="text-center">
         {{ t('component.comment.hiddenComment') }}
       </div>

diff --git a/app/web/src/views/components/CMarkdown.vue b/app/web/src/views/components/CMarkdown.vue
@@ -1,13 +1,22 @@
 <script setup lang="ts">
-import { MdPreview } from 'md-editor-v3'
+import { full as emoji } from 'markdown-it-emoji'
+import { config, MdPreview } from 'md-editor-v3'
 import { useAppStore } from '~/store/app'
 import 'md-editor-v3/lib/style.css'
 
-defineProps<{
+export interface CMarkdownProps {
   content?: string | null
-  id: number
-}>()
+  id: number | string
+}
+
+defineProps<CMarkdownProps>()
 const appStore = useAppStore()
+
+config({
+  markdownItConfig: (md) => {
+    md.use(emoji)
+  },
+})
 </script>
 
 <template>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml