DB now writing!

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

.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": ["next", "next/core-web-vitals"]
-}

.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

.gitignore

@@ -1,20 +1,8 @@
-# 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
-
-# macOS-specific files
-.DS_Store
+dist

.npmrc

@@ -2,3 +2,4 @@ auto-install-peers=true
 node-version=17.9.1
 engine-strict=false
 strict-peer-dependencies=false
+shamefully-hoist=true

.vscode/extensions.json

@@ -1,4 +1,6 @@
 {
-  "recommendations": ["astro-build.astro-vscode"],
+  "recommendations": [
+    "vue.vscode-typescript-vue-plugin"
+  ],
   "unwantedRecommendations": []
 }

README.md

@@ -1,49 +1,3 @@
-# Welcome to [Astro](https://astro.build)
+# Friends Best / Vänner Bästa
 
-[![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).
+A young royals fan website made for the [Young Royals](https://discord.gg/youngroyals) Discord guild.

app.vue

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

assets/css/tailwind.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    background-color: wheat;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    :root {
+        background-color: #1E293B;
+        color: antiquewhite;
+    }
+}

astro.config.mjs

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

components/LLink.vue

@@ -0,0 +1,18 @@
+<template>
+    <NuxtLink :to="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">{{ title }} →</NuxtLink>
+</template>
+
+<script setup lang="ts">
+
+defineProps({
+    to: {
+        type: String,
+        required: true
+    },
+    title: {
+        type: String,
+        required: true
+    },
+})
+
+</script>

components/NavHeader.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="w-screen grid-cols-4 grid-flow-col">
+        <div class="px-4 col-span-1" v-if="user">
+            <span>Hej {{ user.user_metadata.full_name }} </span> |
+            <button class="underline" @click="logout" >Logout</button>
+        </div>
+        <div class="nav" v-if="links">
+            <a href="/">Home</a>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    links: {
+        type: Boolean,
+        default: true
+    }
+})
+
+</script>
+
+<style>
+nav {
+	margin: 0 auto;
+	position: -webkit-sticky;
+	position: sticky;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+</style>

components/TimeFormat.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { defineComponent } from 'vue'
+type TimeFormatProps = {
+    dateStyle: 'full' | 'long' | 'medium' | 'short',
+    timeStyle: 'full' | 'long' | 'medium' | 'short',
+    hour12: boolean
+}
+
+const props = defineProps<
+    {
+        format: TimeFormatProps,
+        dFormat: string,
+        crntTime: number
+    }
+    >()
+</script>
+
+<template>
+    <code>
+        {{ `<t:${Math.floor(crntTime / 1000)}:${props.dFormat}>` }}
+	</code>
+	<span>
+		to get
+		<code>
+            {{Intl.DateTimeFormat(Intl.Locale, format).format(crntTime).replace(" at ", " ") + ' '}}
+        </code>
+    </span>
+</template>

middleware/auth.ts

@@ -0,0 +1,2 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+})

nuxt.config.ts

@@ -0,0 +1,28 @@
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+    nitro: {
+        //plugins: ['~/server/index.ts'],
+    },
+    runtimeConfig: {
+        dbUri: process.env.DATABASE_URL || '',
+        discordClientId: process.env.DISCORD_CID || '',
+        discordClientSecret: process.env.DISCORD_CS || '',
+        discordRedirectUri: process.env.DISCORD_REDIRECT_URI || 'http://localhost:3000/auth/v1/callback',
+        discordGuildId: process.env.DISCORD_GUILD || '',
+        discordAdminRoleId: process.env.DISCORD_ADMIN_ROLE || '',
+        discordStaffRoleId: process.env.DISCORD_STAFF_ROLE || '',
+        jwtSecret: process.env.JWT_SECRET || 'not_so_secret',
+    },
+    modules: ["@nuxtjs/tailwindcss", "@nuxtjs/color-mode"],
+    colorMode: {
+        preference: 'system'
+    },
+    app: {
+        head: {
+            title: 'Vanner Basta',
+            meta: [
+                {name: "theme-color", media: "(prefers-color-scheme: dark)", content: "#1E293B"}
+            ]
+        }
+    }
+})

package.json

