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 (

-
+
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.

-
- 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 -
- Credit:{' '} - - {' '} - Leetcode{' '} - -
-
+
+ 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 +
+ Credit:{' '} + + {' '} + Leetcode{' '} + +
+

Success with Intuitive Pseudo Code @@ -977,21 +1007,21 @@ function Blog() { The Outcome: A Fully Functional Graph

-
- Created Graph -
+
+ Created Graph +



+

Share This Article:

+
+ + + + + + + + + + + + + + +
+

About The Author: @@ -1078,11 +1144,11 @@ function Blog() {

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 {