Compare commits

..

9 commits

Author SHA1 Message Date
Louis Hollingworth f439090fa2
Restored lost files and now serving from Go
Signed-off-by: Louis Hollingworth <louis@hollingworth.nl>
2024-02-14 18:39:12 +00:00
Louis Hollingworth dd67fc967a
Refactored project ready for server.
Signed-off-by: Louis Hollingworth <louis@hollingworth.nl>
2024-02-14 17:39:30 +00:00
Louis Hollingworth 5a115374b4
Added view trasitions
Signed-off-by: Louis Hollingworth <louis@hollingworth.nl>
2023-09-21 10:56:48 +01:00
Louis Hollingworth 7ba84dd020
Updated styling
Signed-off-by: Louis Hollingworth <louis@hollingworth.nl>
2023-09-21 10:45:11 +01:00
Louis Hollingworth 20f681aa3c
Hopefully fixed an issue where formats didn't show
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2022-10-15 13:37:12 +01:00
Louis Hollingworth c180404e15
Improved time handling
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2022-10-08 16:52:34 +01:00
Louis Hollingworth 426ae17597
Update timezone on time page to be dynamic
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2022-10-02 15:51:27 +01:00
Louis Hollingworth 1e847898b9
Added timexone island
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2022-10-02 15:48:31 +01:00
Louis Hollingworth 9241dc0783
Switch to Astro
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2022-10-01 19:35:07 +01:00
86 changed files with 5544 additions and 6789 deletions

View file

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

35
.github/workflows/deploy.yml vendored Normal file
View file

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

View file

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

30
.gitignore vendored
View file

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

4
.vscode/extensions.json vendored Normal file
View file

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

11
.vscode/launch.json vendored Normal file
View file

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

View file

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

View file

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

View file

@ -1,22 +0,0 @@
# 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" ]

View file

