utterances-svelte-component

Type safety svelte component for utterances

Usage no npm install needed!

<script type="module">
  import utterancesSvelteComponent from 'https://cdn.skypack.dev/utterances-svelte-component';
</script>

README

hero image

utterances-svelte-component

Type safety svelte component for utterances

test GitHub release npm download

GitHub (Pre-)Release Date dependencies Status codecov Codacy Badge npm type definitions Commitizen friendly Gitmoji semantic-release License: MIT FOSSA Status

: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 modules and Commonjs
  • :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

:construction: No type definition provided yet

It has a strict type definition. No default value is set to respect the original behavior.

Official document

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

FOSSA Status