Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-10-02 03:46:45 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add regional reference timestamps to social images

Browse Source
This commit is contained in:
Matt Isenhower
2026-09-27 18:22:46 -07:00
parent 42c0df51bf
commit c4b8fa2e23
1 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/layouts/ScreenshotLayout.vue
View File

@@ -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>