diff --git a/src/content/blog/adding-new-post.md b/src/content/blog/adding-new-post.md
index 73a52303a..0c175d163 100644
--- 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\* |
-| **_description_** | Description of the post. Used in post excerpt and site description of the post. | required\* |
-| **_pubDatetime_** | Published datetime in ISO 8601 format. | required\* |
-| **_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\* |
+| **_description_** | Description of the post. Used in post excerpt and site description of the post. | required\* |
+| **_pubDatetime_** | Published datetime in ISO 8601 format. | required\* |
+| **_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
index 2cff19a27..23be6fac6 100644
--- 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
-
+
({readingTime}) {/* display reading time */}
// 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 (
...
-
+
...
);
}
@@ -264,7 +280,8 @@ file: PostDetails.tsx
{title}