Introduction of Gistnote

gistfile1.md

Gistnote

Gistnote is a Gist client app based on HTML5 and JavaScript.

https://gistnote.github.io

---

Features

Gistnote has following features:

• View a Gist with Markdown rendering and syntax highlight
• View a Gist as Slideshow
• Create or edit a Gist
• Editor with realtime preview

---

Architecture

The client app sends requests directly to GitHub API using CORS, except OAuth 2 authorization request because the client secret should not be exposed.

• Client app
  • GitHub Pages (Jekyll)
  • HTML5 based Web Application
  • CoffeeScript
  • Vue.js
  • Page.js
  • Marked.js
  • Highlight.js
  • jQuery timeago
  • Bootswatch
• Server app
  • Google App Engine (JavaVM)
  • Groovy 2.3

---

OAuth Authorization

OAuth 2 authorization request is processed on the server side app. OAuth token is only stored in the local storage of the browser.

1. User clicks the login button.
2. Client app redirects to GitHub OAuth.
3. GitHub OAuth processes the authorization request and redirects back to the client app with the authorization code.
4. Client app exchanges the authorization code and token via the server app.
5. Client app sends the authorization code to the server app.
6. Server app sends the authorization code with the client secret to GitHub OAuth.
7. GitHub OAuth responses the token.
8. Client app stores the token in the local storage of the browser.
9. Client app redirects to the top page.

---

Contributions

This is an open source software licensed under the Apache License Version 2.0. Send me an issue or pull request.