From 26e91acd9c67388db1e466f3093f440ff2ac9e59 Mon Sep 17 00:00:00 2001
From: Ludoviko <me@ludoviko.ch>
Date: Mon, 23 May 2022 20:37:02 +0100
Subject: [PATCH] Added new time utility

---
 assets/styles/_colours.scss   |   5 +-
 assets/styles/globals.scss    |   5 +-
 assets/styles/index.scss      |   9 ++-
 build_number                  |   2 +-
 components/LinkCard.vue       |   5 +-
 components/NavBar.vue         |  39 ++++++---
 pages/index.vue               |   2 +-
 pages/utilities/birthdays.vue |  40 +++++-----
 pages/utilities/index.vue     |  30 ++++---
 pages/utilities/time.vue      | 144 ++++++++++++++++++++++++++++++++++
 10 files changed, 224 insertions(+), 57 deletions(-)
 create mode 100644 pages/utilities/time.vue

diff --git a/assets/styles/_colours.scss b/assets/styles/_colours.scss
index c77726d..932c410 100644
--- a/assets/styles/_colours.scss
+++ b/assets/styles/_colours.scss
@@ -1,2 +1,3 @@
-$primary-colour-light: rgb(127, 127, 127);
-$bg-colour-light: rgb(187, 187, 187);
\ No newline at end of file
+$bg-colour-light: rgb(187, 187, 187);
+$accent-colour-light: rgb(24, 96, 231);
+$filter-accent-colour-light: invert(34%) sepia(96%) saturate(4970%) hue-rotate(216deg) brightness(95%) contrast(91%);
\ No newline at end of file
diff --git a/assets/styles/globals.scss b/assets/styles/globals.scss
index 9cd3ea0..b9b0e92 100644
--- a/assets/styles/globals.scss
+++ b/assets/styles/globals.scss
@@ -3,17 +3,16 @@
 
 body {
 	font-family: 'Ubuntu', sans-serif !important;
-    background-color: colours.$bg-colour-light;
+	background-color: colours.$bg-colour-light;
 }
 
 .container {
-	min-height: 100vh;
+	min-height: 80vh;
 	padding: 0 0.5rem;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	height: 100vh;
 }
 
 .title {
diff --git a/assets/styles/index.scss b/assets/styles/index.scss
index a992bfb..7959809 100644
--- a/assets/styles/index.scss
+++ b/assets/styles/index.scss
@@ -21,7 +21,14 @@
 	color: #eaeaea;
 }
 
