feat: upgrade to Next.js 13 app routing.

README.md

@@ -2,6 +2,9 @@
 
 ## TODO
 - Remove jank to get the image component to work
+- Add rss meta tag once it's implemented
+- Update images in showcase
+- Remove phosphor-react-sc once official package supports server components.
 
 This repository contains the source code for [our website](https://pretendo.network). All contributions should go in the [dev branch](https://github.com/PretendoNetwork/website/tree/dev).
 

package-lock.json

@@ -15,6 +15,7 @@
         "lodash.merge": "^4.6.2",
         "next": "^13.4.19",
         "phosphor-react": "^1.4.1",
+        "phosphor-react-sc": "^1.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sharp": "^0.32.4"
@@ -2847,6 +2848,18 @@
         "react": ">=16"
       }
     },
+    "node_modules/phosphor-react-sc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/phosphor-react-sc/-/phosphor-react-sc-1.0.0.tgz",
+      "integrity": "sha512-iJIUoglY+63AFRyb7nDD/QYeVDhGWbZuEGhPJ0EoLLAhwP4LUtEbT/JHcImkYNNNa36kFcNLwuMcrIAQ/QGMCQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8",
+        "react-dom": ">= 16.8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "lodash.merge": "^4.6.2",
     "next": "^13.4.19",
     "phosphor-react": "^1.4.1",
+    "phosphor-react-sc": "^1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.32.4"

public/assets/images/icons/safari-pinned-tab.svg

@@ -1,26 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="429.000000pt" height="429.000000pt" viewBox="0 0 429.000000 429.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,429.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M0 2145 l0 -2145 2145 0 2145 0 0 2145 0 2145 -2145 0 -2145 0 0
--2145z m2349 1170 c279 -53 533 -193 668 -369 58 -74 63 -96 33 -126 -31 -31
--59 -25 -99 22 -122 144 -237 228 -396 289 -263 102 -524 113 -749 33 -56 -19
--111 -38 -123 -41 -30 -7 -65 30 -61 65 2 22 15 33 68 59 173 85 428 111 659
-68z m-99 -215 c235 -25 459 -135 586 -288 64 -78 74 -105 49 -132 -26 -29 -71
--26 -97 8 -138 170 -326 266 -578 294 -124 13 -241 -2 -351 -46 -78 -31 -100
--32 -123 -7 -29 32 -17 72 29 98 67 38 233 76 356 82 15 0 73 -4 129 -9z m90
--270 c420 -118 636 -591 451 -985 -60 -128 -144 -222 -270 -303 -80 -52 -147
--77 -261 -98 -121 -22 -239 -10 -368 39 l-92 34 0 -254 0 -255 -29 -29 c-29
--29 -29 -29 -156 -29 -127 0 -127 0 -156 29 l-29 29 0 821 0 820 24 28 c24 27
-28 28 148 33 122 5 123 6 178 43 57 39 169 80 260 96 78 14 213 5 300 -19z"/>
-<path d="M2042 2535 c-73 -21 -101 -37 -166 -96 -99 -91 -143 -214 -124 -351
-41 -300 398 -448 637 -262 240 186 202 549 -71 683 -80 40 -190 50 -276 26z"/>
-</g>
-</svg>

src/app/layout.js

@@ -0,0 +1,63 @@
+export const metadata = {
+	title: {
+		template: '%s | Pretendo Network',
+		default: 'Pretendo Network', // a default is required when creating a template
+	},
+	manifest: '/site.webmanifest',
+	applicationName: 'Pretendo Network',
+	themeColor: '#1b1f3b',
+	appleWebApp: {
+		title: 'Pretendo Network',
+	},
+	openGraph: {
+		description: 'The React Framework for the Web',
+		url: 'https://pretendo.network',
+		siteName: 'Pretendo Network',
+		images: [
+			{
+				url: 'https://pretendo.network/assets/images/opengraph/opengraph-image.png',
+				width: 727,
+				height: 298,
+				alt: 'Pretendo Network',
+			},
+		],
+		type: 'website',
+	},
+	twitter: {
+		card: 'summary_large_image',
+		site: '@PretendoNetwork',
+		creator: '@PretendoNetwork',
+		url: 'https://pretendo.network/',
+		images: ['https://pretendo.network/assets/images/opengraph/opengraph-image.png'],
+	},
+	robots: {
+		index: true,
+		follow: true,
+		nocache: true,
+	},
+	other: {
+		'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>
+	);
+}

src/app/page.js

