diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..3b9faef --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/components/*": ["./src/components/*"], + "@/utils/*": ["./src/utils/*"], + "@/public/*": ["./public/*"], + "@/locales/*": ["./locales/*"], + "@/app/*": ["./src/app/*"] + } + } +} diff --git a/next.config.js b/next.config.js index 22a3ba3..2b08ebc 100644 --- a/next.config.js +++ b/next.config.js @@ -1,12 +1,7 @@ /** @type {import('next').NextConfig} */ -import { getLocaleList } from './src/utils/locale.js'; const nextConfig = { reactStrictMode: true, - i18n: { - locales: getLocaleList(), - defaultLocale: 'en-US', - }, images: { remotePatterns: [ { diff --git a/package-lock.json b/package-lock.json index 61d61c5..5454efb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "phosphor-react-sc": "^1.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "server-only": "^0.0.1", "sharp": "^0.32.4" }, "devDependencies": { @@ -3252,6 +3253,11 @@ "node": ">=10" } }, + "node_modules/server-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz", + "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==" + }, "node_modules/sharp": { "version": "0.32.5", "hasInstallScript": true, diff --git a/package.json b/package.json index 644d436..da71c98 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "phosphor-react-sc": "^1.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "server-only": "^0.0.1", "sharp": "^0.32.4" }, "devDependencies": { diff --git a/src/app/layout.js b/src/app/layout.js index 17f4205..88c5acb 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,8 +1,30 @@ +import '../styles/globals.css'; + +import { Poppins } from 'next/font/google'; +const poppins = Poppins({ + weight: ['400', '700'], + variable: '--font-poppins', + fallback: ['Arial', 'Helvetica', 'system-ui', 'sans-serif'], + subsets: ['latin'], // this is the preloaded subset, all subsets will be available +}); + +export default function RootLayout({ children }) { + return ( + + + {children} + + + ); +} + export const metadata = { title: { template: '%s | Pretendo Network', default: 'Pretendo Network', // a default is required when creating a template }, + description: + 'An open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles', manifest: '/site.webmanifest', applicationName: 'Pretendo Network', themeColor: '#1b1f3b', @@ -10,7 +32,8 @@ export const metadata = { title: 'Pretendo Network', }, openGraph: { - description: 'The React Framework for the Web', + description: + 'An open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles', url: 'https://pretendo.network', siteName: 'Pretendo Network', images: [ @@ -39,25 +62,3 @@ export const metadata = { 'msapplication-config': '/assets/browserconfig.xml', }, }; - -import '../styles/globals.css'; - -import { Poppins } from 'next/font/google'; -const poppins = Poppins({ - weight: ['400', '700'], - variable: '--font-poppins', - fallback: ['Arial', 'Helvetica', 'system-ui', 'sans-serif'], - subsets: ['latin'], // this is the preloaded subset, all subsets will be available -}); - -export default function RootLayout({ - // Layouts must accept a children prop. - // This will be populated with nested layouts or pages - children, -}) { - return ( - - {children} - - ); -} diff --git a/src/app/page.js b/src/app/page.js index af0ae1c..df9e028 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,24 +1,24 @@ -import { getLocale } from '../utils/locale.js'; +import Button from '@/components/Button/Button'; +import ButtonWidget from '@/components/ButtonWidget/ButtonWidget'; +import Caption from '@/components/Caption/Caption'; +import Faq from '@/components/Faq/Faq'; +import Hero from '@/components/Hero/Hero'; +import Logo from '@/components/Logo/Logo'; +import TeamCard from '@/components/TeamCard/TeamCard'; +import Title from '@/components/Title/Title'; +import Section from '@/components/Section/Section'; +import ShowcaseSection from '@/components/ShowcaseSection/ShowcaseSection'; -import Button from '../components/Button/Button'; -import ButtonWidget from '../components/ButtonWidget/ButtonWidget'; -import Caption from '../components/Caption/Caption'; -import Faq from '../components/Faq/Faq'; -import Hero from '../components/Hero/Hero'; -import Logo from '../components/Logo/Logo'; -import TeamCard from '../components/TeamCard/TeamCard'; -import Title from '../components/Title/Title'; -import Section from '../components/Section/Section'; -import ShowcaseSection from '../components/ShowcaseSection/ShowcaseSection'; +import { getLocale } from '@/utils/locale'; -import ImageFix from '../components/ImageFix/ImageFix'; +import ImageFix from '@/components/ImageFix/ImageFix'; import styles from './page.module.css'; -import juxtImage from '../../public/assets/images/showcase/juxt.png'; -import networkImage from '../../public/assets/images/showcase/network.png'; -import pcmouseImage from '../../public/assets/images/showcase/pcmouse.png'; -import wiiuchatImage from '../../public/assets/images/showcase/wiiuchat.png'; +import juxtImage from '@/public/assets/images/showcase/juxt.png'; +import networkImage from '@/public/assets/images/showcase/network.png'; +import pcmouseImage from '@/public/assets/images/showcase/pcmouse.png'; +import wiiuchatImage from '@/public/assets/images/showcase/wiiuchat.png'; const showcaseImages = { juxt: juxtImage, @@ -28,7 +28,7 @@ const showcaseImages = { }; export default function Home(ctx) { - const locale = getLocale('TODO'); + const { locale } = getLocale('TODO'); return (
@@ -148,9 +148,9 @@ export default function Home(ctx) { -
+
- + {locale.discordJoin.title} diff --git a/src/app/page.module.css b/src/app/page.module.css index 005022c..a81323c 100644 --- a/src/app/page.module.css +++ b/src/app/page.module.css @@ -109,15 +109,22 @@ right: 100%; } +.discordJoin { + margin-top: 8rem; + padding: 16rem 0; +} + .discordJoin::after { content: ''; position: absolute; top: 0; left: 50%; - width: 3000px; - height: 1500px; + width: 4000px; + height: 100%; background: var(--bg-shade-2); - border-radius: 100%; + border-radius: 50% / 100%; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; transform: translate(-50%, 0); z-index: -1; } @@ -154,3 +161,9 @@ display: none; } } + +@media screen and (max-width: 840px) { + .discordJoin .logo { + scale: 0.8; + } +} diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 33e6040..b69170f 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import CoolHover from '../CoolHover/CoolHover'; +import CoolHover from '@/components/CoolHover/CoolHover'; import styles from './Button.module.css'; import Link from 'next/link'; diff --git a/src/components/ButtonWidget/ButtonWidget.js b/src/components/ButtonWidget/ButtonWidget.js index 84b7b03..da1e1cf 100644 --- a/src/components/ButtonWidget/ButtonWidget.js +++ b/src/components/ButtonWidget/ButtonWidget.js @@ -1,7 +1,7 @@ import classNames from 'classnames'; import styles from './ButtonWidget.module.css'; -import Button from '../Button/Button'; +import Button from '@/components/Button/Button'; /** * A reusable component for label/button combo widgets (see https://pretendo.network#discord-join). diff --git a/src/components/Faq/Faq.module.css b/src/components/Faq/Faq.module.css index 0b52cf8..962e6ef 100644 --- a/src/components/Faq/Faq.module.css +++ b/src/components/Faq/Faq.module.css @@ -42,4 +42,24 @@ grid-template-columns: 1fr; gap: 0; } + + .question h3 { + font-size: 1.2rem; + } + + .chevron { + scale: 0.8; + top: 4px; + } +} + +@media screen and (max-width: 420px) { + .question h3 { + font-size: 1rem; + } + + .chevron { + scale: 0.7; + top: 6px; + } } diff --git a/src/components/Hero/Hero.js b/src/components/Hero/Hero.js index b39fd22..c294d45 100644 --- a/src/components/Hero/Hero.js +++ b/src/components/Hero/Hero.js @@ -1,9 +1,9 @@ -import ImageFix from '../ImageFix/ImageFix'; +import ImageFix from '@/components/ImageFix/ImageFix'; import n2ds from '/public/assets/images/n2ds.png'; -import Title from '../Title/Title'; -import Caption from '../Caption/Caption'; -import Button from '../Button/Button'; +import Title from '@/components/Title/Title'; +import Caption from '@/components/Caption/Caption'; +import Button from '@/components/Button/Button'; import styles from './Hero.module.css'; @@ -24,22 +24,24 @@ export default function Hero() { Read more - +
+ - + - + +
diff --git a/src/components/Hero/Hero.module.css b/src/components/Hero/Hero.module.css index 644943d..a9c45e0 100644 --- a/src/components/Hero/Hero.module.css +++ b/src/components/Hero/Hero.module.css @@ -13,13 +13,17 @@ } .buttons { - display: grid; - grid-auto-flow: column; - grid-auto-columns: max-content; + display: flex; + flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; } - +.buttons div { + display: flex; + flex-wrap: wrap; + max-width: 100%; + gap: 1rem; +} .images .lightCircle { position: relative; diff --git a/src/components/Logo/Logo.js b/src/components/Logo/Logo.js index 18618c1..6848f67 100644 --- a/src/components/Logo/Logo.js +++ b/src/components/Logo/Logo.js @@ -24,7 +24,7 @@ export default function Logo(ctx) { className={className} style={{ display: 'block', - margin: center ? '0 auto' : 'unset', + margin: center ? '0 auto' : '', ...style, }} > @@ -35,14 +35,14 @@ export default function Logo(ctx) { {text && ( Pretendo diff --git a/src/components/ShowcaseSection/ShowcaseSection.js b/src/components/ShowcaseSection/ShowcaseSection.js index 02dda98..b35eb99 100644 --- a/src/components/ShowcaseSection/ShowcaseSection.js +++ b/src/components/ShowcaseSection/ShowcaseSection.js @@ -1,10 +1,10 @@ import styles from './ShowcaseSection.module.css'; import classNames from 'classnames'; -import ImageFix from '../ImageFix/ImageFix'; +import ImageFix from '@/components/ImageFix/ImageFix'; -import Section from '../Section/Section'; -import Title from '../Title/Title'; +import Section from '@/components/Section/Section'; +import Title from '@/components/Title/Title'; export default function ShowcaseSection(ctx) { const { title, caption, image, isOdd } = ctx; diff --git a/src/components/TeamCard/TeamCard.js b/src/components/TeamCard/TeamCard.js index 5d8ca66..398c879 100644 --- a/src/components/TeamCard/TeamCard.js +++ b/src/components/TeamCard/TeamCard.js @@ -1,5 +1,5 @@ import styles from './TeamCard.module.css'; -import ImageFix from '../ImageFix/ImageFix'; +import ImageFix from '@/components/ImageFix/ImageFix'; import Link from 'next/link'; import { Star } from 'phosphor-react-sc'; diff --git a/src/components/TeamCard/TeamCard.module.css b/src/components/TeamCard/TeamCard.module.css index 11843df..d3504ae 100644 --- a/src/components/TeamCard/TeamCard.module.css +++ b/src/components/TeamCard/TeamCard.module.css @@ -122,7 +122,7 @@ transform: translate(calc(50% - 0.05rem), calc(-50% + 0.05rem)); } -@media screen and (max-width: 36rem) { +@media screen and (max-width: 840px) { .card { padding: 0.9rem; border-radius: 0.7rem; diff --git a/src/components/Title/Title.js b/src/components/Title/Title.js index b50d810..56787d4 100644 --- a/src/components/Title/Title.js +++ b/src/components/Title/Title.js @@ -14,7 +14,7 @@ import styles from './Title.module.css'; */ export default function Title(ctx) { - const { children: title = '', element, style, id, center } = ctx; + const { children: title = '', className, element, style, id, center } = ctx; // regex to match all start/end punctuation except for parentheses and brackets. Please never make me do this again. const punctuationRegex = { @@ -53,7 +53,7 @@ export default function Title(ctx) { const titleElement = createElement( element || 'h2', { - className: classNames(styles.title, { [styles.center]: center }), + className: classNames(className, styles.title, { [styles.center]: center }), style, id, }, diff --git a/src/styles/globals.css b/src/styles/globals.css index 8ab22e2..a1b8a34 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -29,6 +29,10 @@ --yellow-shade-1: #abbf3b; } +* { + box-sizing: border-box; +} + body { background: var(--bg-shade-1); padding-bottom: env(safe-area-inset-bottom); diff --git a/src/utils/locale.js b/src/utils/locale.js index 732ee43..ffd978a 100644 --- a/src/utils/locale.js +++ b/src/utils/locale.js @@ -2,25 +2,31 @@ import fs from 'fs-extra'; import merge from 'lodash.merge'; import logger from './logger.js'; -import baseLocale from '../../locales/en_US.json' assert {type: 'json'}; +import baseLocale from '@/locales/en_US.json' assert { type: 'json' }; function getLocale(code) { const localeCode = code.replace('-', '_'); - const path = `./locales/${localeCode}.json`; + const path = `@/locales/${localeCode}.json`; if (fs.pathExistsSync(path)) { const selectedLocale = JSON.parse(fs.readFileSync(path, 'utf8')); const finalLocale = merge({}, baseLocale, selectedLocale); - return finalLocale; + return { + locale: finalLocale, + localeCode: localeCode, + }; } else { logger.warn(`Could not find locale ${localeCode}! Loading en_US`); - return baseLocale; + return { + locale: baseLocale, + localeCode: 'en-US', + }; } -}; +} function getLocaleList() { - const filenames = fs.readdirSync('./locales').map((filename) => filename.replace('.json', '').replace('_', '-')); + const filenames = fs.readdirSync('@/locales').map((filename) => filename.replace('.json', '').replace('_', '-')); return filenames; }