What is Github Discussions?

GitHub Discussions is a collaborative communication forum for the Github community around an open source or internal project. With this forum, Github members can ask and answer questions, share updates, or even just having conversations about a project.

Tutorial

Project Initialization

1. Go to Github, then sign up or login.
2. Make your target repository as public.

Set Up Your First Discussion

3. In your repository, click Settings.

4. CTRL+F or scroll down to find Discussions.
5. Check the box.

6. Click the Set up discussions button.
7. In this part, you can start a new discussion. Github has provided a template that is pretty straightforward to start with this.
8. When you're good to go, Click Start discussion.

Enable giscus to Your Project

9. Head to https://github.com/apps/giscus and click Configure.
10. Scroll down to Repository access and modify it based on your preference, and click Save.

Get the API Key of Your Project

Github uses GraphQL API to fetch your account's data. You can explore many things using that data with this API.

11. Head to https://docs.github.com/en/graphql/overview/explorer.
12. Sign in with your Github account.
13. Copy and paste this API request to the leftside of GraphiQL and don't forget to change the content inside the <> tag.

query {
  repository(owner: "<your_github_username>", name:"<your_repository>"){
    id
    discussionCategories(first:10) {
      edges {
        node {
          id
          name
        }
      }
    }
  }
}

Explanation: the query above requests the first 10 discussions of owner in a repository called name.

14. Click this button.

You'll see a schema result like this:

{
  "data": {
    "repository": {
      "id": "R_kgDOHucLSQ",
      "discussionCategories": {
        "edges": [
          {
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwZ",
              "name": "Announcements"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwa",
              "name": "General"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwc",
              "name": "Ideas"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwe",
              "name": "Polls"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwb",
              "name": "Q&A"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwd",
              "name": "Show and tell"
            }
          }
        ]
      }
    }
  }
}

Explanation: The repo with ID R_kgDOHucLSQ has 6 discussion category nodes. Each of them represents your discussion's category (Announcements, General, Ideas, Polls, Q&A, Show and tell) and its corresponding ID.

Install @giscus/react Package to Your Project

15. Open terminal, copy, and paste the following command.

For npm:

npm install @giscus/react

Or, for yarn:

yarn add @giscus/react

16. Implement giscus

import {Giscus} from "@giscus/react"

export default function GiscusComment() {
  return (
      <Giscus
              repo="rosatiara/giscus"
              repoId="R_kgDOHucLSQ"
              category="General"
              categoryId="DIC_kwDOHucLSc4CQdwa"
              reactionsEnabled="1"
              emitMetadata="0"
              theme="dark"
              lang="en"
              loading="lazy"
        />
  )
}

Psst.. don't forget to import the package! :p

Explanation:

• repo: your target repository
• repoId: the ID of your repo, located at the data.repository.id in the schema above.
• category: discussion's category. Choose what you like!
• categoryId: ID of the category that you chose, located at data.repository.id.discussionCategories.edges.node.id
• reactionsEnabled: 1 for enabling reactions, and 0 for disabling reactions.
• emitMetadata: 1 for enabling experimental support for emitting type metadata, and 0 for disabling it.
• theme: choose your favorite theme!
• lang: language preference
• loading: kind of loading you want to implement for your giscus.

Voila! 🎉 You now have a discussion feature in your project!