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

Added new time utility

Browse source
This commit is contained in:
Louis Hollingworth 2022-05-23 20:37:02 +01:00
parent f2aef2012b
commit 26e91acd9c
No known key found for this signature in database
GPG key ID: 1E66DEA3F5D623D1
10 changed files with 224 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/styles/_colours.scss
View file

@ -1,2 +1,3 @@
$primary-colour-light: rgb(127, 127, 127);
$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%);

3
assets/styles/globals.scss
View file

@ -7,13 +7,12 @@ body {
}
.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 {

9
assets/styles/index.scss
View file

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

2
build_number
View file

@ -1 +1 @@
8
9

5
components/LinkCard.vue
View file

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

29
components/NavBar.vue
View file

@ -1,23 +1,44 @@
<template>
<nav>
<div v-for="link in links" :key="link">
<NuxtLink :to="link.to" class="nav-button">
<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 {
margin: 0 auto;
position: -webkit-sticky;
position: sticky;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1rem;
}
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>

2
pages/index.vue
View file

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

16
pages/utilities/birthdays.vue
View file

@ -16,27 +16,23 @@
</div>
</template>
<script>
export default {
data() {
return {
navLinks: [
<script setup>
const navLinks = [
{
img: {
name: '/icons/arrow-left.svg',
alt: 'Back to Utilities',
},
to: '/utilities',
name: "Utilities",
},
{
img: {
name: '/icons/home.svg',
alt: 'Home',
alt: 'Go Home',
},
to: '/',
name: "Home",
},
],
};
},
};
];
</script>

18
pages/utilities/index.vue
View file

@ -2,24 +2,22 @@
<NavBar :links="navLinks" />
<div class="container">
<h1 class="title">Utilities for the Discord Server</h1>
<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: [
<script setup>
const navLinks = [
{
img: {
name: '/icons/home.svg',
alt: 'Home',
alt: 'Go Home',
},
to: '/',
name: "Home",
},
],
};
},
};
];
</script>

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

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