From 62ce137bcbd10493f63777a89c9ecb3752a3683e Mon Sep 17 00:00:00 2001
From: Ahmed Al-Taiar <ahmed.altaiar.06@gmail.com>
Date: Tue, 22 Oct 2024 16:48:48 -0400
Subject: [PATCH] Add og metatags to public facing pages

---
 .../ContactCardCell/ContactCardCell.tsx       | 27 +++++++++++++----
 .../Project/ProjectCell/ProjectCell.tsx       | 30 +++++++++++++++----
 .../ProjectsShowcaseCell.tsx                  | 23 ++++++++++----
 .../Resume/ResumeCell/ResumeCell.tsx          | 22 ++++++++++----
 web/src/pages/ContactPage/ContactPage.tsx     | 12 ++------
 web/src/pages/HomePage/HomePage.tsx           | 10 ++++++-
 .../pages/Project/ProjectPage/ProjectPage.tsx | 10 +------
 .../Project/ProjectsPage/ProjectsPage.tsx     |  4 ---
 .../pages/Resume/ResumePage/ResumePage.tsx    | 10 +------
 9 files changed, 96 insertions(+), 52 deletions(-)

diff --git a/web/src/components/ContactCard/ContactCardCell/ContactCardCell.tsx b/web/src/components/ContactCard/ContactCardCell/ContactCardCell.tsx
index 3aa167e..b95fd95 100644
--- a/web/src/components/ContactCard/ContactCardCell/ContactCardCell.tsx
+++ b/web/src/components/ContactCard/ContactCardCell/ContactCardCell.tsx
@@ -3,10 +3,12 @@ import type {
   ContactCardPortraitVariables,
 } from 'types/graphql'
 
