diff --git a/README.md b/README.md index f67b402..f0e4685 100644 --- a/README.md +++ b/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). diff --git a/package-lock.json b/package-lock.json index 02e2299..61d61c5 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d8999b8..644d436 100644 --- a/package.json +++ b/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" diff --git a/public/assets/images/icons/android-chrome-192x192.png b/public/assets/images/icons/android-chrome-192x192.png deleted file mode 100644 index 052c356..0000000 Binary files a/public/assets/images/icons/android-chrome-192x192.png and /dev/null differ diff --git a/public/assets/images/icons/apple-touch-icon.png b/public/assets/images/icons/apple-touch-icon.png deleted file mode 100644 index 428b10c..0000000 Binary files a/public/assets/images/icons/apple-touch-icon.png and /dev/null differ diff --git a/public/assets/images/icons/favicon-16x16.png b/public/assets/images/icons/favicon-16x16.png deleted file mode 100644 index 105121a..0000000 Binary files a/public/assets/images/icons/favicon-16x16.png and /dev/null differ diff --git a/public/assets/images/icons/favicon-32x32.png b/public/assets/images/icons/favicon-32x32.png deleted file mode 100644 index 787474f..0000000 Binary files a/public/assets/images/icons/favicon-32x32.png and /dev/null differ diff --git a/public/assets/images/icons/mstile-150x150.png b/public/assets/images/icons/mstile-150x150.png deleted file mode 100644 index 08e610a..0000000 Binary files a/public/assets/images/icons/mstile-150x150.png and /dev/null differ diff --git a/public/assets/images/icons/safari-pinned-tab.svg b/public/assets/images/icons/safari-pinned-tab.svg deleted file mode 100644 index d8cae50..0000000 --- a/public/assets/images/icons/safari-pinned-tab.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - -Created by potrace 1.14, written by Peter Selinger 2001-2017 - - - - - - diff --git a/public/assets/images/icons/android-chrome-384x384.png b/src/app/apple-icon.png similarity index 100% rename from public/assets/images/icons/android-chrome-384x384.png rename to src/app/apple-icon.png diff --git a/public/assets/images/icons/favicon.ico b/src/app/favicon.ico similarity index 100% rename from public/assets/images/icons/favicon.ico rename to src/app/favicon.ico diff --git a/src/app/icon.png b/src/app/icon.png new file mode 100644 index 0000000..f2f8cb0 Binary files /dev/null and b/src/app/icon.png differ diff --git a/src/app/layout.js b/src/app/layout.js new file mode 100644 index 0000000..17f4205 --- /dev/null +++ b/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 ( + + {children} + + ); +} diff --git a/src/pages/index.js b/src/app/page.js similarity index 87% rename from src/pages/index.js rename to src/app/page.js index 78ba426..af0ae1c 100644 --- a/src/pages/index.js +++ b/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 (
- {/**/} +
@@ -79,14 +68,8 @@ export default function Home({ locale }) { Check out our progress page for an extensive list of our current progress and goals! -
@@ -177,10 +160,8 @@ export default function Home({ locale }) { { - 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} diff --git a/src/pages/index.module.css b/src/app/page.module.css similarity index 100% rename from src/pages/index.module.css rename to src/app/page.module.css diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 19c72ed..33e6040 100644 --- a/src/components/Button/Button.js +++ b/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 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 ( - - - + + + ); + }; + + return href ? ( + + + + ) : ( + ); } diff --git a/src/components/ButtonWidget/ButtonWidget.js b/src/components/ButtonWidget/ButtonWidget.js index 99c2ea6..84b7b03 100644 --- a/src/components/ButtonWidget/ButtonWidget.js +++ b/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 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 (

{children}

-
diff --git a/src/components/CoolHover/CoolHover.js b/src/components/CoolHover/CoolHover.js index c7192e4..9358d03 100644 --- a/src/components/CoolHover/CoolHover.js +++ b/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 (
{ @@ -43,7 +47,7 @@ export default function CoolHover(ctx) { }} onMouseLeave={() => setActive(false)} > - { children } + {children}
); } diff --git a/src/components/Faq/Faq.js b/src/components/Faq/Faq.js index bfcf8fa..36a73a9 100644 --- a/src/components/Faq/Faq.js +++ b/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'; diff --git a/src/components/Hero/Hero.js b/src/components/Hero/Hero.js index 4af46c7..b39fd22 100644 --- a/src/components/Hero/Hero.js +++ b/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
- - - - - - - - - - - - + + + + + + +
diff --git a/src/components/TeamCard/TeamCard.js b/src/components/TeamCard/TeamCard.js index 3c9b3cd..5d8ca66 100644 --- a/src/components/TeamCard/TeamCard.js +++ b/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'; diff --git a/src/pages/_app.js b/src/pages/_app.js deleted file mode 100644 index 3c2d1ad..0000000 --- a/src/pages/_app.js +++ /dev/null @@ -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 ( -
- - -
- ); -} - -export default Pretendo; diff --git a/src/pages/_document.js b/src/pages/_document.js deleted file mode 100644 index 4fb66f6..0000000 --- a/src/pages/_document.js +++ /dev/null @@ -1,60 +0,0 @@ -import { Html, Head, Main, NextScript } from 'next/document'; -import Script from 'next/script'; - -export default function Document() { - return ( - - - - - - - {/* windows-ios-chrome */} - - - - - - - {/* opengraph */} - - - - - - - {/* twitter */} - - - - - - {/* seo */} - - - {/* rss */} - {/**/} - - {/* icons */} - - - - - - - -
- - - {/* Cloudflare Web Analytics */} - - - ); -} diff --git a/src/styles/globals.css b/src/styles/globals.css index 3fbaf56..8ab22e2 100644 --- a/src/styles/globals.css +++ b/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 { diff --git a/src/utils/logger.js b/src/utils/logger.js index 2412e59..52c6468 100644 --- a/src/utils/logger.js +++ b/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 = {