feat: add modified datetime in blog posts

* feat: add modified datetime in blog posts

Add modDatetime in blogSchema. Update Datetime component to accept modDatetime. Update sorting logic. Rename datetime to pubDatetime in Datetime component.

Closes: #134

* feat: add published_time & modified_time meta tags

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

* fix: remove extra spaces in breadcrumbs

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}