-import type {
-  TypedDocumentNode,
-  CellFailureProps,
-  CellSuccessProps,
+import { routes } from '@redwoodjs/router'
+import {
+  type TypedDocumentNode,
+  type CellFailureProps,
+  type CellSuccessProps,
+  Metadata,
 } from '@redwoodjs/web'
 
 import CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty'
@@ -43,5 +45,20 @@ export const Success = ({
   portrait,
   socials,
 }: CellSuccessProps<ContactCardPortrait, ContactCardPortraitVariables>) => (
-  <ContactCard portraitUrl={portrait.fileId} socials={socials} />
+  <>
+    <Metadata
+      title="Contact"
+      og={{
+        title: 'Contact',
+        type: 'website',
+        image: {
+          url: portrait.fileId,
+          type: 'image/webp',
+          alt: `${process.env.FIRST_NAME} ${process.env.LAST_NAME}`,
+        },
+        url: routes.contact(),
+      }}
+    />
+    <ContactCard portraitUrl={portrait.fileId} socials={socials} />
+  </>
 )
diff --git a/web/src/components/Project/ProjectCell/ProjectCell.tsx b/web/src/components/Project/ProjectCell/ProjectCell.tsx
index 1db99d7..9c9f058 100644
--- a/web/src/components/Project/ProjectCell/ProjectCell.tsx
+++ b/web/src/components/Project/ProjectCell/ProjectCell.tsx
@@ -1,9 +1,11 @@
 import type { FindProjectById, FindProjectByIdVariables } from 'types/graphql'
 
-import type {
-  CellSuccessProps,
-  CellFailureProps,
-  TypedDocumentNode,
+import { routes } from '@redwoodjs/router'
+import {
+  type CellSuccessProps,
+  type CellFailureProps,
+  type TypedDocumentNode,
+  Metadata,
 } from '@redwoodjs/web'
 
 import CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty'
@@ -40,5 +42,23 @@ export const Failure = ({
 export const Success = ({
   project,
 }: CellSuccessProps<FindProjectById, FindProjectByIdVariables>) => (
-  <Project project={project} />
+  <>
+    <Metadata
+      title={project.title}
+      og={{
+        title: project.title,
+        type: 'website',
+        image:
+          project.images.length > 0
+            ? {
+                url: project.images[0],
+                type: 'image/webp',
+                alt: 'Image 1',
+              }
+            : undefined,
+        url: routes.project({ id: project.id }),
+      }}
+    />
+    <Project project={project} />
+  </>
 )
diff --git a/web/src/components/Project/ProjectsShowcaseCell/ProjectsShowcaseCell.tsx b/web/src/components/Project/ProjectsShowcaseCell/ProjectsShowcaseCell.tsx
index c40c1f6..2a0ec96 100644
--- a/web/src/components/Project/ProjectsShowcaseCell/ProjectsShowcaseCell.tsx
+++ b/web/src/components/Project/ProjectsShowcaseCell/ProjectsShowcaseCell.tsx
@@ -1,9 +1,11 @@
 import type { FindProjects, FindProjectsVariables } from 'types/graphql'
 
-import type {
-  CellSuccessProps,
-  CellFailureProps,
-  TypedDocumentNode,
+import { routes } from '@redwoodjs/router'
+import {
+  type CellSuccessProps,
+  type CellFailureProps,
+  type TypedDocumentNode,
+  Metadata,
 } from '@redwoodjs/web'
 
 import CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty'
@@ -40,5 +42,16 @@ export const Failure = ({ error }: CellFailureProps<FindProjectsVariables>) => (
 export const Success = ({
   projects,
 }: CellSuccessProps<FindProjects, FindProjectsVariables>) => (
-  <ProjectsShowcase projects={projects} />
+  <>
+    <Metadata
+      title="Projects"
+      og={{
+        title: 'Projects',
+        type: 'website',
+        description: `${projects.length} projects`,
+        url: routes.projects(),
+      }}
+    />
+    <ProjectsShowcase projects={projects} />
+  </>
 )
diff --git a/web/src/components/Resume/ResumeCell/ResumeCell.tsx b/web/src/components/Resume/ResumeCell/ResumeCell.tsx
index 6c6fac5..f365720 100644
--- a/web/src/components/Resume/ResumeCell/ResumeCell.tsx
+++ b/web/src/components/Resume/ResumeCell/ResumeCell.tsx
@@ -1,9 +1,11 @@
 import type { FindResume, FindResumeVariables } from 'types/graphql'
 
-import type {
-  CellSuccessProps,
-  CellFailureProps,
-  TypedDocumentNode,
+import { routes } from '@redwoodjs/router'
+import {
+  type CellSuccessProps,
+  type CellFailureProps,
+  type TypedDocumentNode,
+  Metadata,
 } from '@redwoodjs/web'
 
 import CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty'
@@ -29,5 +31,15 @@ export const Failure = ({ error }: CellFailureProps<FindResumeVariables>) => (
 export const Success = ({
   resume,
 }: CellSuccessProps<FindResume, FindResumeVariables>) => (
-  <Resume resume={resume} />
+  <>
+    <Metadata
+      title="Contact"
+      og={{
+        title: 'Resume',
+        type: 'website',
+        url: routes.resume(),
+      }}
+    />
+    <Resume resume={resume} />
+  </>
 )
diff --git a/web/src/pages/ContactPage/ContactPage.tsx b/web/src/pages/ContactPage/ContactPage.tsx
index 6e80bf6..1a37181 100644
--- a/web/src/pages/ContactPage/ContactPage.tsx
+++ b/web/src/pages/ContactPage/ContactPage.tsx
@@ -1,7 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
 
-import { Metadata } from '@redwoodjs/web'
-
 import ContactCardCell from 'src/components/ContactCard/ContactCardCell'
 
 const ContactPage = () => {
@@ -29,13 +27,9 @@ const ContactPage = () => {
   }, [width, height])
 
   return (
-    <>
-      <Metadata title="Contact" />
-
-      <div className="flex min-h-[calc(100vh-6rem)] items-center justify-center">
-        <ContactCardCell />
-      </div>
-    </>
+    <div className="flex min-h-[calc(100vh-6rem)] items-center justify-center">
+      <ContactCardCell />
+    </div>
   )
 }
 
diff --git a/web/src/pages/HomePage/HomePage.tsx b/web/src/pages/HomePage/HomePage.tsx
index 693c475..55aee25 100644
--- a/web/src/pages/HomePage/HomePage.tsx
+++ b/web/src/pages/HomePage/HomePage.tsx
@@ -10,7 +10,15 @@ import { getLogoComponent } from 'src/lib/handle'
 
 const HomePage = () => (
   <>
-    <Metadata title="Home" />
+    <Metadata
+      title="Home"
+      og={{
+        title: `${process.env.FIRST_NAME} ${process.env.LAST_NAME}`,
+        description: 'Check out my portfolio!',
+        type: 'website',
+        url: routes.home(),
+      }}
+    />
 
     <div className="hero min-h-[calc(100vh-6rem)]">
       <div className="hero-content flex flex-col gap-8">
diff --git a/web/src/pages/Project/ProjectPage/ProjectPage.tsx b/web/src/pages/Project/ProjectPage/ProjectPage.tsx
index 8039527..270974d 100644
--- a/web/src/pages/Project/ProjectPage/ProjectPage.tsx
+++ b/web/src/pages/Project/ProjectPage/ProjectPage.tsx
@@ -1,5 +1,3 @@
-import { Metadata } from '@redwoodjs/web'
-
 import ProjectCell from 'src/components/Project/ProjectCell'
 
 interface ProjectPageProps {
@@ -7,13 +5,7 @@ interface ProjectPageProps {
 }
 
 const ProjectPage = ({ id }: ProjectPageProps) => {
-  return (
-    <>
-      <Metadata title="Project" />
-
-      <ProjectCell id={id} />
-    </>
-  )
+  return <ProjectCell id={id} />
 }
 
 export default ProjectPage
diff --git a/web/src/pages/Project/ProjectsPage/ProjectsPage.tsx b/web/src/pages/Project/ProjectsPage/ProjectsPage.tsx
index 715c6cf..54711ec 100644
--- a/web/src/pages/Project/ProjectsPage/ProjectsPage.tsx
+++ b/web/src/pages/Project/ProjectsPage/ProjectsPage.tsx
@@ -1,14 +1,10 @@
 import mobile from 'is-mobile'
 
-import { Metadata } from '@redwoodjs/web'
-
 import ProjectsShowcaseCell from 'src/components/Project/ProjectsShowcaseCell'
 
 const ProjectsPage = () => {
   return (
     <>
-      <Metadata title="Projects" />
-
       <div className="hero min-h-64">
         <div className="hero-content">
           <div className="max-w-md text-center">
diff --git a/web/src/pages/Resume/ResumePage/ResumePage.tsx b/web/src/pages/Resume/ResumePage/ResumePage.tsx
index 07cc6d6..6a401d9 100644
--- a/web/src/pages/Resume/ResumePage/ResumePage.tsx
+++ b/web/src/pages/Resume/ResumePage/ResumePage.tsx
@@ -1,15 +1,7 @@
-import { Metadata } from '@redwoodjs/web'
-
 import ResumeCell from 'src/components/Resume/ResumeCell'
 
 const ResumePage = () => {
-  return (
-    <>
-      <Metadata title="Resume" />
-
-      <ResumeCell />
-    </>
-  )
+  return <ResumeCell />
 }
 
 export default ResumePage