Improved time handling

Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>

astro.config.mjs

@@ -1,5 +1,4 @@
 import { defineConfig } from 'astro/config';
-
 import vue from "@astrojs/vue";
 
 // https://astro.build/config

package.json

@@ -5,12 +5,13 @@
   "private": true,
   "scripts": {
     "dev": "astro dev",
-    "start": "astro dev",
+    "start": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/deno": "1.1.0",
     "@astrojs/vue": "1.1.0",
     "astro": "^1.4.2",
     "vue": "^3.2.30"

pnpm-lock.yaml

@@ -1,12 +1,14 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@astrojs/deno': 1.1.0
   '@astrojs/vue': 1.1.0
   astro: ^1.4.2
   sass: 1.55.0
   vue: ^3.2.30
 
 dependencies:
+  '@astrojs/deno': 1.1.0
   '@astrojs/vue': 1.1.0_whxeo4miwfmfgowxp5hpxvmcbm
   astro: 1.4.2_sass@1.55.0
   vue: 3.2.40
@@ -32,6 +34,12 @@ packages:
     resolution: {integrity: sha512-GE7uLvH7rSHuTHdMun+867TWsgYNYsaGuhvXsywcaabl4W4n/3b1kzgzrIsrXYBo51J0k6qD33mVdsHdvwv5rw==}
     dev: false
 
+  /@astrojs/deno/1.1.0:
+    resolution: {integrity: sha512-oPjKmQQkLZPD3tl+Mur86SguTPlOYwASByAmRWAGOesmHgktTHebuJprc2dvqfmbao6mZbToZPLm63IqdJqlRg==}
+    dependencies:
+      esbuild: 0.14.54
+    dev: false
+
   /@astrojs/language-server/0.26.2:
     resolution: {integrity: sha512-9nkfdd6CMXLDIJojnwbYu5XrYfOI+g63JlktOlpFCwFjFNpm1u0e/+pXXmj6Zs+PkSTo0kV1UM77dRKRS5OC1Q==}
     hasBin: true

src/components/TimeFormat.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { defineComponent } from 'vue'
+
+type TimeFormatProps = {
+    day: string | undefined,
+    month: string | undefined,
+    year: string | undefined,
+    hour: string | undefined,
+    minute: string | undefined,
+    second: string | undefined,
+    weekday: string | undefined,
+}
+
+const props = defineProps({
+    formats: {
+        type: Array<TimeFormatProps>,
+        required: true,
+    },
+    dFormat: {
+        type: String,
+        required: true,
+    },
+})
+
+const crntTime = Date.now();
+</script>
+
+<template>
+    <code>
+        {{ `<t:${Math.floor(crntTime / 1000)}:${props.dFormat}>` }}
+	</code>
+	<span>
+		to get
+		<code>
+            <span v-for="format in props.formats" :key="formats.findIndex(format)">
+                {{Intl.DateTimeFormat(Intl.Locale, format).format(crntTime) + ' '}}
+            </span>
+        </code>
+    </span>
+</template>

src/components/UnixTime.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+const crntTime = Date.now();
+</script>
+
+<template>
+    <p>The current time in Unix Epoch: <code>{{ Math.floor(crntTime / 1000) }}</code> <br /> or <code>{{crntTime}}</code> in Unix millis</p>
+</template>

src/pages/utilities/time.astro

@@ -3,8 +3,9 @@
 import NavBar from "../../components/NavBar.astro";
 import TimeZone from "../../components/TimeZone.vue";
 import Layout from "../../layouts/Layout.astro";
+import TimeFormat from "../../components/TimeFormat.vue";
+import UnixTime from "../../components/UnixTime.vue";
 
-const crntTime = Date.now();
 const navLinks = [
 	{
 		img: {
@@ -25,124 +26,53 @@ const navLinks = [
 ];
 ---
 
-<Layout title="Time" navLinks={navLinks}>
+<Layout title="VännerBästa | Time" navLinks={navLinks}>
 	<div class="container">
 		<h1 class="title">Time Utilities</h1>
 		<p>
 			Your current timezone:
 			<TimeZone client:load />
 		</p>
-		<p>The current time in Unix Epoch: <code>{ Math.floor(crntTime / 1000) }</code> <br /> or <code>{crntTime}</code> in Unix millis</p>
+		
+		<UnixTime client:load/>
 
 		<p>
 			To format the time for Discord, you can use: <br />
-			<code>
+			<TimeFormat formats={[{
-				{ `<t:${Math.floor(crntTime / 1000)}:f>` }
-			</code>
-			<span>
-				to get
-				<code
-					>{
-						Intl.DateTimeFormat(Intl.Locale, {
 							day: 'numeric',
 							month: 'long',
 							year: 'numeric',
-						}).format(crntTime)
+						}, {hour: '2-digit', minute: '2-digit'}]} dFormat="f" client:load />
-					}
-					{
-						Intl.DateTimeFormat(Intl.Locale, {
-							hour: '2-digit',
-							minute: '2-digit',
-						}).format(crntTime)
-					}</code
-				></span
-			>
 			<br />
-			<code>
+			<TimeFormat formats={[{
-				{ `<t:${Math.floor(crntTime / 1000)}:F>` }
-			</code>
-			<span>
-				to get
-				<code
-					>{
-						Intl.DateTimeFormat(Intl.Locale, {
 							weekday: 'long',
 							day: 'numeric',
 							month: 'long',
 							year: 'numeric',
-						}).format(crntTime)
+						}, { hour: '2-digit', minute: '2-digit', }]} dFormat="F" client:load />
-					}
+			<br />
-					{
+			<TimeFormat formats={[{
-						Intl.DateTimeFormat(Intl.Locale, {
 							hour: '2-digit',
 							minute: '2-digit',
-						}).format(crntTime)
+						}]} dFormat="t" client:load />
-					}</code
-				></span
-			>
 			<br />
-			<code>
+			<TimeFormat formats={[{
-				{ `<t:${Math.floor(crntTime / 1000)}:t>` }
-			</code>
-			<span>
-				to get
-				<code>
-					{
-						Intl.DateTimeFormat(Intl.Locale, {
-							hour: '2-digit',
-							minute: '2-digit',
-						}).format(crntTime)
-					}</code
-				></span
-			>
-			<br />
-			<code>
-				{ `<t:${Math.floor(crntTime / 1000)}:T>` }
-			</code>
-			<span>
-				to get
-				<code>
-					{
-						Intl.DateTimeFormat(Intl.Locale, {
 							hour: '2-digit',
 							minute: '2-digit',
 							second: '2-digit',
-						}).format(crntTime)
+						}]} dFormat="T" client:load />
-					}</code
-				></span
-			>
 			<br />
-			<code>
+			<TimeFormat formats={[{
-				{ `<t:${Math.floor(crntTime / 1000)}:d>` }
-			</code>
-			<span>
-				to get
-				<code>
-					{
-						Intl.DateTimeFormat(Intl.Locale, {
 							day: '2-digit',
                             month: '2-digit',
                             year: 'numeric',
-						}).format(crntTime)
+						}]} dFormat="d" client:load />
-					}</code
-				></span
-			>
 			<br />
-			<code>
+			<TimeFormat formats={[{
-				{ `<t:${Math.floor(crntTime / 1000)}:D>` }
-			</code>
-			<span>
-				to get
-				<code>
-					{
-						Intl.DateTimeFormat(Intl.Locale, {
 							day: 'numeric',
                             month: 'long',
                             year: 'numeric',
-						}).format(crntTime)
+						}]} dFormat="D" client:load />
-					}</code
-				></span
-			>
 		</p>
 	</div>
 </Layout>