A component for integrating Gitalk comments in Gatsby.
npm install gatsby-plugin-gitalkA plugin that simplifies adding Gitalk comments to Gatsby
sh
$ yarn add gatsby-plugin-gitalk
`
or
`sh
$ npm install -S gatsby-plugin-gitalk
`Configure
Add the plugin to your
gatsby-config.js file with your Gitalk config `js
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: gatsby-plugin-gitalk,
options: {
config: gitalkConfig
}
},
]
}
`Usage
You can use the plugin as shown in this brief example:
`jsx
import Gitalk from 'gatsby-plugin-gitalk'
import '@suziwen/gitalk/dist/gitalk.css'const PostTemplate = () => {
let gitalkConfig = {
id: post.slug || post.id,
title: post.title,
}
return (
)
}
export default PostTemplate
`Custom style
Copy the file
node_modules/@suziwen/gitalk/dist/gitalk.css , and edit it, then import your modified version.Auto create new issue
This operation is option, you can create issue manually
`js
// gatsby-node.js....
const {GitalkPluginHelper} = require('gatsby-plugin-gitalk');
const gitalkOpts = {...}
....
exports.createPages = async ({ graphql, actions, getNode, reporter }) => {
// this token (GITALK_CREATE_ISSUE_TOKEN) apply from https://github.com/settings/tokens/new
// which must have create new issue permission,
// and for security issue, dont push public
const gitalkCreateIssueToken = process.env.GITALK_CREATE_ISSUE_TOKEN
// Due to github api request limit, it is recommended to create issue for recently added articles
// select articles from table order by createdate desc limit 10
if (gitalkOpts && gitalkCreateIssueToken) {
for (let i=0; i< articles.length; i++) {
const article = articles[i];
const issueOptions = Object.assign({}, gitalkOpts, {
id: '{article.id}',
title: '{article.title}',
description: '{article.description}',
url: '{article.url}',
}, {
personalToken: gitalkCreateIssueToken
})
// this function will try create new issue when it doesnt exist;
await GitalkPluginHelper.createIssue(issueOptions)
reporter.info(
create issue success)
}
}``