feat: add post update date (#243)

* feat: Add article update date

* feat:
1.Hide update time on the homepage;
2.Replace update icon;

* remove iconify-json/mdi

---------

Co-authored-by: liangjianhao <jianhao.liang@sz-sanjiang.com>

src/components/PostCard.astro

@@ -13,6 +13,7 @@ interface Props {
   title: string
   url: string
   published: Date
+  updated?: Date
   tags: string[]
   category: string
   image: string
@@ -25,6 +26,7 @@ const {
   title,
   url,
   published,
+  updated,
   tags,
   category,
   image,
@@ -54,7 +56,7 @@ const { remarkPluginFrontmatter } = await entry.render()
         </a>
 
         <!-- metadata -->
-        <PostMetadata published={published} tags={tags} category={category} hideTagsForMobile={true} class="mb-4"></PostMetadata>
+        <PostMetadata published={published} updated={updated} tags={tags} category={category} hideTagsForMobile={true} hideUpdateDate={true} class="mb-4"></PostMetadata>
 
         <!-- description -->
         <div class:list={["transition text-75 mb-3.5 pr-4", {"line-clamp-2 md:line-clamp-1": !description}]}>

src/components/PostMeta.astro

@@ -8,11 +8,13 @@ import { url } from '../utils/url-utils'
 interface Props {
   class: string
   published: Date
+  updated?: Date
   tags: string[]
   category: string
   hideTagsForMobile?: boolean
+  hideUpdateDate?: boolean
 }
-const { published, tags, category, hideTagsForMobile = false } = Astro.props
+const { published, updated, tags, category, hideTagsForMobile = false, hideUpdateDate = false } = Astro.props
 const className = Astro.props.class
 ---
 
@@ -26,6 +28,17 @@ const className = Astro.props.class
         <span class="text-50 text-sm font-medium">{formatDateToYYYYMMDD(published)}</span>
     </div>
 
+    <!-- update date -->
+    {!hideUpdateDate && updated && updated.getTime() !== published.getTime() && (
+        <div class="flex items-center">
+            <div class="meta-icon"
+            >
+                <Icon name="material-symbols:edit-calendar-outline-rounded" class="text-xl"></Icon>
+            </div>
+            <span class="text-50 text-sm font-medium">{formatDateToYYYYMMDD(updated)}</span>
+        </div>
+    )}
+
     <!-- categories -->
     <div class="flex items-center">
         <div class="meta-icon"

src/components/PostPage.astro

@@ -8,7 +8,7 @@ let delay = 0
 const interval = 50
 ---
 <div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-4">
-    {page.data.map((entry: { data: { draft: boolean; title: string; tags: string[]; category: string; published: Date; image: string; description: string; }; slug: string; }) => {
+    {page.data.map((entry: { data: { draft: boolean; title: string; tags: string[]; category: string; published: Date; image: string; description: string; updated: Date; }; slug: string; }) => {
         return (
             <PostCard
                     entry={entry}
@@ -16,6 +16,7 @@ const interval = 50
                     tags={entry.data.tags}
                     category={entry.data.category}
                     published={entry.data.published}
+                    updated={entry.data.updated}
                     url={getPostUrlBySlug(entry.slug)}
                     image={entry.data.image}
                     description={entry.data.description}

src/content/config.ts

@@ -4,6 +4,7 @@ const postsCollection = defineCollection({
   schema: z.object({
     title: z.string(),
     published: z.date(),
+    updated: z.date().optional(),
     draft: z.boolean().optional().default(false),
     description: z.string().optional().default(''),
     image: z.string().optional().default(''),

src/content/posts/markdown-extended.md

@@ -1,6 +1,7 @@
 ---
 title: Markdown Extended Features
 published: 2024-05-01
+updated: 2024-11-29
 description: 'Read more about Markdown features in Fuwari'
 image: ''
 tags: [Demo, Example, Markdown, Fuwari]

src/pages/posts/[...slug].astro

@@ -86,6 +86,7 @@ const jsonLd = {
                 <PostMetadata
                         class="mb-5"
                         published={entry.data.published}
+                        updated={entry.data.updated}
                         tags={entry.data.tags}
                         category={entry.data.category}
                 ></PostMetadata>