Switch to Astro
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
This commit is contained in:
parent
6741f91f5c
commit
9241dc0783
GPG key ID:
B140F8923EF88DA9
|
|
@ -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
35
.github/workflows/deploy.yml
vendored
Normal 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 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
|
||||
46
.github/workflows/docker-publish.yml
vendored
46
.github/workflows/docker-publish.yml
vendored
|
|
@ -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 }}
|
||||
27
.gitignore
vendored
27
.gitignore
vendored
|
|
@ -1,11 +1,20 @@
|
|||
node_modules
|
||||
*.log*
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
.output
|
||||
.env
|
||||
/.yarn
|
||||
!/.yarn/install-state.gz
|
||||
# build output
|
||||
dist/
|
||||
.output/
|
||||
|
||||
# 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
|
||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"discord.enabled": true
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
nodeLinker: node-modules
|
||||
22
Dockerfile
22
Dockerfile
|
|
@ -1,22 +0,0 @@
|
|||
# Dockerfile
|
||||
FROM node:17-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" ]
|
||||
59
README.md
59
README.md
|
|
@ -1,34 +1,49 @@
|
|||
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).
|
||||
# Welcome to [Astro](https://astro.build)
|
||||
|
||||
## Getting Started
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
|
||||
First, run the development server:
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
|
||||
|
||||
|
||||
## 🚀 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
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
[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`.
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
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.
|
||||
## 🧞 Commands
|
||||
|
||||
## Learn More
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
| 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 |
|
||||
|
||||
- [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.
|
||||
## 👀 Want to learn more?
|
||||
|
||||
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.
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
6
astro.config.mjs
Normal file
6
astro.config.mjs
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: []
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
9
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
module.exports = {
|
||||
i18n: {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en', 'es', 'eo'],
|
||||
},
|
||||
};
|
||||
|
|
@ -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'],
|
||||
});
|
||||
33
package.json
33
package.json
|
|
@ -1,28 +1,19 @@
|
|||
{
|
||||
"name": "friends-best",
|
||||
"type": "module",
|
||||
"version": "3.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"
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/i18n": "7.2.3",
|
||||
"vite": "3.0.4",
|
||||
"vue": "^3.2.37",
|
||||
"webpack": "^5.73.0"
|
||||
"astro": "^1.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "1.55.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
7024
pnpm-lock.yaml
7024
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -1,10 +0,0 @@
|
|||
module.exports = {
|
||||
trailingComma: "es5",
|
||||
tabWidth: 4,
|
||||
semi: true,
|
||||
singleQuote: true,
|
||||
useTabs: true,
|
||||
jsxBracketSameLine: true,
|
||||
arrowParens: "avoid",
|
||||
insertPragma: false
|
||||
};
|
||||
13
public/favicon.svg
Normal file
13
public/favicon.svg
Normal 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 |
|
|
@ -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 |
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"extends": [
|
||||
"config:base"
|
||||
]
|
||||
}
|
||||
3
src/assets/styles/index.scss
Normal file
3
src/assets/styles/index.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@use 'colours';
|
||||
|
||||
|
||||
62
src/components/Card.astro
Normal file
62
src/components/Card.astro
Normal 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>→</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>
|
||||
|
|
@ -1,39 +1,24 @@
|
|||
<template>
|
||||
<a v-if="isExternal" target="_blank" rel="nofollow noreferrer" class="card" :href="to">
|
||||
<p>{{ title }} →</p>
|
||||
---
|
||||
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>
|
||||
<NuxtLink v-else v-bind="$props" class="card">
|
||||
<p>{{ title }} →</p>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RouterLink } from 'vue-router';
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
to: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
...RouterLink.props,
|
||||
},
|
||||
computed: {
|
||||
isExternal() {
|
||||
return (
|
||||
typeof this.to === 'string' && this.to.startsWith('http')
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
) : (
|
||||
<a href={to} class="card">
|
||||
<p>{title} →</p>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
<style lang="scss">
|
||||
@use '../assets/styles/colours';
|
||||
.card {
|
||||
margin: 1rem;
|
||||
57
src/components/NavBar.astro
Normal file
57
src/components/NavBar.astro
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
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>
|
||||
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="astro/client" />
|
||||
84
src/layouts/Layout.astro
Normal file
84
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = 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>
|
||||
<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>
|
||||
|
|
@ -1,11 +1,17 @@
|
|||
<template>
|
||||
---
|
||||
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 November 2022</strong>
|
||||
<strong>Season 2 coming out 1st November 2022</strong>
|
||||
<div class="grid-3">
|
||||
<LinkCard
|
||||
title="Watch"
|
||||
|
|
@ -27,8 +33,5 @@
|
|||
<LinkCard title="Discord Utilities" to="/utilities" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/assets/styles/index.scss';
|
||||
</script>
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
@ -1,5 +1,29 @@
|
|||
<template>
|
||||
<NavBar :links="navLinks" />
|
||||
---
|
||||
import NavBar from "../../components/NavBar.astro";
|
||||
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">
|
||||
<NavBar links={navLinks} />
|
||||
<div class="container">
|
||||
<h1 class="title">Birthdays</h1>
|
||||
<p>
|
||||
|
|
@ -11,28 +35,7 @@
|
|||
</p>
|
||||
<h2>
|
||||
Your timezone:
|
||||
{{ Intl.DateTimeFormat().resolvedOptions().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>
|
||||
</Layout>
|
||||
26
src/pages/utilities/index.astro
Normal file
26
src/pages/utilities/index.astro
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
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">
|
||||
<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>
|
||||
</Layout>
|
||||
148
src/pages/utilities/time.astro
Normal file
148
src/pages/utilities/time.astro
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
---
|
||||
|
||||
import NavBar from "../../components/NavBar.astro";
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
|
||||
const crntTime = Date.now();
|
||||
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="Time">
|
||||
<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>
|
||||
</Layout>
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
{
|
||||
// https://v3.nuxtjs.org/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"types": ["@nuxt/types", "@nuxtjs/i18n"]
|
||||
}
|
||||
"extends": "astro/tsconfigs/strict"
|
||||
}
|
||||
Loading…
Reference in a new issue