aaaaaaaa

src/components/BlogList.svelte

@@ -71,7 +71,7 @@
               {post.data.author}
             </address>
             <div class="inline-block post-meta col-start-3 lg:ml-1">
-              <Time time={parseTime(post.data.pubDate)} />
+              <Time datetime={post.data.pubDate} />
             </div>
             <div class="col-span-3">{post.data.summary}</div>
           </div>

src/components/Time.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 import type { Temporal } from "@js-temporal/polyfill";
-import { printTime } from "../utils/time";
+import { parseTime, printTime } from "../utils/time";
 
 interface Props {
-  time: Temporal.ZonedDateTime
+  datetime: string
 }
 
-const { time }: Props = $props();
+const { datetime }: Props = $props();
+const time = $derived(parseTime(datetime));
 </script>
 
 <time datetime={time.toString()} class="post-meta inline-block col-start-3">

src/layouts/BlogPost.astro

@@ -13,11 +13,9 @@ const { title, author, summary, pubDate, updatedDate } = Astro.props;
 		<header class="lg:grid grid-cols-[auto_auto_minmax(300px,_1fr)] grid-rows-[auto_auto]">
 			<h2 class="font-bold row-span-2 text-2xl m-2 mt-3">{title}</h2>
 			<address class="post-meta inline-block col-start-2">{author}</address>
-			<Time client:load time={parseTime(pubDate)} />
+			<Time client:load time={pubDate} />
 			<div class="italic tracking-[3px] text-emph-fg col-start-2 col-span-2 m-2 mt-0">{summary}</div>
-			{updatedDate && <div>
-				Amended <Time time={parseTime(updatedDate)} />
-			</div>}
+			{updatedDate && <div>Amended <Time time={updatedDate} /></div>}
 		</header>
 		<hr class="mb-3">
 		<main class="max-w-[100ch] font-prose post-content">