feat(component): show stars on article card

src/components/ArticleCard.vue

@@ -25,7 +25,7 @@ function coverSrc(): string | undefined {
         <ArticleMetaBar
           mode="card"
           :created-at="article.publishedAt || article.createdAt"
-          :content="article.summary"
+          :star-count="article.starCount"
         />
       </div>
       <div class="article-tags">

src/components/ArticleMetaBar.vue

@@ -6,15 +6,17 @@ const props = withDefaults(
   defineProps<{
     createdAt?: string
     viewCount?: number
+    starCount?: number
     content?: string
     mode?: 'card' | 'detail'
   }>(),
-  { createdAt: '', viewCount: 0, content: '', mode: 'card' }
+  { createdAt: '', viewCount: 0, starCount: 0, content: '', mode: 'card' }
 )
 
 const day = computed(() => (props.createdAt ? formatDay(props.createdAt) : ''))
 const duration = computed(() => estimateReadingTime(props.content ?? ''))
 const showView = computed(() => props.mode === 'detail')
+const showDuration = computed(() => props.mode === 'detail')
 </script>
 
 <template>
@@ -35,13 +37,19 @@ const showView = computed(() => props.mode === 'detail')
       </svg>
       <span class="tnum">{{ viewCount }}</span>
     </span>
-    <span v-if="duration" class="meta-item">
+    <span v-if="showDuration" class="meta-item">
       <svg class="meta-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
         <circle cx="8" cy="8" r="6" />
         <path d="M8 5V8L10 9.2" />
       </svg>
       <span>{{ duration }}</span>
     </span>
+    <span v-if="mode === 'card'" class="meta-item">
+      <svg class="meta-icon" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+      </svg>
+      <span class="tnum">{{ starCount }}</span>
+    </span>
   </span>
 </template>