DEV Community

Cover image for Embed "GITHUB DISCUSSION" Anywhere !
Atul Kushwaha
Atul Kushwaha

Posted on

Embed "GITHUB DISCUSSION" Anywhere !

Ever wondered how useful it could be if we could embed GitHub Discussions to our blogs, documentation or anywhere we like
Well I Found an application which does this seamlessly, In this blog we'll learn to use gicus !

Introduction

A comments system powered by GitHub Discussions. Let visitors leave comments and reactions on your website via GitHub! Heavily inspired by utterances.

Features

  • Open source. 🌏
  • No tracking, no ads, always free. 📡 🚫
  • No database needed. All data is stored in GitHub Discussions.
  • Supports custom themes! 🌗
  • Supports multiple languages. 🌐
  • Extensively configurable. 🔧
  • Automatically fetches new comments and edits from GitHub. 🔃 Can be self-hosted! 🤳

How it works

When giscus loads, the GitHub Discussions search API is used to find the Discussion associated with the page based on a chosen mapping (URL, pathname, <title>, etc.). If a matching discussion cannot be found, the giscus bot will automatically create a discussion the first time someone leaves a comment or reaction.

To comment, visitors must authorize the giscus app to post on their behalf using the GitHub OAuth flow. Alternatively, visitors can comment on the GitHub Discussion directly. You can moderate the comments on GitHub.

Requirements

  • The repository is public, otherwise visitors will not be able to view the discussion.
  • The giscus app is installed, otherwise visitors will not be able to comment and react.
  • The Discussions feature is turned on by enabling it for your repository.

Meeting Requirements

application

gicus

Configure

  • choose language and enter repository in (username/reponame) format is above requirements are satisfied you'd see a green tick gicus
  • Choose the mapping between the embedding page and the embedded discussion, you can play around but you can proceed by choosing 2nd option gius mapping
  • Choose the discussion category where new discussions will be created. It is recommended to use a category with the Announcements type so that new discussions can only be created by maintainers and giscus.

discuss cateogry

  • choose from a variety of themes

gicus themes

  • and you are done, it'll generate a script which can be use to embed discussions !!!

gicus script

  • you can add this script within tag

Output

  • this is how light-contrast theme looks output

Top comments (0)