Skip to content

aonemd/jazl

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

jazl

GitHub issue based commenting system made simple

Demo.

Features

  • 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

Installation

  • Deploy the server app on something like Heroku for example
  • To install the package, run
$ yarn add jazl
  • Initialize Jazl in your script
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
<input type="hidden" id="issueId" value="11">
<div id="comments"></div>
  • That's it!

Customization

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

License

See LICENSE.