chore: rebase and squash

feat: meta tags for player pages feat: meta tags for quest pages feat: meta tags for patrons page fix: typos, extra tags feat: HeadComponent for metadata feat: HeadComponent in pages Implements the HeadComponent from components/Seo.tsx to take props and render the relevant meta tags in the pages fix: type-cast to string fix: string for playersDescriptionmeta fix: optional chaining player meta data fix: text consistency and typo-fixes fix: use player helpers for meta feat: meta tags for guilds route feat: meta tags for player pages feat: meta tags for quest pages feat: meta tags for patrons page feat: HeadComponent in pages Implements the HeadComponent from components/Seo.tsx to take props and render the relevant meta tags in the pages fix: type-cast to string fix: import Head in _app
MetaFam · Jun 13, 2021 · ac6e7b9 · ac6e7b9
1 parent eb6a4f7
commit ac6e7b9
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 0 deletions.
diff --git a/packages/web/components/Seo.tsx b/packages/web/components/Seo.tsx
@@ -0,0 +1,40 @@
+import Head from 'next/head';
+import React from 'react';
+
+export type HeadMetaProps = {
+  title?: string;
+  description?: string;
+  url?: string;
+  img?: string;
+};
+
+export const HeadComponent: React.FC<HeadMetaProps> = ({
+  title = 'MetaGame',
+  description = 'Metagame is a Massive Online Coordination Game! Metagame is any approach to a game that transcends or operates outside of the prescribed rules of the game, uses external factors to affect the game, or goes beyond the supposed limits or environment set by the game.',
+  url = 'https://my.metagame.wtf/',
+  img = 'https://my.metagame.wtf/_next/image?url=%2Fassets%2Flogo.alt.png&w=1920&q=75',
+}) => (
+  <Head>
+    <title>MetaGame</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="title" content={title} />
+    <meta name="description" content={description} />
+    <meta name="theme-color" content="#5a32e6" />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Metagame" />
+    <meta property="og:locale" content="en_US" />
+
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:url" content={url} />
+    <meta property="og:image" content={img} />
+
+    <meta property="twitter:card" content="summary" />
+    <meta property="twitter:url" content={url} />
+    <meta property="twitter:site" content="@MetaFam" />
+    <meta property="twitter:title" content={title} />
+    <meta property="twitter:description" content={description} />
+    <meta property="twitter:image" content={img} />
+  </Head>
+);
diff --git a/packages/web/pages/guild/[guildname].tsx b/packages/web/pages/guild/[guildname].tsx
@@ -16,6 +16,7 @@ import { PageContainer } from '../../components/Container';
 import { GuildHero } from '../../components/Guild/GuildHero';
 import { GuildLinks } from '../../components/Guild/GuildLinks';
 import { ProfileSection } from '../../components/ProfileSection';
