Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-04-24 15:37:12 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add header, update phosphor icons

Browse Source
This commit is contained in:
gitlimes 2023-09-17 18:53:31 +02:00
parent 47084eeff2
commit a28cda1820
No known key found for this signature in database
GPG Key ID: 91BBFE7959F81F68
13 changed files with 892 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -4,7 +4,6 @@
- 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).

840
package-lock.json generated Executable file → Normal file
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -10,14 +10,13 @@
"lint": "next lint"
},
"dependencies": {
"@phosphor-icons/react": "^2.1.3",
"chalk": "^5.3.0",
"classnames": "^2.3.2",
"eslint": "^8.46.0",
"fs-extra": "^11.1.1",
"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",
"server-only": "^0.0.1",

6
src/app/layout.js
View File

@ -1,4 +1,5 @@
import '../styles/globals.css';
import Header from '@/components/Header/Header';
import Footer from '@/components/Footer/Footer';
import Script from 'next/script';
@ -13,11 +14,12 @@ const poppins = Poppins({
export default function RootLayout({ children }) {
return (
<html className={`${poppins.variable}`}>
<body>
<body style={{ paddingTop: '36px' }}>
<Header />
{children}
<Footer />
<Script
strategy='lazyOnLoad'
strategy="lazyOnLoad"
src="https://static.cloudflareinsights.com/beacon.min.js"
data-cf-beacon='{"token": "ea6695987d664a7f90874c9c0dee9385"}'
/>

2
src/app/page.js
View File

@ -36,7 +36,7 @@ export default function Home(ctx) {
<Hero locale={locale} />
</Section>
<div id="showcase">
<div id="about">
<Section className={styles.showcaseSection}>
<Title>What we make.</Title>
<Caption>Our project has many components. Here are some of them.</Caption>

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

@ -2,7 +2,7 @@
import { useState } from 'react';
import classNames from 'classnames';
import { CaretRight } from 'phosphor-react-sc';
import { CaretRight } from '@phosphor-icons/react/dist/ssr';
import styles from './Faq.module.css';

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

@ -3,7 +3,7 @@ import Logo from '@/components/Logo/Logo';
import Section from '@/components/Section/Section';
import Title from '@/components/Title/Title';
import { ArrowRight } from 'phosphor-react-sc';
import { ArrowRight } from '@phosphor-icons/react/dist/ssr';
import { getLocale } from '@/utils/locale';

25
src/components/Header/Header.js Normal file
View File

@ -0,0 +1,25 @@
import Logo from '@/components/Logo/Logo';
import Section from '@/components/Section/Section';
import Nav from './Nav';
import { getLocale } from '@/utils/locale';
import Link from 'next/link';
import styles from './Header.module.css';
export default function Header(ctx) {
const { locale } = getLocale('TODO');
return (
<header id="header">
<Section compact className={styles.headerWrapper} contentClassName={styles.header}>
<Link href="/" aria-label="Homepage" title="Homepage">
<Logo text size={42} className={styles.logo} />
</Link>
<Nav locale={locale} />
</Section>
</header>
);
}

178
src/components/Header/Header.module.css Normal file
View File

@ -0,0 +1,178 @@
.headerWrapper {
padding: 1rem 0 !important;
background: rgba(19, 23, 51, 0.9);
position: fixed !important;
width: 100%;
top: 0;
z-index: 99;
backdrop-filter: blur(2rem);
border-bottom: 1px solid var(--bg-shade-2);
}
.header {
position: relative;
display: flex;
flex-flow: row nowrap;
align-items: center;
gap: 2rem;
}
.logo {
margin-left: -8px;
}
.nav {
display: flex;
align-items: center;
flex-flow: row nowrap;
gap: 2rem;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-flow: row nowrap;
gap: 2rem;
}
.nav .dropdownTriggers {
position: relative;
gap: 0;
}
.nav .dropdownTriggers li:first-of-type button {
padding-right: 1rem;
}
.nav .dropdownTriggers li:last-of-type button {
padding-left: 1rem;
}
.nav li button {
appearance: none;
border: none;
padding: 0;
margin: 0;
background: none;
color: var(--text-shade-1);
font-size: inherit;
font-family: inherit;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5ch;
}
.nav ul button:hover {
color: var(--text-shade-3);
}
.nav li.upgrade button {
background: var(--bg-shade-3);
color: var(--accent-shade-3);
border-radius: 2rem;
font-weight: bold;
padding: 2px 12px;
}
.nav li.upgrade button:hover {
background: var(--accent-shade-1);
color: var(--text-shade-3);
}
.dropdown {
position: absolute;
background: var(--bg-shade-2);
top: 3rem;
left: 50%;
transform: translateX(-50%);
border-radius: 0.5rem;
border: 1px solid var(--bg-shade-3);
width: fit-content;
height: fit-content;
transition: width 150ms ease-out, height 150ms ease-out;
}
.dropdown::before {
content: '';
position: absolute;
display: block;
height: 1.6rem;
top: -1.6rem;
left: 0;
width: 100%;
}
.dropdown > div {
width: max-content;
height: max-content;
padding: 1.25rem;
}
.dropdown > div,
.dropdown .link {
animation: appear 0.75s;
}
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.dropdown .link {
position: relative;
display: flex;
flex-flow: row nowrap;
align-items: center;
gap: 1rem;
padding: 1.25rem;
padding-right: 5rem;
border-radius: 6px;
max-width: 90vw;
min-width: 24rem;
}
.dropdown .link .iconWrapper {
background: var(--bg-shade-0);
color: var(--accent-shade-2);
display: flex;
padding: 12px;
align-items: center;
justify-content: center;
border-radius: 6px;
}
.dropdown .link p {
margin: 0;
margin-top: 4px;
font-weight: 300;
color: var(--text-shade-3);
}
.dropdown .link .arrow {
display: none;
position: absolute;
right: 1.5rem;
color: var(--accent-shade-1);
}
.dropdown .link:hover {
background: var(--bg-shade-3);
}
.dropdown .link:hover .iconWrapper {
color: var(--accent-shade-1);
}
.dropdown .link:hover .arrow {
display: block;
}

174
src/components/Header/Nav.js Normal file
View File

@ -0,0 +1,174 @@
'use client';
/*
* This is a separate component because it needs to be rendered
* clientside, while the main header needs to be rendered on
* the server to be able to fetch the locale. Very cool.
*/
import Link from 'next/link';
import {
ArrowRight,
Heart,
Users,
Info,
SealQuestion,
NewspaperClipping,
Wrench,
SealWarning,
} from '@phosphor-icons/react';
import styles from './Header.module.css';
import { useState, useEffect, useRef } from 'react';
import Title from '../Title/Title';
export default function Nav({ locale }) {
const [open, setOpen] = useState(0);
const dropdown = useRef(null);
const dropdownWrap = useRef(null);
useEffect(() => {
let w = 0;
let h = 0;
const clR = dropdown?.current?.getBoundingClientRect();
if (clR && open) {
w = clR.width;
h = clR.height;
}
dropdownWrap.current.style.width = `${w}px`;
dropdownWrap.current.style.height = `${h}px`;
}, [open]);
const DropdownTrigger = ({ n, children }) => {
return (
<button
onMouseEnter={() => setOpen(n)}
onMouseLeave={() => setOpen(0)}
style={{
color: open === n && 'var(--text-shade-3)',
}}
>
{children}
</button>
);
};
const Dropdown1 = () => {
return (
<>
<Link className={styles.link} href="/#credits">
<div className={styles.iconWrapper}>
<Users weight="fill" size={32} />
</div>
<div>
<Title element="h4">{locale.nav.credits}</Title>
<p>{locale.nav.dropdown.captions.credits}</p>
</div>
<ArrowRight size={28} className={styles.arrow} />
</Link>
<Link className={styles.link} href="/#about">
<div className={styles.iconWrapper}>
<Info weight="fill" size={32} />
</div>
<div>
<Title element="h4">{locale.nav.about}</Title>
<p>{locale.nav.dropdown.captions.about}</p>
</div>
<ArrowRight size={28} className={styles.arrow} />
</Link>
<Link className={styles.link} href="/#faq">
<div className={styles.iconWrapper}>
<SealQuestion weight="fill" size={32} />
</div>
<div>
<Title element="h4">{locale.nav.faq}</Title>
<p>{locale.nav.dropdown.captions.faq}</p>
</div>
<ArrowRight size={28} className={styles.arrow} />
</Link>
<Link className={styles.link} href="/blog">
<div className={styles.iconWrapper}>
<NewspaperClipping weight="fill" size={32} />
</div>
<div>
<Title element="h4">{locale.nav.blog}</Title>
<p>{locale.nav.dropdown.captions.blog}</p>
</div>
<ArrowRight size={28} className={styles.arrow} />
</Link>
</>
);
};
const Dropdown2 = () => {
return (
<>
<Link className={styles.link} href="/docs">
<div className={styles.iconWrapper}>
<Wrench weight="fill" size={32} />
</div>
<div>
<Title element="h4">{locale.docs.quickLinks.links[0].header}</Title>
<p>{locale.docs.quickLinks.links[0].caption}</p>
</div>
<ArrowRight size={28} className={styles.arrow} />
</Link>
<Link className={styles.link} href="/docs/search">
<div className={styles.iconWrapper}>
<SealWarning weight="fill" size={32} />
</div>
<div>
<Title element="h4">{locale.docs.quickLinks.links[1].header}</Title>
<p>{locale.docs.quickLinks.links[1].caption}</p>
</div>
<ArrowRight size={28} className={styles.arrow} />
</Link>
</>
);
};
return (
<nav className={styles.nav}>
<ul className={styles.dropdownTriggers}>
<li>
<DropdownTrigger n={1}>{locale.nav.about}</DropdownTrigger>
</li>
<li>
<DropdownTrigger n={2}>{locale.nav.docs}</DropdownTrigger>
</li>
<div
className={styles.dropdown}
onMouseEnter={() => setOpen(open)}
onMouseLeave={() => setOpen(0)}
ref={dropdownWrap}
style={{
border: open ? '' : 'none',
}}
>
<div ref={dropdown}>{open === 1 ? <Dropdown1 /> : open === 2 ? <Dropdown2 /> : null}</div>
</div>
</ul>
<ul>
<li>
<Link href="/progress">
<button>{locale.nav.progress}</button>
</Link>
</li>
<li className={styles.upgrade}>
<Link href="/upgrade">
<button>
<Heart size={16} weight="fill" alt="" />
<span>{locale.nav.donate}</span>
</button>
</Link>
</li>
</ul>
</nav>
);
}

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

@ -7,7 +7,7 @@ import Button from '@/components/Button/Button';
import styles from './Hero.module.css';
import { DiscordLogo, GithubLogo, Heart } from 'phosphor-react-sc';
import { DiscordLogo, GithubLogo, Heart } from '@phosphor-icons/react/dist/ssr';
export default function Hero({ locale }) {
return (
@ -22,7 +22,13 @@ export default function Hero({ locale }) {
</Button>
<div>
<Button icon href="https://discord.gg/pretendo" target="_blank" aria-label="Discord server">
<Button
icon
href="https://discord.gg/pretendo"
target="_blank"
aria-label="Discord server"
title="Discord server"
>
<DiscordLogo size={32} weight="fill" alt="" />
</Button>
@ -35,7 +41,7 @@ export default function Hero({ locale }) {
<GithubLogo size={32} weight="fill" alt="" />
</Button>
<Button icon href="/account/upgrade" target="_blank" aria-label="Upgrade page">
<Button icon href="/account/upgrade" target="_blank" title="Upgrade page">
<Heart size={32} weight="fill" alt="" />
</Button>
</div>

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

@ -19,6 +19,7 @@ export default function Logo(ctx) {
xmlns="http://www.w3.org/2000/svg"
viewBox={text ? '0 0 120 39.88' : '0 0 39.88 39.88'}
aria-label="Pretendo"
title="Pretendo"
height={size}
width={text ? size * 3 : size}
className={className}

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

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