-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
143 additions
and
357 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,139 +1,71 @@ | ||
| <p align="center"> | ||
| <img alt="hero image" src="https://res.cloudinary.com/dz3vsv9pg/image/upload/v1625751115/projects/utterances-component/utterances-react-component/hero.png" /> | ||
| <h1 align="center"> utterances-react-component</h1> | ||
| </p> | ||
| # @giscus/react | ||
|
|
||
| <p align="center"> | ||
| Type safety react component for utterances | ||
| </p> | ||
| Type-safe React component for giscus 💎 | ||
|
|
||
| <div align="center"> | ||
| giscus is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more. | ||
|
|
||
| [](https://github.com/TomokiMiyauci/utterances-react-component/actions/workflows/test.yml) | ||
| [](https://github.com/TomokiMiyauci/utterances-react-component/releases) | ||
|  | ||
| ## ✨ Features | ||
|
|
||
|  | ||
| [](https://david-dm.org/TomokiMiyauci/utterances-react-component) | ||
| [](https://codecov.io/gh/TomokiMiyauci/utterances-react-component) | ||
| [](https://www.codacy.com/gh/TomokiMiyauci/utterances-react-component/dashboard?utm_source=github.com&utm_medium=referral&utm_content=TomokiMiyauci/utterances-react-component&utm_campaign=Badge_Grade) | ||
|  | ||
|  | ||
|  | ||
|  | ||
| [](./LICENSE) | ||
| [](https://app.fossa.com/projects/custom%2B26231%2Fgithub.com%2FTomokiMiyauci%2Futterances-component?ref=badge_small) | ||
| - :books: Pure TypeScript and TSX with type definitions | ||
| - :earth_americas: Multiple modules, providing `ES modules` and `CommonJS` | ||
|
|
||
| </div> | ||
| ## ⚡ Quick view | ||
|
|
||
| --- | ||
|
|
||
| React component for [utterances](https://utteranc.es/) 🔮 | ||
|
|
||
| Utterances is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more. | ||
|
|
||
| ## :sparkles: Features | ||
|
|
||
| - :books: Pure TypeScript and TSX and provides type definition | ||
| - :earth_americas: Multiple modules, providing `ES modules` and `Commonjs` | ||
| - :package: Optimized, super slim size | ||
|
|
||
| ## :zap: Quick view | ||
| Follow the instructions on the [main website](https://giscus.app) and use the | ||
| data attributes of the shown `<script>` tag as the props to the `Giscus` | ||
| component. | ||
|
|
||
| ```tsx | ||
| import { Utterances } from 'utterances-react-component' | ||
| ;<Utterances | ||
| repo="giscus/giscus-component" | ||
| theme="github-dark" | ||
| issueTerm="pathname" | ||
| import { Giscus } from '@giscus/react'; | ||
|
|
||
| ... | ||
|
|
||
| <Giscus | ||
| repo="..." | ||
| repoId="..." | ||
| category="..." | ||
| categoryId="..." | ||
| mapping="..." | ||
| term="..." | ||
| reactionsEnabled="..." | ||
| emitMetadata="..." | ||
| theme="..." | ||
| /> | ||
| ``` | ||
|
|
||
| ## :dizzy: Install | ||
| ## 💫 Install | ||
|
|
||
| ### :package: Node.js | ||
| ### 📦 Node.js | ||
|
|
||
| ```bash | ||
| npm i utterances-react-component | ||
| or | ||
| yarn add utterances-react-component | ||
| npm i @giscus/react | ||
| # or | ||
| yarn add @giscus/react | ||
| ``` | ||
|
|
||
| ### :globe_with_meridians: Browser | ||
| ### 🌐 Browser | ||
|
|
||
| The module that bundles the dependencies is obtained from | ||
| [skypack](https://www.skypack.dev/view/utterances-react-component). | ||
| [skypack](https://www.skypack.dev/view/@giscus/react). | ||
|
|
||
| import like this: | ||
| Import it like this: | ||
|
|
||
| ```tsx | ||
| import { Utterances } from 'https://cdn.skypack.dev/utterances-react-component' | ||
| import { Giscus } from 'https://cdn.skypack.dev/@giscus/react' | ||
| ``` | ||
|
|
||
| **peerDependency** | ||
|
|
||
| | package | version | | ||
| | ----------- | ------------------------------- | | ||
| | `react` | `^16` | `^17` | `^18` | | ||
| | `react-dom` | `^16` | `^17` | `^18` | | ||
| ## 🤝 Contributing | ||
|
|
||
| ## :memo: API | ||
| Contributions, issues and feature requests are welcome! | ||
| Feel free to check out [the repository](https://github.com/giscus/giscus-component). | ||
|
|
||
| ### Props | ||
|
|
||
| It has a strict type definition. | ||
| No default value is set to respect the original behavior. | ||
|
|
||
| [Official document](https://utteranc.es/) | ||
|
|
||
| | Name | Type | Description | | ||
| | ------------- | ------------------------------- | -------------------------------------------------------------------------------------------------- | | ||
| | `repo` | `${String}/${String}` | Repository for Utterances to connect to. Expected value: `username/repo` | | ||
| | `theme` | `Theme` | The Utterance theme. | | ||
| | `label` | `string?` | Choose the label that will be assigned to issues created by Utterances. | | ||
| | `issueTerm` | `Term` | `string[]`[1](#1) | The mapping between blog posts and GitHub issues. <td rowspan="2">One of them[2](#2)</td> | | ||
| | `issueNumber` | `number` | You configure Utterances to load a specific issue by number. Issues are not automatically created. | | ||
|
|
||
| --- | ||
|
|
||
| ```ts | ||
| declare type Theme = | ||
| | 'github-light' | ||
| | 'github-dark' | ||
| | 'preferred-color-scheme' | ||
| | 'github-dark-orange' | ||
| | 'icy-dark' | ||
| | 'dark-blue' | ||
| | 'photon-dark' | ||
| | 'boxy-light' | ||
| declare type Term = 'pathname' | 'url' | 'title' | 'og:title' | ||
| ``` | ||
| ###### 1 | ||
| If you chose "Issue title contains specific term", specify the specific term as string array. | ||
| ###### 2 | ||
| `issueTerm` and `issueNumber` are exclusive. TypeScript will prompt you to specify one or the other. | ||
| ## :handshake: Contributing | ||
| Contributions, issues and feature requests are welcome!<br />Feel free to check | ||
| [issues](https://github.com/giscus/giscus-component/issues). | ||
| ## :seedling: Show your support | ||
| ## 🌱 Show your support | ||
|
|
||
| Give a ⭐️ if this project helped you! | ||
|
|
||
| <a href="https://www.patreon.com/tomoki_miyauci"> | ||
| <img src="https://c5.patreon.com/external/logo/[email protected]" width="160"> | ||
| </a> | ||
| ## :bulb: License | ||
| Copyright © 2021-present [TomokiMiyauci](https://github.com/TomokiMiyauci). | ||
| ## 💡 License | ||
|
|
||
| Released under the [MIT](./LICENSE) license | ||
| Copyright © 2021-present [TomokiMiyauci](https://github.com/TomokiMiyauci), | ||
| forked by [laymonage](https://github.com/laymonage) for giscus. | ||
|
|
||
| [](https://app.fossa.com/projects/custom%2B26231%2Fgithub.com%2FTomokiMiyauci%2Futterances-component?ref=badge_large) | ||
| Released under the [MIT](./LICENSE) license. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,139 +1,73 @@ | ||
| <p align="center"> | ||
| <img alt="hero image" src="https://res.cloudinary.com/dz3vsv9pg/image/upload/v1625751101/projects/utterances-component/utterances-svelte-component/hero.png" /> | ||
| <h1 align="center"> utterances-svelte-component</h1> | ||
| </p> | ||
| # @giscus/svelte | ||
|
|
||
| <p align="center"> | ||
| Type safety svelte component for utterances | ||
| </p> | ||
| Type-safe Svelte component for giscus 💎 | ||
|
|
||
| <div align="center"> | ||
| giscus is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more. | ||
|
|
||
| [](https://github.com/TomokiMiyauci/utterances-svelte-component/actions/workflows/test.yml) | ||
| [](https://github.com/TomokiMiyauci/utterances-svelte-component/releases) | ||
|  | ||
| ## ✨ Features | ||
|
|
||
|  | ||
| [](https://david-dm.org/TomokiMiyauci/utterances-svelte-component) | ||
| [](https://codecov.io/gh/TomokiMiyauci/utterances-svelte-component) | ||
| [](https://www.codacy.com/gh/TomokiMiyauci/utterances-svelte-component/dashboard?utm_source=github.com&utm_medium=referral&utm_content=TomokiMiyauci/utterances-svelte-component&utm_campaign=Badge_Grade) | ||
|  | ||
|  | ||
|  | ||
|  | ||
| [](./LICENSE) | ||
| [](https://app.fossa.com/projects/custom%2B26231%2Fgithub.com%2FTomokiMiyauci%2Futterances-component?ref=badge_small) | ||
| - :books: Pure TypeScript and TSX with type definitions | ||
| - :earth_americas: Multiple modules, providing `ES modules` and `CommonJS` | ||
|
|
||
| </div> | ||
| ## ⚡ Quick view | ||
|
|
||
| --- | ||
|
|
||
| :construction: No type definition provided yet | ||
|
|
||
| Svelte component for [utterances](https://utteranc.es/) 🔮 | ||
|
|
||
| Utterances is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more. | ||
|
|
||
| ## :sparkles: Features | ||
|
|
||
| - :books: Pure TS svelte provides type definition | ||
| - :earth_americas: Multiple modules, providing `ES modules` and `Commonjs` | ||
| - :package: Optimized, super slim size | ||
|
|
||
| ## :zap: Quick view | ||
| Follow the instructions on the [main website](https://giscus.app) and use the | ||
| data attributes of the shown `<script>` tag as the props to the `Giscus` | ||
| component. | ||
|
|
||
| ```html | ||
| <script lang="ts"> | ||
| import { Utterances } from 'utterances-svelte-component' | ||
| import { Giscus } from '@giscus/svelte'; | ||
| </script> | ||
|
|
||
| <Utterances | ||
| repo="giscus/giscus-component" | ||
| theme="github-dark" | ||
| issueTerm="pathname" | ||
| ... | ||
|
|
||
| <Giscus | ||
| repo="..." | ||
| repoId="..." | ||
| category="..." | ||
| categoryId="..." | ||
| mapping="..." | ||
| term="..." | ||
| reactionsEnabled="..." | ||
| emitMetadata="..." | ||
| theme="..." | ||
| /> | ||
| ``` | ||
|
|
||
| ## :dizzy: Install | ||
| ## 💫 Install | ||
|
|
||
| ### :package: Node.js | ||
| ### 📦 Node.js | ||
|
|
||
| ```bash | ||
| npm i utterances-svelte-component | ||
| or | ||
| yarn add utterances-svelte-component | ||
| npm i @giscus/svelte | ||
| # or | ||
| yarn add @giscus/svelte | ||
| ``` | ||
|
|
||
| ### :globe_with_meridians: Browser | ||
| ### 🌐 Browser | ||
|
|
||
| The module that bundles the dependencies is obtained from | ||
| [skypack](https://www.skypack.dev/view/utterances-svelte-component). | ||
| [skypack](https://www.skypack.dev/view/@giscus/svelte). | ||
|
|
||
| import like this: | ||
| Import it like this: | ||
|
|
||
| ```tsx | ||
| import { Utterances } from 'https://cdn.skypack.dev/utterances-svelte-component' | ||
| import { Giscus } from 'https://cdn.skypack.dev/@giscus/svelte' | ||
| ``` | ||
|
|
||
| ## :memo: API | ||
| ## 🤝 Contributing | ||
|
|
||
| ### Props | ||
| Contributions, issues and feature requests are welcome! | ||
| Feel free to check out [the repository](https://github.com/giscus/giscus-component). | ||
|
|
||
| :construction: No type definition provided yet | ||
|
|
||
| It has a strict type definition. | ||
| No default value is set to respect the original behavior. | ||
|
|
||
| [Official document](https://utteranc.es/) | ||
|
|
||
| | Name | Type | Description | | ||
| | ------------- | ------------------------------- | -------------------------------------------------------------------------------------------------- | | ||
| | `repo` | `${String}/${String}` | Repository for Utterances to connect to. Expected value: `username/repo` | | ||
| | `theme` | `Theme` | The Utterance theme. | | ||
| | `label` | `string?` | Choose the label that will be assigned to issues created by Utterances. | | ||
| | `issueTerm` | `Term` | `string[]`[1](#1) | The mapping between blog posts and GitHub issues. <td rowspan="2">One of them[2](#2)</td> | | ||
| | `issueNumber` | `number` | You configure Utterances to load a specific issue by number. Issues are not automatically created. | | ||
|
|
||
| --- | ||
|
|
||
| ```ts | ||
| declare type Theme = | ||
| | 'github-light' | ||
| | 'github-dark' | ||
| | 'preferred-color-scheme' | ||
| | 'github-dark-orange' | ||
| | 'icy-dark' | ||
| | 'dark-blue' | ||
| | 'photon-dark' | ||
| | 'boxy-light' | ||
| declare type Term = 'pathname' | 'url' | 'title' | 'og:title' | ||
| ``` | ||
| ###### 1 | ||
| If you chose "Issue title contains specific term", specify the specific term as string array. | ||
| ###### 2 | ||
| `issueTerm` and `issueNumber` are exclusive. TypeScript will prompt you to specify one or the other. | ||
| ## :handshake: Contributing | ||
| Contributions, issues and feature requests are welcome!<br />Feel free to check | ||
| [issues](https://github.com/TomokiMiyauci/utterance-component/issues). | ||
| ## :seedling: Show your support | ||
| ## 🌱 Show your support | ||
|
|
||
| Give a ⭐️ if this project helped you! | ||
|
|
||
| <a href="https://www.patreon.com/tomoki_miyauci"> | ||
| <img src="https://c5.patreon.com/external/logo/[email protected]" width="160"> | ||
| </a> | ||
| ## :bulb: License | ||
| Copyright © 2021-present [TomokiMiyauci](https://github.com/TomokiMiyauci). | ||
| ## 💡 License | ||
|
|
||
| Released under the [MIT](./LICENSE) license | ||
| Copyright © 2021-present [TomokiMiyauci](https://github.com/TomokiMiyauci), | ||
| forked by [laymonage](https://github.com/laymonage) for giscus. | ||
|
|
||
| [](https://app.fossa.com/projects/custom%2B26231%2Fgithub.com%2FTomokiMiyauci%2Futterances-component?ref=badge_large) | ||
| Released under the [MIT](./LICENSE) license. |
Oops, something went wrong.