gitalk

config.js

@@ -37,4 +37,11 @@ module.exports = {
       onLoadMore: 2,
     },
   },
+  gitalk: {
+    clientID: process.env.GITALK_ADMIN,
+    clientSecret: process.env.GITALK_CLIENT_ID,
+    repo: process.env.GITALK_REPO,
+    owner: process.env.GITALK_OWNER,
+    admin: process.env.GITALK_ADMIN,
+  },
 }

package-lock.json

@@ -3472,6 +3472,11 @@
         "postcss-value-parser": "^4.1.0"
       }
     },
+    "autosize": {
+      "version": "3.0.21",
+      "resolved": "https://registry.npmjs.org/autosize/-/autosize-3.0.21.tgz",
+      "integrity": "sha1-8YL0DRd1fZeKE5pMnKQMTA5EhgM="
+    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -7236,6 +7241,11 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "es6-promise": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.1.1.tgz",
+      "integrity": "sha512-OaU1hHjgJf+b0NzsxCg7NdIYERD6Hy/PEmFLTjw+b65scuisG3Kt4QoTvJ66BBkPZ581gr0kpoVzKnxniM8nng=="
+    },
     "es6-symbol": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
@@ -10163,11 +10173,58 @@
         "parse-url": "^5.0.0"
       }
     },
+    "gitalk": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/gitalk/-/gitalk-1.6.2.tgz",
+      "integrity": "sha512-+mhhhfhwWxIXLh8lv0CUQNTJBZM7/dvgWVFzVErJWTTV+s9dnXU87GnU7U2+Q0T28pCUUZ2sbKBPWV7IlahzGA==",
+      "requires": {
+        "autosize": "3.0.21",
+        "axios": "0.19.2",
+        "date-fns": "1.28.5",
+        "es6-promise": "4.1.1",
+        "github-markdown-css": "2.8.0",
+        "node-polyglot": "2.2.2",
+        "preact": "8.1.0",
+        "preact-compat": "3.16.0",
+        "react-flip-move": "2.9.14"
+      },
+      "dependencies": {
+        "date-fns": {
+          "version": "1.28.5",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.28.5.tgz",
+          "integrity": "sha1-JXz8RdMi30XvVlhmWWfuhBzXP68="
+        },
+        "node-polyglot": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/node-polyglot/-/node-polyglot-2.2.2.tgz",
+          "integrity": "sha1-Gj921zkvg26ggjg27egX5upuwmw=",
+          "requires": {
+            "for-each": "^0.3.2",
+            "has": "^1.0.1",
+            "string.prototype.trim": "^1.1.2",
+            "warning": "^3.0.0"
+          }
+        },
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
       "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4="
     },
+    "github-markdown-css": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-2.8.0.tgz",
+      "integrity": "sha1-nAP2RvVQt+P9nuCuKe4D6i/mg6M="
+    },
     "github-slugger": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.3.0.tgz",
@@ -11450,6 +11507,14 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-3.3.0.tgz",
       "integrity": "sha512-vlWRjnZqoTHuEjadquVHK3GxsXe1gNoATffLEA8Qbrdd++Xb+wHEFiWtwAKTscMBoi1AsvEMXhYRzAXA8Ex9FQ=="
     },
+    "immutability-helper": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-2.9.1.tgz",
+      "integrity": "sha512-r/RmRG8xO06s/k+PIaif2r5rGc3j4Yhc01jSBfwPCXDLYZwp/yxralI37Df1mwmuzcCsen/E/ITKcTEvc1PQmQ==",
+      "requires": {
+        "invariant": "^2.2.0"
+      }
+    },
     "immutable": {
       "version": "3.8.2",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
@@ -16376,6 +16441,43 @@
         "jimp": "^0.10.2"
       }
     },
