Update Node.js to v18

.Dockerignore

@@ -0,0 +1,18 @@
+/node_modules
+/.vscode
+/.vercel
+/.next
+/.gitignore
+/docker.sh
+/build_number
+/.env*
+
+# Nuxt dev/build outputs
+.output
+.nuxt
+# Node dependencies
+node_modules
+# System files
+*.log
+build_number
+docker.sh

.github/workflows/deploy.yml

@@ -1,35 +0,0 @@
-name: Github Pages Astro CI
-
-on:
-  # Trigger the workflow every time you push to the `main` branch
-  # Using a different branch name? Replace `main` with your branch’s name
-  push:
-    branches: [ main ]
-  # Allows you to run this workflow manually from the Actions tab on GitHub.
-  workflow_dispatch:
-  
-# Allow this job to clone the repo and create a page deployment
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout your repository using git
-        uses: actions/checkout@v2          
-      - name: Install, build, and upload your site
-        uses: withastro/action@v0
-
-  deploy:
-    needs: build
-    runs-on: ubuntu-latest
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v1

.github/workflows/docker-publish.yml

@@ -0,0 +1,46 @@
+name: Create and publish a Docker image
+
+on:
+  push:
+    branches: ['main']
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3.0.2
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v2.0.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4.0.1
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=sha
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v3.1.0
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }},${{ env.REGISTRY }}/lucxjo/friends-best:latest
+          labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -1,23 +1,11 @@
-# build output
-dist/
-.output/
-
-# dependencies
-node_modules/
-
-# logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-
-# environment variables
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
 .env
-.env.production
+/.yarn
+!/.yarn/install-state.gz
 
-# macOS-specific files
 .DS_Store
-dist
-
-./friends-best

.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}

.vscode/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"discord.enabled": true
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

Dockerfile

@@ -0,0 +1,22 @@
+# Dockerfile
+FROM node:18-alpine
+
+# create destination directory
+RUN mkdir -p /usr/src/nuxt-app
+WORKDIR /usr/src/nuxt-app
+
+# update and install dependency
+RUN apk update && apk upgrade
+RUN apk add git
+
+# copy the app, note .dockerignore
+COPY . /usr/src/nuxt-app/
+RUN yarn install
+RUN yarn build
+
+EXPOSE 3000
+
+ENV NUXT_HOST=0.0.0.0
+ENV NUXT_PORT=3000
+
+CMD [ "yarn", "start" ]

README.md

@@ -1,35 +1,34 @@
-# Friends Best
-A fan website for the Netflix series "Young Royals".
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-## 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
-```
-or
-```sh
-cd fe
-pnpm build
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
 ```
 
-### Build server
-```sh
-just build-server
-```
-or
-```sh
-go build ./server
-```
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-### Build all
-```sh
-just build-all
-```
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-### Build and Run all
-```sh
-just serve
-```
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.tsx`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

assets/styles/_colours.scss

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

assets/styles/globals.scss

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

assets/styles/index.scss

@@ -0,0 +1,43 @@
+@use 'colours';
+
+.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;
+	}
+}

build_number

@@ -0,0 +1 @@
+9

components/LinkCard.vue

