From 30e487358cb30f528822da84008dd942c0e0aa10 Mon Sep 17 00:00:00 2001
From: aimingoo <aimingoo@nanchao.org>
Date: Tue, 30 May 2017 03:21:33 +0800
Subject: [PATCH 1/6] Update by aimingoo

---
 README.md            | 10 ++++++++--
 src/gitment.js       | 33 +++++++++++++++++++++++----------
 src/theme/default.js | 40 ++++++++++++++++++++--------------------
 src/translator.js    | 27 +++++++++++++++++++++++++++
 src/utils.js         | 32 ++++++++++++++++++++------------
 5 files changed, 98 insertions(+), 44 deletions(-)
 create mode 100644 src/translator.js

diff --git a/README.md b/README.md
index 2ca91de..2d68841 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,11 @@ which can be used in the frontend without any server-side implementation.
 - Notifications from GitHub
 - Easy to customize
 - No server-side implementation
+  - to choose both https://gh-oauth.imsun.net and [gh-oauth-server](https://github.com/imsun/gh-oauth-server), or
+  - php oauth proxy [intersect](https://github.com/aimingoo/intersect).
+- Force redirect protocol to support HTTPS/HTTP Github pages site, 
+- Support urlencoded for GET request and response data
+- No client_secret
 
 ## Get Started
 
@@ -67,6 +72,7 @@ const gitment = new Gitment({
   oauth: {
     client_id: 'Your client ID',
     client_secret: 'Your client secret',
+    // proxy_gateway: 'Your proxy service, either this or client_secret'
   },
   // ...
   // For more available options, check out the documentation below
@@ -83,7 +89,7 @@ gitment.render('comments')
 
 After the page 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.
-   
+
 ## Methods
 
 ### constructor(options)
@@ -207,7 +213,7 @@ 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` function renders them together.
 All of them can be used independently.
diff --git a/src/gitment.js b/src/gitment.js
index 06fe17a..94670fa 100644
--- a/src/gitment.js
+++ b/src/gitment.js
@@ -3,9 +3,16 @@ import { autorun, observable } from 'mobx'
 import { LS_ACCESS_TOKEN_KEY, LS_USER_KEY, NOT_INITIALIZED_ERROR } from './constants'
 import { getTargetContainer, http, Query } from './utils'
 import defaultTheme from './theme/default'
+import { chinese as $$C } from './translator'
 
+// @see: https://developer.github.com/apps/building-integrations/setting-up-and-registering-oauth-apps/about-scopes-for-oauth-apps
 const scope = 'public_repo'
 
+// Github setting of 'Authorization callback URL' in your OAuth application
+const force_redirect_protocol = 'https'
+// A RegExp to match protocol and domain
+const rx_url_with_protocol = /^((https?:\/\/+){0,1}[^\/]*)(.*)/
+
 function extendRenderer(instance, renderer) {
   instance[renderer] = (container) => {
     const targetContainer = getTargetContainer(container)
@@ -34,7 +41,7 @@ class Gitment {
 
   get loginLink() {
     const oauthUri = 'https://github.com/login/oauth/authorize'
-    const redirect_uri = this.oauth.redirect_uri || window.location.href
+    const redirect_uri = this.oauth.redirect_uri || window.location.href.replace(/^https?/i, force_redirect_protocol);
 
     const oauthParams = Object.assign({
       scope,
@@ -84,9 +91,11 @@ class Gitment {
       currentPage: 1,
     })
 
+    // NOTE: the gateway accept form-urlencoded only!!!
+    //  - PHP implement at https://github.com/aimingoo/intersect
     const query = Query.parse()
     if (query.code) {
-      const { client_id, client_secret } = this.oauth
+      const { client_id, client_secret, proxy_gateway } = this.oauth
       const code = query.code
       delete query.code
       const search = Query.stringify(query)
@@ -99,12 +108,10 @@ class Gitment {
       }, options)
 
       this.state.user.isLoggingIn = true
-      http.post('https://gh-oauth.imsun.net', {
-          code,
-          client_id,
-          client_secret,
-        }, '')
-        .then(data => {
+      var loging = !proxy_gateway
+        ? http.post('https://gh-oauth.imsun.net', {code, client_id, client_secret}, '')
+        : http.post('/login/oauth/access_token', `code=${code}&client_id=${client_id}`, proxy_gateway);
+      login.then(data => {
           this.accessToken = data.access_token
           this.update()
         })
@@ -171,7 +178,10 @@ class Gitment {
 
   post(body) {
     return this.getIssue()
-      .then(issue => http.post(issue.comments_url, { body }, ''))
+      .then(issue => {
+        let matched = issue.comments_url.match(rx_url_with_protocol)
+        return http.post(matched[3], { body: body }, matched[1]||undefined)
+      })
       .then(data => {
         this.state.meta.comments++
         const pageCount = Math.ceil(this.state.meta.comments / this.perPage)
@@ -197,7 +207,10 @@ class Gitment {
 
   loadComments(page = this.state.currentPage) {
     return this.getIssue()
-      .then(issue => http.get(issue.comments_url, { page, per_page: this.perPage }, ''))
+      .then(issue => {
+        let matched = issue.comments_url.match(rx_url_with_protocol)
+        return http.get(matched[3], { page: page, per_page: this.perPage }, matched[1]||undefined)
+      })
       .then((comments) => {
         this.state.comments = comments
         return comments
diff --git a/src/theme/default.js b/src/theme/default.js
index b4921db..e4fe454 100644
--- a/src/theme/default.js
+++ b/src/theme/default.js
@@ -43,9 +43,9 @@ function renderHeader({ meta, user, reactions }, instance) {
 
   const issueLink = document.createElement('a')
   issueLink.className = 'gitment-header-issue-link'
-  issueLink.href = meta.html_url
+  issueLink.href = meta.html_url || "javascript:void(0)"
   issueLink.target = '_blank'
-  issueLink.innerText = 'Issue Page'
+  issueLink.innerText = $$C('Issue Page')
   container.appendChild(issueLink)
 
   return container
@@ -74,24 +74,24 @@ function renderComments({ meta, comments, commentReactions, currentPage, user, e
             alert(e)
           })
       }
-      initButton.innerText = 'Initialize Comments'
+      initButton.innerText = $$C('Initialize Comments')
       initHint.appendChild(initButton)
       errorBlock.appendChild(initHint)
     } else {
-      errorBlock.innerText = error
+      errorBlock.innerText = $$C(error)
     }
     container.appendChild(errorBlock)
     return container
   } else if (comments === undefined) {
     const loading = document.createElement('div')
-    loading.innerText = 'Loading comments...'
+    loading.innerText = $$C('Loading comments...')
     loading.className = 'gitment-comments-loading'
     container.appendChild(loading)
     return container
   } else if (!comments.length) {
     const emptyBlock = document.createElement('div')
     emptyBlock.className = 'gitment-comments-empty'
-    emptyBlock.innerText = 'No Comment Yet'
+    emptyBlock.innerText = $$C('No Comment Yet')
     container.appendChild(emptyBlock)
     return container
   }
@@ -172,7 +172,7 @@ function renderComments({ meta, comments, commentReactions, currentPage, user, e
       if (currentPage > 1) {
         const previousButton = document.createElement('li')
         previousButton.className = 'gitment-comments-page-item'
-        previousButton.innerText = 'Previous'
+        previousButton.innerText = $$C('Previous')
         previousButton.onclick = () => instance.goto(currentPage - 1)
         pagination.appendChild(previousButton)
       }
@@ -189,7 +189,7 @@ function renderComments({ meta, comments, commentReactions, currentPage, user, e
       if (currentPage < pageCount) {
         const nextButton = document.createElement('li')
         nextButton.className = 'gitment-comments-page-item'
-        nextButton.innerText = 'Next'
+        nextButton.innerText = $$C('Next')
         nextButton.onclick = () => instance.goto(currentPage + 1)
         pagination.appendChild(nextButton)
       }
@@ -223,21 +223,21 @@ function renderEditor({ user, error }, instance) {
     <div class="gitment-editor-main">
       <div class="gitment-editor-header">
         <nav class="gitment-editor-tabs">
-          <button class="gitment-editor-tab gitment-selected">Write</button>
-          <button class="gitment-editor-tab">Preview</button>
+          <button class="gitment-editor-tab gitment-selected">${$$C('Write')}</button>
+          <button class="gitment-editor-tab">${$$C('Preview')}</button>
         </nav>
         <div class="gitment-editor-login">
           ${ user.login
-            ? '<a class="gitment-editor-logout-link">Logout</a>'
+            ? `<a class="gitment-editor-logout-link">${$$C('Logout')}</a>`
             : user.isLoggingIn
-              ? 'Logging in...'
-              : `<a class="gitment-editor-login-link" href="${instance.loginLink}">Login</a> with GitHub`
+              ? $$C('Logging in...')
+              : `<a class="gitment-editor-login-link" href="${instance.loginLink}">${$$C('Login')}</a> with GitHub`
           }
         </div>
       </div>
       <div class="gitment-editor-body">
         <div class="gitment-editor-write-field">
-          <textarea placeholder="Leave a comment" title="${disabledTip}" ${shouldDisable}></textarea>
+          <textarea placeholder="${$$C('Leave a comment')}" title="${disabledTip}" ${shouldDisable}></textarea>
         </div>
         <div class="gitment-editor-preview-field gitment-hidden">
           <div class="gitment-editor-preview gitment-markdown"></div>
@@ -248,7 +248,7 @@ function renderEditor({ user, error }, instance) {
       <a class="gitment-editor-footer-tip" href="https://guides.github.com/features/mastering-markdown/" target="_blank">
         Styling with Markdown is supported
       </a>
-      <button class="gitment-editor-submit" title="${disabledTip}" ${shouldDisable}>Comment</button>
+      <button class="gitment-editor-submit" title="${disabledTip}" ${shouldDisable}>${$$C('Comment')}</button>
     </div>
   `
   if (user.login) {
@@ -288,30 +288,30 @@ function renderEditor({ user, error }, instance) {
     const preview = previewField.querySelector('.gitment-editor-preview')
     const content = textarea.value.trim()
     if (!content) {
-      preview.innerText = 'Nothing to preview'
+      preview.innerText = $$C('Nothing to preview')
       return
     }
 
-    preview.innerText = 'Loading preview...'
+    preview.innerText = $$C('Loading preview...')
     instance.markdown(content)
       .then(html => preview.innerHTML = html)
   }
 
   const submitButton = container.querySelector('.gitment-editor-submit')
   submitButton.onclick = () => {
-    submitButton.innerText = 'Submitting...'
+    submitButton.innerText = $$C('Submitting...')
     submitButton.setAttribute('disabled', true)
     instance.post(textarea.value.trim())
       .then(data => {
         textarea.value = ''
         textarea.style.height = 'auto'
         submitButton.removeAttribute('disabled')
-        submitButton.innerText = 'Comment'
+        submitButton.innerText = $$C('Comment')
       })
       .catch(e => {
         alert(e)
         submitButton.removeAttribute('disabled')
-        submitButton.innerText = 'Comment'
+        submitButton.innerText = $$C('Comment')
       })
   }
 
diff --git a/src/translator.js b/src/translator.js
new file mode 100644
index 0000000..27ff756
--- /dev/null
+++ b/src/translator.js
@@ -0,0 +1,27 @@
+export function english(Text) {
+    return Text;
+}
+
+export function chinese(Text) {
+    return ({
+        'Issue Page': '所有评论',
+        'Initialize Comments': '初始化本文的评论页',
+        'Loading comments...': '加载评论...',
+        'Error: Comments Not Initialized': '(未开放评论)',
+        'No Comment Yet': '(还没有评论)',
+        'Previous': '上一页',
+        'Next': '下一页',
+        'Nothing to preview': '（没有预览）',
+        'Loading preview...': '加载预览...',
+        'Submitting...': '正在提交评论...',
+        'Comment': '发送',
+        'Write': '评论',
+        'Preview': '预览',
+        'Logging in...': '登入中...',
+        'Leave a comment': '(发表评论)',
+        'Login': '登入',
+        'Logout': '退出'
+    }[Text] || Text);
+}
+
+export default english;
\ No newline at end of file
diff --git a/src/utils.js b/src/utils.js
index 69de733..93fee89 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -40,39 +40,47 @@ function ajaxFactory(method) {
   return function(apiPath, data = {}, base = 'https://api.github.com') {
     const req = new XMLHttpRequest()
     const token = localStorage.getItem(LS_ACCESS_TOKEN_KEY)
+    if (base !== 'https://api.github.com') token = null;
 
     let url = `${base}${apiPath}`
     let body = null
     if (method === 'GET' || method === 'DELETE') {
-      url += Query.stringify(data)
+      url += isString(data) ? data : Query.stringify(data);
     }
 
     const p = new Promise((resolve, reject) => {
       req.addEventListener('load', () => {
         const contentType = req.getResponseHeader('content-type')
         const res = req.responseText
-        if (!/json/.test(contentType)) {
-          resolve(res)
-          return
+
+        var data = res;
+        if (/urlencoded/.test(contentType)) {
+            data = req.responseText ? Query.parse(res) : {}
+            if (data.error) return reject(new Error(data.error_description))
         }
-        const data = req.responseText ? JSON.parse(res) : {}
-        if (data.message) {
-          reject(new Error(data.message))
-        } else {
-          resolve(data)
+        else if (/json/.test(contentType)) {
+            data = req.responseText ? JSON.parse(res) : {}
+            if (data.message) return reject(new Error(data.message))
         }
+        resolve(data)
       })
       req.addEventListener('error', error => reject(error))
     })
     req.open(method, url, true)
 
-    req.setRequestHeader('Accept', 'application/vnd.github.squirrel-girl-preview, application/vnd.github.html+json')
+    req.setRequestHeader('Accept', 'application/vnd.github.squirrel-girl-preview, application/vnd.github.html+json, application/x-www-form-urlencoded')
     if (token) {
       req.setRequestHeader('Authorization', `token ${token}`)
     }
     if (method !== 'GET' && method !== 'DELETE') {
-      body = JSON.stringify(data)
-      req.setRequestHeader('Content-Type', 'application/json')
+      if (isString(data)) {
+        body = data
+        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
+      }
+      else {
+        body = JSON.stringify(data)
+        req.setRequestHeader('Content-Type', 'application/json')
+      }
     }
 
     req.send(body)

From 4dd7dd379913502df909123972ba0e1482fd80ae Mon Sep 17 00:00:00 2001
From: aimingoo <aimingoo@nanchao.org>
Date: Tue, 30 May 2017 03:26:30 +0800
Subject: [PATCH 2/6] minor update

---
 src/gitment.js       | 1 -
 src/theme/default.js | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/gitment.js b/src/gitment.js
index 94670fa..2599dbe 100644
--- a/src/gitment.js
+++ b/src/gitment.js
@@ -3,7 +3,6 @@ import { autorun, observable } from 'mobx'
 import { LS_ACCESS_TOKEN_KEY, LS_USER_KEY, NOT_INITIALIZED_ERROR } from './constants'
 import { getTargetContainer, http, Query } from './utils'
 import defaultTheme from './theme/default'
-import { chinese as $$C } from './translator'
 
 // @see: https://developer.github.com/apps/building-integrations/setting-up-and-registering-oauth-apps/about-scopes-for-oauth-apps
 const scope = 'public_repo'
diff --git a/src/theme/default.js b/src/theme/default.js
index e4fe454..dbebc5b 100644
--- a/src/theme/default.js
+++ b/src/theme/default.js
@@ -1,5 +1,6 @@
 import { github as githubIcon, heart as heartIcon, spinner as spinnerIcon } from '../icons'
 import { NOT_INITIALIZED_ERROR } from '../constants'
+import { chinese as $$C } from '../translator'
 
 function renderHeader({ meta, user, reactions }, instance) {
   const container = document.createElement('div')

From d7ffad3109522fb24aab9bcc33783cfeb8773e05 Mon Sep 17 00:00:00 2001
From: aimingoo <aimingoo@nanchao.org>
Date: Tue, 30 May 2017 03:39:22 +0800
Subject: [PATCH 3/6] rename $$C to $

---
 src/theme/default.js | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/theme/default.js b/src/theme/default.js
index dbebc5b..713b2d6 100644
--- a/src/theme/default.js
+++ b/src/theme/default.js
@@ -1,6 +1,6 @@
 import { github as githubIcon, heart as heartIcon, spinner as spinnerIcon } from '../icons'
 import { NOT_INITIALIZED_ERROR } from '../constants'
-import { chinese as $$C } from '../translator'
+import { chinese as $ } from '../translator'
 
 function renderHeader({ meta, user, reactions }, instance) {
   const container = document.createElement('div')
@@ -46,7 +46,7 @@ function renderHeader({ meta, user, reactions }, instance) {
   issueLink.className = 'gitment-header-issue-link'
   issueLink.href = meta.html_url || "javascript:void(0)"
   issueLink.target = '_blank'
-  issueLink.innerText = $$C('Issue Page')
+  issueLink.innerText = $('Issue Page')
   container.appendChild(issueLink)
 
   return container
@@ -75,24 +75,24 @@ function renderComments({ meta, comments, commentReactions, currentPage, user, e
             alert(e)
           })
       }
-      initButton.innerText = $$C('Initialize Comments')
+      initButton.innerText = $('Initialize Comments')
       initHint.appendChild(initButton)
       errorBlock.appendChild(initHint)
     } else {
-      errorBlock.innerText = $$C(error)
+      errorBlock.innerText = $(error)
     }
     container.appendChild(errorBlock)
     return container
   } else if (comments === undefined) {
     const loading = document.createElement('div')
-    loading.innerText = $$C('Loading comments...')
+    loading.innerText = $('Loading comments...')
     loading.className = 'gitment-comments-loading'
     container.appendChild(loading)
     return container
   } else if (!comments.length) {
     const emptyBlock = document.createElement('div')
     emptyBlock.className = 'gitment-comments-empty'
-    emptyBlock.innerText = $$C('No Comment Yet')
+    emptyBlock.innerText = $('No Comment Yet')
     container.appendChild(emptyBlock)
     return container
   }
@@ -173,7 +173,7 @@ function renderComments({ meta, comments, commentReactions, currentPage, user, e
       if (currentPage > 1) {
         const previousButton = document.createElement('li')
         previousButton.className = 'gitment-comments-page-item'
-        previousButton.innerText = $$C('Previous')
+        previousButton.innerText = $('Previous')
         previousButton.onclick = () => instance.goto(currentPage - 1)
         pagination.appendChild(previousButton)
       }
@@ -190,7 +190,7 @@ function renderComments({ meta, comments, commentReactions, currentPage, user, e
       if (currentPage < pageCount) {
         const nextButton = document.createElement('li')
         nextButton.className = 'gitment-comments-page-item'
-        nextButton.innerText = $$C('Next')
+        nextButton.innerText = $('Next')
         nextButton.onclick = () => instance.goto(currentPage + 1)
         pagination.appendChild(nextButton)
       }
@@ -224,21 +224,21 @@ function renderEditor({ user, error }, instance) {
     <div class="gitment-editor-main">
       <div class="gitment-editor-header">
         <nav class="gitment-editor-tabs">
-          <button class="gitment-editor-tab gitment-selected">${$$C('Write')}</button>
-          <button class="gitment-editor-tab">${$$C('Preview')}</button>
+          <button class="gitment-editor-tab gitment-selected">${$('Write')}</button>
+          <button class="gitment-editor-tab">${$('Preview')}</button>
         </nav>
         <div class="gitment-editor-login">
           ${ user.login
-            ? `<a class="gitment-editor-logout-link">${$$C('Logout')}</a>`
+            ? `<a class="gitment-editor-logout-link">${$('Logout')}</a>`
             : user.isLoggingIn
-              ? $$C('Logging in...')
-              : `<a class="gitment-editor-login-link" href="${instance.loginLink}">${$$C('Login')}</a> with GitHub`
+              ? $('Logging in...')
+              : `<a class="gitment-editor-login-link" href="${instance.loginLink}">${$('Login')}</a> with GitHub`
           }
         </div>
       </div>
       <div class="gitment-editor-body">
         <div class="gitment-editor-write-field">
-          <textarea placeholder="${$$C('Leave a comment')}" title="${disabledTip}" ${shouldDisable}></textarea>
+          <textarea placeholder="${$('Leave a comment')}" title="${disabledTip}" ${shouldDisable}></textarea>
         </div>
         <div class="gitment-editor-preview-field gitment-hidden">
           <div class="gitment-editor-preview gitment-markdown"></div>
@@ -249,7 +249,7 @@ function renderEditor({ user, error }, instance) {
       <a class="gitment-editor-footer-tip" href="https://guides.github.com/features/mastering-markdown/" target="_blank">
         Styling with Markdown is supported
       </a>
-      <button class="gitment-editor-submit" title="${disabledTip}" ${shouldDisable}>${$$C('Comment')}</button>
+      <button class="gitment-editor-submit" title="${disabledTip}" ${shouldDisable}>${$('Comment')}</button>
     </div>
   `
   if (user.login) {
@@ -289,30 +289,30 @@ function renderEditor({ user, error }, instance) {
     const preview = previewField.querySelector('.gitment-editor-preview')
     const content = textarea.value.trim()
     if (!content) {
-      preview.innerText = $$C('Nothing to preview')
+      preview.innerText = $('Nothing to preview')
       return
     }
 
-    preview.innerText = $$C('Loading preview...')
+    preview.innerText = $('Loading preview...')
     instance.markdown(content)
       .then(html => preview.innerHTML = html)
   }
 
   const submitButton = container.querySelector('.gitment-editor-submit')
   submitButton.onclick = () => {
-    submitButton.innerText = $$C('Submitting...')
+    submitButton.innerText = $('Submitting...')
     submitButton.setAttribute('disabled', true)
     instance.post(textarea.value.trim())
       .then(data => {
         textarea.value = ''
         textarea.style.height = 'auto'
         submitButton.removeAttribute('disabled')
-        submitButton.innerText = $$C('Comment')
+        submitButton.innerText = $('Comment')
       })
       .catch(e => {
         alert(e)
         submitButton.removeAttribute('disabled')
-        submitButton.innerText = $$C('Comment')
+        submitButton.innerText = $('Comment')
       })
   }
 

From 8189a07f6430038ededf858830a3439ba42730c7 Mon Sep 17 00:00:00 2001
From: aimingoo <aimingoo@nanchao.org>
Date: Wed, 31 May 2017 00:13:30 +0800
Subject: [PATCH 4/6] minor update

---
 src/gitment.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/gitment.js b/src/gitment.js
index 2599dbe..bcadc11 100644
--- a/src/gitment.js
+++ b/src/gitment.js
@@ -107,7 +107,7 @@ class Gitment {
       }, options)
 
       this.state.user.isLoggingIn = true
-      var loging = !proxy_gateway
+      var login = !proxy_gateway
         ? http.post('https://gh-oauth.imsun.net', {code, client_id, client_secret}, '')
         : http.post('/login/oauth/access_token', `code=${code}&client_id=${client_id}`, proxy_gateway);
       login.then(data => {

From 65f40e85ced77310776bcba64a59d039f39ca7a8 Mon Sep 17 00:00:00 2001
From: aimingoo <aiming@gmail.com>
Date: Thu, 1 Jun 2017 00:33:37 +0800
Subject: [PATCH 5/6] Update README.md

---
 README.md | 282 ++----------------------------------------------------
 1 file changed, 8 insertions(+), 274 deletions(-)

diff --git a/README.md b/README.md
index 2d68841..a24d09a 100644
--- a/README.md
+++ b/README.md
@@ -7,18 +7,12 @@
 [npm-url]: https://www.npmjs.com/package/gitment
 
 Gitment is a comment system based on GitHub Issues,
-which can be used in the frontend without any server-side implementation.
+which can be used in the frontend without any server-side implementation. Current project fork from imsun([here](https://github.com/imsun/gitment)) and udpate/fix something.
 
 [Demo Page](https://imsun.github.io/gitment/)
 
 [中文简介](https://imsun.net/posts/gitment-introduction/)
 
-- [Features](#features)
-- [Get Started](#get-started)
-- [Methods](#methods)
-- [Customize](#customize)
-- [About Security](#about-security)
-
 ## Features
 
 - GitHub Login
@@ -26,273 +20,13 @@ which can be used in the frontend without any server-side implementation.
 - Syntax highlighting
 - Notifications from GitHub
 - Easy to customize
-- No server-side implementation
+- ** No server-side implementation **
   - to choose both https://gh-oauth.imsun.net and [gh-oauth-server](https://github.com/imsun/gh-oauth-server), or
-  - php oauth proxy [intersect](https://github.com/aimingoo/intersect).
-- Force redirect protocol to support HTTPS/HTTP Github pages site, 
-- Support urlencoded for GET request and response data
-- No client_secret
-
-## Get Started
-
-### 1. Install
-
-```html
-<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
-```
-
-```html
-<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
-```
-
-or via npm:
-
-```sh
-$ npm i --save gitment
-```
-
-```javascript
-import 'gitment/style/default.css'
-import Gitment from 'gitment'
-```
-
-### 2. Register An OAuth Application
-
-[Click here](https://github.com/settings/applications/new) to register an OAuth application, and you will get a client ID and a client secret.
-
-Make sure the callback URL is right. Generally it's the origin of your site, like [https://imsun.net](https://imsun.net).
-
-### 3. Render Gitment
-
-```javascript
-const gitment = new Gitment({
-  id: 'Your page ID', // optional
-  owner: 'Your GitHub ID',
-  repo: 'The repo to store comments',
-  oauth: {
-    client_id: 'Your client ID',
-    client_secret: 'Your client secret',
-    // proxy_gateway: 'Your proxy service, either this or client_secret'
-  },
-  // ...
-  // For more available options, check out the documentation below
-})
-
-gitment.render('comments')
-// or
-// gitment.render(document.getElementById('comments'))
-// or
-// document.body.appendChild(gitment.render())
-```
-
-### 4. Initialize Your Comments
-
-After the page 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.
-
-## Methods
-
-### constructor(options)
-
-#### options:
-
-Type: `object` 
-
-- owner: Your GitHub ID. Required.
-- repo: The repository to store your comments. Make sure you're repo's owner. Required.
-- oauth: An object contains your client ID and client secret. Required.
-    - client_id: GitHub client ID. Required.
-    - client_secret: GitHub client secret. Required.
-- id: An optional string to identify your page. Default `location.href`.
-- title: An optional title for your page, used as issue's title. Default `document.title`.
-- link: An optional link for your page, used in issue's body. Default `location.href`.
-- desc: An optional description for your page, used in issue's body. Default `''`.
-- labels: An optional array of labels your want to add when creating the issue. Default `[]`.
-- theme: An optional Gitment theme object. Default `gitment.defaultTheme`.
-- 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` function renders 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 editor before comments list, and render a new component.
-
-```javascript
-const myTheme = {
-  render(state, instance) {
-    const container = document.createElement('div')
-    container.lang = "en-US"
-    container.className = 'gitment-container gitment-root-container'
-    
-     // your custom component
-    container.appendChild(instance.renderSomething(state, instance))
-    
-    container.appendChild(instance.renderHeader(state, instance))
-    container.appendChild(instance.renderEditor(state, instance))
-    container.appendChild(instance.renderComments(state, instance))
-    container.appendChild(instance.renderFooter(state, instance))
-    return container
-  },
-  renderSomething(state, instance) {
-    const container = document.createElement('div')
-    container.lang = "en-US"
-    if (state.user.login) {
-      container.innerText = `Hello, ${state.user.login}`
-    }
-    return container
-  }
-}
-
-const gitment = new Gitment({
-  // ...
-  theme: myTheme,
-})
-
-gitment.render(document.body)
-// or
-// gitment.renderSomthing(document.body)
-```
-
-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](https://github.com/mobxjs/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.
-
-Available states:
-
-- user: `object`. User info returned from [GitHub Users API](https://developer.github.com/v3/users/#get-the-authenticated-user) with two more keys.
-    - isLoggingIn: `bool`. Indicates if user is logging in.
-    - fromCache: `bool`. Gitment will cache user's information. Its value indicates if current user info is from cache.
-- error: `Error Object`. Will be null if no error occurs.
-- meta: `object`. Issue's info returned from [GitHub Issues API](https://developer.github.com/v3/issues/#list-issues).
-- comments: `array`. Array of comment returned from [GitHub Issue Comments API](/repos/:owner/:repo/issues/:number/comments). Will be `undefined` when comments not loaded.
-- reactions: `array`. Array of reactions added to current page, returned from [GitHub Issues' Reactions API](https://developer.github.com/v3/reactions/#list-reactions-for-an-issue).
-- commentReactions: `object`. Object of reactions added to comments, with comment ID as key, returned from [GitHub Issue Comments' Reactions API](/repos/:owner/:repo/issues/comments/:id/reactions).
-- 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.
-
-If you find a way to hack it, please [open an issue](https://github.com/imsun/gitment/issues/new).
-
-### Why does Gitment send a request to gh-oauth.imsun.net?
-
-[https://gh-oauth.imsun.net](https://gh-oauth.imsun.net) is an simple open-source service to proxy [one request](https://developer.github.com/v3/oauth/#2-github-redirects-back-to-your-site) during users logging in.
-Because GitHub does't attach a CORS header to it.
+  - ** php oauth proxy [intersect](https://github.com/aimingoo/intersect). **
+- ** Force redirect protocol to support HTTPS/HTTP Github pages site  **
+- ** Support urlencoded for GET request and response data **
+- ** No client_secret **
 
-This service won't record or store anything, only proxy and attach a CORS header to that request.
-So that users can login in the frontend without any server-side implementation.
+## Get More
 
-For more details, checkout [this project](https://github.com/imsun/gh-oauth-server).
+Please visit imsun's site([here](https://imsun.net/)) or gitment project page at [here](https://github.com/imsun/gitment).

From 00fad9159dd31f8da6ba58edb5db9488586e3933 Mon Sep 17 00:00:00 2001
From: aimingoo <aiming@gmail.com>
Date: Thu, 1 Jun 2017 00:34:52 +0800
Subject: [PATCH 6/6] Update README.md

---
 README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index a24d09a..dfaa2a6 100644
--- a/README.md
+++ b/README.md
@@ -20,12 +20,12 @@ which can be used in the frontend without any server-side implementation. Curren
 - Syntax highlighting
 - Notifications from GitHub
 - Easy to customize
-- ** No server-side implementation **
+- **No server-side implementation**
   - to choose both https://gh-oauth.imsun.net and [gh-oauth-server](https://github.com/imsun/gh-oauth-server), or
-  - ** php oauth proxy [intersect](https://github.com/aimingoo/intersect). **
-- ** Force redirect protocol to support HTTPS/HTTP Github pages site  **
-- ** Support urlencoded for GET request and response data **
-- ** No client_secret **
+  - **php oauth proxy [intersect](https://github.com/aimingoo/intersect).**
+- **Force redirect protocol to support HTTPS/HTTP Github pages site**
+- **Support urlencoded for GET request and response data**
+- **No client_secret**
 
 ## Get More