From 9408b0ea546eda06bd944e6a6d10a421d1c4d78c Mon Sep 17 00:00:00 2001
From: Harris Greenstein <harrisgreenstein@gmail.com>
Date: Thu, 14 Dec 2023 23:53:00 -0500
Subject: [PATCH] Added meta tags just for blog article with "React-Helmet"

---
 client/package-lock.json            | 28 ++++++++++++++++++++++++++++
 client/package.json                 |  1 +
 client/src/components/Blog/Blog.jsx | 22 +++++++++++++++++++++-
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index d5d8c28..05dcbb4 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -25,6 +25,7 @@
         "react-dom": "^18.2.0",
         "react-ga": "^3.3.1",
         "react-google-recaptcha": "^3.1.0",
+        "react-helmet": "^6.1.0",
         "react-parallax": "^3.5.1",
         "react-particles": "^2.12.2",
         "react-router-dom": "^6.18.0",
@@ -4403,6 +4404,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-ga": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz",
@@ -4424,6 +4430,20 @@
         "react": ">=16.4.1"
       }
     },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4508,6 +4528,14 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/client/package.json b/client/package.json
index 5d529af..53ec6a9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -30,6 +30,7 @@
     "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
     "react-google-recaptcha": "^3.1.0",
+    "react-helmet": "^6.1.0",
     "react-parallax": "^3.5.1",
     "react-particles": "^2.12.2",
     "react-router-dom": "^6.18.0",
diff --git a/client/src/components/Blog/Blog.jsx b/client/src/components/Blog/Blog.jsx
index 044459d..7955807 100644
--- a/client/src/components/Blog/Blog.jsx
+++ b/client/src/components/Blog/Blog.jsx
@@ -6,6 +6,7 @@ import OutputComparison from './assets/Output Comparison Nova Mode.png';
 import CoverPhoto from './assets/dalleCoverPhoto.png';
 import { DiscussionEmbed } from 'disqus-react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Helmet } from 'react-helmet';
 import {
     faFacebookF,
     faTwitter,
@@ -28,6 +29,25 @@ function Blog() {
 
     return (
         <section id="blog" className="blog-container">
+            <Helmet>
+                <title>Harris Greenstein's Blog</title>
+                <meta property="og:title" content="How Will Coders Co-Program With A.I.?" />
+                <meta
+                    property="og:description"
+                    content="This article explores the future of programming alongside A.I.,
+                emphasizing a collaborative approach where coders and artificial
+                intelligence systems enhance each other's capabilities. It
+                introduces the innovative “//py” mode, designed for seamless
+                integration of natural language and coding, and discusses the
+                transformative impact of Nova Mode on ChatGPT's functionality.
+                The piece highlights how these advancements will enable
+                programmers to express complex coding logic in simpler terms,
+                revolutionizing the way we interact with coding languages.
+"
+                />
+                <meta property="og:image" content={CoverPhoto} />
+                <meta property="og:url" content="https://harrisgreenstein.com/blog/how_will_coders_co_program_with_ai" />
+            </Helmet>
             <h1
                 className="code-line"
                 data-line-start="0"
@@ -1116,7 +1136,7 @@ function Blog() {
                     <FontAwesomeIcon icon={faLink} />
                 </button>
             </div>
-            <br/>
+            <br />
             <h4 className="code-line" data-line-start="107" data-line-end="108">
                 <a id="Graphing_with_Natural_Language_Data_A_Creative_Exploration_with_py_Mode_107"></a>
                 About The Author: