Feat: Add Helmet data component for CatChat

package.json

@@ -47,6 +47,7 @@
     "node-fetch": "^2.6.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-helmet": "^6.1.0",
     "react-query": "^3.39.3",
     "react-test-renderer": "18.3.1"
   },

src/components/CatChat/CatChat.tsx

@@ -1,8 +1,12 @@
 import { useState, useEffect, useRef } from 'react';
 import CATPHRASES from '../../constants/catPhrases';
 import Header from '../../components/Header/Header';
+import HelmetData from '../HelmetData/HelmetData';
+import PROJECTS from '../../constants/projects';
 import styles from './CatChat.module.css';
 
+const catChatData = PROJECTS[4];
+
 interface ChatMessage {
   author: string;
   message: string;
@@ -63,6 +67,12 @@ const CatChat = () => {
 
   return (
     <div data-testid="cat-chat-page" className={styles['cat-chat-page']}>
+      <HelmetData
+        title={catChatData.title}
+        description={catChatData.description}
+        image={catChatData.img}
+        url={`https://calcorbin.com${catChatData.link}`}
+      />
       <Header
         title="Cat Chat"
         repoLink="https://github.com/CalCorbin/cal-portfolio/blob/master/src/components/CatChat/CatChat.tsx"

src/components/HelmetData/HelmetData.tsx

@@ -0,0 +1,28 @@
+import { Helmet } from 'react-helmet';
+
+interface PortfolioHelmetProps {
+  title: string;
+  description: string;
+  image: string;
+  url: string;
+}
+
+const PortfolioHelmet = ({
+  title,
+  description,
+  image,
+  url,
+}: PortfolioHelmetProps) => {
+  return (
+    <Helmet>
+      <title>{title}</title>
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={image} />
+      <meta property="og:url" content={url} />
+      <meta property="og:type" content="website" />
+    </Helmet>
+  );
+};
+
+export default PortfolioHelmet;

src/constants/projects.ts

@@ -5,6 +5,7 @@ interface Project {
   title: string;
   img: string;
   link: string;
+  description: string;
 }
 
 const PROJECTS: Array<Project> = [
@@ -13,61 +14,73 @@ const PROJECTS: Array<Project> = [
     title: 'MineSweeper',
     link: ROUTES.MINESWEEPER,
     img: 'https://images.pexels.com/photos/4811240/pexels-photo-4811240.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+    description:
+      'A simple game of MineSweeper. Click the squares to reveal the hidden mines!',
   },
   {
     id: 8,
     title: 'Art Institute of Chicago Search',
     link: ROUTES.CHICAGOART,
     img: 'https://images.unsplash.com/flagged/photo-1572392640988-ba48d1a74457?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8YXJ0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
+    description:
+      'Search the Art Institute of Chicago collection for your favorite art pieces!',
   },
   {
     id: 6,
     title: 'HexClock',
     link: ROUTES.HEXCLOCK,
     img: 'https://images.unsplash.com/photo-1550534791-2677533605ab',
+    description: 'A clock that changes color based on the time.',
   },
   {
     id: 7,
     title: 'Furbot: The Discord Bot',
     link: 'https://github.com/CalCorbin/furbot',
     img: 'https://images.pexels.com/photos/5418837/pexels-photo-5418837.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+    description: 'A Discord bot for querying random information.',
   },
   {
     id: 4,
     title: 'Cat Chat',
     link: ROUTES.CATCHAT,
     img: 'https://images.unsplash.com/photo-1549545931-59bf067af9ab',
+    description: 'Chat with a ornery virtual cat. See what the cat has to say!',
   },
-
   {
     id: 9,
     title: 'Tic Tac Toe',
     link: ROUTES.TICTACTOE,
     img: 'https://images.pexels.com/photos/3400795/pexels-photo-3400795.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+    description: 'A simple game of Tic Tac Toe. Click the squares to play!',
   },
   {
     id: 3,
     title: 'SpaceX GraphQL',
     link: ROUTES.SPACEX,
     img: 'https://images.unsplash.com/photo-1628126235206-5260b9ea6441',
+    description: 'A simple GraphQL client for the SpaceX API.',
   },
   {
     id: 1,
     title: 'Star Trek Elevator Game',
     link: 'https://github.com/CalCorbin/elevatorGame',
     img: 'https://images.unsplash.com/photo-1550479023-2a811e19dfd3',
+    description: 'Ride the elevator of the Starship Enterprise!',
   },
   {
     id: 2,
     title: 'Cacti Corral',
     link: 'https://github.com/CalCorbin/cacti-corral',
     img: 'https://images.unsplash.com/photo-1528475478853-5b89bed65c4c',
+    description: 'Grow your own cactus and keep it alive!',
   },
   {
     id: 5,
     title: 'Test Driven Development',
     link: 'https://github.com/CalCorbin/cal-portfolio/blob/master/src/components/CatChat/CatChat.test.tsx',
     img: 'https://images.unsplash.com/photo-1546833998-877b37c2e5c6',
+    description:
+      'A example of Test Driven Development using Jest and React Testing Library.',
   },
 ];