Attempt client handling of post datetime

src/components/Time.tsx

@@ -0,0 +1,14 @@
+import { format } from "date-fns";
+import type { FunctionComponent } from "react";
+
+type TimeProps = {
+  time: Date;
+}
+
+const Time: FunctionComponent<TimeProps> = ({ time }) => {
+  return (
+    <time className="font-mono">{format(time, "MM-dd-yyyy HH:mm OOO")}</time>
+  );
+};
+
+export default Time;

src/layouts/Post.astro

@@ -1,15 +1,15 @@
 ---
 import General from "@layouts/General.astro";
-import { type CollectionEntry } from 'astro:content';
-import { format } from "date-fns";
-
+import Time from "@components/Time.jsx";
+import { type CollectionEntry } from "astro:content";
 interface Props {
-  post: CollectionEntry<'blog'>;
+  post: CollectionEntry<"blog">;
 }
 const { post } = Astro.props;
 const { title, pubDate, tags } = post.data;
 const tagCount = tags.length;
 ---
+
 <General title={title}>
   <div class="max-w-3xl mx-4">
     <h1>
@@ -18,16 +18,16 @@ const tagCount = tags.length;
       </a>
     </h1>
     <p class="mt-0 text-sm ml-5">
-        <a href={post.slug}>
-          <time class="font-mono" datetime="{{ page.date | date: '%Y-%m-%dT%H:%M:%SZ' }}">
-            {format(pubDate, "MM-dd-yyyy HH:mm OOO")}
-          </time>
-        </a>
-        <span class="space-x-2">
-          {tags.map((tag, i) => (
-            <><a href={`/tags/${tag}`}>{ tag }</a>{ i < tagCount - 1 ? ',' : ''}</>
-        ))}
-        </span>
+      <Time time={pubDate} client:load />
+      <span class="space-x-2">
+        {
+          tags.map((tag, i) =>
+            // Ignore required due to whitespace sensitive content
+            // prettier-ignore
+            <><a href={`/tags/${tag}`}>{tag}</a>{i < tagCount - 1 ? "," : ""}</>,
+          )
+        }
+      </span>
       <article>
         <slot />
       </article>