@@ -1,24 +1,39 @@
----
-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>
+<template>
+	<a v-if="isExternal" target="_blank" rel="nofollow noreferrer" class="card" :href="to">
+		<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">
+	<NuxtLink v-else v-bind="$props" class="card">
+		<p>{{ title }} →</p>
+	</NuxtLink>
+</template>
+
+<script>
+import { RouterLink } from 'vue-router';
+
+
+export default {
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+		to: {
+			type: String,
+			required: true,
+		},
+		...RouterLink.props,
+	},
+	computed: {
+		isExternal() {
+			return (
+				typeof this.to === 'string' && this.to.startsWith('http')
+			);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
 @use '../assets/styles/colours';
 .card {
 	margin: 1rem;

components/NavBar.vue

@@ -0,0 +1,56 @@
+<template>
+	<nav>
+		<div v-for="link in links" :key="link">
+			<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;
+}
+
+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;
+}
+</style>
+
+<script>
+const NavBar = resolveComponent('NavBar');
+
+export default {
+	props: {
+		links: {
+			type: Array,
+			required: true,
+		},
+	},
+};
+</script>

docker.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+m=$(cat ./build_number)
+echo $m
+wait 10
+docker build -t ghcr.io/lucxjo/friends-best:build-$m -t ghcr.io/lucxjo/friends-best:latest .
+docker push ghcr.io/lucxjo/friends-best:build-$m
+docker push ghcr.io/lucxjo/friends-best:latest
+
+echo $((m+1)) > ./build_number

fe/CNAME

@@ -1 +0,0 @@
-vannerba.st

fe/README.md

@@ -1,49 +0,0 @@
-# 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,9 +0,0 @@
-import { defineConfig } from 'astro/config';
-import vue from "@astrojs/vue";
-
-import tailwind from "@astrojs/tailwind";
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [vue(), tailwind()]
-});

fe/lib/getUser.ts

@@ -1,11 +0,0 @@
-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

@@ -1,25 +0,0 @@
-{
-  "name": "friends-best",
-  "type": "module",
-  "version": "3.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "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": "^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.70.0",
-    "typescript": "^5.3.3"
-  }
-}

fe/public/favicon.svg

@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
-  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
-  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
-  <defs>
-    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#000"/>
-      <stop offset="1" stop-color="#000" stop-opacity="0"/>
-    </linearGradient>
-  </defs>
-	<style>
-    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
-  </style>
-</svg>

fe/src/assets/styles/_colours.scss

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

fe/src/assets/styles/globals.scss

@@ -1,20 +0,0 @@
-@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;
-}

fe/src/assets/styles/index.scss

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

fe/src/components/Card.astro

@@ -1,62 +0,0 @@
----
-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>

fe/src/components/LinkCard.astro

@@ -1,58 +0,0 @@
----
-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>

fe/src/components/NavBar.astro

@@ -1,66 +0,0 @@
----
-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>

fe/src/components/TimeFormat.vue

@@ -1,40 +0,0 @@
-<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>

fe/src/components/TimeZone.vue

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

fe/src/components/UnixTime.vue

@@ -1,9 +0,0 @@
-<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>

fe/src/env.d.ts

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

fe/src/layouts/Layout.astro

@@ -1,108 +0,0 @@
----
-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>

fe/src/pages/index.astro

@@ -1,39 +0,0 @@
----
-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>

fe/src/pages/utilities/birthdays.astro

@@ -1,42 +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 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

@@ -1,27 +0,0 @@
----
-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>

fe/src/pages/utilities/time.astro

@@ -1,79 +0,0 @@
----
-
-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>

fe/tailwind.config.cjs

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

fe/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "astro/tsconfigs/strict"
-}

go.work

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

justfile

@@ -1,20 +0,0 @@
-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 ..

locales/en.js

@@ -0,0 +1,19 @@
+
+export default {
+	common: {
+		welcome: 'Welcome to Vänner Bästa.',
+		desc: 'A Young Royals fan website with links to different discussion spaces.',
+		watch: {
+			title: 'Watch',
+			desc: 'Watch the series on Netflix',
+		},
+		learn: {
+			title: 'Learn',
+			desc: 'Learn Swedish on Babbel (referral link)',
+		},
+		discord:
+			'Join our community Discord server to discuss all things Young Royals',
+		reddit: 'Join the community subreddit to discuss Young Royals',
+		matrix: 'Join our Matrix space to discuss all things Young Royals',
+	},
+};

locales/en.json

