giscus

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Visit Website

Total Products

Software by giscus

Open Source

giscus

# [giscus][giscus] A comments system powered by [GitHub Discussions][discussions]. Let visitors leave comments and reactions on your website via GitHub! Heavily inspired by [utterances][utterances]. - [Open source][repo]. 🌏 - No tracking, no ads, always free. 📡 🚫 - No database needed. All data is stored in GitHub Discussions. :octocat: - Supports [custom themes][creating-custom-themes]! 🌗 - Supports [multiple languages][multiple-languages]. 🌐 - [Extensively configurable][advanced-usage]. 🔧 - Automatically fetches new comments and edits from GitHub. 🔃 - [Can be self-hosted][self-hosting]! 🤳 > **Note** > giscus is still under active development. GitHub is also still actively developing Discussions and its API. Thus, some features of giscus may break or change over time. ## How it works When giscus loads, the [GitHub Discussions search API][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][giscus-app] to [post on their behalf][authorization] using the GitHub OAuth flow. Alternatively, visitors can comment on the GitHub Discussion directly. You can moderate the comments on GitHub. [giscus]: https://giscus.app [discussions]: https://docs.github.com/en/discussions [utterances]: https://github.com/utterance/utterances [repo]: https://github.com/giscus/giscus [advanced-usage]: https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md [creating-custom-themes]: https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#data-theme [multiple-languages]: https://github.com/giscus/giscus/blob/main/CONTRIBUTING.md#adding-localizations [self-hosting]: https://github.com/giscus/giscus/blob/main/SELF-HOSTING.md [search-api]: https://docs.github.com/en/graphql/guides/using-the-graphql-api-for-discussions#search [giscus-app]: https://github.com/apps/giscus [authorization]: https://docs.github.com/en/developers/apps/identifying-and-authorizing-users-for-github-apps  If you're using giscus, consider [starring 🌟 giscus on GitHub][repo] and adding the [`giscus`][giscus-topic] topic [to your repository][topic-howto]! 🎉 ## Advanced usage You can add additional configurations (e.g. allowing specific origins) by following the [advanced usage guide][advanced-usage]. To use giscus with React, Vue, or Svelte, check out the [giscus component library][giscus-component]. ## Migrating If you've previously used other systems that utilize GitHub Issues (e.g. [utterances][utterances], [gitalk][gitalk]), you can [convert the existing issues into discussions][convert]. After the conversion, just make sure that the mapping between the discussion titles and the pages are correct, then giscus will automatically use the discussions. ## Sites using giscus - [laymonage.com][laymonage-website] - [os.phil-opp.com][os-phil-opp] - [Stats and R][statsandr] - [Tech Debt Burndown Podcast][techdebtburndown] - [**and many more!**][giscus-topic] ## Contributing See [CONTRIBUTING.md][contributing] [giscus-component]: https://github.com/giscus/giscus-component [repo]: https://github.com/giscus/giscus [giscus-topic]: https://github.com/topics/giscus [topic-howto]: https://docs.github.com/en/github/administering-a-repository/classifying-your-repository-with-topics [advanced-usage]: https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md [utterances]: https://github.com/utterance/utterances [gitalk]: https://github.com/gitalk/gitalk [convert]: https://docs.github.com/en/discussions/managing-discussions-for-your-community/moderating-discussions#converting-an-issue-to-a-discussion [laymonage-website]: https://laymonage.com/posts/giscus [os-phil-opp]: https://os.phil-opp.com [statsandr]: https://statsandr.com [techdebtburndown]: https://techdebtburndown.com [contributing]: https://github.com/giscus/giscus/blob/main/CONTRIBUTING.md  --- This README is available in: - [&lrm;العربية](README.ar.md) - [Беларуская](README.be.md) - [български](README.bg.md) - [Català](README.ca.md) - [Čeština](README.cs.md) - [Dansk](README.da.md) - [Deutsch](README.de.md) - [English](README.md) - [Esperanto](README.eo.md) - [Español](README.es.md) - [Euskera](README.eu.md) - [فارسی](README.fa.md) - [Français](README.fr.md) - [Ελληνικά](README.gr.md) - [Srpsko-Hrvatski (BCMS)](README.hbs.md) - [עברית](README.he.md) - [Magyar](README.hu.md) - [Indonesia](README.id.md) - [Italiano](README.it.md) - [日本語](README.ja.md) - [ភាសាខ្មែរ](README.kh.md) - [한국어](README.ko.md) - [Nederlands](README.nl.md) - [Polski](README.pl.md) - [Português](README.pt.md) - [Română](README.ro.md) - [Русский](README.ru.md) - [ภาษาไทย](README.th.md) - [Türkçe](README.tr.md) - [Tiếng Việt](README.vi.md) - [Українська](README.uk.md) - [O'zbek](README.uz.md) - [简体中文](README.zh-CN.md) - [繁體中文](README.zh-TW.md) - [香港繁體](README.zh-HK.md) [![Powered by Vercel](public/powered-by-vercel.svg)][vercel] [vercel]: https://vercel.com/?utm_source=giscus&utm_campaign=oss

Web Components & Widgets Email Clients

11.8K Github Stars

Open Source

giscus-component

# giscus-component A wrapper component for [giscus](https://giscus.app) 💎, a comments system powered by GitHub Discussions. Currently available for React, Vue, Svelte, Solid, and as a Web Component. ## Documentation ### Using the React, Vue, Svelte, or Solid component To use the React, Vue, Svelte, or Solid component, install the corresponding package. ```shell npm i @giscus/react # for React/Preact npm i @giscus/vue # for Vue npm i @giscus/svelte # for Svelte npm i @giscus/solid # for Solid # Change npm with the package manager you use ``` Then, import the default export from the package. Example for React: ```tsx import Giscus from '@giscus/react'; export default function MyApp() { return ( <Giscus id="comments" repo="giscus/giscus-component" repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA=" category="Announcements" categoryId="DIC_kwDOF1L2fM4B-hVS" mapping="specific" term="Welcome to @giscus/react component!" reactionsEnabled="1" emitMetadata="0" inputPosition="top" theme="light" lang="en" loading="lazy" /> ); } ``` The prop names are the same as the `data-` attributes shown on the [giscus website][giscus], but written in `camelCase` with the `data-` prefix and dashes removed. ### Using the web component To use the Web component, install the `giscus` package. ```shell npm i giscus ``` Then import it in your code. ```ts import 'giscus'; ``` Alternatively, you can also use a bundling CDN like [esm.sh][esm]. ```html  <script type="module" src="https://esm.sh/giscus"></script> ``` Then use it in your HTML. ```html <giscus-widget id="comments" repo="giscus/giscus" repoid="MDEwOlJlcG9zaXRvcnkzNTE5NTgwNTM=" category="General" categoryid="MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyNzk2NTc1" mapping="specific" term="Welcome to giscus!" reactionsenabled="1" emitmetadata="0" inputposition="top" theme="light" lang="en" loading="lazy" ></giscus-widget> ``` The attribute names are the same as the `data-` attributes shown on the [giscus website][giscus], but written in lowercase with the `data-` prefix and dashes removed. ### Changing the `<iframe>` styles You can style the `<iframe>` in your CSS by selecting the web component, or the `iframe` part specifically. For example: ```css giscus-widget { display: flex; margin: auto; max-width: 640px; } /* or... */ #comments { /* ... */ } /* or... */ #comments::part(iframe) { /* ... */ } /* etc. */ ``` You can also make the widget scrollable by creating a parent container with a limited height and `overflow: scroll`, for example: ```html <div class="comments-container"> <giscus-widget ... > </giscus-widget> </div> ``` ```css .comments-container { max-height: 640px; overflow-y: scroll; } ``` Note that this only allows you to style the `<iframe>` element and **not the iframe's contents**. If you want to style the contents, you need to [use a custom theme][custom-theme]. ### Notes When you change the props/attributes of the React, Vue, and web components, they will automatically update the giscus configuration using `postMessage()` to the underlying `<iframe>` element without reloading the comments. Unfortunately, this doesn't work for Svelte and Solid as they always reload the web component for some reason. If you know how to fix this, please let me know. ### Further information See the [demo][demo] and its [code example](./demo). For more information, read the documentation on the [giscus website][giscus] and its [advanced usage guide][advanced-usage]. ## Packages This is a monorepo. The base component is written using Lit as a web component. The other components are built as a wrapper around the web component for convenience. | Environment | Name | Version | Downloads | | ------------------- | ---------------------------- | ------------------------------------------- | --------------------------------------------- | | Web Component (Lit) | [`giscus`](./web) | [![npm version][web-vbadge]][npm-web] | [![npm downloads][web-dbadge]][npm-web] | | React & Preact | [`@giscus/react`](./react) | [![npm version][react-vbadge]][npm-react] | [![npm downloads][react-dbadge]][npm-react] | | Vue | [`@giscus/vue`](./vue) | [![npm version][vue-vbadge]][npm-vue] | [![npm downloads][vue-dbadge]][npm-vue] | | Svelte | [`@giscus/svelte`](./svelte) | [![npm version][svelte-vbadge]][npm-svelte] | [![npm downloads][svelte-dbadge]][npm-svelte] | | Solid | [`@giscus/solid`](./solid) | [![npm version][solid-vbadge]][npm-solid] | [![npm downloads][solid-dbadge]][npm-solid] | ## Related Article [Introducing giscus](https://laymonage.com/posts/giscus/) ## License Copyright © 2021-2022 laymonage. Released under the [MIT](./LICENSE) license. [giscus]: https://giscus.app [esm]: https://esm.sh [demo]: https://giscus-component.vercel.app [advanced-usage]: https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md [custom-theme]: https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#data-theme [web-vbadge]: https://img.shields.io/npm/v/giscus.svg [react-vbadge]: https://img.shields.io/npm/v/@giscus/react.svg [vue-vbadge]: https://img.shields.io/npm/v/@giscus/vue.svg [svelte-vbadge]: https://img.shields.io/npm/v/@giscus/svelte.svg [solid-vbadge]: https://img.shields.io/npm/v/@giscus/solid.svg [web-dbadge]: https://img.shields.io/npm/dt/giscus.svg [react-dbadge]: https://img.shields.io/npm/dt/@giscus/react.svg [vue-dbadge]: https://img.shields.io/npm/dt/@giscus/vue.svg [svelte-dbadge]: https://img.shields.io/npm/dt/@giscus/svelte.svg [solid-dbadge]: https://img.shields.io/npm/dt/@giscus/ssolid.svg [npm-web]: https://www.npmjs.com/package/giscus [npm-react]: https://www.npmjs.com/package/@giscus/react [npm-vue]: https://www.npmjs.com/package/@giscus/vue [npm-svelte]: https://www.npmjs.com/package/@giscus/svelte [npm-solid]: https://www.npmjs.com/package/@giscus/solid

Web Components & Widgets Live Chat & Chatbots Team Chat

435 Github Stars