Interpret dates in client correctly

apps/web/src/common/util.ts

@@ -0,0 +1,13 @@
+// Update timestamps are saved at UTC in the database.
+// Interpreting the dates in the client timezone may change the date, so parse date explicitly.
+// See https://github.com/lindylearn/aboutideasnow/issues/8
+export function getUTCDate(date: Date) {
+    const utcDate = new Date(date.toISOString().slice(0, 10));
+
+    return new Intl.DateTimeFormat("en-US", {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+        timeZone: "UTC"
+    }).format(utcDate);
+}

apps/web/src/components/Form.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { enhance } from "$app/forms";
     import { colorPalette } from "../common/constants"; // Adjust the import path as necessary
+    import { getUTCDate } from "../common/util";
     import type { ActionData } from "../routes/about/$types";
     import posthog from "posthog-js";
 
@@ -25,11 +26,7 @@
                             {new URL(post.url).hostname}{new URL(post.url).pathname}
                         </span>
                         {#if post.updatedAt && new Date(post.updatedAt).getFullYear() > 1970}
-                            last updated at {new Intl.DateTimeFormat("en-US", {
-                                month: "long",
-                                day: "numeric",
-                                year: "numeric"
-                            }).format(new Date(post.updatedAt))}
+                            last updated at {getUTCDate(new Date(post.updatedAt))}
                         {:else}
                             without update time
                         {/if}

apps/web/src/components/IdeaCard.svelte

@@ -2,6 +2,7 @@
     import type { Post } from "@repo/core/generated/prisma-client";
     import posthog from "posthog-js";
     import { colorPalette } from "../common/constants";
+    import { getUTCDate } from "../common/util";
 
     export let post: Post;
 
@@ -44,22 +45,13 @@
                 </div>
             </div>
         </div>
-        <!-- <div class="flex items-center gap-1">
-            {#each Array(3) as _}
-                <div class="w-3 h-3 rounded-full bg-light" />
-            {/each}
-        </div> -->
     </div>
     <div class="p-4">
         <div
             class="text-sm whitespace-pre-wrap overflow-hidden line-clamp-[10] font-mono font-normal"
         >
             {#if date && date.getFullYear() > 1970}
-                Updated {new Intl.DateTimeFormat("en-US", {
-                    month: "long",
-                    day: "numeric",
-                    year: "numeric"
-                }).format(date)}
+                Updated {getUTCDate(date)}
                 <!-- Use HTML to easily style search highlights -->
                 <br /><br />{/if}{@html post.content}
             <!-- <div
@@ -68,18 +60,4 @@
             /> -->
         </div>
     </div>
-
-    <!-- Maybe the updated date looks less distracting inside the post text? -->
-    <!-- {#if post.updatedAt && post.updatedAt.getFullYear() > 1970}
-        <div class="p-2">
-            <div class="text-xs font-bold uppercase text-slate-500">Last updated:</div>
-            <div class="font-sans font-bold text-slate-700">
-                {new Intl.DateTimeFormat("en-US", {
-                    month: "long",
-                    day: "numeric",
-                    year: "numeric"
-                }).format(post.updatedAt)}
-            </div>
-        </div>
-    {/if} -->
 </a>

apps/web/src/routes/+page.server.ts

@@ -1,5 +1,5 @@
 import { getDatabaseClient } from "@repo/core/dist";
-import type { PostType } from "@repo/core/generated/prisma-client";
+import type { Post, PostType } from "@repo/core/generated/prisma-client";
 import { handleSubmit } from "../common/formActions.js";
 
 export async function load({ url, setHeaders }): Promise<{