feat: organise the pages structure

packages/web/components/MegaMenu.tsx

@@ -395,7 +395,9 @@ export const MegaMenu: React.FC = () => {
   };
   return (
     <Stack
-      position={router.pathname === '/players' ? 'relative' : 'sticky'}
+      position={
+        router.pathname === '/community/players' ? 'relative' : 'sticky'
+      }
       top={0}
       id="MegaMenu"
       zIndex={11}

packages/web/next.config.js

@@ -8,7 +8,7 @@ module.exports = withTM(
       return [
         {
           source: '/',
-          destination: '/players',
+          destination: '/community/players',
           permanent: false,
         },
       ];

packages/web/pages/community/events.tsx

@@ -4,7 +4,7 @@ import { getGuilds } from 'graphql/queries/guild';
 import { InferGetStaticPropsType } from 'next';
 import React, { useEffect, useState } from 'react';
 
-import { eventsDescription } from '../utils/menuLinks';
+import { descriptions } from '../../utils/menuLinks';
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
@@ -33,7 +33,7 @@ const EventsPage: React.FC<Props> = () => {
     <PageContainer p={0} position="fixed">
       <HeadComponent
         title={`Events`}
-        description={eventsDescription}
+        description={descriptions.events}
         url={`https://wiki.metagame.wtf/docs/great-houses/house-of-daos`}
       />
       <iframe

packages/web/pages/community/forum.tsx

@@ -0,0 +1,51 @@
+import { PageContainer } from 'components/Container';
+import { HeadComponent } from 'components/Seo';
+import { getGuilds } from 'graphql/queries/guild';
+import { InferGetStaticPropsType } from 'next';
+import React, { useEffect, useState } from 'react';
+
+import { descriptions } from '../../utils/menuLinks';
+
+type Props = InferGetStaticPropsType<typeof getStaticProps>;
+
+export const getStaticProps = async () => {
+  const guilds = await getGuilds();
+  return {
+    props: {
+      guilds,
+    },
+    revalidate: 1,
+  };
+};
+
+const EventsPage: React.FC<Props> = () => {
+  // need to ensure that the menu height is calculated on client
+  const [isComponentMounted, setIsComponentMounted] = useState(false);
+  useEffect(() => setIsComponentMounted(true), []);
+  if (!isComponentMounted) {
+    return null;
+  }
+
+  const megamenuHeight =
+    document.getElementById('MegaMenu')?.offsetHeight || 81; // ugly solution, but i couldn't find a better way to set the right height of the iframe
+
+  return (
+    <PageContainer p={0} position="fixed">
+      <HeadComponent
+        title={`Events`}
+        description={descriptions.forum}
+        url="https://forum.metagame.wtf/"
+      />
+      <iframe
+        title="MetaWiki"
+        src="https://forum.metagame.wtf/"
+        style={{
+          height: window.innerHeight - megamenuHeight,
+          width: `100%`,
+        }}
+      />
+    </PageContainer>
+  );
+};
+
+export default EventsPage;

packages/web/pages/community/guilds.tsx

@@ -22,7 +22,7 @@ const GuildsPage: React.FC<Props> = ({ guilds }) => (
     <HeadComponent
       title="Metagame's Guilds"
       description="Metagame is a Massive Online Coordination Game! Guilds participating in Metagame...."
-      url="https://my.metagame.wtf/guilds"
+      url="https://my.metagame.wtf/community/guilds"
     />
     <GuildList guilds={guilds} />
   </PageContainer>

packages/web/pages/community/patrons.tsx

@@ -22,7 +22,7 @@ const PatronsPage: React.FC<Props> = ({ patrons }) => (
     <HeadComponent
       title="Metagame's Patrons"
       description="Metagame is a Massive Online Coordination Game! Metagame's Patrons enable us to succeed by helping us with funds."
-      url="https://my.metagame.wtf/patrons"
+      url="https://my.metagame.wtf/community/patrons"
     />
     <PatronList patrons={patrons} />
   </PageContainer>

packages/web/pages/community/players.tsx

@@ -76,7 +76,7 @@ const Players: React.FC<Props> = () => {
 
   return (
     <PageContainer>
-      <HeadComponent url="https://my.metagame.wtf/players" />
+      <HeadComponent url="https://my.metagame.wtf/community/players" />
       <VStack
         w="100%"
         spacing={{ base: '4', md: '8' }}

packages/web/utils/menuLinks.ts

@@ -11,8 +11,10 @@ export interface MenuLinkSet {
   menuItems: MenuLinkItem[];
 }
 
-export const eventsDescription =
-  "See when we're meeting; join discussions & workshops";
+export const descriptions = {
+  events: "See when we're meeting; join discussions & workshops",
+  forum: 'Take part in slower & more thoughtful conversations on the forum',
+};
 
 export const MenuSectionLinks: MenuLinkSet[] = [
   {
@@ -22,14 +24,14 @@ export const MenuSectionLinks: MenuLinkSet[] = [
         title: 'Players',
         explainerText:
           'Find players of MetaGame; their NFTs, their skills & whatever else they put on there',
-        url: '/players',
+        url: '/community/players',
         icon: 'players',
       },
       {
         title: 'Patrons',
         explainerText:
           'Check the patrons of MetaGame; the ones supporting MetaGame by buying Seeds',
-        url: '/patrons',
+        url: '/community/patrons',
         icon: 'patrons',
       },
       {
@@ -42,20 +44,19 @@ export const MenuSectionLinks: MenuLinkSet[] = [
         title: 'Guilds',
         explainerText:
           'Discover the guilds of MetaGame; groups of players set around more specific goals',
-        url: '/guilds',
+        url: '/community/guilds',
         icon: 'guilds',
       },
       {
         title: 'Events',
-        explainerText: eventsDescription,
-        url: '/events',
+        explainerText: descriptions.events,
+        url: '/community/events',
         icon: 'events',
       },
       {
         title: 'Forum',
-        explainerText:
-          'Take part in slower & more thoughtful conversations on the forum',
-        url: 'https://forum.metagame.wtf/',
+        explainerText: descriptions.forum,
+        url: '/community/forum',
         icon: 'forum',
       },
     ],