From c4b8fa2e23ac1d16a7b3db4839bf6adf5e1e995f Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sun, 27 Sep 2026 18:22:46 -0700
Subject: [PATCH] Add regional reference timestamps to social images

---
 src/layouts/ScreenshotLayout.vue | 59 +++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/layouts/ScreenshotLayout.vue b/src/layouts/ScreenshotLayout.vue
index 186e6d2..f3ea35f 100644
--- a/src/layouts/ScreenshotLayout.vue
+++ b/src/layouts/ScreenshotLayout.vue
@@ -6,41 +6,41 @@
 
     <div class="h-12 m-4 bg-black/50 backdrop-blur-xs rounded-full absolute bottom-0 inset-x-0">
       <div class="flex justify-between h-full font-splatoon2 text-sm text-zinc-300">
-        <div class="flex justify-start items-center space-x-6 ml-4">
+        <div class="flex justify-start items-center space-x-4 ml-4 shrink-0">
           <div>
             <img src="@/assets/img/favicon.svg" class="h-16 -my-8" />
           </div>
-          <div class="flex items-center space-x-8">
-            <div class="text-3xl text-zinc-50">
+          <div class="flex items-center space-x-4">
+            <div class="text-2xl text-zinc-50">
               {{ props.header }}
             </div>
             <div>
               <img src="@/assets/img/bluesky-white.svg" width="15" height="15" class="inline" />
               @splatoon3.ink
             </div>
-            <!-- <div>
-              <img src="@/assets/img/fediverse-white.svg" width="14" height="14" class="inline m-[3px]" />
-              @splatoon3ink@splatoon3.ink
-            </div> -->
-            <!-- <div>
-              splatoon3.ink
-            </div> -->
           </div>
         </div>
-        <!-- <div class="flex justify-end items-center mr-6">
-          {{ formatDateTime(time.now) }}
-        </div> -->
+        <div class="flex items-center gap-5 mx-5 whitespace-nowrap">
+          <div class="text-zinc-100">
+            {{ timestamps[0] }}
+          </div>
+          <div class="grid grid-flow-col grid-rows-2 gap-x-4 text-xs leading-5 text-right">
+            <div v-for="timestamp in timestamps.slice(1)" :key="timestamp">
+              {{ timestamp }}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
-    <div class="fixed bottom-0 right-4 z-50">
+    <div class="fixed bottom-20 right-4 z-50">
       <TimeOffsetSelector v-if="isDev" class="mb-4" />
     </div>
   </main>
 </template>
 
 <script setup>
-import { nextTick, onUnmounted, watch, watchEffect } from 'vue';
+import { computed, nextTick, onUnmounted, watch, watchEffect } from 'vue';
 import { useRoute } from 'vue-router';
 import { markScreenshotReady, screenshotReadyAttribute } from '@/common/screenshot.mjs';
 import { useDataStore } from '@/stores/data';
@@ -80,18 +80,31 @@ onUnmounted(() => {
 watchEffect(() => {
   if (route.query.time) {
     time.stopUpdatingNow();
-    time.setNow(route.query.time);
+    time.setNow(Number(route.query.time));
   }
 });
 
-// function formatDateTime(date) {
-//   date = new Date(date);
+const timestampFormats = [
+  { locale: 'en-GB', timeZone: 'UTC', hour12: false, month: 'long' },
+  { locale: 'en-US', timeZone: 'America/Los_Angeles', hour12: true },
+  { locale: 'en-US', timeZone: 'America/New_York', hour12: true },
+  { locale: 'en-GB', timeZone: 'Europe/London', hour12: false },
+  { locale: 'ja-JP', timeZone: 'Asia/Tokyo', hour12: false },
+].map(({ locale, ...options }) => new Intl.DateTimeFormat(locale, {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+  timeZoneName: 'short',
+  ...options,
+}));
 
-//   return date.toLocaleString(undefined, {
-//     dateStyle: 'long',
-//     timeStyle: 'short',
-//   })
-// }
+const timestamps = computed(() => {
+  const date = new Date(time.now);
+
+  return timestampFormats.map(format => format.format(date).replace(/\s+at\s+/u, ' '));
+});
 
 const isDev = import.meta.env.DEV;
 </script>