drupaloid is brought to you by Rudá Maia

Rudá Maia

Use Github Issues as a comment widget

08/04/2019 - Writen at drupaloid local Drupal installation.

Mad props to the guys at https://utteranc.es/ that made possible to use Github Issues as a commenting widget in your site.

Utterance is a lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!

I am going to copy/paste their how it works section right here:

When Utterances loads, the GitHub issue search API is used to find the issue associated with the page based on url, pathname or title. If we cannot find an issue that matches the page, no problem, utterances-bot will automatically create an issue the first time someone comments.

To comment, users must authorize the utterances app to post on their behalf using the GitHub OAuth flow. Alternatively, users can comment on the GitHub issue directly.

So, in this guide I'm going to cover first how to setup a Github repo integrated with Utterance and then how I have included it here in drupaloid.

  1. Allow Utterances app in your repository.
  2. Go to https://utteranc.es/ and configure the widget following their instruction.
  3. Finally, you will get a code like this:
    <script src="https://utteranc.es/client.js"
            repo="rudamaia/drupaloid"
            issue-term="pathname"
            theme="github-light"
            label="Comments"
            crossorigin="anonymous"
            async>
    </script>
    
  4. You can use this code everywhere you want, but, I will be covering how I incorporated it in this website using a custom Block in Drupal.
  5. Create a custom module in your project.
    (I recommend you to use the name drupaloid for your module in this tutorial, or else, you will need to change this string in the next examples.)
  6. Now inside your module, create a file named 'src/Plugin/Block/Utterances.php':
    <?php
    
    namespace Drupal\drupaloid\Plugin\Block;
    // REMEBER TO CHANGE drupaloid to YOUR MODULE MACHINE NAME
    use Drupal\Core\Url;
    use Drupal\Core\Block\BlockBase;
    
    /**
     * Provides a 'drupaloid utterances' Block.
     *
     * @Block(
     *   id = "drupaloid_utterances",
     *   admin_label = @Translation("Drupaloid Utterances"),
     *   category = @Translation("drupaloid"),
     * )
     */
    class Utterances extends BlockBase {
      /**
       * {@inheritdoc}
       */
      public function build() {
        return [
          '#theme' => 'drupaloid_utterances'
        ];
      }
    
    
    }
    
  7. In your custom module root, create a new file 'templates/drupaloid--utterances.html.twig':
    (You need to change the template name from drupaloid to "yourmodulename--")

    <script src="https://utteranc.es/client.js"
            repo="rudamaia/drupaloid"
            issue-term="pathname"
            theme="github-light"
            label="Comments"
            crossorigin="anonymous"
            async>
    </script>
    
  8. Now, cache rebuild just to make sure and you should see your custom block like this:
  9. I have placed my block in the content area, as follow:

     

Now using Drupal block system you can pretty much setup up this new comment widget in all the places needed in your Drupal site. Utterances itself will take care to post issues in your repo using the page URL, so, the same block will work in every page in your site.

Read more