Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-09-11 18:37:33 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: add jsconfig paths, minor changes

Browse Source
This commit is contained in:
gitlimes
2023-08-30 11:46:00 +02:00
parent 28e2d40c7e
commit 2daf57690a
19 changed files with 158 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
jsconfig.json Normal file
View File

@@ -0,0 +1,12 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/components/*": ["./src/components/*"],
"@/utils/*": ["./src/utils/*"],
"@/public/*": ["./public/*"],
"@/locales/*": ["./locales/*"],
"@/app/*": ["./src/app/*"]
}
}
}

5
next.config.js
View File

@@ -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: [
{

6
package-lock.json generated
View File

@@ -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,

1
package.json
View File

@@ -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": {

47
src/app/layout.js
View File

@@ -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 (
<html className={`${poppins.variable}`}>
<body>
{children}
</body>
</html>
);
}
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 (
<html className={`${poppins.variable}`}>
<body>{children}</body>
</html>
);
}

38
src/app/page.js
View File

@@ -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 (
<main>
@@ -148,9 +148,9 @@ export default function Home(ctx) {
</div>
</Section>
<Section className={styles.discordJoin} style={{ marginTop: '4rem' }}>
<Section className={styles.discordJoin}>
<Section compact>
<Logo center size={96} style={{ marginBottom: '4rem' }} />
<Logo center size={96} className={styles.logo} style={{ marginBottom: '4rem' }} />
<Title center id="discord-join">
{locale.discordJoin.title}
</Title>

19
src/app/page.module.css
View File

@@ -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;
}
}

2
src/components/Button/Button.js
View File

@@ -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';

2
src/components/ButtonWidget/ButtonWidget.js
View File

@@ -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).

20
src/components/Faq/Faq.module.css
View File

@@ -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;
}
}

38
src/components/Hero/Hero.js
View File

@@ -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
</Button>
<Button icon href="https://discord.gg/pretendo" target="_blank" aria-label="Discord server">
<DiscordLogo size={32} weight="fill" />
</Button>
<div>
<Button icon href="https://discord.gg/pretendo" target="_blank" aria-label="Discord server">
<DiscordLogo size={32} weight="fill" />
</Button>
<Button
icon
href="https://github.com/pretendonetwork"
target="_blank"
aria-label="GitHub organization"
>
<GithubLogo size={32} weight="fill" />
</Button>
<Button
icon
href="https://github.com/pretendonetwork"
target="_blank"
aria-label="GitHub organization"
>
<GithubLogo size={32} weight="fill" />
</Button>
<Button icon href="/account/upgrade" target="_blank" aria-label="Upgrade page">
<Heart size={32} weight="fill" />
</Button>
<Button icon href="/account/upgrade" target="_blank" aria-label="Upgrade page">
<Heart size={32} weight="fill" />
</Button>
</div>
</div>
</div>
<div className={styles.images}>

12
src/components/Hero/Hero.module.css
View File

@@ -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;

14
src/components/Logo/Logo.js
View File

@@ -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 && (
<text
fill="#fff"
font-family="Poppins-Bold, Poppins"
font-size="17"
font-weight="700"
fontFamily="Poppins-Bold, Poppins"
fontSize="17"
fontWeight="700"
x="100%"
y="50%"
text-anchor="end"
alignment-baseline="central"
dominant-baseline="central"
textAnchor="end"
alignmentBaseline="central"
dominantBaseline="central"
>
Pretendo
</text>

6
src/components/ShowcaseSection/ShowcaseSection.js
View File

@@ -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;

2
src/components/TeamCard/TeamCard.js
View File

@@ -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';

2
src/components/TeamCard/TeamCard.module.css
View File

@@ -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;

4
src/components/Title/Title.js
View File

@@ -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,
},

4
src/styles/globals.css
View File

@@ -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);

18
src/utils/locale.js
View File

@@ -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;
}