docs: update related blog posts to be up-to-date

satnaing · Dec 21, 2023 · 9f6f10b · 9f6f10b
1 parent c02b812
commit 9f6f10b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 21 deletions.
diff --git a/src/content/blog/adding-new-post.md b/src/content/blog/adding-new-post.md
@@ -1,6 +1,7 @@
 ---
 author: Sat Naing
 pubDatetime: 2022-09-23T15:22:00Z
+modDatetime: 2023-12-21T09:12:47.400Z
 title: Adding new posts in AstroPaper theme
 postSlug: adding-new-posts-in-astropaper-theme
 featured: true
@@ -22,18 +23,21 @@ Frontmatter is the main place to store some important information about the blog
 
 Here is the list of frontmatter property for each post.
 
-| Property           | Description                                                                     | Remark                                        |
-| ------------------ | ------------------------------------------------------------------------------- | --------------------------------------------- |
-| **_title_**        | Title of the post. (h1)                                                         | required<sup>\*</sup>                         |
-| **_description_**  | Description of the post. Used in post excerpt and site description of the post. | required<sup>\*</sup>                         |
-| **_pubDatetime_**  | Published datetime in ISO 8601 format.                                          | required<sup>\*</sup>                         |
-| **_author_**       | Author of the post.                                                             | default = SITE.author                         |
-| **_postSlug_**     | Slug for the post. Will automatically be slugified.                             | default = slugified title                     |
-| **_featured_**     | Whether or not display this post in featured section of home page               | default = false                               |
-| **_draft_**        | Mark this post 'unpublished'.                                                   | default = false                               |
-| **_tags_**         | Related keywords for this post. Written in array yaml format.                   | default = others                              |
-| **_ogImage_**      | OG image of the post. Useful for social media sharing and SEO.                  | default = SITE.ogImage or generated OG image  |
-| **_canonicalURL_** | Canonical URL (absolute), in case the article already exists on other source.   | default = `Astro.site` + `Astro.url.pathname` |
+| Property           | Description                                                                                 | Remark                                        |
+| ------------------ | ------------------------------------------------------------------------------------------- | --------------------------------------------- |
+| **_title_**        | Title of the post. (h1)                                                                     | required<sup>\*</sup>                         |
+| **_description_**  | Description of the post. Used in post excerpt and site description of the post.             | required<sup>\*</sup>                         |
+| **_pubDatetime_**  | Published datetime in ISO 8601 format.                                                      | required<sup>\*</sup>                         |
+| **_modDatetime_**  | Modified datetime in ISO 8601 format. (only add this property when a blog post is modified) | optional                                      |
+| **_author_**       | Author of the post.                                                                         | default = SITE.author                         |
+| **_postSlug_**     | Slug for the post. Will automatically be slugified.                                         | default = slugified title                     |
+| **_featured_**     | Whether or not display this post in featured section of home page                           | default = false                               |
+| **_draft_**        | Mark this post 'unpublished'.                                                               | default = false                               |
+| **_tags_**         | Related keywords for this post. Written in array yaml format.                               | default = others                              |
+| **_ogImage_**      | OG image of the post. Useful for social media sharing and SEO.                              | default = SITE.ogImage or generated OG image  |
+| **_canonicalURL_** | Canonical URL (absolute), in case the article already exists on other source.               | default = `Astro.site` + `Astro.url.pathname` |
+
+> Tip! You can get ISO 8601 datetime by running `new Date().toISOString()` in the console. Make sure you remove quotes though.
 
 Only `title`, `description` and `pubDatetime` fields in frontmatter must be specified.
 

diff --git a/src/content/blog/how-to-add-an-estimated-reading-time.md b/src/content/blog/how-to-add-an-estimated-reading-time.md
@@ -2,6 +2,7 @@
 title: How to add an estimated reading time in AstroPaper
 author: Sat Naing
 pubDatetime: 2023-07-21T10:11:06.130Z
+modDatetime: 2023-12-21T05:03:41.955Z
 postSlug: how-to-add-estimated-reading-time
 featured: false
 draft: false
@@ -157,8 +158,15 @@ export interface Props {
 
 const { post } = Astro.props;
 
-const { title, author, description, ogImage, pubDatetime, tags, readingTime } =
-  post.data; // we can now directly access readingTime from frontmatter
+const {
+  title,
+  author,
+  description,
+  ogImage,
+  readingTime, // we can now directly access readingTime from frontmatter
+  pubDatetime,
+  modDatetime,
+  tags } = post.data;
 
 // other codes
 ---
@@ -181,8 +189,12 @@ const getSortedPosts = async (posts: CollectionEntry<"blog">[]) => {
     .filter(({ data }) => !data.draft)
     .sort(
       (a, b) =>
-        Math.floor(new Date(b.data.pubDatetime).getTime() / 1000) -
-        Math.floor(new Date(a.data.pubDatetime).getTime() / 1000)
+        Math.floor(
+          new Date(b.data.modDatetime ?? b.data.pubDatetime).getTime() / 1000
+        ) -
+        Math.floor(
+          new Date(a.data.modDatetime ?? a.data.pubDatetime).getTime() / 1000
+        )
     );
 };
 
@@ -215,7 +227,7 @@ But in this section, I'm gonna show you how I would display `readingTime` in my
 
 Step (1) Update `Datetime` component to display `readingTime`
 
-```ts
+```tsx
 import { LOCALE } from "@config";
 
 export interface Props {
@@ -234,7 +246,7 @@ export default function Datetime({
   return (
     // other codes
     <span className={`italic ${size === "sm" ? "text-sm" : "text-base"}`}>
-      <FormattedDatetime datetime={datetime} />
+      <FormattedDatetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
       <span> ({readingTime})</span> {/* display reading time */}
     </span>
     // other codes
@@ -248,10 +260,14 @@ file: Card.tsx
 
 ```ts
 export default function Card({ href, frontmatter, secHeading = true }: Props) {
-  const { title, pubDatetime, description, readingTime } = frontmatter;
+  const { title, pubDatetime, modDatetime description, readingTime } = frontmatter;
   return (
     ...
-    <Datetime datetime={pubDatetime} readingTime={readingTime} />
+    <Datetime
+      pubDatetime={pubDatetime}
+      modDatetime={modDatetime}
+      readingTime={readingTime}
+    />
     ...
   );
 }
@@ -264,7 +280,8 @@ file: PostDetails.tsx
 <main id="main-content">
   <h1 class="post-title">{title}</h1>
   <Datetime
-    datetime={pubDatetime}
+    pubDatetime={pubDatetime}
+    modDatetime={modDatetime}
     size="lg"
     className="my-2"
     readingTime={readingTime}