@@ -1,22 +1,24 @@
 {
-  "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": "1.1.0",
-    "@astrojs/vue": "1.1.0",
-    "astro": "^1.4.2",
-    "vue": "^3.2.30"
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "sass": "1.55.0"
+    "@nuxtjs/color-mode": "3.2.0",
+    "@nuxtjs/tailwindcss": "6.6.7",
+    "@types/jsonwebtoken": "9.0.2",
+    "nuxt": "3.4.3",
+    "prisma": "4.14.0",
+    "tailwindcss": "3.3.2"
+  },
+  "dependencies": {
+    "@prisma/client": "4.14.0",
+    "jose": "4.14.4",
+    "scss": "0.2.4",
+    "zod": "3.21.4"
   }
 }

pages/dash/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const router = useRouter()
+definePageMeta({
+    middleware: 'auth'
+})
+
+async function logout() {
+    router.push('/login')
+}
+</script>
+
+<template>
+    <div class="grid h-screen place-items-center">
+        <div class="grid place-items-center">
+        <h1 class="text-6xl font-bold underline">Vänner Bästa | Dash</h1>
+        <div class="mt-10 mx-4 place-items-center">
+            <p>Logged in as {{ user?.user_metadata?.full_name }}</p>
+            <button @click="logout" >Logout</button>
+        </div>
+        </div>
+    </div>
+</template>

pages/index.vue

@@ -0,0 +1,45 @@
+<template>
+    <NavHeader :links="false" class="h-screen-1/20" />
+    <div class="grid h-screen-19/20 place-items-center">
+        <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">Season 2 is out now!</strong>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-3 mt-10">
+            <LLink v-for="link in links" :to="link.href" :title="link.title" />
+        </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+const links: Array<{href: string, title: string}> = [
+    {
+        href: "https://netflix.com",
+        title: "Netflix"
+    },
+    {
+        href: "https://discord.gg/youngroyals",
+        title: "Discord"
+    },
+    {
+        href: "https://reddit.com/r/youngroyals",
+        title: "Reddit"
+    },
+    {
+        href: "https://www.talkable.com/x/IchxFl",
+        title: "Babbel (ref)"
+    },
+    {
+        href: "/utilities",
+        title: "Discord Utilities"
+    },
+    {
+        href: "/dash",
+        title: "Dashboard"
+    }
+]
+</script>

pages/login.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="grid h-screen place-items-center">
+        <div class="grid place-items-center">
+        <h1 class="text-6xl font-bold underline">Vänner Bästa | Login</h1>
+        <div class="mt-10 mx-4 place-items-center">
+            <a href="https://discord.com/api/oauth2/authorize?client_id=1105533416377688174&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fv1%2Fcallback&response_type=code&scope=identify%20guilds%20guilds.members.read" >Login with Discord</a>
+        </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>

pages/utilities/birthdays.vue

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

pages/utilities/index.vue

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

pages/utilities/time.vue

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

prisma/schema.prisma

@@ -0,0 +1,62 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model content_data {
+  id                  Int                @id @default(autoincrement())
+  data                String             @db.VarChar
+  type                String             @db.VarChar
+  localised_content   localised_content? @relation(fields: [localised_contentId], references: [id])
+  localised_contentId Int?
+}
+
+model localised_content {
+  id        Int            @id @default(autoincrement())
+  language  String         @db.VarChar
+  content   String         @db.VarChar
+  data      content_data[]
+  element   page_elements? @relation(fields: [elementId], references: [id])
+  elementId Int?
+}
+
+model page_elements {
+  id               Int                 @id @default(autoincrement())
+  name             String              @db.VarChar
+  type             String              @db.VarChar
+  localisedContent localised_content[]
+  page             pages?              @relation(fields: [pageId], references: [id])
+  pageId           Int?
+}
+
+model pages {
+  id          Int             @id @default(autoincrement())
+  name        String          @db.VarChar
+  description String          @db.VarChar
+  elements    page_elements[]
+  site        sites?          @relation(fields: [siteId], references: [id])
+  siteId      Int?
+}
+
+model sites {
+  id        Int     @id @default(autoincrement())
+  site_name String  @db.VarChar
+  owner_id  String  @db.VarChar
+  site_url  String  @db.VarChar
+  pages     pages[]
+}
+
+model user {
+  id String @id @default(uuid())
+  name String
+  discord_id String @unique
+  created_at DateTime @default(now())
+  updated_at DateTime @updatedAt
+  is_admin Boolean @default(false)
+  is_staff Boolean @default(false)
+  is_member Boolean @default(false)
+}

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>

public/icons/arrow-left.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>

