Embed "GITHUB DISCUSSION" Anywhere !
Tags: tutorial, tooling, github, webdev
Published: 2023-06-12 05:14:25

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](https://docs.github.com/en/graphql/guides/using-the-graphql-api-for-discussions#search) 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](https://giscus.app/) to [post on their behalf](https://docs.github.com/en/apps/creating-github-apps/authenticating-with-a-github-app/authenticating-with-a-github-app-on-behalf-of-a-user) 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](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/managing-repository-settings/setting-repository-visibility#making-a-repository-public), otherwise visitors will not be able to view the discussion.
- The [giscus app](https://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](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/enabling-or-disabling-github-discussions-for-a-repository).

## Meeting Requirements
- enable [Discussions for your repo](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/enabling-or-disabling-github-discussions-for-a-repository)
- ensure that your repo is public
- install [Gicus app & configure](https://github.com/apps/giscus) 

![application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddjg1uux057cyuasljmk.png)


![gicus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9ywd7nuj1pn36kngs74.png)

## Configure 
- choose language and enter repository in (username/reponame) format is above requirements are satisfied you'd see a green tick
![gicus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nchlkinr6sdiv2nadhdx.png)
- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr0ld1j6y4si1haf413r.png)
- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59sb96dqboz2ql2c2vlp.png)
- choose from a variety of themes

![gicus themes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6ead5kcpfrht51smwm4.png)
- and you are done, it'll generate a script which can be use to embed discussions !!!

![gicus script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqjq0uqm89dtmpk0s55r.png)
- you can add this script within <body> tag 

## Output
- this is how light-contrast theme looks 
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dahxs4238cnajficclmt.png)