Skip to content

Commit

Permalink
Adding comment section to blog with 'disqus-react' package
Browse files Browse the repository at this point in the history
  • Loading branch information
@hgreenstein
hgreenstein committed Dec 15, 2023
1 parent 6927460 commit 45e5627
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 42 deletions.
10 changes: 10 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.

1 change: 1 addition & 0 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"axios": "^1.6.1",
"bootstrap": "^5.3.2",
"bootstrap-icons": "^1.11.1",
"disqus-react": "^1.1.5",
"emailjs": "^4.0.3",
"express": "^4.18.2",
"react": "^18.2.0",
Expand Down
94 changes: 52 additions & 42 deletions client/src/components/Blog/Blog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import SpecialGrid from './assets/special-grid.jpg';
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';
function Blog() {
return (
<section id="blog" className="blog-container">
Expand Down Expand Up @@ -40,7 +40,6 @@ function Blog() {
By: Harris Greenstein
</h6>
<br />

<em>
This article explores the future of programming alongside A.I.,
emphasizing a collaborative approach where coders and artificial
Expand All @@ -53,19 +52,19 @@ function Blog() {
revolutionizing the way we interact with coding languages.
</em>
<br />

max-width: min(55dvw, 1000px);
<br />
<div style={{ display: 'flex', flexDirection: 'column' }}>
<figure style={{ display: 'flex', flexDirection: 'column' }}>
<img
src={CoverPhoto}
alt="Photo of man coding with Intelligent AI Agent"
/>
<caption style={{textAlign: "center"}}>
<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
</caption>
</div>
</figcaption>
</figure>
<br />
<h2 className="code-line" data-line-start="4" data-line-end="5">
<a id="The_future_of_coding_with_AI_A_Collaborative_Landscape_4"></a>
Expand Down Expand Up @@ -579,7 +578,8 @@ function Blog() {
leave the optimized approach as a challenge to the
reader at home.
</p>
</li>
</li>{' '}
max-width: min(55dvw, 1000px);
<li
className="has-line-data"
data-line-start="82"
Expand Down Expand Up @@ -681,19 +681,13 @@ 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>
<p
className="has-line-data"
data-line-start="99"
data-line-end="100"
id="footerLink4"
>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<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' }}
/>
<caption style={{ textAlign: 'center' }}>
<figcaption style={{ textAlign: 'center', color: 'var(--bs-body-color)'}}>
Credit:{' '}
<a
href="https://leetcode.com/problems/special-positions-in-a-binary-matrix/description/"
Expand All @@ -703,9 +697,8 @@ function Blog() {
{' '}
Leetcode{' '}
</a>
</caption>
</div>
</p>
</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 @@ -822,9 +815,10 @@ function Blog() {
data-line-end="128"
>
The first step comes from pasting in the three prompts I formed
to define “//py” mode found in the <a href="/blog#1_191">footer</a>.
This process has been tested to be repeatable in recreating the
conditions to use “//py” mode in ChatGPT.
to define “//py” mode found in the{' '}
<a href="/blog#1_191">footer</a>. This process has been tested
to be repeatable in recreating the conditions to use “//py” mode
in ChatGPT.
</p>
<p
className="has-line-data"
Expand Down Expand Up @@ -983,15 +977,21 @@ function Blog() {
<a id="The_Outcome_A_Fully_Functional_Graph_175"></a>The
Outcome: A Fully Functional Graph
</h3>
<p
className="has-line-data"
data-line-start="177"
data-line-end="178"
>
<div style={{width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center"}}>
<img src={TestGraph} alt="Created Graph" className="blog-graph"/>
</div>
</p>
<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 @@ -1075,7 +1075,15 @@ function Blog() {
<a href="/"> homepage here</a>{' '}
</em>
</p>

<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',
}}
/>
<h1 className="code-line" data-line-start="189" data-line-end="190">
<a id="Footer_189"></a>Footer
</h1>
Expand All @@ -1090,16 +1098,18 @@ function Blog() {
<a id="can_be_inputted_together_193"></a>(can be inputted
together)
</h4>

<p>
<strong>Please note, the following prompts will only work correctly if you have already set up {' '}
<a
href="https://www.novaspivack.com/technology/nova-mode-the-ultimate-chatgpt-custom-instruction"
target="_blank"
rel="noopener noreferrer"
>
Nova Mode
</a></strong>
<strong>
Please note, the following prompts will only work correctly
if you have already set up{' '}
<a
href="https://www.novaspivack.com/technology/nova-mode-the-ultimate-chatgpt-custom-instruction"
target="_blank"
rel="noopener noreferrer"
>
Nova Mode
</a>
</strong>
</p>
<h5>
<a href="/blog#footerLink1">
Expand Down Expand Up @@ -1339,7 +1349,7 @@ function Blog() {
</h2>
<pre>
<code
class="has-line-data"
className="has-line-data"
data-line-start="252"
data-line-end="268"
>
Expand Down

0 comments on commit 45e5627

Please sign in to comment.