Compare commits

...

5 commits

Author SHA1 Message Date
Louis Hollingworth e6a00bc260
DB now writing!
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2023-05-17 17:38:30 +01:00
Louis Hollingworth 14659122c3
All pages now in Nuxt, work next on nav.
DB connected, check issues with writing.

Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2023-05-16 20:17:33 +01:00
Louis Hollingworth f9e7e5480c
Now has all of the functions as the Astro site.
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2023-05-09 19:55:32 +01:00
Louis Hollingworth 2e98cb39f4
Add tailwindcss, add first page
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2022-11-13 20:53:51 +00:00
Louis Hollingworth db9fa44439
Added basic stuff for Nuxt
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2022-11-09 17:47:19 +00:00
48 changed files with 5535 additions and 3547 deletions

View file

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

View file

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

26
.gitignore vendored
View file

@ -1,20 +1,8 @@
# build output node_modules
dist/ *.log*
.output/ .nuxt
.nitro
# dependencies .cache
node_modules/ .output
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# environment variables
.env .env
.env.production dist
# macOS-specific files
.DS_Store

1
.npmrc
View file

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

View file

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

View file

@ -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) A young royals fan website made for the [Young Royals](https://discord.gg/youngroyals) Discord guild.
> 🧑‍🚀 **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).

5
app.vue Normal file
View file

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

15
assets/css/tailwind.css Normal file
View file

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

View file

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

18
components/LLink.vue Normal file
View file

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

32
components/NavHeader.vue Normal file
View file

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

28
components/TimeFormat.vue Normal file
View file

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

2
middleware/auth.ts Normal file
View file

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

28
nuxt.config.ts Normal file
View file

@ -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"}
]
}
}
})

View file

@ -1,22 +1,24 @@
{ {
"name": "friends-best",
"type": "module",
"version": "3.0.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "build": "nuxt build",
"start": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs", "dev": "nuxt dev",
"build": "astro build", "generate": "nuxt generate",
"preview": "astro preview", "preview": "nuxt preview",
"astro": "astro" "postinstall": "nuxt prepare"
},
"dependencies": {
"@astrojs/deno": "1.1.0",
"@astrojs/vue": "1.1.0",
"astro": "^1.4.2",
"vue": "^3.2.30"
}, },
"devDependencies": { "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"
} }
} }

22
pages/dash/index.vue Normal file
View file

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

45
pages/index.vue Normal file
View file

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

13
pages/login.vue Normal file
View file

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

View file

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

26
pages/utilities/index.vue Normal file
View file

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

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

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

File diff suppressed because it is too large Load diff

62
prisma/schema.prisma Normal file
View file

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 74 KiB

View file

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

Before

Width:  |  Height:  |  Size: 873 B

View file

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

Before

Width:  |  Height:  |  Size: 312 B

View file

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

Before

Width:  |  Height:  |  Size: 332 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 171 KiB

8
server/index.ts Normal file
View file

@ -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) => {
};

View file

@ -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')
})

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

1
src/env.d.ts vendored
View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

27
tailwind.config.ts Normal file
View file

@ -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}`
],
}

View file

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