@@ -1,4 +1,4 @@
-import { getLocale } from '../utils/locale';
+import { getLocale } from '../utils/locale.js';
 
 import Button from '../components/Button/Button';
 import ButtonWidget from '../components/ButtonWidget/ButtonWidget';
@@ -13,9 +13,7 @@ import ShowcaseSection from '../components/ShowcaseSection/ShowcaseSection';
 
 import ImageFix from '../components/ImageFix/ImageFix';
 
-import styles from './index.module.css';
-
-import { useRouter } from 'next/router';
+import styles from './page.module.css';
 
 import juxtImage from '../../public/assets/images/showcase/juxt.png';
 import networkImage from '../../public/assets/images/showcase/network.png';
@@ -29,22 +27,13 @@ const showcaseImages = {
 	wiiuchat: wiiuchatImage,
 };
 
-export async function getServerSideProps(ctx) {
-	const locale = getLocale(ctx.locale);
+export default function Home(ctx) {
+	const locale = getLocale('TODO');
 
-	return {
-		props: {
-			locale,
-		},
-	};
-}
-
-export default function Home({ locale }) {
-	const router = useRouter();
 	return (
 		<main>
 			<Section>
-				{/*<Hero />*/}
+				<Hero />
 			</Section>
 
 			<div id="showcase">
@@ -79,14 +68,8 @@ export default function Home({ locale }) {
 						<Caption center>
 							Check out our progress page for an extensive list of our current progress and goals!
 						</Caption>
-						<Button
-							primary
-							onClick={(e) => {
-								e.preventDefault();
-								router.push('/progress');
-							}}
-							style={{ margin: '2.5rem auto 0' }}
-						>
+
+						<Button primary href="/progress" style={{ margin: '2.5rem auto 0' }}>
 							Check progress
 						</Button>
 					</div>
@@ -177,10 +160,8 @@ export default function Home({ locale }) {
 				<ButtonWidget
 					primary
 					buttonText={locale.discordJoin.widget.button}
-					onButtonClick={(e) => {
-						e.preventDefault();
-						window.open('https://discord.gg/pretendo', '_blank');
-					}}
+					buttonHref="https://discord.gg/pretendo"
+					buttonTarget="_blank"
 					style={{ margin: '0 auto 4rem' }}
 				>
 					{locale.discordJoin.widget.text}

src/components/Button/Button.js

@@ -2,12 +2,16 @@ import classNames from 'classnames';
 import CoolHover from '../CoolHover/CoolHover';
 import styles from './Button.module.css';
 
+import Link from 'next/link';
+
 /**
  * A reusable component for buttons.
  *
  * @param {boolean} primary - Whether the button is primary or not. Defaults to false.
  * @param {boolean} icon - Whether the button only contains an icon. Defaults to false.
  * @param {boolean} compact - Make the button more compact. Defaults to false.
+ * @param {string} href - Path to redirect to, instead of using onClick.
+ * @param {string} target - Acts like the target attribute of an <a> tag.
  * @param className - An optional classname.
  * @param {string} style - Custom styles to apply to the button.
  *
@@ -17,28 +21,39 @@ import styles from './Button.module.css';
  */
 
 export default function Button(ctx) {
-	const { children, className, primary, icon, compact, onClick, style } = ctx;
-	return (
-		<CoolHover
-			bgColor={primary ? 'var(--accent-shade-0)' : 'var(--bg-shade-3)'}
-			hoverColor={primary ? 'var(--accent-shade-1)' : 'var(--bg-shade-3-5)'}
-			style={{
-				borderRadius: '6px',
-				width: 'fit-content',
-				height: 'fit-content',
-				...style,
-			}}
-		>
-			<button
-				className={classNames(
-					styles.button,
-					{ [styles.primary]: primary, [styles.icon]: icon, [styles.compact]: compact },
-					className
-				)}
-				onClick={onClick}
+	const { children, className, primary, icon, compact, onClick, href, target, style } = ctx;
+
+	const BtnEl = () => {
+		return (
+			<CoolHover
+				bgColor={primary ? 'var(--accent-shade-0)' : 'var(--bg-shade-3)'}
+				hoverColor={primary ? 'var(--accent-shade-1)' : 'var(--bg-shade-3-5)'}
+				style={{
+					borderRadius: '6px',
+					width: 'fit-content',
+					height: 'fit-content',
+					...style,
+				}}
 			>
-				{children}
-			</button>
-		</CoolHover>
+				<button
+					className={classNames(
+						styles.button,
+						{ [styles.primary]: primary, [styles.icon]: icon, [styles.compact]: compact },
+						className
+					)}
+					onClick={onClick}
+				>
+					{children}
+				</button>
+			</CoolHover>
+		);
+	};
+
+	return href ? (
+		<Link href={href} target={target}>
+			<BtnEl />
+		</Link>
+	) : (
+		<BtnEl />
 	);
 }

src/components/ButtonWidget/ButtonWidget.js

@@ -8,8 +8,9 @@ import Button from '../Button/Button';
  *
  * @param {string} buttonText - The text of the button.
  * @param {function} onButtonClick - Function to execute on click of the button.
+ * @param {string} buttonHref - Path to navigate to on button click. Alternative to onButtonClick.
+ * @param {string} buttonTarget - Acts like the target attribute of an <a> tag on the button.
  * @param {boolean} primary - Whether the button is primary. Defaults to false.
- * @param {boolean} center - Whether to center the widget. Defaults to false.
  * @param className - An optional classname.
  * @param {string} style - Custom styles to apply to the component.
  *
@@ -19,7 +20,7 @@ import Button from '../Button/Button';
  */
 
 export default function ButtonWidget(ctx) {
-	const { children, className, primary, buttonText, center, onButtonClick, style } = ctx;
+	const { children, className, primary, buttonText, onButtonClick, buttonHref, buttonTarget, style } = ctx;
 	return (
 		<div
 			className={classNames(styles.widget, className)}
@@ -28,7 +29,7 @@ export default function ButtonWidget(ctx) {
 			}}
 		>
 			<p>{children}</p>
-			<Button onClick={onButtonClick} primary={primary} compact>
+			<Button onClick={onButtonClick} href={buttonHref} target={buttonTarget} primary={primary} compact>
 				{buttonText}
 			</Button>
 		</div>

src/components/CoolHover/CoolHover.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 import styles from './CoolHover.module.css';
 import classNames from 'classnames';
@@ -21,20 +23,22 @@ import classNames from 'classnames';
 export default function CoolHover(ctx) {
 	const { hoverColor, bgColor, children, className, radius, style } = ctx;
 
-	const [ pos, setPos ] = useState({ x: 0, y: 0 });
-	const [ active, setActive ] = useState( false );
+	const [pos, setPos] = useState({ x: 0, y: 0 });
+	const [active, setActive] = useState(false);
 
 	return (
 		<div
 			style={{
-				width : '100%',
+				width: '100%',
 				height: '100%',
 				cursor: 'pointer',
 				backgroundColor: bgColor,
-				backgroundImage: active ? `radial-gradient(circle ${radius || '256px'} at ${pos.x}px ${pos.y}px, ${hoverColor}, ${bgColor})` :  bgColor,
+				backgroundImage: active
+					? `radial-gradient(circle ${radius || '256px'} at ${pos.x}px ${pos.y}px, ${hoverColor}, ${bgColor})`
+					: bgColor,
 				//transform: active ? 'scale(1.03)' : 'scale(1)',
 				//transition: 'transform 200ms'
-				...style
+				...style,
 			}}
 			className={classNames(className, styles.coolHover)}
 			onMouseMove={(e) => {
@@ -43,7 +47,7 @@ export default function CoolHover(ctx) {
 			}}
 			onMouseLeave={() => setActive(false)}
 		>
-			{ children }
+			{children}
 		</div>
 	);
 }

src/components/Faq/Faq.js

@@ -1,6 +1,8 @@
+'use client';
+
 import { useState } from 'react';
 import classNames from 'classnames';
-import { CaretRight } from 'phosphor-react';
+import { CaretRight } from 'phosphor-react-sc';
 
 import styles from './Faq.module.css';
 

src/components/Hero/Hero.js

@@ -5,11 +5,9 @@ import Title from '../Title/Title';
 import Caption from '../Caption/Caption';
 import Button from '../Button/Button';
 
-import Link from 'next/link';
-
 import styles from './Hero.module.css';
 
-import { DiscordLogo, GithubLogo, Heart } from 'phosphor-react';
+import { DiscordLogo, GithubLogo, Heart } from 'phosphor-react-sc';
 
 export default function Hero() {
 	return (
@@ -22,24 +20,26 @@ export default function Hero() {
 					allowing online connectivity for all, even after the original servers are discontinued
 				</Caption>
 				<div className={styles.buttons}>
-					<Link href="#showcase">
-						<Button primary>Read more</Button>
-					</Link>
-					<Link href="https://discord.gg/pretendo" aria-label="Discord server">
-						<Button icon>
-							<DiscordLogo size={32} weight="fill" />
-						</Button>
-					</Link>
-					<Link href="https://github.com/pretendonetwork" aria-label="GitHub organization">
-						<Button icon>
-							<GithubLogo size={32} weight="fill" />
-						</Button>
-					</Link>
-					<a href="/account/upgrade" aria-label="Upgrade page">
-						<Button icon>
-							<Heart size={32} weight="fill" />
-						</Button>
-					</a>
+					<Button primary href="#showcase">
+						Read more
+					</Button>
+
+					<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="/account/upgrade" target="_blank" aria-label="Upgrade page">
+						<Heart size={32} weight="fill" />
+					</Button>
 				</div>
 			</div>
 			<div className={styles.images}>

src/components/TeamCard/TeamCard.js

@@ -2,7 +2,7 @@ import styles from './TeamCard.module.css';
 import ImageFix from '../ImageFix/ImageFix';
 import Link from 'next/link';
 
-import { Star } from 'phosphor-react';
+import { Star } from 'phosphor-react-sc';
 
 import classNames from 'classnames';
 

src/pages/_app.js

@@ -1,23 +0,0 @@
-import '../styles/globals.css';
-
-import { Poppins } from 'next/font/google';
-const poppins = Poppins({
-	weight: ['400', '700'],
-	fallback: ['Arial', 'Helvetica', 'system-ui', 'sans-serif'],
-	subsets: ['latin'], // this is the preloaded subset, all subsets will be available
-});
-
-function Pretendo({ Component, pageProps }) {
-	return (
-		<main style={poppins.style}>
-			<style jsx global>{`
-				:root {
-					--font-family: ${poppins.style.fontFamily};
-				}
-			`}</style>
-			<Component {...pageProps} />
-		</main>
-	);
-}
-
-export default Pretendo;

src/pages/_document.js

@@ -1,60 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document';
-import Script from 'next/script';
-
-export default function Document() {
-	return (
-		<Html>
-			<Head>
-				<meta charSet="UTF-8" />
-				<link rel="manifest" href="/assets/site.webmanifest" />
-				<meta name="msapplication-config" content="/assets/browserconfig.xml" />
-
-				{/* windows-ios-chrome */}
-				<meta httpEquiv="X-UA-Compatible" content="ie=edge" />
-				<meta name="apple-mobile-web-app-title" content="Pretendo Network" />
-				<meta name="application-name" content="Pretendo Network" />
-				<meta name="msapplication-TileColor" content="#1b1f3b" />
-				<meta name="theme-color" content="#1b1f3b" />
-
-				{/* opengraph */}
-				<meta property="og:type" content="website" />
-				<meta property="og:url" content="https://pretendo.network/" />
-				<meta
-					property="og:image"
-					content="https://pretendo.network/assets/images/opengraph/opengraph-image.png"
-				/>
-				<meta property="og:image:alt" content="Pretendo Network" />
-				<meta property="og:site_name" content="Pretendo Network" />
-
-				{/* twitter */}
-				<meta name="twitter:url" content="https://pretendo.network/" />
-				<meta name="twitter:card" content="summary_large_image" />
-				<meta name="twitter:site" content="@PretendoNetwork" />
-				<meta name="twitter:creator" content="@PretendoNetwork" />
-
-				{/* seo */}
-				<meta name="robots" content="index, follow" />
-
-				{/* rss */}
-				{/*<link rel="alternate" type="application/rss+xml" title="Pretendo Network Blog" href="/blog/feed.xml"/>*/}
-
-				{/* icons */}
-				<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/icons/apple-touch-icon.png" />
-				<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/icons/favicon-32x32.png" />
-				<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/icons/favicon-16x16.png" />
-				<link rel="mask-icon" href="/assets/images/icons/safari-pinned-tab.svg" color="#1b1f3b" />
-				<link rel="shortcut icon" href="/assets/images/icons/favicon.ico" />
-			</Head>
-			<body>
-				<Main />
-				<NextScript />
-			</body>
-			{/* Cloudflare Web Analytics */}
-			<Script
-				defer
-				src="https://static.cloudflareinsights.com/beacon.min.js"
-				data-cf-beacon='{"token": "ea6695987d664a7f90874c9c0dee9385"}'
-			></Script>
-		</Html>
-	);
-}

src/styles/globals.css

@@ -44,6 +44,7 @@ body {
 	margin: 0;
 	color: var(--text-shade-1);
 	justify-content: center;
+	font-family: var(--font-poppins);
 }
 
 a {

src/utils/logger.js

@@ -1,7 +1,7 @@
 import fs from 'fs-extra';
 import chalk from 'chalk';
 
-const base = '../../logs';
+const base = './logs';
 fs.ensureDirSync(base);
 
 const writeStreams = {