+    "preact": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-8.1.0.tgz",
+      "integrity": "sha1-8DW4CO67dORtViRrAsoPGQttZXQ="
+    },
+    "preact-compat": {
+      "version": "3.16.0",
+      "resolved": "https://registry.npmjs.org/preact-compat/-/preact-compat-3.16.0.tgz",
+      "integrity": "sha1-zyvBsvj8oUkA1oCU+eELizKcxB4=",
+      "requires": {
+        "immutability-helper": "^2.1.2",
+        "preact-render-to-string": "^3.6.0",
+        "preact-transition-group": "^1.1.0",
+        "prop-types": "^15.5.8",
+        "standalone-react-addons-pure-render-mixin": "^0.1.1"
+      }
+    },
+    "preact-render-to-string": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-3.8.2.tgz",
+      "integrity": "sha512-przuZPajiurStGgxMoJP0EJeC4xj5CgHv+M7GfF3YxAdhGgEWAkhOSE0xympAFN20uMayntBZpttIZqqLl77fw==",
+      "requires": {
+        "pretty-format": "^3.5.1"
+      },
+      "dependencies": {
+        "pretty-format": {
+          "version": "3.8.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+          "integrity": "sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U="
+        }
+      }
+    },
+    "preact-transition-group": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/preact-transition-group/-/preact-transition-group-1.1.1.tgz",
+      "integrity": "sha1-8KSTJ+pRXs406ivoZMSn0p5dbhA="
+    },
     "prebuild-install": {
       "version": "5.3.5",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.5.tgz",
@@ -17174,6 +17276,11 @@
         "prop-types": "^15.5.8"
       }
     },
+    "react-flip-move": {
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/react-flip-move/-/react-flip-move-2.9.14.tgz",
+      "integrity": "sha1-O2DkRJOku+EVqMPWeLhEd2u6tFM="
+    },
     "react-frame-component": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.2.tgz",
@@ -19861,6 +19968,11 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
       "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
     },
+    "standalone-react-addons-pure-render-mixin": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/standalone-react-addons-pure-render-mixin/-/standalone-react-addons-pure-render-mixin-0.1.1.tgz",
+      "integrity": "sha1-PHQJ9MecQN6axyxhbPZ5qZTzdVE="
+    },
     "state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",

package.json

@@ -36,6 +36,7 @@
     "gatsby-source-filesystem": "^2.3.18",
     "gatsby-transformer-remark": "^2.8.23",
     "gatsby-transformer-sharp": "^2.5.10",
+    "gitalk": "^1.6.2",
     "material-theme": "github:Binaryify/OneDark-Pro",
     "netlify-cms-app": "^2.12.16",
     "node-sass": "^4.14.1",

src/components/Article/Article.js

@@ -1,3 +1,5 @@
+import "gitalk/dist/gitalk.css"
+
 import React from "react"
 import PropTypes from "prop-types"
 import Img from "gatsby-image"
@@ -6,6 +8,7 @@ import useSiteMetadataQuery from "../../hooks/useSiteMetadataQuery"
 import slugify from "../../helpers/slugify"
 import { Link } from "gatsby"
 import { useLocation } from "@reach/router"
+import GitalkComponent from "gitalk/dist/gitalk-component"
 
 import ViewsIcon from "../../images/views-icon.svg"
 import VkIcon from "../../images/vk-icon.svg"
@@ -17,7 +20,10 @@ const Article = ({
   html,
 }) => {
   const {
-    siteMetadata: { siteUrl },
+    siteMetadata: {
+      siteUrl,
+      gitalk: { clientID, clientSecret, repo, owner, admin },
+    },
   } = useSiteMetadataQuery()
   const { pathname } = useLocation()
 
@@ -102,6 +108,17 @@ const Article = ({
           <div className="article-comments">
             <div className="article-comments__heading">
               <h2>Комментарии</h2>
+              <GitalkComponent
+                options={{
+                  clientID,
+                  clientSecret,
+                  repo,
+                  owner,
+                  admin: admin.split(","),
+                  id: pathname,
+                  title: title,
+                }}
+              />
             </div>
             <div className="article-comments__content"></div>
           </div>

src/hooks/useSiteMetadataQuery.js

@@ -29,6 +29,13 @@ const useSiteMetadata = () => {
               onLoadMore
             }
           }
+          gitalk {
+            clientID
+            clientSecret
+            repo
+            owner
+            admin
+          }
         }
       }
     }