public/icons/home.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>

server/index.ts

@@ -0,0 +1,8 @@
+export const runtimeConfig = useRuntimeConfig();
+import { PrismaClient } from '@prisma/client';
+import { Nitro } from 'nitropack';
+
+export const prisma = new PrismaClient();
+
+export default async (_nitroApp: Nitro) => {
+};

server/routes/auth/v1/callback.ts

@@ -0,0 +1,203 @@
+import { runtimeConfig, prisma } from '~/server/index'
+import * as jose from 'jose'
+import { z } from 'zod';
+
+const PartialUserGuildSchema = z.object({
+    id: z.string(),
+    name: z.string(),
+    icon: z.string().nullable(),
+    owner: z.boolean(),
+    permissions: z.number(),
+    features: z.array(z.string()),
+});
+
+const UserGuildSchema = z.object({
+    avatar: z.string().nullable(),
+    communication_disabled_until: z.string().nullable(),
+    flags: z.number(),
+    joined_at: z.string(),
+    nick: z.string().nullable(),
+    pending: z.boolean(),
+    premium_since: z.string().nullable(),
+    roles: z.array(z.string()),
+    user: z.object({
+        id: z.string(),
+        username: z.string(),
+        global_name: z.string().nullable(),
+        avatar: z.string().nullable(),
+        discriminator: z.string(),
+        public_flags: z.number(),
+        avatar_decoration: z.string().nullable(),
+    }),
+    mute: z.boolean(),
+    deaf: z.boolean(),
+});
+
+var userToWrite: {
+    discord_id: string,
+    name: string,
+    is_admin: boolean,
+    is_staff: boolean,
+    is_member: boolean,
+}
+
+export default defineEventHandler(async (event) => {
+    const { code } = getQuery(event)
+    let create_user = false
+
+    if (!code) {
+        return sendRedirect(event, '/')
+    }
+
+    const response = await fetch("https://discord.com/api/oauth2/token", {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'Accept-Encoding': 'application/x-www-form-urlencoded'
+    },
+    body: new URLSearchParams({
+        client_id: '1105533416377688174',
+        client_secret: '7FdJcfSNvhXpsR_46N-ZnbNoyjV3bl1o',
+        grant_type: 'authorization_code',
+        code: (code as string),
+        redirect_uri: 'http://localhost:3000/auth/v1/callback'
+    })
+    });
+
+    const data: {
+        access_token: string,
+        expires_in: number,
+        refresh_token: string,
+        scope: string,
+        token_type: string
+    } = await response.json();
+
+    const userReq = await fetch("https://discord.com/api/users/@me", {
+        headers: {
+            Authorization: `${data.token_type} ${data.access_token}`,
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'Accept-Encoding': 'application/x-www-form-urlencoded'
+        }
+    });
+
+    const user: {
+        id: string,
+        username: string,
+        discriminator: string,
+    } = await userReq.json();
+
+    const dbUser = await prisma.user.findUnique({
+        where: {
+            discord_id: user.id
+        }
+    })
+
+    create_user = dbUser === null
+
+    const guilds = await fetch("https://discord.com/api/users/@me/guilds", {
+        headers: {
+            Authorization: `${data.token_type} ${data.access_token}`,
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'Accept-Encoding': 'application/x-www-form-urlencoded'
+        }
+    }).then(async (res) => PartialUserGuildSchema.array().parse(await res.json()));
+
+    const guild = guilds.find((g) => g.id === runtimeConfig.discordGuildId);
+
+    if (guild) {
+        prisma.user.update({
+            where: {
+                discord_id: user.id
+            },
+            data: {
+                is_member: true
+            }
+        })
+        const member = await fetch(`https://discord.com/api/users/@me/guilds/${guild.id}/member`, {
+            headers: {
+                Authorization: `${data.token_type} ${data.access_token}`,
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Accept-Encoding': 'application/x-www-form-urlencoded'
+            }
+        }).then((res) => res.json()).then((res) => UserGuildSchema.parse(res))
+
+        if (member.roles.find((r) => r === runtimeConfig.discordAdminRoleId)) {
+            console.log('admin')
+
+            userToWrite = {
+                discord_id: user.id,
+                name: user.username + '#' + user.discriminator,
+                is_admin: true,
+                is_staff: true,
+                is_member: true
+            }
+        } else if (member.roles.find((r) => r === runtimeConfig.discordStaffRoleId)) {
+            console.log('staff')
+
+            userToWrite = {
+                discord_id: user.id,
+                name: user.username + '#' + user.discriminator,
+                is_admin: false,
+                is_staff: true,
+                is_member: true
+            }
+        } else {
+            console.log('member')
+
+            userToWrite = {
+                discord_id: user.id,
+                name: user.username + '#' + user.discriminator,
+                is_admin: false,
+                is_staff: false,
+                is_member: true
+            }
+        }
+    } else {
+        console.log('not member')
+
+        userToWrite = {
+            discord_id: user.id,
+            name: user.username + '#' + user.discriminator,
+            is_admin: false,
+            is_staff: false,
+            is_member: false
+        }
+    }
+
+    if (create_user) {
+        await prisma.user.create({
+            data: userToWrite
+        })
+    } else {
+        const transformedUser: typeof userToWrite = {
+            discord_id: user.id,
+            name: user.username + '#' + user.discriminator,
+            is_admin: userToWrite.is_admin,
+            is_staff: userToWrite.is_staff,
+            is_member: userToWrite.is_member
+        }
+
+        if (userToWrite !== transformedUser) {
+            await prisma.user.update({
+                where: {
+                    discord_id: user.id
+                },
+                data: userToWrite
+            })
+        }
+    }
+
+    const secret = new TextEncoder().encode(runtimeConfig.jwtSecret)
+
+    const token = await new jose.SignJWT({ sub: user.id })
+        .setProtectedHeader({ alg: 'HS512' })
+        .setIssuedAt()
+        .setIssuer('https://vannerba.st')
+        .setAudience('https://vannerba.st')
+        .setExpirationTime('5h')
+        .sign(secret)
+
+    setCookie(event, 'token', token)
+
+    return sendRedirect(event, '/dash')
+})

