Gatsby Plugin Gitalk

A plugin that simplifies adding Gitalk comments to Gatsby

Demo

https://github.com/suziwen/my-gatsby-gitalk-demo

Description

The goal of this plugin is to allow users to bring their content to life and cultivate engaged communities by integrating Gitalk comments into their blazing-fast Gatsby websites. After struggling to integrate different Gitalk components into my Gatsby site, creating an easily-configured plugin for the Gatsby ecosystem felt like a no-brainer.

Install

$ yarn add gatsby-plugin-gitalk

$ npm install -S gatsby-plugin-gitalk

Configure

Add the plugin to your gatsby-config.js file with your Gitalk config

// 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:

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 (
     <Gitalk options={gitalkConfig}/>
  )
}

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

// 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`)
    }
  }

Validation Failed

Hello, I'm trying to get this plugin to work.

Here's my gatsby-config.js:

let gitalkConfig =
  {
    clientID: `value from OAuth application settings`,
    clientSecret: `value from OAuth application settings`,
    repo: `.git link of my repo given by GitHub`,
    owner: `my GitHub username`,
    admin: [`my GitHub username`],
    language: `en`
  }
module.exports =
  {
    plugins: [
      {
        resolve: `gatsby-plugin-gitalk`,
          options:
            {
              config: gitalkConfig
            }
      }]
  }

In my post.js, I've this:

import Gitalk from 'gatsby-plugin-gitalk'
const Post = ( ) =>
  {
    let gitalkConfig = {id: path, title: title} //path and title give me the respective details in my case
    return ({<Gitalk options = {gitalkConfig}/>})
  }
export default Post

However, on the page, once it's rendered, I get this

Error: Validation Failed. The listed users and repositories cannot be searched either because the resources do not exist or you do not have permission to view them.

I've no idea what am I doing wrong. Is it because I'm just viewing this in development and my code isn't on GitHub yet? Seems unlikely though.

suziwen / gatsby-plugin-gitalk Goto Github PK