Embed "GITHUB DISCUSSION" Anywhere !

Embed "GITHUB DISCUSSION" Anywhere !

ยท

2 min read

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 that 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 is 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 Gicus.

discuss cateogry

  • choose from a variety of themes

gicus themes

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

gicus script

  • you can add this script within <body> tag

Output

  • this is how the light-contrast theme looks

    output

ย