server/routes/auth/v1/discord.ts

@@ -0,0 +1,5 @@
+const url = `https://discord.com/api/oauth2/authorize?client_id=1105533416377688174&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fv1%2Fcallback&response_type=code&scope=identify%20guilds%20guilds.members.read`
+
+export default defineEventHandler((event) => {
+    return sendRedirect(event, url)
+})

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/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: colours.$bg-colour-light;
-}
-
-.container {
-	min-height: 80vh;
-	padding: 0 0.5rem;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
-
-.title {
-	font-size: 3rem;
-}

src/assets/styles/index.scss

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

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>

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="card">
-		<p>{title} →</p>
-	</a>
-) : (
-	<a href={to} class="card">
-		<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>

src/components/NavBar.astro

@@ -1,57 +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;
-}
-</style>

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>

src/components/TimeZone.vue

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

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>

src/env.d.ts

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

src/layouts/Layout.astro

@@ -1,98 +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;
----
-
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<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 {
-	font-family: 'Ubuntu', sans-serif !important;
-	background-color: colours.$bg-colour-light;
-}
-
-.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;
-	}
-}
-</style>

src/pages/index.astro

@@ -1,37 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-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">
-			<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>

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>

src/pages/utilities/index.astro

@@ -1,25 +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">
-		<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>
-</Layout>

src/pages/utilities/time.astro

@@ -1,78 +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">
-		<h1 class="title">Time Utilities</h1>
-		<p>
-			Your current timezone:
-			<TimeZone client:load />
-		</p>
-		
-		<UnixTime client:load/>
-
-		<p>
-			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>

tailwind.config.ts

@@ -0,0 +1,27 @@
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+    theme: {
+        extend: {
+            spacing: {
+                'screen-4/5': '80vh',
+                'screen-1/5': '20vh',
+                'screen-1/10': '10vh',
+                'screen-9/10': '90vh',
+                'screen-1/20': '5vh',
+                'screen-19/20': '95vh',
+            },
+        }
+    },
+    content: [
+    `./components/**/*.{vue,js,ts}`,
+    `./layouts/**/*.vue`,
+    `./pages/**/*.vue`,
+    `./composables/**/*.{js,ts}`,
+    `./plugins/**/*.{js,ts}`,
+    `./App.{js,ts,vue}`,
+    `./app.{js,ts,vue}`,
+    `./Error.{js,ts,vue}`,
+    `./error.{js,ts,vue}`
+    ],
+}

tsconfig.json

@@ -1,3 +1,8 @@
 {
-  "extends": "astro/tsconfigs/strict"
-}
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+  }
+}