Restored lost files and now serving from Go

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

.gitignore

@@ -18,3 +18,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+dist
+
+./friends-best

README.md

@@ -1,49 +1,35 @@
-# Welcome to [Astro](https://astro.build)
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
-
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
+# Friends Best
+A fan website for the Netflix series "Young Royals".
 
+## Contributing
+I suggest using [Just](https://github.com/casey/just) to help with building
+local changes. [PNPM](https://pnpm.io) is used for the package manager for the
+frontend and the server is written in [Go](https://go.dev).
+### Build Frontend
+```sh
+just build-fe
 ```
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── components/
-│   │   └── Card.astro
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
+or
+```sh
+cd fe
+pnpm build
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+### Build server
+```sh
+just build-server
+```
+or
+```sh
+go build ./server
+```
 
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+### Build all
+```sh
+just build-all
+```
 
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                | Action                                             |
-| :--------------------- | :------------------------------------------------- |
-| `npm install`          | Installs dependencies                              |
-| `npm run dev`          | Starts local dev server at `localhost:3000`        |
-| `npm run build`        | Build your production site to `./dist/`            |
-| `npm run preview`      | Preview your build locally, before deploying       |
-| `npm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
-| `npm run astro --help` | Get help using the Astro CLI                       |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+### Build and Run all
+```sh
+just serve
+```

fe/README.md

@@ -0,0 +1,49 @@
+# Welcome to [Astro](https://astro.build)
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
+
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                | Action                                             |
+| :--------------------- | :------------------------------------------------- |
+| `npm install`          | Installs dependencies                              |
+| `npm run dev`          | Starts local dev server at `localhost:3000`        |
+| `npm run build`        | Build your production site to `./dist/`            |
+| `npm run preview`      | Preview your build locally, before deploying       |
+| `npm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
+| `npm run astro --help` | Get help using the Astro CLI                       |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

fe/astro.config.mjs

@@ -1,7 +1,9 @@
 import { defineConfig } from 'astro/config';
 import vue from "@astrojs/vue";
 
+import tailwind from "@astrojs/tailwind";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [vue()]
-});
+  integrations: [vue(), tailwind()]
+});

fe/lib/getUser.ts

@@ -0,0 +1,11 @@
+import { prisma } from "~/server"
+
+export const getUserByDiscordId = async (discord_id: string) => {
+    const user = await prisma.user.findUnique({
+        where: {
+            discord_id
+        }
+    })
+
+    return user
+}

fe/package.json

@@ -11,12 +11,15 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/deno": "1.1.0",
-    "@astrojs/vue": "1.1.0",
-    "astro": "^1.4.2",
-    "vue": "^3.2.30"
+    "@astrojs/deno": "^5.0.1",
+    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/vue": "4.0.8",
+    "astro": "^4.3.7",
+    "tailwindcss": "^3.4.1",
+    "vue": "^3.4.19"
   },
   "devDependencies": {
-    "sass": "1.55.0"
+    "sass": "1.70.0",
+    "typescript": "^5.3.3"
   }
 }

fe/src/assets/styles/_colours.scss

@@ -0,0 +1,4 @@
+$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%);
+$filter-link-colour-dark: invert(99%) sepia(52%) saturate(532%) hue-rotate(308deg) brightness(100%) contrast(95%);

fe/src/assets/styles/globals.scss

@@ -3,7 +3,7 @@
 
 body {
 	font-family: 'Ubuntu', sans-serif !important;
-	background-color: colours.$bg-colour-light;
+	background-color: wheat !important;
 }
 
 .container {

fe/src/components/LinkCard.astro

@@ -9,11 +9,11 @@ const { to, title } = Astro.props;
 const isExternal = to.startsWith('http');
 ---
 { isExternal == true ? (
-	<a href={to} target="_blank" rel="noopener noreferrer" class="card">
+	<a href={to} target="_blank" rel="noopener noreferrer" class="bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:hover:bg-slate-600 m-4 px-5 py-5 md:px-10 rounded-3xl shadow-lg hover:shadow-xl">
 		<p>{title} →</p>
 	</a>
 ) : (
-	<a href={to} class="card">
+	<a href={to} class="bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:hover:bg-slate-600 m-4 px-5 py-5 md:px-10 rounded-3xl shadow-lg hover:shadow-xl">
 		<p>{title} →</p>
 	</a>
 )

fe/src/components/NavBar.astro

@@ -54,4 +54,13 @@ p {
 	margin: 0 1rem;
 	padding: 0.5rem;
 }
-</style>
+
+@media (prefers-color-scheme: dark) {
+    nav :not(:hover) {
+		filter: colours.$filter-link-colour-dark;
+	}
+	.nav-button :hover {
+		filter: invert(100%) sepia(25%) saturate(4030%) hue-rotate(177deg) brightness(98%) contrast(97%);
+	}
+}
+</style>

fe/src/layouts/Layout.astro

@@ -14,11 +14,13 @@ export interface Props {
 }
 
 const { title, navLinks } = Astro.props;
+import { ViewTransitions } from 'astro:transitions';
 ---
 
 <!DOCTYPE html>
 <html lang="en">
 	<head>
+		<ViewTransitions />
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -38,8 +40,8 @@ const { title, navLinks } = Astro.props;
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
 
 body {
-	font-family: 'Ubuntu', sans-serif !important;
 	background-color: colours.$bg-colour-light;
+	font-family: 'Ubuntu', sans-serif !important;
 }
 
 .container {
@@ -95,4 +97,12 @@ body {
 		grid-template-columns: 1fr 1fr;
 	}
 }
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #1E293B !important;
+        color: antiquewhite;
+    }
+}
 </style>

fe/src/pages/index.astro

@@ -4,15 +4,17 @@ import LinkCard from '../components/LinkCard.astro';
 ---
 
 <Layout title="Vänner Bästa">
-	<main>
-		<div class="container">
-		<h1 class="title">Vänner Bästa</h1>
-		<p>
-			A Young Royals fan website with links to different discussion
-			spaces.
-		</p>
-		<strong>Season 2 coming out 1st November 2022</strong>
-		<div class="grid-3">
+	<main class="grid place-items-center h-screen">
+		<div class="grid 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" >It's official! Series 3 is coming!</strong>
+		</div>
+		<div class="grid grid-cols-2 md:grid-cols-3 mt-10">
 			<LinkCard
 				title="Watch"
 				to="https://www.netflix.com/title/81210762"
@@ -34,4 +36,4 @@ import LinkCard from '../components/LinkCard.astro';
 		</div>
 	</div>
 	</main>
-</Layout>
+</Layout>

fe/src/pages/utilities/birthdays.astro

@@ -0,0 +1,42 @@
+---
+import TimeZone from "../../components/TimeZone.vue";
+import Layout from "../../layouts/Layout.astro";
+
+const navLinks = [
+	{
+		img: {
+			src: '/icons/arrow-left.svg',
+			alt: 'Back to Utilities',
+		},
+		to: '/utilities',
+        name: "Utilities",
+	},
+	{
+		img: {
+			src: '/icons/home.svg',
+			alt: 'Go Home',
+		},
+		to: '/',
+        name: "Home",
+	},
+];
+---
+
+<Layout title="Vänner Bästa | Birthdays"  navLinks={navLinks}>
+    <div class="container grid 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:
+				<TimeZone class="underline" client:load/>
+			</h2>
+		</div>
+	</div>
+</Layout>

fe/src/pages/utilities/index.astro

@@ -15,11 +15,13 @@ const navLinks = [
 ];
 ---
 <Layout title="Vänner Bästa | Utilities" navLinks={navLinks}>
-    <div class="container">
+    <div class="container grid place-items-center">
+	<div class="">
 		<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>
     </div>
-</Layout>
+</Layout>

fe/src/pages/utilities/time.astro

@@ -27,16 +27,17 @@ const navLinks = [
 ---
 
 <Layout title="VännerBästa | Time" navLinks={navLinks}>
-	<div class="container">
-		<h1 class="title">Time Utilities</h1>
-		<p>
+	<div class="container grid 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 client:load />
 		</p>
-		
+
 		<UnixTime client:load/>
 
-		<p>
+		<p class="p-4">
 			To format the time for Discord, you can use: <br />
 			<TimeFormat formats={[{
 							day: 'numeric',
@@ -75,4 +76,4 @@ const navLinks = [
 						}]} dFormat="D" client:only />
 		</p>
 	</div>
-</Layout>
+</Layout>

fe/tailwind.config.cjs

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {
+			colors: {
+				'wheat': "#F8EBD9"
+			}
+		},
+	},
+	plugins: [],
+}

go.work

@@ -0,0 +1,3 @@
+go 1.21.6
+
+use ./server

justfile

@@ -0,0 +1,20 @@
+build-fe:
+    cd ./fe && pnpm build && cd ..
+
+build-server:
+    go build ./server
+
+build-all:
+    cd ./fe && pnpm build && cp -r ./dist .. && cd ..
+    go build ./server
+
+git:
+    git add -A && git commit -sS && git push
+
+serve: build-all
+    ./friends-best
+
+go-tidy:
+    cd ./server && go mod tidy && cd ..
+go-get MOD:
+    cd ./server && go get {{MOD}} && cd ..

server/go.mod

@@ -0,0 +1,10 @@
+module git.ludoviko.ch/lucxjo/friends-best
+
+go 1.21.6
+
+require (
+	github.com/gorilla/mux v1.8.1
+	github.com/sirupsen/logrus v1.9.3
+)
+
+require golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8 // indirect

server/go.sum

@@ -0,0 +1,17 @@
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/gorilla/mux v1.8.1 h1:TuBL49tXwgrFYWhqrNgrUNEY92u81SPhu7sTdzQEiWY=
+github.com/gorilla/mux v1.8.1/go.mod h1:AKf9I4AEqPTmMytcMc0KkNouC66V3BtZ4qD5fmWSiMQ=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/sirupsen/logrus v1.9.3 h1:dueUQJ1C2q9oE3F7wvmSGAaVtTmUizReu6fjN8uqzbQ=
+github.com/sirupsen/logrus v1.9.3/go.mod h1:naHLuLoDiP4jHNo9R0sCBMtWGeIprob74mVsIT4qYEQ=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/testify v1.7.0 h1:nwc3DEeHmmLAfoZucVR881uASk0Mfjw8xYJ99tb5CcY=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8 h1:0A+M6Uqn+Eje4kHMK80dtF3JCXC4ykBgQG4Fe06QRhQ=
+golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c h1:dUUwHk2QECo/6vqA44rthZ8ie2QXMNeKRTHCNY2nXvo=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

server/main.go

@@ -0,0 +1,17 @@
+package main
+
+import (
+    "github.com/gorilla/mux"
+    "net/http"
+    log "github.com/sirupsen/logrus"
+)
+
+func main() {
+    r := mux.NewRouter()
+
+    r.PathPrefix("/").Handler(http.FileServer(http.Dir("./dist")))
+
+    if err := http.ListenAndServe(":3000", r); err != nil {
+        log.Fatalf("failed to start server: %v", err)
+    }
+}

server/src/assets/styles/_colours.scss

@@ -0,0 +1,4 @@
+$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%);
+$filter-link-colour-dark: invert(99%) sepia(52%) saturate(532%) hue-rotate(308deg) brightness(100%) contrast(95%);

server/src/assets/styles/globals.scss

@@ -0,0 +1,20 @@
+@use 'colours';
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
+
+body {
+	font-family: 'Ubuntu', sans-serif !important;
+	background-color: wheat !important;
+}
+
+.container {
+	min-height: 80vh;
+	padding: 0 0.5rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.title {
+	font-size: 3rem;
+}

server/src/assets/styles/index.scss

@@ -0,0 +1,3 @@
+@use 'colours';
+
+

server/src/components/Card.astro

@@ -0,0 +1,62 @@
+---
+export interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-color: white;
+		background-image: var(--accent-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+	}
+
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1rem 1.3rem;
+		border-radius: 0.35rem;
+		color: #111;
+		background-color: white;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+		color: #444;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent));
+	}
+</style>

server/src/components/LinkCard.astro

@@ -0,0 +1,58 @@
+---
+export interface Props {
+	title: string;
+	to: string;
+}
+
+const { to, title } = Astro.props;
+
+const isExternal = to.startsWith('http');
+---
+{ isExternal == true ? (
+	<a href={to} target="_blank" rel="noopener noreferrer" class="bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:hover:bg-slate-600 m-4 px-5 py-5 md:px-10 rounded-3xl shadow-lg hover:shadow-xl">
+		<p>{title} →</p>
+	</a>
+) : (
+	<a href={to} class="bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:hover:bg-slate-600 m-4 px-5 py-5 md:px-10 rounded-3xl shadow-lg hover:shadow-xl">
+		<p>{title} →</p>
+	</a>
+)
+}
+<style lang="scss">
+@use '../assets/styles/colours';
+.card {
+	margin: 1rem;
+	padding: 1.5rem;
+	text-align: left;
+	color: inherit;
+	text-decoration: none;
+	border: 2px solid #000;
+	border-radius: 20px;
+	transition: color 0.15s ease, border-color 0.15s ease;
+}
+.card p {
+	margin: 0;
+	font-size: 1.25rem;
+	line-height: 1.5;
+}
+
+.card:link,
+.card:visited {
+	color: #000;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+	color: colours.$accent-colour-light !important;
+	border-color: colours.$accent-colour-light;
+}
+
+@media (max-width: 600px) {
+	.card {
+		margin: 0.5rem;
+		padding: 1.25rem;
+		width: 9rem;
+	}
+}
+</style>

server/src/components/NavBar.astro

@@ -0,0 +1,66 @@
+---
+export interface Props {
+    links: {
+        to: string;
+        name: string;
+        img: {
+            src: string;
+            alt: string;
+        }
+    }[]
+}
+
+const { links } = Astro.props;
+---
+
+<nav>
+{ links.map(link => (
+    <div class="nav-button">
+				<a href={link.to}>
+					<img src={link.img.src} alt={link.img.alt} />
+					<p>{ link.name }</p>
+                </a>
+		</div>
+    ))
+}
+</nav>
+
+<style lang="scss">
+@use '../assets/styles/colours';
+nav {
+	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 {
+	margin: 0 1rem;
+	padding: 0.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+    nav :not(:hover) {
+		filter: colours.$filter-link-colour-dark;
+	}
+	.nav-button :hover {
+		filter: invert(100%) sepia(25%) saturate(4030%) hue-rotate(177deg) brightness(98%) contrast(97%);
+	}
+}
+</style>

server/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="Math.floor(Math.random()*1000)">
+                {{Intl.DateTimeFormat(Intl.Locale, format).format(crntTime) + ' '}}
+            </span>
+        </code>
+    </span>
+</template>

server/src/components/TimeZone.vue

@@ -0,0 +1,4 @@
+
+<template>
+    <span>{{Intl.DateTimeFormat().resolvedOptions().timeZone}}</span>
+</template>

server/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>

server/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

server/src/layouts/Layout.astro

@@ -0,0 +1,108 @@
+---
+import NavBar from '../components/NavBar.astro';
+
+export interface Props {
+	title: string;
+	navLinks: {
+		to: string;
+		name: string;
+		img: {
+			src: string;
+			alt: string;
+		}
+	}[] | undefined
+}
+
+const { title, navLinks } = Astro.props;
+import { ViewTransitions } from 'astro:transitions';
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<ViewTransitions />
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		{ navLinks != undefined ? (
+			<NavBar links={navLinks} />
+		) : (<!-- If there were NavLinks, they would be here -->)
+		}
+		<slot />
+	</body>
+</html>
+<style lang="scss" is:global>
+@use "../assets/styles/colours";
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
+
+body {
+	background-color: colours.$bg-colour-light;
+	font-family: 'Ubuntu', sans-serif !important;
+}
+
+.container {
+	min-height: 80vh;
+	padding: 0 0.5rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.title {
+	font-size: 3rem;
+}
+.footer {
+	width: 100%;
+	height: 100px;
+	border-top: 1px solid #eaeaea;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.footer a:hover {
+	color: #0070f3;
+}
+
+.footer a {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-grow: 1;
+	color: #eaeaea;
+}
+
+.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;
+	grid-template-columns: 1fr 1fr 1fr;
+}
+
+@media (max-width: 600px) {
+	.grid-3 {
+		width: 90%;
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #1E293B !important;
+        color: antiquewhite;
+    }
+}
+</style>

server/src/pages/index.astro

@@ -0,0 +1,39 @@
+---
+import Layout from '../layouts/Layout.astro';
+import LinkCard from '../components/LinkCard.astro';
+---
+
+<Layout title="Vänner Bästa">
+	<main class="grid place-items-center h-screen">
+		<div class="grid 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" >It's official! Series 3 is coming!</strong>
+		</div>
+		<div class="grid grid-cols-2 md:grid-cols-3 mt-10">
+			<LinkCard
+				title="Watch"
+				to="https://www.netflix.com/title/81210762"
+			/>
+			<LinkCard title="Discord" to="https://discord.gg/hyKVDeRJ8Y" />
+			<LinkCard
+				title="Reddit"
+				to="https://www.reddit.com/r/YoungRoyals/"
+			/>
+			<LinkCard
+				title="Babbel (ref)"
+				to="https://www.talkable.com/x/IchxFl"
+			/>
+			<LinkCard
+				title="Matrix"
+				to="https://matrix.to/#/#young-royals:matrix.org"
+			/>
+			<LinkCard title="Discord Utilities" to="/utilities" />
+		</div>
+	</div>
+	</main>
+</Layout>

server/src/pages/utilities/birthdays.astro

@@ -0,0 +1,42 @@
+---
+import TimeZone from "../../components/TimeZone.vue";
+import Layout from "../../layouts/Layout.astro";
+
+const navLinks = [
+	{
+		img: {
+			src: '/icons/arrow-left.svg',
+			alt: 'Back to Utilities',
+		},
+		to: '/utilities',
+        name: "Utilities",
+	},
+	{
+		img: {
+			src: '/icons/home.svg',
+			alt: 'Go Home',
+		},
+		to: '/',
+        name: "Home",
+	},
+];
+---
+
+<Layout title="Vänner Bästa | Birthdays"  navLinks={navLinks}>
+    <div class="container grid 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:
+				<TimeZone class="underline" client:load/>
+			</h2>
+		</div>
+	</div>
+</Layout>

server/src/pages/utilities/index.astro

@@ -0,0 +1,27 @@
+---
+import LinkCard from "../../components/LinkCard.astro";
+import NavBar from "../../components/NavBar.astro";
+import Layout from '../../layouts/Layout.astro';
+
+const navLinks = [
+	{
+		img: {
+			src: '/icons/home.svg',
+			alt: 'Go Home',
+		},
+		to: '/',
+        name: "Home",
+	},
+];
+---
+<Layout title="Vänner Bästa | Utilities" navLinks={navLinks}>
+    <div class="container grid place-items-center">
+	<div class="">
+		<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>
+    </div>
+</Layout>

server/src/pages/utilities/time.astro

@@ -0,0 +1,79 @@
+---
+
+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 navLinks = [
+	{
+		img: {
+			src: '/icons/arrow-left.svg',
+			alt: 'Back to Utilities',
+		},
+		to: '/utilities',
+		name: 'Utilities',
+	},
+	{
+		img: {
+			src: '/icons/home.svg',
+			alt: 'Go Home',
+		},
+		to: '/',
+		name: 'Home',
+	},
+];
+---
+
+<Layout title="VännerBästa | Time" navLinks={navLinks}>
+	<div class="container grid 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 client:load />
+		</p>
+
+		<UnixTime client:load/>
+
+		<p class="p-4">
+			To format the time for Discord, you can use: <br />
+			<TimeFormat formats={[{
+							day: 'numeric',
+							month: 'long',
+							year: 'numeric',
+						}, {hour: '2-digit', minute: '2-digit'}]} dFormat="f" client:only />
+			<br />
+			<TimeFormat formats={[{
+							weekday: 'long',
+							day: 'numeric',
+							month: 'long',
+							year: 'numeric',
+						}, { hour: '2-digit', minute: '2-digit', }]} dFormat="F" client:only />
+			<br />
+			<TimeFormat formats={[{
+							hour: '2-digit',
+							minute: '2-digit',
+						}]} dFormat="t" client:only />
+			<br />
+			<TimeFormat formats={[{
+							hour: '2-digit',
+							minute: '2-digit',
+							second: '2-digit',
+						}]} dFormat="T" client:only />
+			<br />
+			<TimeFormat formats={[{
+							day: '2-digit',
+                            month: '2-digit',
+                            year: 'numeric',
+						}]} dFormat="d" client:only />
+			<br />
+			<TimeFormat formats={[{
+							day: 'numeric',
+                            month: 'long',
+                            year: 'numeric',
+						}]} dFormat="D" client:only />
+		</p>
+	</div>
+</Layout>

src/assets/styles/_colours.scss

@@ -1,3 +0,0 @@
-$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%);

src/pages/utilities/birthdays.astro

@@ -1,40 +0,0 @@
----
-import TimeZone from "../../components/TimeZone.vue";
-import Layout from "../../layouts/Layout.astro";
-
-const navLinks = [
-	{
-		img: {
-			src: '/icons/arrow-left.svg',
-			alt: 'Back to Utilities',
-		},
-		to: '/utilities',
-        name: "Utilities",
-	},
-	{
-		img: {
-			src: '/icons/home.svg',
-			alt: 'Go Home',
-		},
-		to: '/',
-        name: "Home",
-	},
-];
----
-
-<Layout title="Vänner Bästa | Birthdays"  navLinks={navLinks}>
-    <div class="container">
-		<h1 class="title">Birthdays</h1>
-		<p>
-			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>
-			Your timezone:
-			<TimeZone client:load/>
-		</h2>
-	</div>
-</Layout>