add disqus as an opt-in plugin for theme users

README.md

@@ -422,6 +422,14 @@ This theme introduces some custom events to allow 3rd party scripts (or your own
 
 Making sure all functions across different browsers is a hard-work. For now, it only supports the latest version of the major browsers. Do consider open an issue or provide a PR relating to browser compatibility.
 
+## DISQUS
+
+adding disqus to your website is easy through this plugin. here are the steps:
+
+- if you haven't already, create an `.env.<your-environment>` file for the environments you need. for example, on local development environment, create a file called `.env.development`
+- add a variable `DISQUS_SHORTNAME=<your disqus shortname>` to the .env file
+- start your gatsby website.
+
 # Contribute
 
 This project is a [Monorepo](https://en.wikipedia.org/wiki/Monorepo). Which uses `npm` as package manager. As long as the Node supports npm workspaces then it should fit the contributing prerequisites.

packages/gatsby-theme-pitayan/gatsby-config.js

@@ -1,3 +1,7 @@
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
+
 const path = require("path")
 const fs = require("fs")
 
@@ -111,6 +115,15 @@ module.exports = ({
       })
     }
 
+    if (process.env.DISQUS_SHORTNAME) {
+      defaultPlugins.push({
+        resolve: `gatsby-plugin-disqus`,
+        options: {
+          shortname: process.env.DISQUS_SHORTNAME,
+        },
+      })
+    }
+
     return defaultPlugins.concat({
       resolve: `gatsby-plugin-mdx`,
       options: {

packages/gatsby-theme-pitayan/package.json

@@ -7,6 +7,7 @@
     "@mdx-js/mdx": "^2.2.1",
     "@mdx-js/react": "^2.2.1",
     "autoprefixer": "^10.4.13",
+    "dotenv": "^16.0.3",
     "gatsby": "^5.3.2",
     "gatsby-plugin-catch-links": "^5.3.0",
     "gatsby-plugin-image": "^3.3.2",

packages/gatsby-theme-pitayan/src/templates/post/index.tsx

@@ -3,6 +3,7 @@ import { graphql, Link } from "gatsby"
 import { MDXProvider } from "@mdx-js/react"
 import { RiArrowLeftLine, RiArrowRightLine } from "react-icons/ri"
 import { GatsbyImage, getImage, ImageDataLike } from "gatsby-plugin-image"
+import { Disqus } from "gatsby-plugin-disqus"
 import { useLocation } from "@reach/router"
 
 import DefaultLayout from "@pitayan/gatsby-theme-pitayan/src/layouts/Default"
@@ -184,6 +185,16 @@ const Post: React.FC<PostProps> = ({
         />
       </div>
 
+      <div className="my-8 max-w-lg md:max-w-2xl mx-auto">
+        <Disqus
+          config={{
+            url: `${siteUrl}${slug}`,
+            identifier: slug,
+            title: title,
+          }}
+        />
+      </div>
+
       <div className="my-8 max-w-lg md:max-w-2xl mx-auto">
         <div className="block sm:flex flex-wrap items-center justify-center sm:justify-between">
           <CategoryTags className="my-8 justify-center" categories={categories} />

packages/www/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@pitayan/gatsby-theme-pitayan": "^0.5.0",
     "@raae/gatsby-remark-oembed": "^0.3.2",
+    "dotenv": "^16.0.3",
     "gatsby": "^5.3.2",
     "gatsby-plugin-feed": "^5.3.1",
     "gatsby-plugin-sitemap": "^6.3.1",