refactor: standardize date handling in post components

Author: coderGtm

src/components/posts-loop.astro

@@ -4,24 +4,22 @@ const allPosts = await getCollection("post");
 
 const { count } = Astro.props;
 
-function parseDate(dateStr) {
-  const [month, day, year] = dateStr.split(" ");
-  return new Date(`${month} ${parseInt(day)}, ${year}`);
-}
+const formatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+});
 
 const sortedPosts = allPosts
-  .map((post) => ({
-    ...post,
-    date: parseDate(post.data.dateFormatted),
-  }))
-  .sort((a, b) => b.date.getTime() - a.date.getTime());
+  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
 
-const postsLoop = sortedPosts.slice(0, count).map((post) => {
-  return {
-    ...(post.data || {}),
-    link: `/post/${post.slug}`,
-  };
-});
+const postsLoop = sortedPosts.slice(0, count).map((post) => ({
+  title: post.data.title,
+  description: post.data.description,
+  dateISO: post.data.date.toISOString(),
+  dateFormatted: formatter.format(post.data.date),
+  link: `/post/${post.slug}`,
+}));
 ---
 
 {
@@ -85,7 +83,7 @@ const postsLoop = sortedPosts.slice(0, count).map((post) => {
             <span>{post.description}</span>
           </p>
           <div class="mt-2.5 text-xs font-medium text-neutral-800 dark:text-neutral-300">
-            Posted on {post.dateFormatted}
+            <time datetime={post.dateISO}>Posted on {post.dateFormatted}</time>
           </div>
         </div>
       </div>

src/content/config.js

@@ -5,7 +5,8 @@ const postCollection = defineCollection({
 	schema: z.object({
 		title: z.string(),
 		description: z.string(),
-		dateFormatted: z.string(),
+		// Store canonical date as Date object; format at render time
+		date: z.date(),
 	}),
 });
 

src/content/post/waterbase.md

@@ -1,7 +1,7 @@
 ---
 title: The Easiest Database you could ever need!
 description: As a developer, you might have heard of FireBase. But do you know about.....WaterBase ??
-dateFormatted: Aug 2, 2022
+date: 2022-08-02
 ---
 ### As a developer, you might have heard of FireBase. But do you know about.....WaterBase ??
 

src/content/post/yantra-launcher.md

@@ -1,7 +1,7 @@
 ---
 title: Why I built an entire Launcher for Android?
 description: Let's change the definition of Android Launchers...for the greater good!
-dateFormatted: Sep 26, 2022
+date: 2022-09-26
 ---
 ### Let's change the definition of Android Launchers...for the greater good!
 

src/pages/post/[slug].astro

@@ -14,7 +14,12 @@ const { entry } = Astro.props;
 // Render markdown entry to get the compiled Content component
 const { Content } = await entry.render();
 const frontmatter = entry.data;
+const formattedDate = new Intl.DateTimeFormat("en-US", {
+	month: "short",
+	day: "numeric",
+	year: "numeric",
+}).format(frontmatter.date);
 ---
-<PostLayout frontmatter={frontmatter}>
+<PostLayout frontmatter={{ ...frontmatter, dateFormatted: formattedDate }}>
 	<Content />
 </PostLayout>