+import { HeadComponent } from '../../components/Seo';
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
@@ -32,6 +33,12 @@ const GuildPage: React.FC<Props> = ({ guild, quests }) => {
 
   return (
     <PageContainer>
+      <HeadComponent
+        title={guild.name}
+        description={`${guild.description}`}
+        url={`https://my.metagame.wtf/guild/${guild.guildname}`}
+        img={`${guild.logo}`}
+      />
       <Flex
         align="center"
         direction={{ base: 'column', lg: 'row' }}

diff --git a/packages/web/pages/guilds.tsx b/packages/web/pages/guilds.tsx
@@ -1,5 +1,6 @@
 import { PageContainer } from 'components/Container';
 import { GuildList } from 'components/Guild/GuildList';
+import { HeadComponent } from 'components/Seo';
 import { getGuilds } from 'graphql/getGuilds';
 import { InferGetStaticPropsType } from 'next';
 import React from 'react';
@@ -18,6 +19,11 @@ export const getStaticProps = async () => {
 
 const GuildsPage: React.FC<Props> = ({ guilds }) => (
   <PageContainer>
+    <HeadComponent
+      title="Metagame's Guilds"
+      description="Metagame is a Massive Online Coordination Game! Guilds participating in Metagame...."
+      url="https://my.metagame.wtf/guilds"
+    />
     <GuildList guilds={guilds} />
   </PageContainer>
 );

diff --git a/packages/web/pages/patrons.tsx b/packages/web/pages/patrons.tsx
@@ -1,5 +1,6 @@
 import { PageContainer } from 'components/Container';
 import { PatronList } from 'components/Patron/PatronList';
+import { HeadComponent } from 'components/Seo';
 import { getPatrons } from 'graphql/getPatrons';
 import { InferGetStaticPropsType } from 'next';
 import React from 'react';
@@ -18,6 +19,11 @@ export const getStaticProps = async () => {
 
 const PatronsPage: React.FC<Props> = ({ patrons }) => (
   <PageContainer>
+    <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"
+    />
     <PatronList patrons={patrons} />
   </PageContainer>
 );

diff --git a/packages/web/pages/player/[username].tsx b/packages/web/pages/player/[username].tsx
@@ -17,6 +17,11 @@ import { PlayerAddSection } from '../../components/Player/Section/PlayerAddSecti
 import { PlayerGallery } from '../../components/Player/Section/PlayerGallery';
 import { PlayerMemberships } from '../../components/Player/Section/PlayerMemberships';
 import { PlayerSkills } from '../../components/Player/Section/PlayerSkills';
+import { HeadComponent } from '../../components/Seo';
+import {
+  getPlayerDescription,
+  getPlayerImage,
+} from '../../utils/playerHelpers';
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
@@ -100,6 +105,12 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
 
   return (
     <PageContainer>
+      <HeadComponent
+        title={`Metagame profile for ${player.username}`}
+        description={getPlayerDescription(player).replace('\n', ' ')}
+        url={`https://my.metagame.wtf/player/${player.username}`}
+        img={getPlayerImage(player)}
+      />
       <Flex
         align="center"
         direction={{ base: 'column', lg: 'row' }}

diff --git a/packages/web/pages/players.tsx b/packages/web/pages/players.tsx
@@ -2,6 +2,7 @@ import { LoadingState, Text, VStack } from '@metafam/ds';
 import { PageContainer } from 'components/Container';
 import { PlayerFilter } from 'components/Player/PlayerFilter';
 import { PlayerList } from 'components/Player/PlayerList';
+import { HeadComponent } from 'components/Seo';
 import { getSsrClient } from 'graphql/client';
 import { getPlayers } from 'graphql/getPlayers';
 import { usePlayerFilter } from 'lib/hooks/players';
@@ -33,6 +34,7 @@ const Players: React.FC<Props> = () => {
   } = usePlayerFilter();
   return (
     <PageContainer>
+      <HeadComponent url="https://my.metagame.wtf/players" />
       <VStack w="100%" spacing="8">
         <PlayerFilter
           fetching={fetching}

diff --git a/packages/web/pages/quest/[id].tsx b/packages/web/pages/quest/[id].tsx
@@ -28,6 +28,7 @@ import { PageContainer } from '../../components/Container';
 import { PlayerTile } from '../../components/Player/PlayerTile';
 import { QuestCompletions } from '../../components/Quest/QuestCompletions';
 import { QuestDetails } from '../../components/Quest/QuestDetails';
+import { HeadComponent } from '../../components/Seo';
 import { getSsrClient } from '../../graphql/client';
 import { useUser } from '../../lib/hooks';
 import { canCompleteQuest } from '../../utils/questHelpers';
@@ -59,6 +60,11 @@ const QuestPage: React.FC<Props> = ({ quest_id }) => {
 
   return (
     <PageContainer>
+      <HeadComponent
+        title="Metagame Quests"
+        description={quest.title}
+        url={`https://my.metagame.wtf/quest/${quest_id}`}
+      />
       <Box w="100%" maxW="80rem">
         <Box mb={4} px={2}>
           <MetaButton

diff --git a/packages/web/pages/quest/create.tsx b/packages/web/pages/quest/create.tsx
@@ -12,6 +12,7 @@ import {
   CreateQuestFormInputs,
   QuestForm,
 } from '../../components/Quest/QuestForm';
+import { HeadComponent } from '../../components/Seo';
 import { getGuilds } from '../../graphql/getGuilds';
 import { getSkills } from '../../graphql/getSkills';
 import { useUser } from '../../lib/hooks';
@@ -64,6 +65,10 @@ const CreateQuestPage: React.FC<Props> = ({ guilds, skillChoices }) => {
 
   return (
     <PageContainer>
+      <HeadComponent
+        description="Create a Quest for Metagame."
+        url="https://my.metagame.wtf/quest/create"
+      />
       <MetaHeading mb={4}>Create quest</MetaHeading>
 
       <QuestForm

diff --git a/packages/web/pages/quests.tsx b/packages/web/pages/quests.tsx
@@ -10,6 +10,7 @@ import {
 import { PageContainer } from 'components/Container';
 import { QuestFilter } from 'components/Quest/QuestFilter';
 import { QuestList } from 'components/Quest/QuestList';
+import { HeadComponent } from 'components/Seo';
 import { getSsrClient } from 'graphql/client';
 import { getQuests } from 'graphql/getQuests';
 import { usePSeedBalance } from 'lib/hooks/balances';
@@ -51,6 +52,11 @@ const QuestsPage: React.FC<Props> = () => {
 
   return (
     <PageContainer>
+      <HeadComponent
+        title="Metagame's Quests"
+        description="Metagame is a Massive Online Coordination Game! Metagame has some epic quests going on!"
+        url="https://my.metagame.wtf/quests"
+      />
       <Box w="100%" maxW="80rem">
         <HStack justify="space-between" w="100%">
           <Heading>Quest explorer</Heading>