TomokiMiyauci
commented
3 years ago
utterances-svelte-component
Type safety svelte component for utterances
[](https://github.com/TomokiMiyauci/utterances-svelte-component/actions/workflows/test.yml) [](https://github.com/TomokiMiyauci/utterances-svelte-component/releases) 
 [](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)
:construction: No type definition provided yet
Svelte component for utterances 🔮
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 modulesandCommonjs - :package: Optimized, super slim size
:zap: Quick view
<script lang="ts">
import { Utterances } from 'utterances-svelte-component'
</script>
<Utterances
repo="TomokiMiyauci/utterances-component"
theme="github-dark"
issueTerm="pathname"
/>:dizzy: Install
:package: Node.js
npm i utterances-svelte-component
or
yarn add utterances-svelte-component:globe_with_meridians: Browser
The module that bundles the dependencies is obtained from skypack.
import like this:
import { Utterances } from 'https://cdn.skypack.dev/utterances-svelte-component':memo: API
Props
It has a strict type definition. No default value is set to respect the original behavior.
| 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 |
The mapping between blog posts and GitHub issues. | One of them2 |
issueNumber |
number |
You configure Utterances to load a specific issue by number. Issues are not automatically created. |
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!
Feel free to check
issues.
:seedling: Show your support
Give a ⭐️ if this project helped you!
:bulb: License
Copyright © 2021-present TomokiMiyauci.
Released under the MIT license
Svelte | utterances-component
Type safety svelte component for utterances
http://localhost:5000/svelte