@@ -0,0 +1,17 @@
+{
+    "common": {
+        "welcome": "Welcome to Vänner Bästa.",
+        "desc": "A Young Royals fan website with links to different discussion spaces.",
+        "watch": {
+            "title": "Watch",
+            "desc": "Watch the series on Netflix"
+        },
+        "learn": {
+            "title": "Learn",
+            "desc": "Learn Swedish on Babbel (referral link)"
+        },
+        "discord": "Join our community Discord server to discuss all things Young Royals",
+        "reddit": "Join the community subreddit to discuss Young Royals",
+        "matrix": "Join our Matrix space to discuss all things Young Royals"
+    }
+}

locales/eo.js

@@ -0,0 +1,18 @@
+export default {
+	common: {
+		welcome: 'Bonvenon al Vänner Bästa.',
+		desc: 'Young Royals Fan-retejo kun ligoj al diversaj diskutaj spacoj.',
+		watch: {
+			title: 'Viglu',
+			desc: 'Viglu la serio sur Netflix',
+		},
+		learn: {
+			title: 'Lernu',
+			desc: 'Lernu Sveda sur Babbel (referenco ligilon)',
+		},
+		discord:
+			'Aliĝu al nia Komunuma Discord-Servilo por diskuti ĉiujn Young Royals',
+		reddit: 'Aliĝu al la komunumo subreddit diskuti Young Royals',
+		matrix: 'Aliĝu al la Young Royals Matrix-spaco por diskuti ĉiujn Young Royals',
+	},
+};

locales/eo.json

@@ -0,0 +1,17 @@
+{
+    "common": {
+        "welcome": "Bonvenon al Vänner Bästa.",
+        "desc": "Young Royals Fan-retejo kun ligoj al diversaj diskutaj spacoj.",
+        "watch": {
+            "title": "Viglu",
+            "desc": "Viglu la serio sur Netflix"
+        },
+        "learn": {
+            "title": "Lernu",
+            "desc": "Lernu Sveda sur Babbel (referenco ligilon)"
+        },
+        "discord": "Aliĝu al nia Komunuma Discord-Servilo por diskuti ĉiujn Young Royals",
+        "reddit": "Aliĝu al la komunumo subreddit diskuti Young Royals",
+        "matrix": "Aliĝu al la Young Royals Matrix-spaco por diskuti ĉiujn Young Royals"
+    }
+}

locales/es.js

@@ -0,0 +1,18 @@
+export default {
+	common: {
+		welcome: 'Bienvenide a Vänner Bästa.',
+		desc: 'Un sitio web de fans de Young Royals con enlaces a diferentes espacios de discusión.',
+		watch: {
+			title: 'Ver',
+			desc: 'Ver la serie en Netflix',
+		},
+		learn: {
+			title: 'Aprende',
+			desc: 'Aprende sueco en Babbel (enlace de referencia)',
+		},
+		discord:
+			'Únase a nuestro servidor de Discord de la comunidad para discutir sobre Young Royals',
+		reddit: 'Únase al subreddit de la comunidad para discutir sobre Young Royals',
+		matrix: 'Únase a nuestro espacio Matrix de la comunidad para discutir sobre Young Royals',
+	},
+};

locales/es.json

@@ -0,0 +1,17 @@
+{
+    "common": {
+        "welcome": "Bienvenide a Vänner Bästa.",
+        "desc": "Un sitio web de fans de Young Royals con enlaces a diferentes espacios de discusión.",
+        "watch": {
+            "title": "Ver",
+            "desc": "Ver la serie en Netflix"
+        },
+        "learn": {
+            "title": "Aprende",
+            "desc": "Aprende sueco en Babbel (enlace de referencia)"
+        },
+        "discord": "Únase a nuestro servidor de Discord de la comunidad para discutir sobre Young Royals",
+        "reddit": "Únase al subreddit de la comunidad para discutir sobre Young Royals",
+        "matrix": "Únase a nuestro espacio Matrix de la comunidad para discutir sobre Young Royals"
+    }
+}

next-i18next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'es', 'eo'],
+  },
+};

nuxt.config.ts

