jazl

jazl
---

GitHub issue based commenting system made simple

Demo.

$3

- Built on top of a modern stack: Webpack 4, TypeScript, and PostCSS
- Supports Markdown
- More secure as it leaves handling the secret key of GitHub oauth app to the server side
- Simple and small code base

$3

- Deploy the server app on something like Heroku for example
- To install the package, run
``sh
$ yarn add jazl
`

- Initialize Jazl in your script

`javascript
import Jazl from 'jazl';

// import the style theme
import 'jazl/dist/jazl.css';

new Jazl(
'github ouath app client id',
'the url to the jazl server you deployed',
'the id of a hidden tag that contains the issue id/number, e.g., issueId'
).render();
`
- Add a comments tag and issueId tag to your markup

`html




`
- That's it!

$3

#### Style

Customization of the style of each element is possible by overriding the CSS
rules of the element. The current available rules are as follows:

- #jazl__editor-container: the container of the comment editor
- #jazl__editor-container #jazl__editor-header: the header of the comment editor. It has a single rule:
* #jazl__editor-container #jazl__editor-header a: the anchor in the header element
- #jazl__editor-container #jazl__editor: the main comment editor
- #jazl__editor-container #jazl__comment-button: the comment submit button
- .jazl__comment: the container of a single comment
- .jazl__comment .jazl__comment-header: the header of a comment. It contains:
* .jazl__comment .jazl__comment-header a: the link of the username
* .jazl__comment .jazl__comment-header img: the image of the user
- .jazl__comment .jazl__comment-body: the actual comment body. It contains one rule:
* .jazl__comment .jazl__comment-body img`: the element of the attached images

$3

See LICENSE.