Merge pull request #24 from imranhsayed/feature/add-disqus-comments

Add disqus comment

Author: imranhsayed

README.md

@@ -17,15 +17,15 @@ docker-compose -f backend/docker-compose.yml up -d
 
 Backend will be available on port `http://localhost:8020`
 
+* If you happen to use your own WordPress setup, be sure to install and activate plugins from composer.json and add your own WordPress site URL
+in an .env file, You can check the .env-example file for reference.
+
 ## [Frontend](https://github.com/imranhsayed/nextjs-headless-wordpress/tree/master/frontend)
 Run this from root for the first time.
 ```bash
 cd frontend; npm i && npm run dev
 ```
 
-* If you happen to use your own WordPress setup, be sure to install and activate plugins from composer.json and add your own WordPress site URL
-in an .env file, You can check the .env-example file for reference.
-
 ### During development
 ```bash
 cd frontend; npm run dev
@@ -34,7 +34,7 @@ cd frontend; npm run dev
 Frontend will be available on port `http://localhost:3000`
 
 ### Evironment vars. 
-rename .env-example to .env inside frontend directory and add your WordPress Site URL ( for local developent pull `http://localhost:8020` as your WordPress URL)
+Create a `.env` file taking reference from `.env-example` inside frontend directory and add your WordPress Site URL ( for local development put `http://localhost:8020` as your WordPress URL)
 
 ## Development ( Developers only )
 

frontend/.env-example

@@ -1 +1,3 @@
 NEXT_PUBLIC_WORDPRESS_SITE_URL=http://localhost:8020
+NEXT_PUBLIC_NEXTJS_SITE_URL=http://localhost:3000
+NEXT_PUBLIC_DISQUS_SHORTNAME=xxxx

frontend/package-lock.json

@@ -22,6 +22,7 @@
 	"homepage": "https://github.com/imranhsayed/nextjs-wordpress-theme#readme",
 	"dependencies": {
 		"@apollo/client": "^3.1.4",
+		"disqus-react": "^1.0.10",
 		"dompurify": "^2.0.15",
 		"graphql": "^15.3.0",
 		"lodash": "^4.17.20",

frontend/package.json

@@ -4,6 +4,7 @@ import Layout from "../../src/components/layout";
 import { GET_POST_SLUGS } from "../../src/queries/get-posts";
 import { sanitize } from "../../src/utils/functions";
 import Image from "../../src/components/image";
+import DisqusComment from "../../src/components/blog/discuss-comments";
 
 const SingleBlog = ({menus, post, path}) => {
 	return (
@@ -18,6 +19,7 @@ const SingleBlog = ({menus, post, path}) => {
 				</div>
 				<div className="w-1/4"/>
 			</div>
+			<DisqusComment post={post}/>
 		</Layout>
 	)
 }
@@ -48,6 +50,8 @@ export async function getStaticPaths() {
 
 	const pathsData = [];
 
+	console.warn( 'pathsData', pathsData );
+
 	data.posts.edges.map( post => {
 		pathsData.push(
 			{ params: { slug: post.node.slug } }

frontend/pages/blog/[slug].js

@@ -0,0 +1,21 @@
+import {DiscussionEmbed} from "disqus-react"
+
+const DisqusComment = ({ post }) => {
+	const disqusShortname = process.env.NEXT_PUBLIC_DISQUS_SHORTNAME;
+	const disqusConfig = {
+		url: `${process.env.NEXT_PUBLIC_NEXTJS_SITE_URL}/blog/${post?.slug}`,
+		identifier: post.id,
+		title: post.title
+	}
+
+	return (
+		<div>
+			<DiscussionEmbed
+				shortname={disqusShortname}
+				config={disqusConfig}
+			/>
+		</div>
+	)
+}
+
+export default DisqusComment;

frontend/src/components/blog/discuss-comments/index.js

@@ -12,8 +12,8 @@ const Posts = ({posts}) => {
 			{
 				( posts?.edges ?? []).map((post) => {
 					return (
-						<div className="w-1/3 mb-4 px-2">
-							<Post key={post?.node?.id ?? ""} post={post.node}/>
+						<div key={post?.node?.id ?? ""} className="w-1/3 mb-4 px-2">
+							<Post post={post?.node}/>
 						</div>
 					);
 				})

frontend/src/components/blog/posts/index.js

@@ -28,6 +28,7 @@ export const GET_POST = gql`
     title
     excerpt
     content
+    slug
     large: featuredImage {
       node {
 		...ImageLargeFragment

frontend/src/queries/get-post.js

@@ -29,6 +29,7 @@ export const GET_POSTS = gql`
         id
         title
         excerpt
+        slug
         mediumLarge: featuredImage {
           node {
             ...ImageMediumLargeFragment