@@ -0,0 +1,39 @@
+import { defineNuxtConfig } from 'nuxt';
+
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+	app: {
+		head: {
+			link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }],
+			title: 'Vänner Bästa | Friends Best',
+			meta: [
+				{
+					property: 'og:image',
+					content: 'https://www.vannerba.st/yr.jpg',
+				},
+				{ name: 'twitter:card', content: 'summary' },
+				{ name: 'twitter:site', content: '@Ludoviko_' },
+				{
+					name: 'twitter:creator',
+					content: '@Ludoviko_',
+				},
+				{
+					property: 'og:title',
+					content: 'Vänner Bästa | Friends Best',
+				},
+				{
+					property: 'og:description',
+					content:
+						'A Young Royals fan website with links to different discussion spaces.',
+				},
+				{ name: 'og:type', content: 'website' },
+				{
+					name: 'description',
+					content:
+						'A Young Royals fan website with links to different discussion spaces.',
+				},
+			],
+		},
+	},
+	css: ['@/assets/styles/globals.scss'],
+});

package.json

@@ -0,0 +1,28 @@
+{
+	"private": true,
+	"engines": {
+		"node": "17.9.1",
+		"pnpm": ">=7"
+	},
+	"scripts": {
+		"build": "nuxt build",
+		"dev": "nuxt dev",
+		"start": "nuxt start",
+		"generate": "nuxt generate",
+		"preview": "nuxt preview"
+	},
+	"devDependencies": {
+		"@intlify/nuxt3": "0.2.3",
+		"@nuxt/postcss8": "1.1.3",
+		"@nuxt/types": "2.15.8",
+		"nuxt": "3.0.0-rc.6",
+		"sass": "1.54.1",
+		"sass-loader": "13.0.2"
+	},
+	"dependencies": {
+		"@nuxtjs/i18n": "7.2.3",
+		"vite": "3.0.4",
+		"vue": "3.2.37",
+		"webpack": "5.74.0"
+	}
+}

pages/index.vue

@@ -0,0 +1,34 @@
+<template>
+	<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 November 2022</strong>
+		<div class="grid-3">
+			<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>
+</template>
+
+<script>
+import '@/assets/styles/index.scss';
+</script>

pages/utilities/birthdays.vue

@@ -0,0 +1,38 @@
+<template>
+	<NavBar :links="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:
+			{{ Intl.DateTimeFormat().resolvedOptions().timeZone }}
+		</h2>
+	</div>
+</template>
+
+<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>

pages/utilities/index.vue

@@ -0,0 +1,23 @@
+<template>
+	<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 setup>
+const navLinks = [
+	{
+		img: {
+			name: '/icons/home.svg',
+			alt: 'Go Home',
+		},
+		to: '/',
+        name: "Home",
+	},
+];
+</script>

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>

prettier.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  trailingComma: "es5",
+  tabWidth: 4,
+  semi: true,
+  singleQuote: true,
+  useTabs: true,
+  jsxBracketSameLine: true,
+  arrowParens: "avoid",
+  insertPragma: false
+};

public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

renovate.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "config:base"
+  ]
+}

server/go.mod

@@ -1,10 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

server/src/assets/styles/index.scss

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

server/src/components/Card.astro

@@ -1,62 +0,0 @@
----
-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/NavBar.astro

@@ -1,66 +0,0 @@
----
-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

@@ -1,40 +0,0 @@
-<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

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

server/src/components/UnixTime.vue

@@ -1,9 +0,0 @@
-<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

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

server/src/layouts/Layout.astro

@@ -1,108 +0,0 @@
----
-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

@@ -1,39 +0,0 @@
----
-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

@@ -1,42 +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 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

@@ -1,27 +0,0 @@
----
-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

@@ -1,79 +0,0 @@
----
-
-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>

tsconfig.json

@@ -0,0 +1,7 @@
+{
+	// https://v3.nuxtjs.org/concepts/typescript
+	"extends": "./.nuxt/tsconfig.json",
+	"compilerOptions": {
+		"types": ["@nuxt/types", "@nuxtjs/i18n"]
+	}
+}