Nitrogenous Polymorphic Molecule

    gatsby-plugin-gitalk

    1.2.6 • Public • Published

    Gatsby Plugin Gitalk

    A plugin that simplifies adding Gitalk comments to Gatsby

    Demo

    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

    or

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

    Install

    npm i gatsby-plugin-gitalk

    DownloadsWeekly Downloads

    21

    Version

    1.2.6

    License

    MIT

    Unpacked Size

    10.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • suziwen