Updated website design. Added a birthday command generator
This commit is contained in:
Ludoviko
parent
3a7194b33d
commit
d424504547
1
.yarnrc.yml
Normal file
1
.yarnrc.yml
Normal file
|
|
@ -0,0 +1 @@
|
|||
nodeLinker: node-modules
|
||||
6
components/heading.tsx
Normal file
6
components/heading.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
export function Heading({children}: {children: React.ReactNode}) {
|
||||
return (
|
||||
<h2 className="dark:text-gray-300 md:text-2xl text-lg pt-4 mx-4">{children}</h2>
|
||||
);
|
||||
}
|
||||
4
components/index.ts
Normal file
4
components/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export * from "./title";
|
||||
export * from "./linkcard";
|
||||
export * from "./paragraph";
|
||||
export * from "./heading";
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import Link from "next/link";
|
||||
|
||||
export default function LinkCard(props: {
|
||||
export function LinkCard(props: {
|
||||
link: string;
|
||||
title: string;
|
||||
sub: string;
|
||||
|
|
@ -8,7 +8,7 @@ export default function LinkCard(props: {
|
|||
const { link, title, sub } = props;
|
||||
return (
|
||||
<Link href={link} passHref>
|
||||
<a className="box-border p-2 bg-gray-50 dark:bg-gray-500 hover:bg-gray-100 hover:text-indigo-500 dark:hover:bg-gray-600 dark:hover:text-indigo-300 rounded-md">
|
||||
<a className="box-border p-2 bg-gray-200 dark:text-gray-200 dark:bg-gray-600 hover:bg-gray-100 hover:text-indigo-500 dark:hover:bg-gray-500 dark:hover:text-indigo-400 rounded-md drop-shadow-lg hover:drop-shadow-2xl">
|
||||
<h2 className="px-4">{title} →</h2>
|
||||
<p className="px-4">{sub}</p>
|
||||
</a>
|
||||
|
|
|
|||
9
components/paragraph.tsx
Normal file
9
components/paragraph.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import React from "react";
|
||||
|
||||
export function Paragraph ({children}: {children: React.ReactNode}) {
|
||||
return (
|
||||
<p className="px-4 dark:text-gray-300">
|
||||
{children}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
6
components/title.tsx
Normal file
6
components/title.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
export function Title({ children, ...props }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<h1 className="dark:text-gray-300 font-bold text-center md:text-6xl text-3xl pt-4 font-body">{children}</h1>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,5 +2,19 @@ const { i18n } = require('./next-i18next.config');
|
|||
|
||||
module.exports = {
|
||||
i18n,
|
||||
reactStrictMode: true
|
||||
reactStrictMode: true,
|
||||
rewrites: [
|
||||
{
|
||||
source: '/fonts/ubuntu',
|
||||
destination: 'https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap'
|
||||
},
|
||||
{
|
||||
source: '/fonts/goog/api',
|
||||
destination: 'https://fonts.googleapis.com'
|
||||
},
|
||||
{
|
||||
source: '/fonts/goog/static',
|
||||
destination: 'https://fonts.gstatic.com'
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,16 +10,21 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"autoprefixer": "^10.3.3",
|
||||
"moment": "^2.29.1",
|
||||
"next": "^11.1.2",
|
||||
"next-intl": "^2.0.0",
|
||||
"next-plausible": "^2.1.1",
|
||||
"postcss": "^8.3.6",
|
||||
"react": "^17.0.2",
|
||||
"react-copy-to-clipboard": "^5.0.4",
|
||||
"react-datepicker": "^4.2.1",
|
||||
"react-dom": "^17.0.2",
|
||||
"tailwindcss": "^2.2.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "17.0.14",
|
||||
"@types/react-copy-to-clipboard": "^5.0.1",
|
||||
"@types/react-datepicker": "^4.1.7",
|
||||
"eslint": "7.31.0",
|
||||
"eslint-config-next": "11.0.1",
|
||||
"typescript": "4.3.5"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</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,26 +18,17 @@ 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">
|
||||
<main className="container mx-auto flex flex-col py-2 font-body">
|
||||
<Title>
|
||||
{t('welcome')}
|
||||
</h1>
|
||||
<p className="dark:text-gray-300 text-center text-2xl">
|
||||
</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">
|
||||
|
|
@ -48,7 +38,6 @@ export default function Home() {
|
|||
<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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
|
|
@ -1,17 +1,4 @@
|
|||
html,
|
||||
body {
|
||||
background-color: #2b2b2b;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@import url('/fonts/ubuntu');
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -10,6 +10,9 @@ module.exports = {
|
|||
container: {
|
||||
center: true,
|
||||
},
|
||||
fontFamily: {
|
||||
'body': ['Ubuntu', 'sans-serif'],
|
||||
}
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
|
|
|
|||
Loading…
Reference in a new issue