From 1ee4053c4c1cb132f8803a3d9c93227d2c8f5a6f Mon Sep 17 00:00:00 2001 From: Ludoviko Date: Fri, 23 Jul 2021 19:35:41 +0100 Subject: [PATCH] Added links to homepage --- locales/en.json | 12 +++++++++ locales/es.json | 12 +++++++++ next-i18next.config.js | 6 +++++ next.config.js | 12 +++++++++ package.json | 1 + pages/_app.tsx | 9 ++++--- pages/index.tsx | 43 ++++++++++++++++++++++++++----- styles/Home.module.css | 13 +++++++++- styles/globals.css | 1 + yarn.lock | 57 ++++++++++++++++++++++++++++++++++++++++++ 10 files changed, 156 insertions(+), 10 deletions(-) create mode 100644 locales/en.json create mode 100644 locales/es.json create mode 100644 next-i18next.config.js diff --git a/locales/en.json b/locales/en.json new file mode 100644 index 0000000..1658508 --- /dev/null +++ b/locales/en.json @@ -0,0 +1,12 @@ +{ + "common": { + "welcome": "Welcome to Vänner Bäst.", + "desc": "A Young Royals fan website with links to different discussion spaces.", + "watch": { + "title": "Watch", + "desc": "Watch the series on Netflix" + }, + "discord": "Join our community Discord server to discuss all things Young Royals", + "reddit": "Join the community subreddit to discuss Young Royals" + } +} \ No newline at end of file diff --git a/locales/es.json b/locales/es.json new file mode 100644 index 0000000..fc6455d --- /dev/null +++ b/locales/es.json @@ -0,0 +1,12 @@ +{ + "common": { + "welcome": "Bienvid@ a Vänner Bäst.", + "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" + }, + "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" + } +} \ No newline at end of file diff --git a/next-i18next.config.js b/next-i18next.config.js new file mode 100644 index 0000000..b79fa82 --- /dev/null +++ b/next-i18next.config.js @@ -0,0 +1,6 @@ +module.exports = { + i18n: { + defaultLocale: 'en', + locales: ['en', 'es'], + }, +}; \ No newline at end of file diff --git a/next.config.js b/next.config.js index c824bb9..e8358be 100644 --- a/next.config.js +++ b/next.config.js @@ -1,5 +1,7 @@ +const { i18n } = require('./next-i18next.config'); module.exports = { + i18n, reactStrictMode: true, async redirects() { return [ @@ -7,6 +9,16 @@ module.exports = { source: '/discord', destination: 'https://discord.gg/ugxv4ZrVjC', permanent: true + }, + { + source: '/reddit', + destination: 'https://www.reddit.com/r/YoungRoyals/', + permanent: true + }, + { + source: '/watch', + destination: 'https://www.netflix.com/gb/title/81210762?s=i&trkid=13747225&vlang=en&clip=81459758', + permanent: true } ] } diff --git a/package.json b/package.json index 147acf0..02baa07 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "next": "11.0.1", + "next-intl": "^1.4.4", "react": "17.0.2", "react-dom": "17.0.2" }, diff --git a/pages/_app.tsx b/pages/_app.tsx index 945e892..9e9e2ff 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,7 +1,10 @@ import '../styles/globals.css' import type { AppProps } from 'next/app' +import {NextIntlProvider} from 'next-intl'; -function MyApp({ Component, pageProps }: AppProps) { - return +function _App({ Component, pageProps }: AppProps) { + return + + } -export default MyApp +export default _App diff --git a/pages/index.tsx b/pages/index.tsx index 21c89c9..f3b3fa4 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,24 +1,55 @@ import Head from 'next/head' -import Image from 'next/image' +import Link from 'next/link' import styles from '../styles/Home.module.css' +import { useRouter } from 'next/router' +import { useTranslations } from 'next-intl' +import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' + +export function getStaticProps({locale}: GetStaticPropsContext) { + return { + props: { + // You can get the messages from anywhere you like, but the recommended + // pattern is to put them in JSON files separated by language and read + // the desired one based on the `locale` received from Next.js. + messages: require(`../locales/${locale}.json`), + } + }; +} export default function Home() { + const router = useRouter() + const t = useTranslations('common') return (
- Vanner Bast | Friends Best + Vänner Bäst | Friends Best

- Welcome to Vanner Bast. + {t('welcome')}

-

- This website is currently WIP. -

+

+ {t('desc')} +

+
+ +

{t('watch.title')} →

+

{t('watch.desc')}

+ + +

Discord →

+

{t('discord')}

+ + +

Reddit →

+

{t('reddit')}

+ +
+
) } diff --git a/styles/Home.module.css b/styles/Home.module.css index 35454bb..95d409e 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -26,11 +26,16 @@ align-items: center; } +.footer a:hover { + color: #0070f3; +} + .footer a { display: flex; justify-content: center; align-items: center; flex-grow: 1; + color: #eaeaea; } .title a { @@ -53,6 +58,7 @@ .title, .description { text-align: center; + color: #eaeaea } .description { @@ -90,10 +96,15 @@ width: 45%; } +.card:link, +.card:visited { + color: #eaeaea +} + .card:hover, .card:focus, .card:active { - color: #0070f3; + color: #0070f3 !important; border-color: #0070f3; } diff --git a/styles/globals.css b/styles/globals.css index e5e2dcc..7109586 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,5 +1,6 @@ html, body { + background-color: #2b2b2b; padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, diff --git a/yarn.lock b/yarn.lock index d2761c4..ff3db2a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -69,6 +69,35 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@formatjs/ecma402-abstract@1.9.4": + version "1.9.4" + resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.9.4.tgz#797ae6c407fb5a0d09023a60c86f19aca1958c5e" + integrity sha512-ePJXI7tWC9PBxQxS7jtbkCLGVmpC8MH8n9Yjmg8dsh9wXK9svu7nAbq76Oiu5Zb+5GVkLkeTVerlSvHCbNImlA== + dependencies: + tslib "^2.1.0" + +"@formatjs/fast-memoize@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.1.1.tgz#3006b58aca1e39a98aca213356b42da5d173f26b" + integrity sha512-mIqBr5uigIlx13eZTOPSEh2buDiy3BCdMYUtewICREQjbb4xarDiVWoXSnrERM7NanZ+0TAHNXSqDe6HpEFQUg== + +"@formatjs/icu-messageformat-parser@2.0.7": + version "2.0.7" + resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.7.tgz#326efc14d9409cdbf1b7d3f42e0eed273c95c663" + integrity sha512-gduYfh/YdBTmb1XzLueNaofiGZVMrkaDg0RSa0GNztKWs4QXIRS+28cjcuWNpV0q5S8aiLMkP7SHQpZKnPCHLw== + dependencies: + "@formatjs/ecma402-abstract" "1.9.4" + "@formatjs/icu-skeleton-parser" "1.2.8" + tslib "^2.1.0" + +"@formatjs/icu-skeleton-parser@1.2.8": + version "1.2.8" + resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.2.8.tgz#ddf6c1f7274244b71237fad49a67dd97e81f5c0a" + integrity sha512-KLSSAA7Q2Uv7msij8saaOE5rpsHK/2WkfS3737JnDyVTFOYe8l2OarIBUoTC5gi1BnCgiN/1icZlqXwyUX6obA== + dependencies: + "@formatjs/ecma402-abstract" "1.9.4" + tslib "^2.1.0" + "@hapi/accept@5.0.2": version "5.0.2" resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.2.tgz#ab7043b037e68b722f93f376afb05e85c0699523" @@ -1555,6 +1584,15 @@ internal-slot@^1.0.3: has "^1.0.3" side-channel "^1.0.4" +intl-messageformat@^9.3.18: + version "9.8.0" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.8.0.tgz#a032cac18039929d8ea3f9dffe38f7207f7545be" + integrity sha512-di+/42/tyU+N0vwbnIRrgdpAIqlg4m3zYzjS0No7i9KljjclhF1HagcmLKYPo+6YisThzhA2h1mRNQdwtEAqCA== + dependencies: + "@formatjs/fast-memoize" "1.1.1" + "@formatjs/icu-messageformat-parser" "2.0.7" + tslib "^2.1.0" + is-arguments@^1.0.4: version "1.1.0" resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9" @@ -1942,6 +1980,13 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= +next-intl@^1.4.4: + version "1.4.4" + resolved "https://registry.yarnpkg.com/next-intl/-/next-intl-1.4.4.tgz#a149ddd44a05e86ecf85f4aef81bb9663016fc52" + integrity sha512-X0qieBrmFpQ6kMNl35OfZGnUXsqsQ6CusrgOLTxb1ud/EnagJibjr3v+7NinYEgTMapFvWHXKf8CWZZyW13Ntw== + dependencies: + use-intl "^1.4.4" + next@11.0.1: version "11.0.1" resolved "https://registry.yarnpkg.com/next/-/next-11.0.1.tgz#b8e3914d153aaf7143cb98c09bcd3c8230eeb17a" @@ -2981,6 +3026,11 @@ tslib@^1.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== +tslib@^2.1.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e" + integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg== + tsutils@^3.21.0: version "3.21.0" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623" @@ -3050,6 +3100,13 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-intl@^1.4.4: + version "1.4.4" + resolved "https://registry.yarnpkg.com/use-intl/-/use-intl-1.4.4.tgz#03f5f24614e836849fff1eb01fe7ef4c0275f180" + integrity sha512-4WoGybFYMVTq301DqmUSRoTMYSVe4Kd62+uJ8+gV2P6HitWmp89CLCz0mawFpGJRgEkRACO4IBpbe4lcfFmrQw== + dependencies: + intl-messageformat "^9.3.18" + use-subscription@1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"