4. Initialize Your Comments

After the page is published, you should visit your page, login with your GitHub account(make sure you're repo's owner), and click the initialize button, to create a related issue in your repo.
After that, others can leave their comments.

perPage: An optional number to which comments will be paginated. Default 20.

maxCommentHeight: An optional number to limit comments' max height, over which comments will be folded. Default 250.

gitment.render([element])

element

Type: HTMLElement or string

The DOM element to which comments will be rendered. Can be an HTML element or element's id. When omitted, this function will create a new div element.

This function returns the element to which comments be rendered.

gitment.renderHeader([element])

Same like gitment.render([element]). But only renders the header.

gitment.renderComments([element])

Same like gitment.render([element]). But only renders comments list.

gitment.renderEditor([element])

Same like gitment.render([element]). But only renders the editor.

gitment.renderFooter([element])

Same like gitment.render([element]). But only renders the footer.

gitment.init()

Initialize a new page. Returns a Promise and resolves when initialized.

gitment.update()

Update data and views. Returns a Promise and resolves when data updated.

gitment.post()

Post comment in the editor. Returns a Promise and resolves when posted.

gitment.markdown(text)

text

Type: string

Returns a Promise and resolves rendered text.

gitment.login()

Jump to GitHub OAuth page to login.

gitment.logout()

Log out current user.

goto(page)

page

Type: number

Jump to the target page of comments. Notice that page starts from 1. Returns a Promise and resolves when comments loaded.

gitment.like()

Like current page. Returns a Promise and resolves when liked.

gitment.unlike()

Unlike current page. Returns a Promise and resolves when unliked.

gitment.likeAComment(commentId)

commentId

Type: string

Like a comment. Returns a Promise and resolves when liked.

gitment.unlikeAComment(commentId)

commentId

Type: string

Unlike a comment. Returns a Promise and resolves when unliked.

Customize

Gitment is easy to customize. You can use your own CSS or write a theme.
(The difference is that customized CSS can't modify DOM structure)

Use Customized CSS

Gitment does't use any atomic CSS, making it easier and more flexible to customize.
You can inspect the DOM structure in the browser and write your own styles.

Write A Theme

A Gitment theme is an object contains several render functions.

By default Gitment has five render functions: render, renderHeader, renderComments, renderEditor, renderFooter.
The last four render independent components and render functions render them together.
All of them can be used independently.

You can override any render function above or write your own render function.

For example, you can override the render function to put an editor before the comment list, and render a new component.

Each render function should receive a state object and a gitment instance, and return an HTML element.
It will be wrapped attached to the Gitment instance with the same name.

Gitment uses MobX to detect states used in render functions.
Once used states change, Gitment will call the render function to get a new element and render it.
Unused states' changing won't affect rendered elements.

currentPage: number. Which page of comments is user on. Starts from 1.

About Security

Is it safe to make my client secret public?

Client secret is necessary for OAuth, without which users can't login or comment with their GitHub accounts.
Although GitHub does't recommend to hard code client secret in the frontend, you can still do that because GitHub will verify your callback URL.
In theory, no one else can use your secret except your site.