made time display client-side

src/components/BlogList.svelte

@@ -3,6 +3,7 @@
   import { onMount } from "svelte";
   import { SvelteMap } from "svelte/reactivity";
   import { parseTime, printTime } from "../utils/time";
+  import Time from "./Time.svelte";
 
   interface Props {
     posts: CollectionEntry<"blog">[];
@@ -69,11 +70,9 @@
             <address class="inline-block post-meta col-start-2 md:ml-3">
               {post.data.author}
             </address>
-            <time class="inline-block post-meta col-start-3 lg:ml-1"
+            <div class="inline-block post-meta col-start-3 lg:ml-1">
-              datetime={parseTime(post.data.pubDate).toString()}
+              <Time time={parseTime(post.data.pubDate)} />
-            >
+            </div>
-              {printTime(parseTime(post.data.pubDate))}
-            </time>
             <div class="col-span-3">{post.data.summary}</div>
           </div>
         </a>

src/components/Time.svelte

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

src/content/blog/2025-01-27T11_47_async_iterator_map.mdx

@@ -2,7 +2,7 @@
 title: Async Iterator::map
 author: lbfalvy
 tags: [programming, rust, langdev]
-pubDate: 2025-01-30T17:00Z[UTC]
+pubDate: 2025-01-29T10:58Z[UTC]
 summary: On the state of async Rust, limitations of the type system, and Iterator::map
 unlisted: false
 ---

src/layouts/BlogPost.astro

@@ -2,6 +2,7 @@
 import type { CollectionEntry } from 'astro:content';
 import Main from './Main.astro';
 import { parseTime, printTime } from '../utils/time';
+import Time from '../components/Time.svelte';
 
 type Props = CollectionEntry<'blog'>['data'];
 
@@ -12,12 +13,10 @@ 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 datetime={parseTime(pubDate).toString()}
+			<Time time={parseTime(pubDate)} />
-				class="post-meta inline-block col-start-3"
-			>{printTime(parseTime(pubDate))}</time>
 			<div class="italic tracking-[3px] text-emph-fg col-start-2 col-span-2 m-2 mt-0">{summary}</div>
 			{updatedDate && <div>
-				Amended <time datetime={parseTime(updatedDate).toString()}>{printTime(parseTime(updatedDate))}</time>
+				Amended <Time time={parseTime(updatedDate)} />
 			</div>}
 		</header>
 		<hr class="mb-3">