{"id":13534127,"url":"https://github.com/giscus/giscus-component","last_synced_at":"2025-05-14T15:11:29.076Z","repository":{"id":37017581,"uuid":"391313020","full_name":"giscus/giscus-component","owner":"giscus","description":"Component library for giscus, a comment system powered by GitHub Discussions.","archived":false,"fork":false,"pushed_at":"2025-04-05T09:19:56.000Z","size":5064,"stargazers_count":380,"open_issues_count":9,"forks_count":24,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-12T01:53:48.022Z","etag":null,"topics":["comment-system","giscus","github-discussions","hacktoberfest","lit","react","solid","svelte","vue","web-components"],"latest_commit_sha":null,"homepage":"https://giscus-component.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/giscus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"laymonage","patreon":"sage","custom":["https://paypal.me/laymonage"]}},"created_at":"2021-07-31T09:39:13.000Z","updated_at":"2025-04-09T13:53:03.000Z","dependencies_parsed_at":"2023-11-25T16:23:52.229Z","dependency_job_id":"4c280cb8-be11-456e-a3d3-ddd7f593233d","html_url":"https://github.com/giscus/giscus-component","commit_stats":{"total_commits":660,"total_committers":12,"mean_commits":55.0,"dds":0.2772727272727272,"last_synced_commit":"06a9bf16188ca9517ba5cd819642145fed398c21"},"previous_names":[],"tags_count":119,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giscus%2Fgiscus-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giscus%2Fgiscus-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giscus%2Fgiscus-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giscus%2Fgiscus-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/giscus","download_url":"https://codeload.github.com/giscus/giscus-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505873,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comment-system","giscus","github-discussions","hacktoberfest","lit","react","solid","svelte","vue","web-components"],"created_at":"2024-08-01T07:01:26.729Z","updated_at":"2025-04-12T01:53:59.021Z","avatar_url":"https://github.com/giscus.png","language":"TypeScript","funding_links":["https://github.com/sponsors/laymonage","https://patreon.com/sage","https://paypal.me/laymonage"],"categories":["TypeScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# giscus-component\n\nA wrapper component for [giscus](https://giscus.app) 💎, a comments system powered by GitHub\nDiscussions. Currently available for React, Vue, Svelte, Solid, and as a Web\nComponent.\n\n## Documentation\n\n### Using the React, Vue, Svelte, or Solid component\n\nTo use the React, Vue, Svelte, or Solid component, install the corresponding\npackage.\n\n```shell\nnpm i @giscus/react   # for React/Preact\nnpm i @giscus/vue     # for Vue\nnpm i @giscus/svelte  # for Svelte\nnpm i @giscus/solid   # for Solid\n# Change npm with the package manager you use\n```\n\nThen, import the default export from the package. Example for React:\n\n```tsx\nimport Giscus from '@giscus/react';\n\nexport default function MyApp() {\n  return (\n    \u003cGiscus\n      id=\"comments\"\n      repo=\"giscus/giscus-component\"\n      repoId=\"MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA=\"\n      category=\"Announcements\"\n      categoryId=\"DIC_kwDOF1L2fM4B-hVS\"\n      mapping=\"specific\"\n      term=\"Welcome to @giscus/react component!\"\n      reactionsEnabled=\"1\"\n      emitMetadata=\"0\"\n      inputPosition=\"top\"\n      theme=\"light\"\n      lang=\"en\"\n      loading=\"lazy\"\n    /\u003e\n  );\n}\n```\n\nThe prop names are the same as the `data-` attributes shown on the\n[giscus website][giscus], but written in `camelCase` with the `data-` prefix and\ndashes removed.\n\n### Using the web component\n\nTo use the Web component, install the `giscus` package.\n\n```shell\nnpm i giscus\n```\n\nThen import it in your code.\n\n```ts\nimport 'giscus';\n```\n\nAlternatively, you can also use a bundling CDN like [esm.sh][esm].\n\n```html\n\u003c!-- esm.sh --\u003e\n\u003cscript type=\"module\" src=\"https://esm.sh/giscus\"\u003e\u003c/script\u003e\n```\n\nThen use it in your HTML.\n\n```html\n\u003cgiscus-widget\n  id=\"comments\"\n  repo=\"giscus/giscus\"\n  repoid=\"MDEwOlJlcG9zaXRvcnkzNTE5NTgwNTM=\"\n  category=\"General\"\n  categoryid=\"MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyNzk2NTc1\"\n  mapping=\"specific\"\n  term=\"Welcome to giscus!\"\n  reactionsenabled=\"1\"\n  emitmetadata=\"0\"\n  inputposition=\"top\"\n  theme=\"light\"\n  lang=\"en\"\n  loading=\"lazy\"\n\u003e\u003c/giscus-widget\u003e\n```\n\nThe attribute names are the same as the `data-` attributes shown on the\n[giscus website][giscus], but written in lowercase with the `data-` prefix and\ndashes removed.\n\n### Changing the `\u003ciframe\u003e` styles\n\nYou can style the `\u003ciframe\u003e` in your CSS by selecting the web component, or the\n`iframe` part specifically. For example:\n\n```css\ngiscus-widget {\n  display: flex;\n  margin: auto;\n  max-width: 640px;\n}\n/* or... */\n#comments {\n  /* ... */\n}\n/* or... */\n#comments::part(iframe) {\n  /* ... */\n}\n/* etc. */\n```\n\nYou can also make the widget scrollable by creating a parent container with a\nlimited height and `overflow: scroll`, for example:\n\n```html\n\u003cdiv class=\"comments-container\"\u003e\n  \u003cgiscus-widget\n    ...\n  \u003e\n  \u003c/giscus-widget\u003e\n\u003c/div\u003e\n```\n\n```css\n.comments-container {\n  max-height: 640px;\n  overflow-y: scroll;\n}\n```\n\nNote that this only allows you to style the `\u003ciframe\u003e` element and\n**not the iframe's contents**. If you want to style the contents, you need to\n[use a custom theme][custom-theme].\n\n### Notes\n\nWhen you change the props/attributes of the React, Vue, and web components, they\nwill automatically update the giscus configuration using `postMessage()` to the\nunderlying `\u003ciframe\u003e` element without reloading the comments. Unfortunately,\nthis doesn't work for Svelte and Solid as they always reload the web component\nfor some reason. If you know how to fix this, please let me know.\n\n### Further information\n\nSee the [demo][demo] and its [code example](./demo). For more information, read\nthe documentation on the [giscus website][giscus] and its\n[advanced usage guide][advanced-usage].\n\n## Packages\n\nThis is a monorepo. The base component is written using Lit as a web component.\nThe other components are built as a wrapper around the web component for\nconvenience.\n\n| Environment         | Name                         | Version                                     | Downloads                                     |\n| ------------------- | ---------------------------- | ------------------------------------------- | --------------------------------------------- |\n| Web Component (Lit) | [`giscus`](./web)            | [![npm version][web-vbadge]][npm-web]       | [![npm downloads][web-dbadge]][npm-web]       |\n| React \u0026 Preact      | [`@giscus/react`](./react)   | [![npm version][react-vbadge]][npm-react]   | [![npm downloads][react-dbadge]][npm-react]   |\n| Vue                 | [`@giscus/vue`](./vue)       | [![npm version][vue-vbadge]][npm-vue]       | [![npm downloads][vue-dbadge]][npm-vue]       |\n| Svelte              | [`@giscus/svelte`](./svelte) | [![npm version][svelte-vbadge]][npm-svelte] | [![npm downloads][svelte-dbadge]][npm-svelte] |\n| Solid               | [`@giscus/solid`](./solid)   | [![npm version][solid-vbadge]][npm-solid]   | [![npm downloads][solid-dbadge]][npm-solid]   |\n\n## Related Article\n\n[Introducing giscus](https://laymonage.com/posts/giscus/)\n\n## License\n\nCopyright © 2021-2022 laymonage.\n\nReleased under the [MIT](./LICENSE) license.\n\n[giscus]: https://giscus.app\n[esm]: https://esm.sh\n[demo]: https://giscus-component.vercel.app\n[advanced-usage]: https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md\n[custom-theme]: https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#data-theme\n[web-vbadge]: https://img.shields.io/npm/v/giscus.svg\n[react-vbadge]: https://img.shields.io/npm/v/@giscus/react.svg\n[vue-vbadge]: https://img.shields.io/npm/v/@giscus/vue.svg\n[svelte-vbadge]: https://img.shields.io/npm/v/@giscus/svelte.svg\n[solid-vbadge]: https://img.shields.io/npm/v/@giscus/solid.svg\n[web-dbadge]: https://img.shields.io/npm/dt/giscus.svg\n[react-dbadge]: https://img.shields.io/npm/dt/@giscus/react.svg\n[vue-dbadge]: https://img.shields.io/npm/dt/@giscus/vue.svg\n[svelte-dbadge]: https://img.shields.io/npm/dt/@giscus/svelte.svg\n[solid-dbadge]: https://img.shields.io/npm/dt/@giscus/ssolid.svg\n[npm-web]: https://www.npmjs.com/package/giscus\n[npm-react]: https://www.npmjs.com/package/@giscus/react\n[npm-vue]: https://www.npmjs.com/package/@giscus/vue\n[npm-svelte]: https://www.npmjs.com/package/@giscus/svelte\n[npm-solid]: https://www.npmjs.com/package/@giscus/solid\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiscus%2Fgiscus-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiscus%2Fgiscus-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiscus%2Fgiscus-component/lists"}