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

Updated design to a tailwindcss based design. Already looking better on mobile.

Browse source 
Some optimisation still needs to be done
This commit is contained in:
Ludoviko 2021-09-02 21:27:37 +01:00
parent 1f21e18241
commit 3a7194b33d
No known key found for this signature in database
GPG key ID: 1E66DEA3F5D623D1
9 changed files with 653 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
components/linkcard.tsx Normal file
View file

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

3
next-env.d.ts vendored
View file

@ -1,3 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/types/global" /> /// <reference types="next/types/global" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

13
package.json
View file

@ -9,11 +9,14 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"next": "11.0.1", "autoprefixer": "^10.3.3",
"next-intl": "^1.4.4", "next": "^11.1.2",
"next-plausible": "^2.0.0", "next-intl": "^2.0.0",
"react": "17.0.2", "next-plausible": "^2.1.1",
"react-dom": "17.0.2" "postcss": "^8.3.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "^2.2.9"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "17.0.14", "@types/react": "17.0.14",

2
pages/_app.tsx
View file

@ -1,4 +1,4 @@
import '../styles/globals.css' import 'tailwindcss/tailwind.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';

13
pages/api/hello.ts
View file

@ -1,13 +0,0 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
name: string
}
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json({ name: 'John Doe' })
}

38
pages/index.tsx
View file

@ -1,10 +1,9 @@
import Head from 'next/head' import Head from 'next/head'
import Link from 'next/link' import Link from 'next/link'
import styles from '../styles/Home.module.css'
import { useRouter } from 'next/router'
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'
export function getStaticProps({locale}: GetStaticPropsContext) { export function getStaticProps({locale}: GetStaticPropsContext) {
return { return {
@ -18,10 +17,9 @@ export function getStaticProps({locale}: GetStaticPropsContext) {
} }
export default function Home() { export default function Home() {
const router = useRouter()
const t = useTranslations('common') const t = useTranslations('common')
return ( return (
<div className={styles.container}> <div className="">
<Head> <Head>
<title>Vänner Bäst | Friends Best</title> <title>Vänner Bäst | Friends Best</title>
<meta name="description" content="Generated by create next app" /> <meta name="description" content="Generated by create next app" />
@ -35,34 +33,22 @@ export default function Home() {
<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={styles.main}> <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={256} height={144} /> <Image src="/yr.jpg" alt="Young Royals" width={512} height={288} className="py-6" />
<h1 className={styles.title}> <h1 className="dark:text-gray-300 font-bold text-center text-6xl pt-4">
{t('welcome')} {t('welcome')}
</h1> </h1>
<p className={styles.description}> <p className="dark:text-gray-300 text-center text-2xl">
{t('desc')} {t('desc')}
</p> </p>
<div className={styles.grid}> <div className="grid grid-flow-col grid-cols-2 grid-rows-2 gap-6 pt-4 px-8">
<a href="https://vannerba.st/watch" className={styles.card}> <LinkCard link="https://vannerba.st/watch" title={`${t('watch.title')}`} sub={t('watch.desc')}/>
<h2>{t('watch.title')} &rarr;</h2> <LinkCard link="https://vannerba.st/discord" title={`Discord`} sub={t('discord')}/>
<p>{t('watch.desc')} </p> <LinkCard link="https://vannerba.st/reddit" title={`Reddit`} sub={t('reddit')}/>
</a> <LinkCard link="https://vannerba.st/learn" title={t('learn.title')} sub={t('learn.desc')}/>
<a href="https://vannerba.st/discord" className={styles.card}>
<h2>Discord &rarr;</h2>
<p>{t('discord')}</p>
</a>
<a href="https://vannerba.st/reddit" className={styles.card}>
<h2>Reddit &rarr;</h2>
<p>{t('reddit')}</p>
</a>
<a href="https://vannerba.st/learn" className={styles.card}>
<h2>{t('learn.title')} &rarr;</h2>
<p>{t('learn.desc')}</p>
</a>
</div> </div>
</main> </main>
<footer className={styles.footer}><Link href="https://ludoviko.ch">Created by: Ludoviko</Link></footer> <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>
) )
} }

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

18
tailwind.config.js Normal file
View file

@ -0,0 +1,18 @@
const colors = require('tailwindcss/colors')
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: 'media', // or 'media' or 'class'
theme: {
extend: {
boxSizing: ['hover'],
},
container: {
center: true,
},
},
variants: {
extend: {},
},
plugins: [],
}

704
yarn.lock
View file

File diff suppressed because it is too large Load diff