@ -1,34 +1,35 @@
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). # Friends Best
A fan website for the Netflix series "Young Royals".
## Getting Started ## Contributing
I suggest using [Just](https://github.com/casey/just) to help with building
First, run the development server: 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).
```bash ### Build Frontend
npm run dev ```sh
# or just build-fe
yarn dev ```
or
```sh
cd fe
pnpm build
``` ```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. ### Build server
```sh
just build-server
```
or
```sh
go build ./server
```
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. ### Build all
```sh
just build-all
```
[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`. ### Build and Run all
```sh
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. just serve
```
## 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.

View file

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

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

View file

@ -1 +0,0 @@
9

View file

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

View file

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

View file

View file

1
fe/CNAME Normal file
View file

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

49
fe/README.md Normal file
View file

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

9
fe/astro.config.mjs Normal file
View file

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

11
fe/lib/getUser.ts Normal file
View file

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

25
fe/package.json Normal file
View file

@ -0,0 +1,25 @@
{
"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"
}
}

4185
fe/pnpm-lock.yaml Normal file

File diff suppressed because it is too large Load diff

View file

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

13
fe/public/favicon.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 873 B

View file

Before

Width:  |  Height:  |  Size: 312 B

After

Width:  |  Height:  |  Size: 312 B

View file

Before

Width:  |  Height:  |  Size: 332 B

After

Width:  |  Height:  |  Size: 332 B

View file

Before

Width:  |  Height:  |  Size: 171 KiB

After

Width:  |  Height:  |  Size: 171 KiB

View file

@ -0,0 +1,4 @@
$bg-colour-light: rgb(187, 187, 187);
$accent-colour-light: rgb(24, 96, 231);
$filter-accent-colour-light: invert(34%) sepia(96%) saturate(4970%) hue-rotate(216deg) brightness(95%) contrast(91%);
$filter-link-colour-dark: invert(99%) sepia(52%) saturate(532%) hue-rotate(308deg) brightness(100%) contrast(95%);

View file

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

View file

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

View file

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

View file

@ -1,39 +1,24 @@
<template> ---
<a v-if="isExternal" target="_blank" rel="nofollow noreferrer" class="card" :href="to"> export interface Props {
<p>{{ title }} →</p> 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>
<NuxtLink v-else v-bind="$props" class="card"> ) : (
<p>{{ title }} →</p> <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">
</NuxtLink> <p>{title} →</p>
</template> </a>
)
<script> }
import { RouterLink } from 'vue-router'; <style lang="scss">
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'; @use '../assets/styles/colours';
.card { .card {
margin: 1rem; margin: 1rem;

View file

@ -0,0 +1,66 @@
---
export interface Props {
links: {
to: string;
name: string;
img: {
src: string;
alt: string;
}
}[]
}
const { links } = Astro.props;
---
<nav>
{ links.map(link => (
<div class="nav-button">
<a href={link.to}>
<img src={link.img.src} alt={link.img.alt} />
<p>{ link.name }</p>
</a>
</div>
))
}
</nav>
<style lang="scss">
@use '../assets/styles/colours';
nav {
margin: 0 auto;
position: -webkit-sticky;
position: sticky;
display: flex;
justify-content: center;
align-items: center;
}
nav :hover {
filter: colours.$filter-accent-colour-light;
}
nav a {
text-decoration: none;
color: black;
}
p {
padding: 0;
margin: 0;
}
.nav-button {
margin: 0 1rem;
padding: 0.5rem;
}
@media (prefers-color-scheme: dark) {
nav :not(:hover) {
filter: colours.$filter-link-colour-dark;
}
.nav-button :hover {
filter: invert(100%) sepia(25%) saturate(4030%) hue-rotate(177deg) brightness(98%) contrast(97%);
}
}
</style>

View file

@ -0,0 +1,40 @@
<script setup lang="ts">
import { defineComponent } from 'vue'
type TimeFormatProps = {
day: string | undefined,
month: string | undefined,
year: string | undefined,
hour: string | undefined,
minute: string | undefined,
second: string | undefined,
weekday: string | undefined,
}
const props = defineProps({
formats: {
type: Array<TimeFormatProps>,
required: true,
},
dFormat: {
type: String,
required: true,
},
})
const crntTime = Date.now();
</script>
<template>
<code>
{{ `<t:${Math.floor(crntTime / 1000)}:${props.dFormat}>` }}
</code>
<span>
to get
<code>
<span v-for="format in props.formats" :key="Math.floor(Math.random()*1000)">
{{Intl.DateTimeFormat(Intl.Locale, format).format(crntTime) + ' '}}
</span>
</code>
</span>
</template>

View file

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

View file

@ -0,0 +1,9 @@
<script setup lang="ts">
import { defineProps } from 'vue';
const crntTime = Date.now();
</script>
<template>
<p>The current time in Unix Epoch: <code>{{ Math.floor(crntTime / 1000) }}</code> <br /> or <code>{{crntTime}}</code> in Unix millis</p>
</template>

1
fe/src/env.d.ts vendored Normal file
View file

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

108
fe/src/layouts/Layout.astro Normal file
View file

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

39
fe/src/pages/index.astro Normal file
View file

@ -0,0 +1,39 @@
---
import Layout from '../layouts/Layout.astro';
import LinkCard from '../components/LinkCard.astro';
---
<Layout title="Vänner Bästa">
<main class="grid place-items-center h-screen">
<div class="grid place-items-center">
<h1 class="text-6xl font-bold underline">Vänner Bästa</h1>
<div class="mt-10 mx-4 place-items-center" >
<p>
A Young Royals fan website with links to different discussion
spaces.
</p>
<strong class="pt-5" >It's official! Series 3 is coming!</strong>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 mt-10">
<LinkCard
title="Watch"
to="https://www.netflix.com/title/81210762"
/>
<LinkCard title="Discord" to="https://discord.gg/hyKVDeRJ8Y" />
<LinkCard
title="Reddit"
to="https://www.reddit.com/r/YoungRoyals/"
/>
<LinkCard
title="Babbel (ref)"
to="https://www.talkable.com/x/IchxFl"
/>
<LinkCard
title="Matrix"
to="https://matrix.to/#/#young-royals:matrix.org"
/>
<LinkCard title="Discord Utilities" to="/utilities" />
</div>
</div>
</main>
</Layout>

View file

@ -0,0 +1,42 @@
---
import TimeZone from "../../components/TimeZone.vue";
import Layout from "../../layouts/Layout.astro";
const navLinks = [
{
img: {
src: '/icons/arrow-left.svg',
alt: 'Back to Utilities',
},
to: '/utilities',
name: "Utilities",
},
{
img: {
src: '/icons/home.svg',
alt: 'Go Home',
},
to: '/',
name: "Home",
},
];
---
<Layout title="Vänner Bästa | Birthdays" navLinks={navLinks}>
<div class="container grid place-items-center">
<div class="grid place-items-center">
<h1 class="text-6xl font-bold underline p-4">Birthdays</h1>
<p class="p-4">
Discord bots are changing. <br />
This means that we can no longer provide you with the command to set
your birthday. <br />
Instead, this page now gives you your timezone for use with Discord
bots.
</p>
<h2 class="p-4 text-4xl">
Your timezone:
<TimeZone class="underline" client:load/>
</h2>
</div>
</div>
</Layout>

View file

@ -0,0 +1,27 @@
---
import LinkCard from "../../components/LinkCard.astro";
import NavBar from "../../components/NavBar.astro";
import Layout from '../../layouts/Layout.astro';
const navLinks = [
{
img: {
src: '/icons/home.svg',
alt: 'Go Home',
},
to: '/',
name: "Home",
},
];
---
<Layout title="Vänner Bästa | Utilities" navLinks={navLinks}>
<div class="container grid place-items-center">
<div class="">
<h1 class="title">Utilities for the Discord Server</h1>
<div class="grid-2">
<LinkCard title="Birthdays" to="/utilities/birthdays" />
<LinkCard title="Time" to="/utilities/time" />
</div>
</div>
</div>
</Layout>

View file

@ -0,0 +1,79 @@
---
import NavBar from "../../components/NavBar.astro";
import TimeZone from "../../components/TimeZone.vue";
import Layout from "../../layouts/Layout.astro";
import TimeFormat from "../../components/TimeFormat.vue";
import UnixTime from "../../components/UnixTime.vue";
const navLinks = [
{
img: {
src: '/icons/arrow-left.svg',
alt: 'Back to Utilities',
},
to: '/utilities',
name: 'Utilities',
},
{
img: {
src: '/icons/home.svg',
alt: 'Go Home',
},
to: '/',
name: 'Home',
},
];
---
<Layout title="VännerBästa | Time" navLinks={navLinks}>
<div class="container grid place-items-center">
<div class="grid place-items-center">
<h1 class="text-6xl font-bold underline p-4">Time Utilities</h1>
<p class="p-4">
Your current timezone:
<TimeZone client:load />
</p>
<UnixTime client:load/>
<p class="p-4">
To format the time for Discord, you can use: <br />
<TimeFormat formats={[{
day: 'numeric',
month: 'long',
year: 'numeric',
}, {hour: '2-digit', minute: '2-digit'}]} dFormat="f" client:only />
<br />
<TimeFormat formats={[{
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric',
}, { hour: '2-digit', minute: '2-digit', }]} dFormat="F" client:only />
<br />
<TimeFormat formats={[{
hour: '2-digit',
minute: '2-digit',
}]} dFormat="t" client:only />
<br />
<TimeFormat formats={[{
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
}]} dFormat="T" client:only />
<br />
<TimeFormat formats={[{
day: '2-digit',
month: '2-digit',
year: 'numeric',
}]} dFormat="d" client:only />
<br />
<TimeFormat formats={[{
day: 'numeric',
month: 'long',
year: 'numeric',
}]} dFormat="D" client:only />
</p>
</div>
</Layout>

12
fe/tailwind.config.cjs Normal file
View file

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

3
fe/tsconfig.json Normal file
View file

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

BIN
friends-best Executable file

Binary file not shown.

3
go.work Normal file
View file

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

20
justfile Normal file
View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,39 +0,0 @@
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'],
});

View file

@ -1,28 +0,0 @@
{
"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"
}
}

View file

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

View file

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

View file

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

View file

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

File diff suppressed because it is too large Load diff

View file

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

View file

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

Before

Width:  |  Height:  |  Size: 1.1 KiB

View file

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

10
server/go.mod Normal file
View file

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

17
server/go.sum Normal file
View file

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

17
server/main.go Normal file
View file

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

View file

@ -0,0 +1,4 @@
$bg-colour-light: rgb(187, 187, 187);
$accent-colour-light: rgb(24, 96, 231);
$filter-accent-colour-light: invert(34%) sepia(96%) saturate(4970%) hue-rotate(216deg) brightness(95%) contrast(91%);
$filter-link-colour-dark: invert(99%) sepia(52%) saturate(532%) hue-rotate(308deg) brightness(100%) contrast(95%);

View file

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

View file

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

View file

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

View file

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

View file

@ -0,0 +1,66 @@
---
export interface Props {
links: {
to: string;
name: string;
img: {
src: string;
alt: string;
}
}[]
}
const { links } = Astro.props;
---
<nav>
{ links.map(link => (
<div class="nav-button">
<a href={link.to}>
<img src={link.img.src} alt={link.img.alt} />
<p>{ link.name }</p>
</a>
</div>
))
}
</nav>
<style lang="scss">
@use '../assets/styles/colours';
nav {
margin: 0 auto;
position: -webkit-sticky;
position: sticky;
display: flex;
justify-content: center;
align-items: center;
}
nav :hover {
filter: colours.$filter-accent-colour-light;
}
nav a {
text-decoration: none;
color: black;
}
p {
padding: 0;
margin: 0;
}
.nav-button {
margin: 0 1rem;
padding: 0.5rem;
}
@media (prefers-color-scheme: dark) {
nav :not(:hover) {
filter: colours.$filter-link-colour-dark;
}
.nav-button :hover {
filter: invert(100%) sepia(25%) saturate(4030%) hue-rotate(177deg) brightness(98%) contrast(97%);
}
}
</style>

View file

@ -0,0 +1,40 @@
<script setup lang="ts">
import { defineComponent } from 'vue'
type TimeFormatProps = {
day: string | undefined,
month: string | undefined,
year: string | undefined,
hour: string | undefined,
minute: string | undefined,
second: string | undefined,
weekday: string | undefined,
}
const props = defineProps({
formats: {
type: Array<TimeFormatProps>,
required: true,
},
dFormat: {
type: String,
required: true,
},
})
const crntTime = Date.now();
</script>
<template>
<code>
{{ `<t:${Math.floor(crntTime / 1000)}:${props.dFormat}>` }}
</code>
<span>
to get
<code>
<span v-for="format in props.formats" :key="Math.floor(Math.random()*1000)">
{{Intl.DateTimeFormat(Intl.Locale, format).format(crntTime) + ' '}}
</span>
</code>
</span>
</template>

View file

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

View file

@ -0,0 +1,9 @@
<script setup lang="ts">
import { defineProps } from 'vue';
const crntTime = Date.now();
</script>
<template>
<p>The current time in Unix Epoch: <code>{{ Math.floor(crntTime / 1000) }}</code> <br /> or <code>{{crntTime}}</code> in Unix millis</p>
</template>

1
server/src/env.d.ts vendored Normal file
View file

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

View file

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

View file

@ -0,0 +1,39 @@
---
import Layout from '../layouts/Layout.astro';
import LinkCard from '../components/LinkCard.astro';
---
<Layout title="Vänner Bästa">
<main class="grid place-items-center h-screen">
<div class="grid place-items-center">
<h1 class="text-6xl font-bold underline">Vänner Bästa</h1>
<div class="mt-10 mx-4 place-items-center" >
<p>
A Young Royals fan website with links to different discussion
spaces.
</p>
<strong class="pt-5" >It's official! Series 3 is coming!</strong>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 mt-10">
<LinkCard
title="Watch"
to="https://www.netflix.com/title/81210762"
/>
<LinkCard title="Discord" to="https://discord.gg/hyKVDeRJ8Y" />
<LinkCard
title="Reddit"
to="https://www.reddit.com/r/YoungRoyals/"
/>
<LinkCard
title="Babbel (ref)"
to="https://www.talkable.com/x/IchxFl"
/>
<LinkCard
title="Matrix"
to="https://matrix.to/#/#young-royals:matrix.org"
/>
<LinkCard title="Discord Utilities" to="/utilities" />
</div>
</div>
</main>
</Layout>

View file

@ -0,0 +1,42 @@
---
import TimeZone from "../../components/TimeZone.vue";
import Layout from "../../layouts/Layout.astro";
const navLinks = [
{
img: {
src: '/icons/arrow-left.svg',
alt: 'Back to Utilities',
},
to: '/utilities',
name: "Utilities",
},
{
img: {
src: '/icons/home.svg',
alt: 'Go Home',
},
to: '/',
name: "Home",
},
];
---
<Layout title="Vänner Bästa | Birthdays" navLinks={navLinks}>
<div class="container grid place-items-center">
<div class="grid place-items-center">
<h1 class="text-6xl font-bold underline p-4">Birthdays</h1>
<p class="p-4">
Discord bots are changing. <br />
This means that we can no longer provide you with the command to set
your birthday. <br />
Instead, this page now gives you your timezone for use with Discord
bots.
</p>
<h2 class="p-4 text-4xl">
Your timezone:
<TimeZone class="underline" client:load/>
</h2>
</div>
</div>
</Layout>

View file

@ -0,0 +1,27 @@
---
import LinkCard from "../../components/LinkCard.astro";
import NavBar from "../../components/NavBar.astro";
import Layout from '../../layouts/Layout.astro';
const navLinks = [
{
img: {
src: '/icons/home.svg',
alt: 'Go Home',
},
to: '/',
name: "Home",
},
];
---
<Layout title="Vänner Bästa | Utilities" navLinks={navLinks}>
<div class="container grid place-items-center">
<div class="">
<h1 class="title">Utilities for the Discord Server</h1>
<div class="grid-2">
<LinkCard title="Birthdays" to="/utilities/birthdays" />
<LinkCard title="Time" to="/utilities/time" />
</div>
</div>
</div>
</Layout>

View file

@ -0,0 +1,79 @@
---
import NavBar from "../../components/NavBar.astro";
import TimeZone from "../../components/TimeZone.vue";
import Layout from "../../layouts/Layout.astro";
import TimeFormat from "../../components/TimeFormat.vue";
import UnixTime from "../../components/UnixTime.vue";
const navLinks = [
{
img: {
src: '/icons/arrow-left.svg',
alt: 'Back to Utilities',
},
to: '/utilities',
name: 'Utilities',
},
{
img: {
src: '/icons/home.svg',
alt: 'Go Home',
},
to: '/',
name: 'Home',
},
];
---
<Layout title="VännerBästa | Time" navLinks={navLinks}>
<div class="container grid place-items-center">
<div class="grid place-items-center">
<h1 class="text-6xl font-bold underline p-4">Time Utilities</h1>
<p class="p-4">
Your current timezone:
<TimeZone client:load />
</p>
<UnixTime client:load/>
<p class="p-4">
To format the time for Discord, you can use: <br />
<TimeFormat formats={[{
day: 'numeric',
month: 'long',
year: 'numeric',
}, {hour: '2-digit', minute: '2-digit'}]} dFormat="f" client:only />
<br />
<TimeFormat formats={[{
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric',
}, { hour: '2-digit', minute: '2-digit', }]} dFormat="F" client:only />
<br />
<TimeFormat formats={[{
hour: '2-digit',
minute: '2-digit',
}]} dFormat="t" client:only />
<br />
<TimeFormat formats={[{
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
}]} dFormat="T" client:only />
<br />
<TimeFormat formats={[{
day: '2-digit',
month: '2-digit',
year: 'numeric',
}]} dFormat="d" client:only />
<br />
<TimeFormat formats={[{
day: 'numeric',
month: 'long',
year: 'numeric',
}]} dFormat="D" client:only />
</p>
</div>
</Layout>

View file

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