diff --git a/config.js b/config.js index 8e53132..1361ac1 100644 --- a/config.js +++ b/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, + }, } diff --git a/package-lock.json b/package-lock.json index bd2cf42..78c0102 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 5cc1bae..8aa18a0 100644 --- a/package.json +++ b/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", diff --git a/src/components/Article/Article.js b/src/components/Article/Article.js index 29625bf..85fa379 100644 --- a/src/components/Article/Article.js +++ b/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 = ({