From fd972382eb05ff479fc21cbd8f73fd2fc3edb36a Mon Sep 17 00:00:00 2001
From: Harris Greenstein <harrisgreenstein@gmail.com>
Date: Thu, 14 Dec 2023 23:49:49 -0500
Subject: [PATCH] Adding share links for blog with 'Font-Awesome'

---
 client/package-lock.json             |  61 ++++++++++++
 client/package.json                  |   4 +
 client/src/components/Blog/Blog.jsx  | 144 +++++++++++++++++++--------
 client/src/components/Blog/blog.scss |  28 ++++++
 4 files changed, 198 insertions(+), 39 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 8047936..d5d8c28 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,6 +9,10 @@
       "version": "0.0.0",
       "dependencies": {
         "@emailjs/browser": "^3.11.0",
+        "@fortawesome/fontawesome-svg-core": "^6.5.1",
+        "@fortawesome/free-brands-svg-icons": "^6.5.1",
+        "@fortawesome/free-solid-svg-icons": "^6.5.1",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "@popperjs/core": "^2.11.8",
         "axios": "^1.6.1",
         "bootstrap": "^5.3.2",
@@ -846,6 +850,63 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+      "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
diff --git a/client/package.json b/client/package.json
index 3da5363..5d529af 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,6 +14,10 @@
   },
   "dependencies": {
     "@emailjs/browser": "^3.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@popperjs/core": "^2.11.8",
     "axios": "^1.6.1",
     "bootstrap": "^5.3.2",
diff --git a/client/src/components/Blog/Blog.jsx b/client/src/components/Blog/Blog.jsx
index 491f3bc..044459d 100644
--- a/client/src/components/Blog/Blog.jsx
+++ b/client/src/components/Blog/Blog.jsx
@@ -5,7 +5,27 @@ import TestGraph from './assets/average_test_scores_by_age.png';
 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 {
+    faFacebookF,
+    faTwitter,
+    faLinkedinIn,
+} from '@fortawesome/free-brands-svg-icons';
+import { faEnvelope, faLink } from '@fortawesome/free-solid-svg-icons';
 function Blog() {
+    function copyToClipboard() {
+        navigator.clipboard
+            .writeText(
+                'https://harrisgreenstein.com/blog/how_will_coders_co_program_with_ai'
+            )
+            .then(() => {
+                alert('Link copied to clipboard!');
+            })
+            .catch((err) => {
+                console.error('Error in copying text: ', err);
+            });
+    }
+
     return (
         <section id="blog" className="blog-container">
             <h1
@@ -59,7 +79,12 @@ function Blog() {
                     src={CoverPhoto}
                     alt="Photo of man coding with Intelligent AI Agent"
                 />
-                <figcaption style={{ textAlign: 'center', color: "var(--bs-secondary-color)" }}>
+                <figcaption
+                    style={{
+                        textAlign: 'center',
+                        color: 'var(--bs-secondary-color)',
+                    }}
+                >
                     Photo generated by Dalle 3 given full text of the article
                     asked to describe the relationship between A.I. and coders
                     in the future
@@ -681,24 +706,29 @@ function Blog() {
                 axes. For example, the grid below shows the maximum special
                 positions in a 3x3 grid, 3 with all 1s on the diagonal.
             </p>
-                <figure style={{ display: 'flex', flexDirection: 'column' }}>
-                    <img
-                        src={SpecialGrid}
-                        alt="3x3 grid of 0s and 1s, this grid contains 3 ones on the top left to bottom right diagonal and the remaining squares are 0"
-                        style={{ maxWidth: '50dvw', alignSelf: 'center' }}
-                    />
-                    <figcaption style={{ textAlign: 'center', color: 'var(--bs-body-color)'}}>
-                        Credit:{' '}
-                        <a
-                            href="https://leetcode.com/problems/special-positions-in-a-binary-matrix/description/"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            {' '}
-                            Leetcode{' '}
-                        </a>
-                    </figcaption>
-                </figure>
+            <figure style={{ display: 'flex', flexDirection: 'column' }}>
+                <img
+                    src={SpecialGrid}
+                    alt="3x3 grid of 0s and 1s, this grid contains 3 ones on the top left to bottom right diagonal and the remaining squares are 0"
+                    style={{ maxWidth: '50dvw', alignSelf: 'center' }}
+                />
+                <figcaption
+                    style={{
+                        textAlign: 'center',
+                        color: 'var(--bs-body-color)',
+                    }}
+                >
+                    Credit:{' '}
+                    <a
+                        href="https://leetcode.com/problems/special-positions-in-a-binary-matrix/description/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        {' '}
+                        Leetcode{' '}
+                    </a>
+                </figcaption>
+            </figure>
             <h4 className="code-line" data-line-start="101" data-line-end="102">
                 <a id="Success_with_Intuitive_Pseudo_Code_101"></a>Success with
                 Intuitive Pseudo Code
@@ -977,21 +1007,21 @@ function Blog() {
                 <a id="The_Outcome_A_Fully_Functional_Graph_175"></a>The
                 Outcome: A Fully Functional Graph
             </h3>
-                <figure
-                    style={{
-                        width: '100%',
-                        height: '100%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}
-                >
-                    <img
-                        src={TestGraph}
-                        alt="Created Graph"
-                        className="blog-graph"
-                    />
-                </figure>
+            <figure
+                style={{
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                <img
+                    src={TestGraph}
+                    alt="Created Graph"
+                    className="blog-graph"
+                />
+            </figure>
             <p
                 className="has-line-data"
                 data-line-start="179"
@@ -1051,6 +1081,42 @@ function Blog() {
             <br />
             <br />
             <br />
+            <h4>Share This Article:</h4>
+            <div className="share-icons">
+                <a
+                    href="https://www.facebook.com/sharer/sharer.php?u=https://harrisgreenstein.com/blog/how_will_coders_co_program_with_ai"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <FontAwesomeIcon icon={faFacebookF} />
+                </a>
+                <a
+                    href="https://twitter.com/intent/tweet?url=https://harrisgreenstein.com/blog/how_will_coders_co_program_with_ai&text=YOUR_TEXT"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <FontAwesomeIcon icon={faTwitter} />
+                </a>
+                <a
+                    href="https://www.linkedin.com/sharing/share-offsite/?url=https://harrisgreenstein.com/blog/how_will_coders_co_program_with_ai"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <FontAwesomeIcon icon={faLinkedinIn} />
+                </a>
+                <a
+                    href="mailto:?subject=Check out this blog post&body=Check out this blog post at https://harrisgreenstein.com/blog/how_will_coders_co_program_with_ai"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <FontAwesomeIcon icon={faEnvelope} />
+                </a>
+
+                <button onClick={copyToClipboard}>
+                    <FontAwesomeIcon icon={faLink} />
+                </button>
+            </div>
+            <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:
@@ -1078,11 +1144,11 @@ function Blog() {
             <DiscussionEmbed
                 shortname="harrisgreenstein"
                 config={{
-                    url: "https://harrisgreenstein.com/blog/how_will_coders_co_program_with_ai",
-                    identifier: "1",
-                    title: "How Will Coders Co-Program With A.I.?",
-                    language: 'en', 
-                    }}
+                    url: 'https://harrisgreenstein.com/blog/how_will_coders_co_program_with_ai',
+                    identifier: '1',
+                    title: 'How Will Coders Co-Program With A.I.?',
+                    language: 'en',
+                }}
             />
             <h1 className="code-line" data-line-start="189" data-line-end="190">
                 <a id="Footer_189"></a>Footer
diff --git a/client/src/components/Blog/blog.scss b/client/src/components/Blog/blog.scss
index 5870c39..365cc65 100644
--- a/client/src/components/Blog/blog.scss
+++ b/client/src/components/Blog/blog.scss
@@ -98,6 +98,34 @@
     text-decoration: none;
     color: inherit;
 }
+.share-icons {
+    display: flex;
+    justify-content: flex-start;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.share-icons a, .share-icons button {
+    border: none;
+    background: none;
+}
+
+.share-icons img {
+    width: 50px;
+    height: 30px;
+    cursor: pointer;
+}
+
+.share-icons button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.share-icons > button > svg{
+
+    color: var(--bs-link-color);
+}
+
 .blog-container {
     p {
         code {