-.grid {
+.grid-2 {
+	display: grid;
+	align-items: center;
+	justify-content: center;
+	grid-template-columns: 1fr 1fr;
+}
+
+.grid-3 {
 	display: grid;
 	align-items: center;
 	justify-content: center;
diff --git a/build_number b/build_number
index 45a4fb7..ec63514 100644
--- a/build_number
+++ b/build_number
@@ -1 +1 @@
-8
+9
diff --git a/components/LinkCard.vue b/components/LinkCard.vue
index 6a61548..a16254e 100644
--- a/components/LinkCard.vue
+++ b/components/LinkCard.vue
@@ -34,6 +34,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../assets/styles/colours';
 .card {
 	margin: 1rem;
 	padding: 1.5rem;
@@ -58,8 +59,8 @@ export default {
 .card:hover,
 .card:focus,
 .card:active {
-	color: #0070f3 !important;
-	border-color: #0070f3;
+	color: colours.$accent-colour-light !important;
+	border-color: colours.$accent-colour-light;
 }
 
 @media (max-width: 600px) {
diff --git a/components/NavBar.vue b/components/NavBar.vue
index eb4aa39..71dc78f 100644
--- a/components/NavBar.vue
+++ b/components/NavBar.vue
@@ -1,23 +1,44 @@
 <template>
 	<nav>
 		<div v-for="link in links" :key="link">
-			<NuxtLink :to="link.to" class="nav-button">
-				<img :src="link.img.name" :alt="link.img.alt" />
-			</NuxtLink>
+			<div class="nav-button">
+				<NuxtLink :to="link.to">
+					<img :src="link.img.name" :alt="link.img.alt" />
+					<p>{{ link.name }}</p>
+				</NuxtLink>
+			</div>
 		</div>
 	</nav>
 </template>
 
 <style lang="scss" scoped>
+@use '../assets/styles/colours';
 nav {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 1rem;
+	margin: 0 auto;
+	position: -webkit-sticky;
+	position: sticky;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
+
+nav :hover {
+	filter: colours.$filter-accent-colour-light;
+}
+
+nav a {
+	text-decoration: none;
+	color: black;
+}
+
+p {
+	padding: 0;
+	margin: 0;
+}
+
 .nav-button {
-    padding: .25rem;
-	margin: .25rem;
+	margin: 0 1rem;
+	padding: 0.5rem;
 }
 </style>
 
diff --git a/pages/index.vue b/pages/index.vue
index e221162..f0d3d93 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,7 +6,7 @@
 			spaces.
 		</p>
 		<strong>It's official! There is going to be another season!</strong>
-		<div class="grid">
+		<div class="grid-3">
 			<LinkCard
 				title="Watch"
 				to="https://www.netflix.com/title/81210762"
diff --git a/pages/utilities/birthdays.vue b/pages/utilities/birthdays.vue
index 5a9e2c6..05befa6 100644
--- a/pages/utilities/birthdays.vue
+++ b/pages/utilities/birthdays.vue
@@ -16,27 +16,23 @@
 	</div>
 </template>
 
-<script>
-export default {
-	data() {
-		return {
-			navLinks: [
-				{
-					img: {
-						name: '/icons/arrow-left.svg',
-						alt: 'Back to Utilities',
-					},
-					to: '/utilities',
-				},
-				{
-					img: {
-						name: '/icons/home.svg',
-						alt: 'Home',
-					},
-					to: '/',
-				},
-			],
-		};
+<script setup>
+const navLinks = [
+	{
+		img: {
+			name: '/icons/arrow-left.svg',
+			alt: 'Back to Utilities',
+		},
+		to: '/utilities',
+        name: "Utilities",
 	},
-};
+	{
+		img: {
+			name: '/icons/home.svg',
+			alt: 'Go Home',
+		},
+		to: '/',
+        name: "Home",
+	},
+];
 </script>
diff --git a/pages/utilities/index.vue b/pages/utilities/index.vue
index 9cc2639..9556df8 100644
--- a/pages/utilities/index.vue
+++ b/pages/utilities/index.vue
@@ -2,24 +2,22 @@
 	<NavBar :links="navLinks" />
 	<div class="container">
 		<h1 class="title">Utilities for the Discord Server</h1>
-		<LinkCard title="Birthdays" to="/utilities/birthdays" />
+		<div class="grid-2">
+			<LinkCard title="Birthdays" to="/utilities/birthdays" />
+			<LinkCard title="Time" to="/utilities/time" />
+		</div>
 	</div>
 </template>
 
-<script>
-export default {
-	data() {
-		return {
-			navLinks: [
-				{
-					img: {
-						name: '/icons/home.svg',
-                        alt: 'Home',
-					},
-					to: '/',
-				},
-			],
-		};
+<script setup>
+const navLinks = [
+	{
+		img: {
+			name: '/icons/home.svg',
+			alt: 'Go Home',
+		},
+		to: '/',
+        name: "Home",
 	},
-};
+];
 </script>
diff --git a/pages/utilities/time.vue b/pages/utilities/time.vue
new file mode 100644
index 0000000..e275952
--- /dev/null
+++ b/pages/utilities/time.vue
@@ -0,0 +1,144 @@
+<template>
+	<NavBar :links="navLinks" />
+	<div class="container">
+		<h1 class="title">Time Utilities</h1>
+		<p>
+			Your current timezone:
+			{{ Intl.DateTimeFormat().resolvedOptions().timeZone }}
+		</p>
+		<p>The current time in Unix Epoch: <code>{{ Math.floor(crntTime / 1000) }}</code> <br /> or <code>{{crntTime}}</code> in Unix millis</p>
+
+		<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, {
+							day: 'numeric',
+							month: 'long',
+							year: 'numeric',
+						}).format(crntTime)
+					}}
+					{{
+						Intl.DateTimeFormat(Intl.Locale, {
+							hour: '2-digit',
+							minute: '2-digit',
+						}).format(crntTime)
+					}}</code
+				></span
+			>
+			<br />
+			<code>
+				{{ `<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)
+					}}
+					{{
+						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',
+						}).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)
+					}}</code
+				></span
+			>
+			<br />
+			<code>
+				{{ `<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)
+					}}</code
+				></span
+			>
+			<br />
+			<code>
+				{{ `<t:${Math.floor(crntTime / 1000)}:D>` }}
+			</code>
+			<span>
+				to get
+				<code>
+					{{
+						Intl.DateTimeFormat(Intl.Locale, {
+							day: 'numeric',
+                            month: 'long',
+                            year: 'numeric',
+						}).format(crntTime)
+					}}</code
+				></span
+			>
+		</p>
+	</div>
+</template>
+
+<script setup>
+const crntTime = Date.now();
+const navLinks = [
+	{
+		img: {
+			name: '/icons/arrow-left.svg',
+			alt: 'Back to Utilities',
+		},
+		to: '/utilities',
+		name: 'Utilities',
+	},
+	{
+		img: {
+			name: '/icons/home.svg',
+			alt: 'Go Home',
+		},
+		to: '/',
+		name: 'Home',
+	},
+];
+</script>