lucxjo/friends-best
1
0
Fork 0
Code Issues 2 Pull requests Packages Projects Releases Wiki Activity

Updated website design. Added a birthday command generator

Browse source
This commit is contained in:
Ludoviko 2021-09-17 19:16:10 +01:00
parent 3a7194b33d
commit d424504547
No known key found for this signature in database
GPG key ID: 1E66DEA3F5D623D1
16 changed files with 5764 additions and 3650 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.yarnrc.yml Normal file
View file

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

6
components/heading.tsx Normal file
View 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
View file

@ -0,0 +1,4 @@
export * from "./title";
export * from "./linkcard";
export * from "./paragraph";
export * from "./heading";

4
components/linkcard.tsx
View file

@ -1,6 +1,6 @@
import Link from "next/link"; import Link from "next/link";
export default function LinkCard(props: { export function LinkCard(props: {
link: string; link: string;
title: string; title: string;
sub: string; sub: string;
@ -8,7 +8,7 @@ export default function LinkCard(props: {
const { link, title, sub } = props; const { link, title, sub } = props;
return ( return (
<Link href={link} passHref> <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} &rarr;</h2> <h2 className="px-4">{title} &rarr;</h2>
<p className="px-4">{sub}</p> <p className="px-4">{sub}</p>
</a> </a>

9
components/paragraph.tsx Normal file
View 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
View 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>
);
}

16
next.config.js
View file

@ -2,5 +2,19 @@ const { i18n } = require('./next-i18next.config');
module.exports = { module.exports = {
i18n, 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'
},
]
} }

5
package.json
View file

@ -10,16 +10,21 @@
}, },
"dependencies": { "dependencies": {
"autoprefixer": "^10.3.3", "autoprefixer": "^10.3.3",
"moment": "^2.29.1",
"next": "^11.1.2", "next": "^11.1.2",
"next-intl": "^2.0.0", "next-intl": "^2.0.0",
"next-plausible": "^2.1.1", "next-plausible": "^2.1.1",
"postcss": "^8.3.6", "postcss": "^8.3.6",
"react": "^17.0.2", "react": "^17.0.2",
"react-copy-to-clipboard": "^5.0.4",
"react-datepicker": "^4.2.1",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"tailwindcss": "^2.2.9" "tailwindcss": "^2.2.9"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "17.0.14", "@types/react": "17.0.14",
"@types/react-copy-to-clipboard": "^5.0.1",
"@types/react-datepicker": "^4.1.7",
"eslint": "7.31.0", "eslint": "7.31.0",
"eslint-config-next": "11.0.1", "eslint-config-next": "11.0.1",
"typescript": "4.3.5" "typescript": "4.3.5"

30
pages/_app.tsx
View file

@ -1,15 +1,37 @@
import 'tailwindcss/tailwind.css' import '../styles/globals.css'
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'
import {NextIntlProvider} from 'next-intl'; import {NextIntlProvider} from 'next-intl';
import PlausibleProvider from 'next-plausible'; import PlausibleProvider from 'next-plausible';
import Head from 'next/head';
function _App({ Component, pageProps }: AppProps) { function _App({ Component, pageProps }: AppProps) {
return ( 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"> <PlausibleProvider trackOutboundLinks={true} domain="vannerba.st">
<NextIntlProvider messages={pageProps.messages}> <NextIntlProvider messages={pageProps.messages}>
<Component {...pageProps} /> <Component {...pageProps} />
</NextIntlProvider> </NextIntlProvider>
</PlausibleProvider> </PlausibleProvider>
</>
) )
} }
export default _App export default _App

35
pages/birthdays.tsx Normal file
View 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&apos; 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>
</>
);
}

43
pages/index.tsx
View file

@ -1,9 +1,8 @@
import Head from 'next/head' import Head from 'next/head'
import Link from 'next/link'
import { useTranslations } from 'next-intl' import { useTranslations } from 'next-intl'
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import Image from 'next/image' import Image from 'next/image'
import LinkCard from '../components/linkcard' import {LinkCard, Title} from '../components'
export function getStaticProps({locale}: GetStaticPropsContext) { export function getStaticProps({locale}: GetStaticPropsContext) {
return { return {
@ -19,36 +18,26 @@ export function getStaticProps({locale}: GetStaticPropsContext) {
export default function Home() { export default function Home() {
const t = useTranslations('common') const t = useTranslations('common')
return ( return (
<div className=""> <div className="min-h-screen min-w-full bg-gray-400 dark:bg-gray-800">
<Head> <Head>
<title>Vänner Bäst | Friends Best</title> <meta name="description" content="A Young Royals fan website with links to different discussion spaces." />
<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 property="og: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> </Head>
<main className="container mx-auto min-h-screen min-w-full bg-gray-300 dark:bg-gray-700"> <main className="container mx-auto flex flex-col py-2 font-body">
<Image src="/yr.jpg" alt="Young Royals" width={512} height={288} className="py-6" /> <Title>
<h1 className="dark:text-gray-300 font-bold text-center text-6xl pt-4"> {t('welcome')}
{t('welcome')} </Title>
</h1> <p className="dark:text-gray-300 text-center md:text-2xl text-lg">
<p className="dark:text-gray-300 text-center text-2xl"> {t('desc')}
{t('desc')} </p>
</p> <div className="grid grid-flow-col grid-cols-2 grid-rows-2 gap-6 pt-4 px-8">
<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/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/discord" title={`Discord`} sub={t('discord')}/> <LinkCard link="https://vannerba.st/reddit" title={`Reddit`} sub={t('reddit')}/>
<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')}/>
<LinkCard link="https://vannerba.st/learn" title={t('learn.title')} sub={t('learn.desc')}/> </div>
</div>
</main> </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> </div>
) )
} }

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
public/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

21
styles/globals.css
View file

@ -1,17 +1,4 @@
html, @import url('/fonts/ubuntu');
body { @tailwind base;
background-color: #2b2b2b; @tailwind components;
padding: 0; @tailwind utilities;
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;
}

3
tailwind.config.js
View file

@ -10,6 +10,9 @@ module.exports = {
container: { container: {
center: true, center: true,
}, },
fontFamily: {
'body': ['Ubuntu', 'sans-serif'],
}
}, },
variants: { variants: {
extend: {}, extend: {},

9231
yarn.lock
View file

File diff suppressed because it is too large Load diff