From 0db85f6ce51a0d64f227da6f3d4dd89806ab5d84 Mon Sep 17 00:00:00 2001
From: "Bethlenfalvi, Lorinc (ext)"
 <lorinc.bethlenfalvi.ext@siemens-energy.com>
Date: Wed, 29 Jan 2025 12:00:58 +0100
Subject: [PATCH] made time display client-side

---
 src/components/BlogList.svelte                     |  9 ++++-----
 src/components/Time.svelte                         | 14 ++++++++++++++
 .../blog/2025-01-27T11_47_async_iterator_map.mdx   |  2 +-
 src/layouts/BlogPost.astro                         |  7 +++----
 4 files changed, 22 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Time.svelte

diff --git a/src/components/BlogList.svelte b/src/components/BlogList.svelte
index 5e5143f..8a76928 100644
--- a/src/components/BlogList.svelte
+++ b/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"
-              datetime={parseTime(post.data.pubDate).toString()}
-            >
-              {printTime(parseTime(post.data.pubDate))}
-            </time>
+            <div class="inline-block post-meta col-start-3 lg:ml-1">
+              <Time time={parseTime(post.data.pubDate)} />
+            </div>
             <div class="col-span-3">{post.data.summary}</div>
           </div>
         </a>
diff --git a/src/components/Time.svelte b/src/components/Time.svelte
new file mode 100644
index 0000000..16492ed
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/content/blog/2025-01-27T11_47_async_iterator_map.mdx b/src/content/blog/2025-01-27T11_47_async_iterator_map.mdx
index 28dfe47..6c32eb1 100644
--- a/src/content/blog/2025-01-27T11_47_async_iterator_map.mdx
+++ b/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
 ---
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 1d82cbb..3a21187 100644
--- a/src/layouts/BlogPost.astro
+++ b/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()}
-				class="post-meta inline-block col-start-3"
-			>{printTime(parseTime(pubDate))}</time>
+			<Time time={parseTime(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 datetime={parseTime(updatedDate).toString()}>{printTime(parseTime(updatedDate))}</time>
+				Amended <Time time={parseTime(updatedDate)} />
 			</div>}
 		</header>
 		<hr class="mb-3">