Updated website design. Added a birthday command generator
This commit is contained in:
Ludoviko
parent
3a7194b33d
commit
d424504547
16 changed files with 5764 additions and 3650 deletions
|
|
@ -1,15 +1,37 @@
|
|||
import 'tailwindcss/tailwind.css'
|
||||
import '../styles/globals.css'
|
||||
import type { AppProps } from 'next/app'
|
||||
import {NextIntlProvider} from 'next-intl';
|
||||
import PlausibleProvider from 'next-plausible';
|
||||
import Head from 'next/head';
|
||||
|
||||
function _App({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Vänner Bäst | Friends Best</title>
|
||||
<link rel="icon" href="https://www.vannerba.st/favicon.png" />
|
||||
<meta property="og:image" content="https://www.vannerba.st/yr.jpg" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:site" content="@Ludoviko_" />
|
||||
<meta name="twitter:creator" content="@Ludoviko_" />
|
||||
<meta property="og:title" content="Vänner Bäst | Friends Best" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://www.vannerba.st/yr.jpg" />
|
||||
<meta name="theme-color"
|
||||
content="#9CA3AF"
|
||||
// @ts-ignore
|
||||
media="(prefers-color-scheme: light)" />
|
||||
<meta name="theme-color"
|
||||
content="#1F2937"
|
||||
// @ts-ignore
|
||||
media="(prefers-color-scheme: dark)"/>
|
||||
</Head>
|
||||
<PlausibleProvider trackOutboundLinks={true} domain="vannerba.st">
|
||||
<NextIntlProvider messages={pageProps.messages}>
|
||||
<Component {...pageProps} />
|
||||
</NextIntlProvider>
|
||||
<NextIntlProvider messages={pageProps.messages}>
|
||||
<Component {...pageProps} />
|
||||
</NextIntlProvider>
|
||||
</PlausibleProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default _App
|
||||
|
|
|
|||
35
pages/birthdays.tsx
Normal file
35
pages/birthdays.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { Title, Paragraph, Heading } from "../components";
|
||||
import DatePicker from 'react-datepicker'
|
||||
import { useState } from "react";
|
||||
import "react-datepicker/dist/react-datepicker.css"
|
||||
import CopyToClipboard from "react-copy-to-clipboard";
|
||||
import moment from "moment";
|
||||
import Head from "next/head";
|
||||
|
||||
export default function BirthdaysPage() {
|
||||
const [date, setDate] = useState(new Date());
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<meta name="description" content="A command generator for UtiliBots' birthday bot." />
|
||||
<meta property="og:description" content="A command generator for UtiliBots' birthday bot."/>
|
||||
</Head>
|
||||
<div className="min-h-screen min-w-full bg-gray-400 dark:bg-gray-800">
|
||||
<Title>Birthdays</Title>
|
||||
<Paragraph>You can generate your birthday command here for UtiliBots' birthday bot.</Paragraph>
|
||||
<Heading>I was born on the...</Heading>
|
||||
<Paragraph>The format is <strong>DD/MM</strong>.</Paragraph>
|
||||
<DatePicker className="mx-4" selected={date} onChange={
|
||||
// @ts-ignore
|
||||
date => setDate(date)
|
||||
}
|
||||
dateFormat="dd/MM" />
|
||||
<Heading>Command to set my birthday: </Heading>
|
||||
<Paragraph>{`bd!setup ${Intl.DateTimeFormat().resolvedOptions().timeZone} ${moment(date).format("MM/DD")}`}</Paragraph>
|
||||
<CopyToClipboard text={`bd!setup ${Intl.DateTimeFormat().resolvedOptions().timeZone} ${date.getMonth()+1}/${date.getDate()}`}>
|
||||
<button className="mx-4 px-4 dark:text-gray-300 dark:bg-gray-500 bg-white">Copy!</button>
|
||||
</CopyToClipboard>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||
import Image from 'next/image'
|
||||
import LinkCard from '../components/linkcard'
|
||||
import {LinkCard, Title} from '../components'
|
||||
|
||||
export function getStaticProps({locale}: GetStaticPropsContext) {
|
||||
return {
|
||||
|
|
@ -19,36 +18,26 @@ export function getStaticProps({locale}: GetStaticPropsContext) {
|
|||
export default function Home() {
|
||||
const t = useTranslations('common')
|
||||
return (
|
||||
<div className="">
|
||||
<div className="min-h-screen min-w-full bg-gray-400 dark:bg-gray-800">
|
||||
<Head>
|
||||
<title>Vänner Bäst | Friends Best</title>
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta property="og:title" content="Vänner Bäst | Friends Best" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://www.vannerba.st/yr.jpg" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:site" content="@Ludoviko_" />
|
||||
<meta name="twitter:creator" content="@Ludoviko_" />
|
||||
<meta name="description" content="A Young Royals fan website with links to different discussion spaces." />
|
||||
<meta property="og:description" content="A Young Royals fan website with links to different discussion spaces."/>
|
||||
</Head>
|
||||
|
||||
<main className="container mx-auto min-h-screen min-w-full bg-gray-300 dark:bg-gray-700">
|
||||
<Image src="/yr.jpg" alt="Young Royals" width={512} height={288} className="py-6" />
|
||||
<h1 className="dark:text-gray-300 font-bold text-center text-6xl pt-4">
|
||||
{t('welcome')}
|
||||
</h1>
|
||||
<p className="dark:text-gray-300 text-center text-2xl">
|
||||
{t('desc')}
|
||||
</p>
|
||||
<div className="grid grid-flow-col grid-cols-2 grid-rows-2 gap-6 pt-4 px-8">
|
||||
<LinkCard link="https://vannerba.st/watch" title={`${t('watch.title')}`} sub={t('watch.desc')}/>
|
||||
<LinkCard link="https://vannerba.st/discord" title={`Discord`} sub={t('discord')}/>
|
||||
<LinkCard link="https://vannerba.st/reddit" title={`Reddit`} sub={t('reddit')}/>
|
||||
<LinkCard link="https://vannerba.st/learn" title={t('learn.title')} sub={t('learn.desc')}/>
|
||||
</div>
|
||||
<main className="container mx-auto flex flex-col py-2 font-body">
|
||||
<Title>
|
||||
{t('welcome')}
|
||||
</Title>
|
||||
<p className="dark:text-gray-300 text-center md:text-2xl text-lg">
|
||||
{t('desc')}
|
||||
</p>
|
||||
<div className="grid grid-flow-col grid-cols-2 grid-rows-2 gap-6 pt-4 px-8">
|
||||
<LinkCard link="https://vannerba.st/watch" title={`${t('watch.title')}`} sub={t('watch.desc')}/>
|
||||
<LinkCard link="https://vannerba.st/discord" title={`Discord`} sub={t('discord')}/>
|
||||
<LinkCard link="https://vannerba.st/reddit" title={`Reddit`} sub={t('reddit')}/>
|
||||
<LinkCard link="https://vannerba.st/learn" title={t('learn.title')} sub={t('learn.desc')}/>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="bg-gray-300 dark:bg-gray-700 dark:text-gray-300 text-center dark:hover:text-indigo-400"><Link href="https://ludoviko.ch">Created by: Ludoviko</Link></footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue