Skip to content

Commit

Permalink
Adding share links for blog with 'Font-Awesome'
Browse files Browse the repository at this point in the history
  • Loading branch information
@hgreenstein
hgreenstein committed Dec 15, 2023
1 parent 45e5627 commit fd97238
Show file tree
Hide file tree
Showing 4 changed files with 198 additions and 39 deletions.
61 changes: 61 additions & 0 deletions client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
144 changes: 105 additions & 39 deletions client/src/components/Blog/Blog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down
28 changes: 28 additions & 0 deletions client/src/components/Blog/blog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit fd97238

Please sign in to comment.