BasegBot/InvestWeb
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

dynamic head at layout level for SEO

Browse source
This commit is contained in:
3zachm 2023-01-26 02:20:07 -08:00
parent 6938983444
commit ffdf91baf6
9 changed files with 184 additions and 128 deletions

58
layouts/DashLayout.tsx
View file

@ -11,11 +11,24 @@ import NavBar from "../components/dashboard/NavBar";
interface DashLayoutProps { interface DashLayoutProps {
children: React.ReactNode; children: React.ReactNode;
metaTags: {
title?: string;
ogTitle?: string;
description?: string;
ogDescription?: string;
content?: string;
imageUrl?: string;
themeColor?: string;
misc?: {
[key: string]: string;
};
};
} }
function DashLayout(props: DashLayoutProps) { function DashLayout(props: DashLayoutProps) {
// get the current route for animation purposes // get the current route for animation purposes
const router = useRouter(); const router = useRouter();
const title = props.metaTags.title ?? "Dashboard - toffee";
return ( return (
<m.div <m.div
className="bg-gradient-to-t from-zinc-900 to-[#3015457b]" className="bg-gradient-to-t from-zinc-900 to-[#3015457b]"
@ -26,18 +39,49 @@ function DashLayout(props: DashLayoutProps) {
> >
<Head> <Head>
<meta name="viewport" content="initial-scale=0.8" /> <meta name="viewport" content="initial-scale=0.8" />
<title>Dashboard - toffee</title> <title>{title}</title>
<meta name="description" content="Dashboard statistics for toffee" /> <meta
name="description"
content={
props.metaTags.description ?? "Dashboard statistics for toffee"
}
/>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#c084fc" /> <meta
<meta property="og:title" content="toffee" /> name="theme-color"
content={props.metaTags.themeColor ?? "#c084fc"}
/>
<meta
property="og:title"
content={props.metaTags.ogTitle ?? props.metaTags.title ?? "toffee"}
/>
<meta <meta
property="og:description" property="og:description"
content="Serving anny's community est. 2022" content={
props.metaTags.ogDescription ??
props.metaTags.description ??
"Dashboard statistics for toffee"
}
/>
<meta
property="og:image"
content={props.metaTags.imageUrl ?? "/img/logo.webp"}
/>
<meta
property="og:type"
content={props.metaTags.content ?? "website"}
/> />
<meta property="og:image" content="/img/logo.webp" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="toffee" /> <meta property="og:site_name" content="toffee" />
{props.metaTags.misc &&
Object.keys(props.metaTags.misc).map((key) => {
return (
<meta
key={key}
property={key}
content={props.metaTags.misc ? props.metaTags.misc[key] : ""}
/>
);
})}
</Head> </Head>
<div className="flex h-screen w-screen flex-col overflow-hidden lg:flex-row"> <div className="flex h-screen w-screen flex-col overflow-hidden lg:flex-row">

58
layouts/HomeLayout.tsx
View file

@ -15,6 +15,18 @@ import { NavTemplate } from "./NavTemplates";
interface HomeLayoutProps { interface HomeLayoutProps {
navOptions: NavTemplate[]; navOptions: NavTemplate[];
children: React.ReactNode; children: React.ReactNode;
metaTags: {
title?: string;
ogTitle?: string;
description?: string;
ogDescription?: string;
content?: string;
imageUrl?: string;
themeColor?: string;
misc?: {
[key: string]: string;
};
};
} }
function HomeLayout(props: HomeLayoutProps) { function HomeLayout(props: HomeLayoutProps) {
@ -22,6 +34,7 @@ function HomeLayout(props: HomeLayoutProps) {
const navOptions = props.navOptions; const navOptions = props.navOptions;
// get the current route for animation purposes // get the current route for animation purposes
const router = useRouter(); const router = useRouter();
const title = props.metaTags.title ?? "Dashboard - toffee";
return ( return (
<m.div <m.div
initial="initial" initial="initial"
@ -30,18 +43,49 @@ function HomeLayout(props: HomeLayoutProps) {
variants={containerVariants} variants={containerVariants}
> >
<Head> <Head>
<title>toffee</title> <title>{title}</title>
<meta name="description" content="Serving anny's community est. 2022" /> <meta
name="description"
content={
props.metaTags.description ?? "Serving anny's community est. 2022"
}
/>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#c084fc" /> <meta
<meta property="og:title" content="toffee" /> name="theme-color"
content={props.metaTags.themeColor ?? "#c084fc"}
/>
<meta
property="og:title"
content={props.metaTags.ogTitle ?? props.metaTags.title ?? "toffee"}
/>
<meta <meta
property="og:description" property="og:description"
content="Serving anny's community est. 2022" content={
props.metaTags.ogDescription ??
props.metaTags.description ??
"Serving anny's community est. 2022"
}
/>
<meta
property="og:image"
content={props.metaTags.imageUrl ?? "/img/logo.webp"}
/>
<meta
property="og:type"
content={props.metaTags.content ?? "website"}
/> />
<meta property="og:image" content="/img/logo.webp" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="toffee" /> <meta property="og:site_name" content="toffee" />
{props.metaTags.misc &&
Object.keys(props.metaTags.misc).map((key) => {
return (
<meta
key={key}
property={key}
content={props.metaTags.misc ? props.metaTags.misc[key] : ""}
/>
);
})}
</Head> </Head>
<LazyMotion features={domAnimation}> <LazyMotion features={domAnimation}>

23
pages/about.tsx
View file

@ -1,23 +0,0 @@
import Head from "next/head";
import { ReactElement } from "react";
import HomeLayout from "../layouts/HomeLayout";
import { homeMain } from "../layouts/NavTemplates";
function About() {
return (
<>
<Head>
<title>About - toffee</title>
</Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2">
<p>about</p>
</div>
</>
);
}
About.getLayout = function getLayout(page: ReactElement) {
return <HomeLayout navOptions={homeMain}>{page}</HomeLayout>;
};
export default About;

23
pages/contact.tsx
View file

@ -1,23 +0,0 @@
import Head from "next/head";
import { ReactElement } from "react";
import HomeLayout from "../layouts/HomeLayout";
import { homeMain } from "../layouts/NavTemplates";
function About() {
return (
<>
<Head>
<title>Contact - toffee</title>
</Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2">
<p>contact</p>
</div>
</>
);
}
About.getLayout = function getLayout(page: ReactElement) {
return <HomeLayout navOptions={homeMain}>{page}</HomeLayout>;
};
export default About;

7
pages/dashboard/index.tsx
View file

@ -1,5 +1,4 @@
import { m, Variants } from "framer-motion"; import { m, Variants } from "framer-motion";
import Head from "next/head";
import { ReactElement } from "react"; import { ReactElement } from "react";
import DashLayout from "../../layouts/DashLayout"; import DashLayout from "../../layouts/DashLayout";
@ -7,9 +6,6 @@ import DashLayout from "../../layouts/DashLayout";
function Dashboard() { function Dashboard() {
return ( return (
<> <>
<Head>
<title>Dashboard - toffee</title>
</Head>
<m.div <m.div
className="inline-grid w-full grid-cols-1 pt-2 pl-2 lg:h-full lg:grid-cols-5 lg:pl-0 lg:pr-2" className="inline-grid w-full grid-cols-1 pt-2 pl-2 lg:h-full lg:grid-cols-5 lg:pl-0 lg:pr-2"
variants={gridContainerVariants} variants={gridContainerVariants}
@ -83,7 +79,8 @@ const gridItemVariants: Variants = {
}; };
Dashboard.getLayout = function getLayout(page: ReactElement) { Dashboard.getLayout = function getLayout(page: ReactElement) {
return <DashLayout>{page}</DashLayout>; const metaTags = {};
return <DashLayout metaTags={metaTags}>{page}</DashLayout>;
}; };
export default Dashboard; export default Dashboard;

13
pages/index.tsx
View file

@ -3,7 +3,6 @@ import { ReactElement, useEffect, useState } from "react";
import HomeLayout from "../layouts/HomeLayout"; import HomeLayout from "../layouts/HomeLayout";
import { homeMain } from "../layouts/NavTemplates"; import { homeMain } from "../layouts/NavTemplates";
import Image from "next/image"; import Image from "next/image";
import Head from "next/head";
function Home() { function Home() {
const [emotesUrls, setEmotes] = useState([]); const [emotesUrls, setEmotes] = useState([]);
@ -74,9 +73,6 @@ function Home() {
return ( return (
<> <>
<Head>
<title>Home - toffee</title>
</Head>
<div className="flex h-full w-full flex-col items-center justify-center"> <div className="flex h-full w-full flex-col items-center justify-center">
<div className="inline-grid grid-cols-1 gap-20 text-white md:grid-cols-3"> <div className="inline-grid grid-cols-1 gap-20 text-white md:grid-cols-3">
<m.div <m.div
@ -194,7 +190,14 @@ const slideShowVariants = {
// set the layout for the page, this is used to wrap the page in a layout // set the layout for the page, this is used to wrap the page in a layout
Home.getLayout = function getLayout(page: ReactElement) { Home.getLayout = function getLayout(page: ReactElement) {
return <HomeLayout navOptions={homeMain}>{page}</HomeLayout>; const metaTags = {
title: "Home - toffee",
};
return (
<HomeLayout navOptions={homeMain} metaTags={metaTags}>
{page}
</HomeLayout>
);
}; };
export default Home; export default Home;

11
pages/ranking/index.tsx
View file

@ -1,10 +1,8 @@
import { m, Variants } from "framer-motion"; import { m, Variants } from "framer-motion";
import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import { ReactElement, useEffect, useState } from "react"; import { ReactElement, useEffect, useState } from "react";
import Loading from "../../components/common/Loading"; import Loading from "../../components/common/Loading";
import DashLayout from "../../layouts/DashLayout"; import DashLayout from "../../layouts/DashLayout";
import { fakeDataEntry } from "../api/fakeUsers";
function Ranking() { function Ranking() {
const [sortBy, setSortBy] = useState("netWorth"); const [sortBy, setSortBy] = useState("netWorth");
@ -75,9 +73,6 @@ function Ranking() {
return ( return (
<> <>
<Head>
<title>Ranking - toffee</title>
</Head>
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
<div className="ml-3 flex w-full max-w-7xl flex-col items-center justify-start font-plusJakarta font-semibold lg:ml-0"> <div className="ml-3 flex w-full max-w-7xl flex-col items-center justify-start font-plusJakarta font-semibold lg:ml-0">
{/* hidden if smaller than lg */} {/* hidden if smaller than lg */}
@ -293,7 +288,11 @@ const rankingDataLineVariants: Variants = {
}; };
Ranking.getLayout = function getLayout(page: ReactElement) { Ranking.getLayout = function getLayout(page: ReactElement) {
return <DashLayout>{page}</DashLayout>; const metaTags = {
title: "Ranking - toffee",
description: "Top investors on toffee",
};
return <DashLayout metaTags={metaTags}>{page}</DashLayout>;
}; };
export default Ranking; export default Ranking;

14
pages/team.tsx
View file

@ -1,5 +1,4 @@
import { m, Variants } from "framer-motion"; import { m, Variants } from "framer-motion";
import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import { ReactElement } from "react"; import { ReactElement } from "react";
import HomeLayout from "../layouts/HomeLayout"; import HomeLayout from "../layouts/HomeLayout";
@ -8,9 +7,6 @@ import { homeMain } from "../layouts/NavTemplates";
function Team() { function Team() {
return ( return (
<> <>
<Head>
<title>Team - toffee</title>
</Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2"> <div className="flex min-h-screen flex-col items-center justify-center py-2">
<m.div <m.div
className="grid w-[90vw] grid-cols-1 py-2 sm:grid-cols-2 md:grid-cols-4 lg:w-[75vw]" className="grid w-[90vw] grid-cols-1 py-2 sm:grid-cols-2 md:grid-cols-4 lg:w-[75vw]"
@ -136,7 +132,15 @@ const headerVariants: Variants = {
}; };
Team.getLayout = function getLayout(page: ReactElement) { Team.getLayout = function getLayout(page: ReactElement) {
return <HomeLayout navOptions={homeMain}>{page}</HomeLayout>; const metaTags = {
title: "Team - toffee",
description: "Meet the team behind toffee",
};
return (
<HomeLayout navOptions={homeMain} metaTags={metaTags}>
{page}
</HomeLayout>
);
}; };
export default Team; export default Team;

105
pages/user/[username]/index.tsx
View file

@ -1,5 +1,4 @@
import { m, Variants } from "framer-motion"; import { m, Variants } from "framer-motion";
import Head from "next/head";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { ReactElement, useEffect, useState } from "react"; import { ReactElement, useEffect, useState } from "react";
import DashLayout from "../../../layouts/DashLayout"; import DashLayout from "../../../layouts/DashLayout";
@ -14,18 +13,23 @@ interface EmoteURLs {
[key: string]: { [key: string]: string }; [key: string]: { [key: string]: string };
} }
function UserPage() { interface UserPageProps {
userData: { [key: string]: any };
}
function UserPage(props: UserPageProps) {
const [channelEmotes, setChannelEmotes] = useState<{ const [channelEmotes, setChannelEmotes] = useState<{
[key: string]: { [key: string]: string }; [key: string]: { [key: string]: string };
}>({}); }>({});
const [userData, setUserData] = useState<{ [key: string]: any }>({});
const [errorCode, setErrorCode] = useState<number | null>(null); const [errorCode, setErrorCode] = useState<number | null>(null);
const router = useRouter(); const router = useRouter();
const { username } = router.query; const { username } = router.query;
const title = username ? `${username} - toffee` : "toffee";
useEffect(() => { useEffect(() => {
if (!router.isReady) return; if (!router.isReady) return;
if (props.userData.error) {
setErrorCode(props.userData.error.code);
}
fetch("/api/emotes") fetch("/api/emotes")
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
@ -86,15 +90,6 @@ function UserPage() {
// set emotes to channelEmotes // set emotes to channelEmotes
setChannelEmotes(emotes); setChannelEmotes(emotes);
}); });
// fetch user data
fetch(`/api/fakeUsers?u=${username}`)
.then((res) => res.json())
.then((data) => {
if (data.error) {
setErrorCode(data.error.code);
}
setUserData(data.data);
});
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [router.isReady]); }, [router.isReady]);
@ -116,27 +111,16 @@ function UserPage() {
} }
// if json is empty, and if channelEmotes is incomplete, show loading screen // if json is empty, and if channelEmotes is incomplete, show loading screen
if ( if (Object.keys(channelEmotes).length < 4) {
Object.keys(channelEmotes).length < 4 ||
!userData ||
Object.keys(userData).length === 0
) {
return ( return (
<div className="flex h-screen w-full items-center justify-center text-3xl"> <div className="flex h-screen w-full items-center justify-center text-3xl">
<Loading /> <Loading />
</div> </div>
); );
} }
console.log(channelEmotes);
return ( return (
<> <>
<Head>
<title>{title}</title>
<meta
name="description"
content={`${username}'s portfolio on toffee`}
/>
</Head>
<div className="flex justify-center"> <div className="flex justify-center">
<m.div <m.div
className="mt-7 inline-grid w-[calc(100%-40px)] max-w-5xl grid-cols-10 gap-3 pl-2 font-plusJakarta lg:mt-12 lg:pl-0 lg:pr-2" className="mt-7 inline-grid w-[calc(100%-40px)] max-w-5xl grid-cols-10 gap-3 pl-2 font-plusJakarta lg:mt-12 lg:pl-0 lg:pr-2"
@ -151,20 +135,20 @@ function UserPage() {
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<div className="relative bottom-[54px] -left-7 w-[110px] md:bottom-[70px] md:left-0 md:w-[169px]"> <div className="relative bottom-[54px] -left-7 w-[110px] md:bottom-[70px] md:left-0 md:w-[169px]">
<Image <Image
src={userData.avatar_url} src={props.userData.avatar_url}
alt="User avatar" alt="User avatar"
width={140} width={140}
height={140} height={140}
priority priority
className="absolute rounded-lg border-4" className="absolute rounded-lg border-4"
style={{ style={{
borderColor: userData.badges[0] borderColor: props.userData.badges[0]
? userData.badges[0].color ? props.userData.badges[0].color
: "grey", : "grey",
// "glow" effect // "glow" effect
boxShadow: `0px 0px 20px 1px ${ boxShadow: `0px 0px 20px 1px ${
userData.badges[0] props.userData.badges[0]
? userData.badges[0].color ? props.userData.badges[0].color
: "transparent" : "transparent"
}`, }`,
}} }}
@ -172,12 +156,12 @@ function UserPage() {
</div> </div>
<div className="flex-col overflow-hidden overflow-ellipsis whitespace-nowrap"> <div className="flex-col overflow-hidden overflow-ellipsis whitespace-nowrap">
<h1 className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-2xl font-semibold text-white lg:text-4xl"> <h1 className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-2xl font-semibold text-white lg:text-4xl">
{userData.name} {props.userData.name}
</h1> </h1>
{/* User's badges */} {/* User's badges */}
<div className="mt-1 flex flex-row text-sm"> <div className="mt-1 flex flex-row text-sm">
{userData.badges ? ( {props.userData.badges ? (
userData.badges.map( props.userData.badges.map(
(badge: { (badge: {
name: string; name: string;
color: string; color: string;
@ -206,7 +190,7 @@ function UserPage() {
$ $
</span> </span>
<span className="text-4xl text-white"> <span className="text-4xl text-white">
{userData.net_worth.toLocaleString("en-US")} {props.userData.net_worth.toLocaleString("en-US")}
</span> </span>
</h1> </h1>
</div> </div>
@ -227,7 +211,7 @@ function UserPage() {
<div className="flex items-center text-3xl font-bold"> <div className="flex items-center text-3xl font-bold">
<span className="text-zinc-400">#</span> <span className="text-zinc-400">#</span>
<span className="text-white"> <span className="text-white">
{userData.rank.toLocaleString("en-US")} {props.userData.rank.toLocaleString("en-US")}
</span> </span>
</div> </div>
</div> </div>
@ -245,7 +229,7 @@ function UserPage() {
$ $
</span> </span>
<span className="text-3xl text-white sm:text-4xl"> <span className="text-3xl text-white sm:text-4xl">
{userData.net_worth.toLocaleString("en-US")} {props.userData.net_worth.toLocaleString("en-US")}
</span> </span>
</h1> </h1>
</div> </div>
@ -264,7 +248,7 @@ function UserPage() {
{errorCode === 20000 ? ( {errorCode === 20000 ? (
<h1 className=" text-zinc-400">{`Could not load assets`}</h1> <h1 className=" text-zinc-400">{`Could not load assets`}</h1>
) : ( ) : (
userData.assets.map( props.userData.assets.map(
(asset: { (asset: {
name: string; name: string;
count: number; count: number;
@ -353,19 +337,22 @@ function UserPage() {
> >
{/* User's Stats, left side is label, right side is value */} {/* User's Stats, left side is label, right side is value */}
<h1>Points</h1> <h1>Points</h1>
<h1>{userData.points.toLocaleString("en-US")}</h1> <h1>{props.userData.points.toLocaleString("en-US")}</h1>
<h1>Shares</h1> <h1>Shares</h1>
<h1>{userData.shares.toLocaleString("en-US")}</h1> <h1>{props.userData.shares.toLocaleString("en-US")}</h1>
<h1>Trades</h1> <h1>Trades</h1>
<h1>{(userData.trades ?? 0).toLocaleString("en-US")}</h1> <h1>{(props.userData.trades ?? 0).toLocaleString("en-US")}</h1>
<h1>Peak rank</h1> <h1>Peak rank</h1>
<h1>{(userData.peak_rank ?? 0).toLocaleString("en-US")}</h1> <h1>{(props.userData.peak_rank ?? 0).toLocaleString("en-US")}</h1>
<h1>Joined</h1> <h1>Joined</h1>
<h1> <h1>
{new Date(userData.joined ?? 0).toLocaleDateString("en-US", { {new Date(props.userData.joined ?? 0).toLocaleDateString(
year: "numeric", "en-US",
month: "short", {
})} year: "numeric",
month: "short",
}
)}
</h1> </h1>
</m.div> </m.div>
{/* User's Favorite Emote */} {/* User's Favorite Emote */}
@ -564,8 +551,32 @@ const sidebarItemVariants: Variants = {
}, },
}; };
UserPage.getInitialProps = async (context: { query: { username: string } }) => {
const res = await fetch(
`${process.env.NEXT_PUBLIC_URL}/api/fakeUsers?u=${context.query.username}`
);
let user = await res.json();
if (user.error) {
user = { data: user };
}
return { userData: user.data };
};
UserPage.getLayout = function getLayout(page: ReactElement) { UserPage.getLayout = function getLayout(page: ReactElement) {
return <DashLayout>{page}</DashLayout>; const { userData } = page.props;
const metaTags = {
title: !userData.error
? `${userData.name ?? "User 404"} - toffee`
: "User 404 - toffee",
description: !userData.error
? `${userData.name}'s portfolio on toffee`
: "Couldn't find that user on toffee... :(",
image: !userData.error ? userData.avatar_url : undefined,
misc: {
"twitter:card": "summary",
},
};
return <DashLayout metaTags={metaTags}>{page}</DashLayout>;
}; };
export default UserPage; export default UserPage;