lucxjo/friends-best
1
0
Fork 0
Code Issues 2 Pull requests Packages Projects Releases Wiki Activity

Improved time handling

Browse source 
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
This commit is contained in:
Louis Hollingworth 2022-10-08 16:52:34 +01:00
parent 426ae17597
commit c180404e15
Signed by: lucxjo
GPG key ID: B140F8923EF88DA9
6 changed files with 77 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
astro.config.mjs
View file

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

3
package.json
View file

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

8
pnpm-lock.yaml
View file

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

40
src/components/TimeFormat.vue Normal file
View file

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

9
src/components/UnixTime.vue Normal file
View file

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

106
src/pages/utilities/time.astro
View file

@ -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>
{ `<t:${Math.floor(crntTime / 1000)}:f>` }
</code>
<span>
to get
<code
>{
Intl.DateTimeFormat(Intl.Locale, {
<TimeFormat formats={[{
day: 'numeric',
month: 'long',
year: 'numeric',
}).format(crntTime)
}
{
Intl.DateTimeFormat(Intl.Locale, {
hour: '2-digit',
minute: '2-digit',
}).format(crntTime)
}</code
></span
>
}, {hour: '2-digit', minute: '2-digit'}]} dFormat="f" client:load />
<br />
<code>
{ `<t:${Math.floor(crntTime / 1000)}:F>` }
</code>
<span>
to get
<code
>{
Intl.DateTimeFormat(Intl.Locale, {
<TimeFormat formats={[{
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric',
}).format(crntTime)
}
{
Intl.DateTimeFormat(Intl.Locale, {
}, { hour: '2-digit', minute: '2-digit', }]} dFormat="F" client:load />
<br />
<TimeFormat formats={[{
hour: '2-digit',
minute: '2-digit',
}).format(crntTime)
}</code
></span
>
}]} dFormat="t" client:load />
<br />
<code>
{ `<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, {
<TimeFormat formats={[{
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
}).format(crntTime)
}</code
></span
>
}]} dFormat="T" client:load />
<br />
<code>
{ `<t:${Math.floor(crntTime / 1000)}:d>` }
</code>
<span>
to get
<code>
{
Intl.DateTimeFormat(Intl.Locale, {
<TimeFormat formats={[{
day: '2-digit',
month: '2-digit',
year: 'numeric',
}).format(crntTime)
}</code
></span
>
}]} dFormat="d" client:load />
<br />
<code>
{ `<t:${Math.floor(crntTime / 1000)}:D>` }
</code>
<span>
to get
<code>
{
Intl.DateTimeFormat(Intl.Locale, {
<TimeFormat formats={[{
day: 'numeric',
month: 'long',
year: 'numeric',
}).format(crntTime)
}</code
></span
>
}]} dFormat="D" client:load />
</p>
</div>
</Layout>