Now has all of the functions as the Astro site.

Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
This commit is contained in:
Louis Hollingworth 2023-05-09 19:55:32 +01:00
parent 2e98cb39f4
commit f9e7e5480c
Signed by: lucxjo
GPG key ID: A11415CB3DC7809B
12 changed files with 2618 additions and 3316 deletions

View file

@ -1,12 +1,12 @@
<template>
<div class="grid h-screen place-items-center">
<div class="grid place-items-center">
<h1 class="text-3xl font-bold underline">Vänner Bästa</h1>
<div class="mt-10 place-items-center">
<h1 class="text-6xl font-bold underline">Vänner Bästa</h1>
<div class="mt-10 mx-4 place-items-center">
<p>A Young Royals fan website with links to different discussion spaces.</p>
<strong class="pt-5">Season 2 is out now!</strong>
</div>
<div class="grid grid-cols-2 lg:grid-cols-3 mt-10">
<div class="grid grid-cols-2 md:grid-cols-3 mt-10">
<LLink v-for="link in links" :to="link.href" :title="link.title" />
</div>
</div>
@ -31,10 +31,6 @@ const links: Array<{href: string, title: string}> = [
href: "https://www.talkable.com/x/IchxFl",
title: "Babbel (ref)"
},
{
href: "https://masto.nu/yrdiscord",
title: "Mastodon"
},
{
href: "/utilities",
title: "Discord Utilities"

View file

@ -0,0 +1,19 @@
<template>
<div>
<div class="grid h-screen place-items-center">
<div class="grid place-items-center">
<h1 class="text-6xl font-bold underline p-4">Birthdays</h1>
<p class="p-4">
Discord bots are changing. <br />
This means that we can no longer provide you with the command to set your birthday. <br />
Instead, this page now gives you your timezone for use with Discord bots.
</p>
<h2 class="p-4 text-4xl" >Your timezone: <span class="underline" >{{ timezone }}</span></h2>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
</script>

25
pages/utilities/index.vue Normal file
View file

@ -0,0 +1,25 @@
<template>
<div>
<div class="grid h-screen place-items-center">
<div class="grid place-items-center">
<h1 class="text-6xl font-bold underline">Vänner Bästa</h1>
<div class="grid grid-cols-2 mt-10">
<LLink v-for="link in links" :to="link.href" :title="link.title" />
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const links: Array<{href: string, title: string}> = [
{
href: "/utilities/birthdays",
title: "Birthdays"
},
{
href: "/utilities/time",
title: "Time"
},
]
</script>

51
pages/utilities/time.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<div>
<div class="grid h-screen place-items-center">
<div class="grid place-items-center">
<h1 class="text-6xl font-bold underline p-4">Time Utilities</h1>
<p class="p-4" >Your current timezone: {{ timezone }}</p>
<p>
The current time in Unix Epoch: <code>{{ Math.floor(unix/1000) }}</code> <br />
or <code>{{ unix }}</code> in milliseconds.
</p>
<p class="p-4">
To format the time for Discord, you can use: <br />
<TimeFormat :crnt-time="unix" d-format="f" :format="{
dateStyle: 'long',
timeStyle: 'short',
hour12: false
}"/> <br />
<TimeFormat :format="{
dateStyle: 'full',
timeStyle: 'short',
hour12: false
}" dFormat="F" :crnt-time="unix" />
<br />
<TimeFormat :format="{
timeStyle: 'short',
hour12: false
}" dFormat="t" :crnt-time="unix" />
<br />
<TimeFormat :format="{
timeStyle: 'medium',
hour12: false
}" dFormat="T" :crnt-time="unix" />
<br />
<TimeFormat :format="{
dateStyle: 'short'
}" dFormat="d" :crnt-time="unix" />
<br />
<TimeFormat :format="{
dateStyle: 'medium'
}" dFormat="D" :crnt-time="unix" />
</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const unix = Date.now();
</script>