feat: add post update date (saicaca#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 <[email protected]>
QubitPi · Dec 4, 2024 · b604cdf · b604cdf
1 parent 079abbc
commit b604cdf
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 3 deletions.
diff --git a/src/components/PostCard.astro b/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}]}>

diff --git a/src/components/PostMeta.astro b/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"

diff --git a/src/components/PostPage.astro b/src/components/PostPage.astro
@@ -8,14 +8,15 @@ 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}
                     title={entry.data.title}
                     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}

diff --git a/src/content/config.ts b/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(''),

diff --git a/src/content/posts/markdown-extended.md b/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]

diff --git a/src/pages/posts/[...slug].astro b/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>