Refactor server with Sequelize ORM, refactor server configs, now will show note status (created or updated) and support docs (note alias)

16 files changed, 516 insertions, 313 deletions

diff --git a/public/features.md b/public/docs/features.md
index dde852f0..a734f3c2 100644
--- a/public/features.md
+++ b/public/docs/features.md
@@ -3,7 +3,7 @@ Features
 
 Introduction
 ===
-<i class="fa fa-file-text"></i> HackMD is a realtime collaborate markdown note in all platforms.
+<i class="fa fa-file-text"></i> **HackMD** is a realtime collaborate markdown note in all platforms.
 This mean you can do some notes with any other in **Desktop, Tablet or even Phone**.
 You can Sign in via **Facebook, Twitter, GitHub, Dropbox** in the **[homepage](/)**.
 
@@ -37,11 +37,11 @@ If you want to share a **editable** note, just copy the url.
 If you want to share a **read-only** note, simply press share button <i class="fa fa-share-alt"></i> and copy the url.
 
 ## Save
-Currently, you can save to **dropbox** <i class="fa fa-dropbox"></i> or save as **.md** <i class="fa fa-file-text"></i> to local.
+Currently, you can save to **Dropbox** <i class="fa fa-dropbox"></i> or save as **.md** <i class="fa fa-file-text"></i> to local.
 
 ## Import
-Like save feature, you can also import **.md** from **dropbox** <i class="fa fa-dropbox"></i>.
-Or import from your **clipboard** <i class="fa fa-clipboard"></i>, and that can parse some **html** which might be useful :smiley:
+Like save feature, you can also import **.md** from **Dropbox** <i class="fa fa-dropbox"></i>.
+Or import from your **Clipboard** <i class="fa fa-clipboard"></i>, and that can parse some **html** which might be useful :smiley:
 
 ## Permission
 There is a little button on the top right of the view.
@@ -60,6 +60,11 @@ It might be one of below:
 <iframe width="100%" height="500" src="http://hackmd.io/features" frameborder="0"></iframe>
 ```
 
+## [Slide Mode](./slide-example)
+You can use some syntax to divide your note into slides.
+Then use **Slide Mode** <i class="fa fa-tv"></i> to made a presentation.
+Visit above link for detail.
+
 View
 ===
 ## Table of content
@@ -93,12 +98,13 @@ This will take the first **level 1 header** as the note title.
 Using tags like below, these will show in your **history**.
 ###### tags: `features` `cool` `updated`
 
-## [YAML metadata](https://hackmd.io/IwFgZgxiBsBGCsBaAnPYAORJm07gDMImGAKYnrwDsUI8QA==)
+## [YAML metadata](./yaml-metadata)
 Provide advanced note information to set the browse behavior, visit above link for detail
-- robots: set search engine to index or not
+- robots: set web robots meta
 - lang: set browse language
 - dir: set text direction
-- breaks: set to use line breaks
+- breaks: set to use line breaks or not
+- mathjax: set to parse mathjax or not
 
 ## Emoji
 You can type any emoji like this :smile: :smiley: :cry: :wink:
@@ -241,9 +247,41 @@ digraph hierarchy {
 }
 ```
 
+### Mermaid
+```mermaid
+gantt
+    title A Gantt Diagram
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    anther task      : 24d
+```
+
 > More information about **Sequence diagrams** syntax [here](http://bramp.github.io/js-sequence-diagrams/).
 > More information about **Flow charts** syntax [here](http://adrai.github.io/flowchart.js/).
 > More information about **Graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html)
+> More information about **Mermaid** syntax [here](http://knsv.github.io/mermaid)
+
+Alert area
+---
+:::success
+Yes :tada:
+:::
+
+:::info
+This is a message :mega:
+:::
+
+:::warning
+Watch out :zap:
+:::
+
+:::danger
+Oh No :fire:
+:::
 
 ## Typography
 
diff --git a/public/docs/slide-example.md b/public/docs/slide-example.md
new file mode 100644
index 00000000..3d9a70c4
--- /dev/null
+++ b/public/docs/slide-example.md
@@ -0,0 +1,81 @@
+Slide example
+===
+This feature still in beta, may have some issues.
+
+For details:
+https://github.com/hakimel/reveal.js/
+
+---
+
+## First slide
+
+`---`
+
+Is the divder of slides
+
+----
+
+### First branch of fisrt slide
+
+`----`
+
+Is the divder of branches
+
+----
+
+### Second branch of first slide
+
+`<!-- .element: class="fragment" data-fragment-index="1" -->`
+
+Is the fragment syntax
+
+- Item 1<!-- .element: class="fragment" data-fragment-index="1" -->
+- Item 2<!-- .element: class="fragment" data-fragment-index="2" -->
+
+---
+
+## Second slide
+
+<!-- .slide: data-background="#1A237E" -->
+
+`<!-- .slide: data-background="#1A237E" -->`
+
+Is the background syntax
+
+---
+
+<!-- .slide: data-transition="zoom" -->
+
+`<!-- .slide: data-transition="zoom" -->`
+
+Is the transition syntax
+
+you can use:  
+none/fade/slide/convex/concave/zoom
+
+---
+
+<!-- .slide: data-transition="fade-in convex-out" -->
+
+`<!-- .slide: data-transition="fade-in convex-out" -->`
+
+Also can set different in/out transition
+
+you can use:  
+none/fade/slide/convex/concave/zoom  
+postfix with `-in` or `-out`
+
+---
+
+<!-- .slide: data-transition-speed="fast" -->
+
+`<!-- .slide: data-transition-speed="fast" -->`
+
+Custom the transition speed!
+
+you can use:  
+default/fast/slow
+
+---
+
+# The End
\ No newline at end of file
diff --git a/public/docs/yaml-metadata.md b/public/docs/yaml-metadata.md
new file mode 100644
index 00000000..5fc6e1b8
--- /dev/null
+++ b/public/docs/yaml-metadata.md
@@ -0,0 +1,97 @@
+---
+robots: index, follow
+lang: en
+dir: ltr
+breaks: true
+---
+
+Supported YAML metadata
+===
+
+First you need to insert syntax like this at the **start** of the note:
+```
+---
+YAML metas
+---
+```
+
+Replace the "YAML metas" in this section with any YAML options as below.
+You can also refer to this note's source code.
+
+robots
+---
+This option will give below meta in the note head meta:
+```xml
+<meta name="robots" content="your_meta">
+```
+So you can prevent any search engine index your note by set `noindex, nofollow`.
+
+> default: not 
+
+**Example**
+```xml
+robots: noindex, nofollow
+```
+
+lang
+---
+This option will set the language of the note, that might alter some typography of it.
+You can find your the language code in ISO 639-1 standard:
+https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
+
+> default: not set (which will be en)
+
+**Example**
+```xml
+langs: ja-jp
+```
+
+dir
+---
+This option provide to describe the direction of the text in this note.
+You can only use whether `rtl` or `ltr`.
+Look more at here:
+http://www.w3.org/International/questions/qa-html-dir
+
+> default: not set (which will be ltr)
+
+**Example**
+```xml
+dir: rtl
+```
+
+breaks
+---
+This option means the hardbreaks in the note will be parsed or be ignore.
+The original markdown syntax breaks only if you put space twice, but HackMD choose to breaks every time you enter a break.
+You can only use whether `true` or `false`.
+
+> default: not set (which will be true)
+
+**Example**
+```xml
+breaks: false
+```
+
+mathjax
+---
+This option let you to choose to parse mathjax syntax or not.
+
+> default: not set (which will be true)
+
+**Example**
+```xml
+mathjax: false
+```
+
+spellcheck
+---
+**Warning: Experimental feature!**
+This option let you to choose to enable spell checking feature or not.
+
+> default: not set (which will be false)
+
+**Example**
+```xml
+spellcheck: true
+```
\ No newline at end of file
diff --git a/public/index.ejs b/public/index.ejs
deleted file mode 100644
index 87e86f2b..00000000
--- a/public/index.ejs
+++ /dev/null
@@ -1,237 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="description" content="Realtime collaborative markdown notes on all platforms.">
-    <meta name="author" content="jackycute">
-    <title>HackMD - Collaborative notes</title>
-    <link rel="icon" type="image/png" href="<%- url %>/favicon.png">
-    <link rel="apple-touch-icon" href="<%- url %>/apple-touch-icon.png">
-
-    <!-- Bootstrap core CSS -->
-    <% if(useCDN) { %>
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.9.0/bootstrap-social.min.css">
-	<% } else { %>
-	<link rel="stylesheet" href="<%- url %>/vendor/bootstrap/dist/css/bootstrap.min.css">
-	<link rel="stylesheet" href="<%- url %>/vendor/font-awesome/css/font-awesome.min.css">
-	<link rel="stylesheet" href="<%- url %>/css/bootstrap-social.css">
-	<% } %>
-    <link rel="stylesheet" href="<%- url %>/vendor/select2/select2.css">
-    <link rel="stylesheet" href="<%- url %>/vendor/select2/select2-bootstrap.css">
-    <!-- Custom styles for this template -->
-    <link rel="stylesheet" href="<%- url %>/css/cover.css">
-    <link rel="stylesheet" href="<%- url %>/css/site.css">
-</head>
-
-<body>
-    <div class="site-wrapper">
-        <div class="site-wrapper-inner">
-            <div class="cover-container">
-
-                <div class="masthead clearfix">
-                    <div class="inner">
-                        <h3 class="masthead-brand"></h3>
-                        <nav>
-                            <ul class="nav masthead-nav">
-                                <li class="ui-home active"><a href="#">Home</a>
-                                </li>
-                                <li class="ui-history"><a href="#">History</a>
-                                </li>
-                                <li class="ui-releasenotes"><a href="#">Release Notes</a>
-                                </li>
-                            </ul>
-                        </nav>
-                    </div>
-                </div>
-
-                <div id="home" class="section">
-                    <div class="inner cover">
-                        <h1 class="cover-heading"><i class="fa fa-file-text"></i> HackMD</h1>
-                        <p class="lead">
-                            Realtime collaborative markdown notes on all platforms.
-                        </p>
-                        <a type="button" class="btn btn-lg btn-success ui-signin" data-toggle="modal" data-target=".signin-modal" style="display:none;">Sign In</a>
-                        <div class="ui-or" style="display:none;">Or</div>
-                        <p class="lead">
-                            <a href="<%- url %>/new" class="btn btn-lg btn-default">New note</a>
-                        </p>
-                        <h5>Share directly with URL <i class="fa fa-link"></i></h5>
-                        <a class="btn btn-primary" href="<%- url %>/features">More features <i class="fa fa-chevron-right"></i></a>
-                    </div>
-                    <br>
-                </div>
-
-                <div id="history" class="section" style="display:none;">
-                    <div class="ui-signin">
-                        <h4>
-                            <a type="button" class="btn btn-success" data-toggle="modal" data-target=".signin-modal">Sign In</a> to get own history!
-                        </h4>
-                        <p>Below are history from browser</p>
-                    </div>
-                    <div class="ui-signout" style="display:none;">
-                        <h4 class="ui-welcome">Welcome! <span class="ui-name"></span></h4>
-                        <a href="<%- url %>/new" class="btn btn-default">New note</a> Or
-                        <a href="#" class="btn btn-danger ui-logout">Sign Out</a>
-                    </div>
-                    <hr>
-                    <form class="form-inline">
-                        <div class="form-group" style="vertical-align: bottom;">
-                            <input class="form-control ui-use-tags" style="min-width:172px;max-width:344px;" />
-                        </div>
-                        <div class="form-group">
-                            <input class="search form-control" placeholder="Search anything..." />
-                        </div>
-                        <a href="#" class="sort btn btn-default" data-sort="text" title="Sort by title">
-                        Title
-                        </a>
-                        <a href="#" class="sort btn btn-default" data-sort="timestamp" title="Sort by time">
-                        Time
-                        </a>
-                        <span class="hidden-xs hidden-sm">
-                            <a href="#" class="btn btn-default ui-save-history" title="Export history"><i class="fa fa-save"></i></a>
-                            <span class="btn btn-default btn-file ui-open-history" title="Import history">
-                                <i class="fa fa-folder-open-o"></i><input type="file" />
-                            </span>
-                        <a href="#" class="btn btn-default ui-clear-history" title="Clear history" data-toggle="modal" data-target=".delete-modal"><i class="fa fa-trash-o"></i></a>
-                        </span>
-                        <a href="#" class="btn btn-default ui-refresh-history" title="Refresh history"><i class="fa fa-refresh"></i></a>
-                    </form>
-                    <h4 class="ui-nohistory" style="display:none;">
-                        No history
-                    </h4>
-                    <a href="#" class="btn btn-primary ui-import-from-browser" style="display:none;">Import from browser</a>
-                    <ul id="history-list" class="list">
-                    </ul>
-                </div>
-                <div id="releasenotes" class="section" style="display:none;">
-                    <div id="template" style="display:none;">
-                        {{#each release}}
-                        <div class="inner cover">
-                            <h5 class="cover-heading">
-                                <div class="text-left">
-                                   <i class="fa fa-tag"></i> {{version}}
-                                   &nbsp;<span class="label label-default">{{tag}}</span>
-                                   <div class="pull-right">
-                                       <i class="fa fa-clock-o"></i> {{date}}
-                                   </div>
-                                </div>
-                            </h5>
-                            <hr>{{#each detail}}
-                            <div class="text-left">
-                                <h5><i class="fa fa-dot-circle-o"></i> {{title}}</h5>
-                                <ul>
-                                    {{#each item}}
-                                    <li>
-                                        {{this}}
-                                    </li>
-                                    {{/each}}
-                                </ul>
-                            </div>
-                            {{/each}}
-                        </div>
-                        {{#unless @last}}
-                        <br>{{/unless}} {{/each}}
-                    </div>
-                </div>
-
-                <div class="mastfoot">
-                    <div class="inner">
-                        <h6>
-                            <iframe src="//ghbtns.com/github-btn.html?user=hackmdio&repo=hackmd&type=star&count=true" frameborder="0" scrolling="0" width="90px" height="20px" style="vertical-align:middle;"></iframe>
-                        </h6>
-                        <p>&copy; 2016 <a href="https://www.facebook.com/TakeHackMD" target="_blank"><i class="fa fa-facebook-square"></i> HackMD</a> by <a href="https://github.com/jackycute" target="_blank"><i class="fa fa-github-square"></i> jackycute</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- signin modal -->
-    <div class="modal fade signin-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-sm">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
-                    </button>
-                    <h4 class="modal-title" id="mySmallModalLabel">Choose method</h4>
-                </div>
-                <div class="modal-body">
-                    <a href="<%- url %>/auth/facebook" class="btn btn-lg btn-block btn-social btn-facebook">
-                        <i class="fa fa-facebook"></i> Sign in via Facebook
-                    </a>
-                    <a href="<%- url %>/auth/twitter" class="btn btn-lg btn-block btn-social btn-twitter">
-                        <i class="fa fa-twitter"></i> Sign in via Twitter
-                    </a>
-                    <a href="<%- url %>/auth/github" class="btn btn-lg btn-block btn-social btn-github">
-                        <i class="fa fa-github"></i> Sign in via GitHub
-                    </a>
-                    <a href="<%- url %>/auth/dropbox" class="btn btn-lg btn-block btn-social btn-dropbox">
-                        <i class="fa fa-dropbox"></i> Sign in via Dropbox
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- delete modal -->
-    <div class="modal fade delete-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-sm">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
-                    </button>
-                    <h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
-                </div>
-                <div class="modal-body" style="color:black;">
-                    <h5 class="ui-delete-modal-msg"></h5>
-                    <strong class="ui-delete-modal-item"></strong>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-danger ui-delete-modal-confirm">Yes, do it!</button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Bootstrap core JavaScript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <% if(useCDN) { %>
-	<script src="//code.jquery.com/jquery-1.11.3.min.js" defer></script>
-	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" defer></script>
-	<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js" defer></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/jquery.gsap.min.js" defer></script>
-	<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js" defer></script>
-	<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js" defer></script>
-	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js" defer></script>
-	<script src="//cdnjs.cloudflare.com/ajax/libs/js-url/2.0.2/url.min.js" defer></script>
-	<% } else { %>
-	<script src="<%- url %>/vendor/jquery/dist/jquery.min.js" defer></script>
-	<script src="<%- url %>/vendor/bootstrap/dist/js/bootstrap.min.js" defer></script>
-    <script src="<%- url %>/vendor/gsap/src/minified/TweenMax.min.js" defer></script>
-    <script src="<%- url %>/vendor/gsap/src/minified/jquery.gsap.min.js" defer></script>
-	<script src="<%- url %>/vendor/select2/select2.min.js" defer></script>
-	<script src="<%- url %>/vendor/moment/min/moment-with-locales.min.js" defer></script>
-    <script src="<%- url %>/vendor/handlebars/handlebars.min.js" defer></script>
-	<script src="<%- url %>/vendor/js-url/url.min.js" defer></script>
-	<% } %>
-    <script src="<%- url %>/vendor/js.cookie.js" defer></script>
-    <script src="<%- url %>/vendor/list.min.js" defer></script>
-    <script src="<%- url %>/vendor/FileSaver.min.js" defer></script>
-    <script src="<%- url %>/vendor/store.min.js" defer></script>
-    <script src="<%- url %>/vendor/lz-string/libs/lz-string.min.js" defer></script>
-    <script src="<%- url %>/js/common.js" defer></script>
-    <script src="<%- url %>/js/history.js" defer></script>
-    <script src="<%- url %>/js/cover.js" defer></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/public/js/extra.js b/public/js/extra.js
index 41b984dc..be454ed7 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -1,15 +1,24 @@
 //auto update last change
+var createtime = null;
 var lastchangetime = null;
 var lastchangeui = {
+    status: $(".ui-status-lastchange"),
     time: $(".ui-lastchange"),
     user: $(".ui-lastchangeuser"),
     nouser: $(".ui-no-lastchangeuser")
 }
 
 function updateLastChange() {
-    if (lastchangetime && lastchangeui) {
-        lastchangeui.time.html(moment(lastchangetime).fromNow());
-        lastchangeui.time.attr('title', moment(lastchangetime).format('llll'));
+    if (!lastchangeui) return;
+    if (createtime) {
+        if (createtime && !lastchangetime) {
+            lastchangeui.status.text('created');
+        } else {
+            lastchangeui.status.text('changed');
+        }
+        var time = lastchangetime || createtime;
+        lastchangeui.time.html(moment(time).fromNow());
+        lastchangeui.time.attr('title', moment(time).format('llll'));
     }
 }
 setInterval(updateLastChange, 60000);
diff --git a/public/js/history.js b/public/js/history.js
index edecde1d..b3bae980 100644
--- a/public/js/history.js
+++ b/public/js/history.js
@@ -93,8 +93,14 @@ function clearDuplicatedHistory(notehistory) {
     for (var i = 0; i < notehistory.length; i++) {
         var found = false;
         for (var j = 0; j < newnotehistory.length; j++) {
-            var id = LZString.decompressFromBase64(notehistory[i].id);
-            var newId = LZString.decompressFromBase64(newnotehistory[j].id);
+            var id = notehistory[i].id;
+            var newId = newnotehistory[j].id;
+            try {
+                id = LZString.decompressFromBase64(id);
+                newId = LZString.decompressFromBase64(newId);
+            } catch (err) {
+                // na
+            }
             if (id == newId || notehistory[i].id == newnotehistory[j].id || !notehistory[i].id || !newnotehistory[j].id) {
                 var time = moment(notehistory[i].time, 'MMMM Do YYYY, h:mm:ss a');
                 var newTime = moment(newnotehistory[j].time, 'MMMM Do YYYY, h:mm:ss a');
diff --git a/public/js/index.js b/public/js/index.js
index 6cbaf066..0e4fd21a 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1423,7 +1423,7 @@ function updatePermission(newPermission) {
         title = "Only owner can view & edit";
         break;
     }
-    if (personalInfo.userid == owner) {
+    if (personalInfo.userid && personalInfo.userid == owner) {
         label += ' <i class="fa fa-caret-down"></i>';
         ui.infobar.permission.label.removeClass('disabled');
     } else {
@@ -1476,11 +1476,14 @@ socket.emit = function () {
 socket.on('info', function (data) {
     console.error(data);
     switch (data.code) {
+    case 403:
+        location.href = "./403";
+        break;
     case 404:
         location.href = "./404";
         break;
-    case 403:
-        location.href = "./403";
+    case 500:
+        location.href = "./500";
         break;
     }
 });
@@ -1517,11 +1520,15 @@ socket.on('version', function (data) {
 });
 function updateLastInfo(data) {
     //console.log(data);
-    if (lastchangetime !== data.updatetime) {
+    if (data.hasOwnProperty('createtime') && createtime !== data.createtime) {
+        createtime = data.createtime;
+        updateLastChange();
+    }
+    if (data.hasOwnProperty('updatetime') && lastchangetime !== data.updatetime) {
         lastchangetime = data.updatetime;
         updateLastChange();
     }
-    if (lastchangeuser !== data.lastchangeuser) {
+    if (data.hasOwnProperty('lastchangeuser') && lastchangeuser !== data.lastchangeuser) {
         lastchangeuser = data.lastchangeuser;
         lastchangeuserprofile = data.lastchangeuserprofile;
         updateLastChangeUser();
diff --git a/public/js/pretty.js b/public/js/pretty.js
index 44d27e54..2d1f27de 100644
--- a/public/js/pretty.js
+++ b/public/js/pretty.js
@@ -20,7 +20,8 @@ renderTOC(markdown);
 generateToc('toc');
 generateToc('toc-affix');
 smoothHashScroll();
-lastchangetime = lastchangeui.time.text();
+createtime = lastchangeui.time.attr('data-createtime');
+lastchangetime = lastchangeui.time.attr('data-updatetime');
 updateLastChange();
 var url = window.location.pathname;
 $('.ui-edit').attr('href', url + '/edit');
diff --git a/public/views/body.ejs b/public/views/body.ejs
index 54562ea6..044f7e6d 100644
--- a/public/views/body.ejs
+++ b/public/views/body.ejs
@@ -8,7 +8,7 @@
                 <span>
                 	<span class="ui-lastchangeuser" style="display: none;">&thinsp;<i class="ui-user-icon small" data-toggle="tooltip" data-placement="right"></i></span>
                 	<span class="ui-no-lastchangeuser">&thinsp;<i class="fa fa-clock-o"></i></span>
-                	&nbsp;<span class="text-uppercase">changed</span>
+                	&nbsp;<span class="text-uppercase ui-status-lastchange"></span>
                 	<span class="ui-lastchange text-uppercase"></span>
                 </span>
                 <span class="ui-permission dropdown pull-right">
@@ -73,32 +73,6 @@
         </div>
     </div>
 </div>
-<!-- signin modal -->
-<div class="modal fade signin-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
-                </button>
-                <h4 class="modal-title" id="mySmallModalLabel">Please sign in to edit</h4>
-            </div>
-            <div class="modal-body">
-                <a href="<%- url %>/auth/facebook" class="btn btn-lg btn-block btn-social btn-facebook">
-                    <i class="fa fa-facebook"></i> Sign in via Facebook
-                </a>
-                <a href="<%- url %>/auth/twitter" class="btn btn-lg btn-block btn-social btn-twitter">
-                    <i class="fa fa-twitter"></i> Sign in via Twitter
-                </a>
-                <a href="<%- url %>/auth/github" class="btn btn-lg btn-block btn-social btn-github">
-                    <i class="fa fa-github"></i> Sign in via GitHub
-                </a>
-                <a href="<%- url %>/auth/dropbox" class="btn btn-lg btn-block btn-social btn-dropbox">
-                    <i class="fa fa-dropbox"></i> Sign in via Dropbox
-                </a>
-            </div>
-        </div>
-    </div>
-</div>
 <!-- locked modal -->
 <div class="modal fade locked-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-sm">
diff --git a/public/views/hackmd.ejs b/public/views/hackmd.ejs
new file mode 100644
index 00000000..c5778fc9
--- /dev/null
+++ b/public/views/hackmd.ejs
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <%- include head %>
+</head>
+
+<body>
+    <%- include header %>
+    <%- include body %>
+    <%- include footer %>
+    <%- include foot %>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/views/header.ejs b/public/views/header.ejs
index 410886d1..bf8f9f66 100644
--- a/public/views/header.ejs
+++ b/public/views/header.ejs
@@ -38,8 +38,10 @@
                 </li>
                 <li role="presentation"><a role="menuitem" class="ui-save-google-drive" tabindex="-1" href="#" target="_self"><i class="fa fa-cloud-upload fa-fw"></i> Google Drive</a>
                 </li>
+                <% if(typeof github !== 'undefined' && github) { %>
                 <li role="presentation"><a role="menuitem" class="ui-save-gist" tabindex="-1" href="#" target="_blank"><i class="fa fa-github fa-fw"></i> Gist</a>
                 </li>
+                <% } %>
                 <li class="divider"></li>
                 <li class="dropdown-header">Import</li>
                 <li role="presentation"><a role="menuitem" class="ui-import-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
@@ -119,8 +121,10 @@
                     </li>
                     <li role="presentation"><a role="menuitem" class="ui-save-google-drive" tabindex="-1" href="#" target="_self"><i class="fa fa-cloud-upload fa-fw"></i> Google Drive</a>
                     </li>
+                    <% if(typeof github !== 'undefined' && github) { %>
                     <li role="presentation"><a role="menuitem" class="ui-save-gist" tabindex="-1" href="#" target="_blank"><i class="fa fa-github fa-fw"></i> Gist</a>
-                </li>
+                    </li>
+                    <% } %>
                     <li class="divider"></li>
                     <li class="dropdown-header">Import</li>
                     <li role="presentation"><a role="menuitem" class="ui-import-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
diff --git a/public/views/index.ejs b/public/views/index.ejs
index c5778fc9..85d955b7 100644
--- a/public/views/index.ejs
+++ b/public/views/index.ejs
@@ -2,14 +2,210 @@
 <html lang="en">
 
 <head>
-    <%- include head %>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="description" content="Realtime collaborative markdown notes on all platforms.">
+    <meta name="author" content="jackycute">
+    <title>HackMD - Collaborative notes</title>
+    <link rel="icon" type="image/png" href="<%- url %>/favicon.png">
+    <link rel="apple-touch-icon" href="<%- url %>/apple-touch-icon.png">
+
+    <!-- Bootstrap core CSS -->
+	<% if(useCDN) { %>
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.9.0/bootstrap-social.min.css">
+	<% } else { %>
+	<link rel="stylesheet" href="<%- url %>/vendor/bootstrap/dist/css/bootstrap.min.css">
+	<link rel="stylesheet" href="<%- url %>/vendor/font-awesome/css/font-awesome.min.css">
+	<link rel="stylesheet" href="<%- url %>/css/bootstrap-social.css">
+	<% } %>
+    <link rel="stylesheet" href="<%- url %>/vendor/select2/select2.css">
+    <link rel="stylesheet" href="<%- url %>/vendor/select2/select2-bootstrap.css">
+    <!-- Custom styles for this template -->
+    <link rel="stylesheet" href="<%- url %>/css/cover.css">
+    <link rel="stylesheet" href="<%- url %>/css/site.css">
 </head>
 
 <body>
-    <%- include header %>
-    <%- include body %>
-    <%- include footer %>
-    <%- include foot %>
+    <div class="site-wrapper">
+        <div class="site-wrapper-inner">
+            <div class="cover-container">
+
+                <div class="masthead clearfix">
+                    <div class="inner">
+                        <h3 class="masthead-brand"></h3>
+                        <nav>
+                            <ul class="nav masthead-nav">
+                                <li class="ui-home active"><a href="#">Home</a>
+                                </li>
+                                <li class="ui-history"><a href="#">History</a>
+                                </li>
+                                <li class="ui-releasenotes"><a href="#">Release Notes</a>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+
+                <div id="home" class="section">
+                    <div class="inner cover">
+                        <h1 class="cover-heading"><i class="fa fa-file-text"></i> HackMD</h1>
+                        <p class="lead">
+                            Realtime collaborative markdown notes on all platforms.
+                        </p>
+                        <a type="button" class="btn btn-lg btn-success ui-signin" data-toggle="modal" data-target=".signin-modal" style="display:none;">Sign In</a>
+                        <div class="ui-or" style="display:none;">Or</div>
+                        <p class="lead">
+                            <a href="<%- url %>/new" class="btn btn-lg btn-default">New note</a>
+                        </p>
+                        <h5>Share directly with URL <i class="fa fa-link"></i></h5>
+                        <a class="btn btn-primary" href="<%- url %>/features">More features <i class="fa fa-chevron-right"></i></a>
+                    </div>
+                    <br>
+                </div>
+
+                <div id="history" class="section" style="display:none;">
+                    <div class="ui-signin">
+                        <h4>
+                            <a type="button" class="btn btn-success" data-toggle="modal" data-target=".signin-modal">Sign In</a> to get own history!
+                        </h4>
+                        <p>Below are history from browser</p>
+                    </div>
+                    <div class="ui-signout" style="display:none;">
+                        <h4 class="ui-welcome">Welcome! <span class="ui-name"></span></h4>
+                        <a href="<%- url %>/new" class="btn btn-default">New note</a> Or
+                        <a href="#" class="btn btn-danger ui-logout">Sign Out</a>
+                    </div>
+                    <hr>
+                    <form class="form-inline">
+                        <div class="form-group" style="vertical-align: bottom;">
+                            <input class="form-control ui-use-tags" style="min-width:172px;max-width:344px;" />
+                        </div>
+                        <div class="form-group">
+                            <input class="search form-control" placeholder="Search anything..." />
+                        </div>
+                        <a href="#" class="sort btn btn-default" data-sort="text" title="Sort by title">
+                        Title
+                        </a>
+                        <a href="#" class="sort btn btn-default" data-sort="timestamp" title="Sort by time">
+                        Time
+                        </a>
+                        <span class="hidden-xs hidden-sm">
+                            <a href="#" class="btn btn-default ui-save-history" title="Export history"><i class="fa fa-save"></i></a>
+                            <span class="btn btn-default btn-file ui-open-history" title="Import history">
+                                <i class="fa fa-folder-open-o"></i><input type="file" />
+                            </span>
+                        <a href="#" class="btn btn-default ui-clear-history" title="Clear history" data-toggle="modal" data-target=".delete-modal"><i class="fa fa-trash-o"></i></a>
+                        </span>
+                        <a href="#" class="btn btn-default ui-refresh-history" title="Refresh history"><i class="fa fa-refresh"></i></a>
+                    </form>
+                    <h4 class="ui-nohistory" style="display:none;">
+                        No history
+                    </h4>
+                    <a href="#" class="btn btn-primary ui-import-from-browser" style="display:none;">Import from browser</a>
+                    <ul id="history-list" class="list">
+                    </ul>
+                </div>
+                <div id="releasenotes" class="section" style="display:none;">
+                    <div id="template" style="display:none;">
+                        {{#each release}}
+                        <div class="inner cover">
+                            <h5 class="cover-heading">
+                                <div class="text-left">
+                                   <i class="fa fa-tag"></i> {{version}}
+                                   &nbsp;<span class="label label-default">{{tag}}</span>
+                                   <div class="pull-right">
+                                       <i class="fa fa-clock-o"></i> {{date}}
+                                   </div>
+                                </div>
+                            </h5>
+                            <hr>{{#each detail}}
+                            <div class="text-left">
+                                <h5><i class="fa fa-dot-circle-o"></i> {{title}}</h5>
+                                <ul>
+                                    {{#each item}}
+                                    <li>
+                                        {{this}}
+                                    </li>
+                                    {{/each}}
+                                </ul>
+                            </div>
+                            {{/each}}
+                        </div>
+                        {{#unless @last}}
+                        <br>{{/unless}} {{/each}}
+                    </div>
+                </div>
+
+                <div class="mastfoot">
+                    <div class="inner">
+                        <h6>
+                            <iframe src="//ghbtns.com/github-btn.html?user=hackmdio&repo=hackmd&type=star&count=true" frameborder="0" scrolling="0" width="90px" height="20px" style="vertical-align:middle;"></iframe>
+                        </h6>
+                        <p>&copy; 2016 <a href="https://www.facebook.com/TakeHackMD" target="_blank"><i class="fa fa-facebook-square"></i> HackMD</a> by <a href="https://github.com/jackycute" target="_blank"><i class="fa fa-github-square"></i> jackycute</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- delete modal -->
+    <div class="modal fade delete-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
+                </div>
+                <div class="modal-body" style="color:black;">
+                    <h5 class="ui-delete-modal-msg"></h5>
+                    <strong class="ui-delete-modal-item"></strong>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-danger ui-delete-modal-confirm">Yes, do it!</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <%- include modal %>
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+	<% if(useCDN) { %>
+	<script src="//code.jquery.com/jquery-1.11.3.min.js" defer></script>
+	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" defer></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js" defer></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/jquery.gsap.min.js" defer></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js" defer></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment-with-locales.min.js" defer></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js" defer></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/js-url/2.0.2/url.min.js" defer></script>
+	<% } else { %>
+	<script src="<%- url %>/vendor/jquery/dist/jquery.min.js" defer></script>
+	<script src="<%- url %>/vendor/bootstrap/dist/js/bootstrap.min.js" defer></script>
+    <script src="<%- url %>/vendor/gsap/src/minified/TweenMax.min.js" defer></script>
+    <script src="<%- url %>/vendor/gsap/src/minified/jquery.gsap.min.js" defer></script>
+	<script src="<%- url %>/vendor/select2/select2.min.js" defer></script>
+	<script src="<%- url %>/vendor/moment/min/moment-with-locales.min.js" defer></script>
+    <script src="<%- url %>/vendor/handlebars/handlebars.min.js" defer></script>
+	<script src="<%- url %>/vendor/js-url/url.min.js" defer></script>
+	<% } %>
+    <script src="<%- url %>/vendor/js.cookie.js" defer></script>
+    <script src="<%- url %>/vendor/list.min.js" defer></script>
+    <script src="<%- url %>/vendor/FileSaver.min.js" defer></script>
+    <script src="<%- url %>/vendor/store.min.js" defer></script>
+    <script src="<%- url %>/vendor/lz-string/libs/lz-string.min.js" defer></script>
+    <script src="<%- url %>/js/common.js" defer></script>
+    <script src="<%- url %>/js/history.js" defer></script>
+    <script src="<%- url %>/js/cover.js" defer></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/views/modal.ejs b/public/views/modal.ejs
new file mode 100644
index 00000000..260ff423
--- /dev/null
+++ b/public/views/modal.ejs
@@ -0,0 +1,34 @@
+<!-- signin modal -->
+<div class="modal fade signin-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-sm">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="mySmallModalLabel">Choose method</h4>
+            </div>
+            <div class="modal-body">
+                <% if(facebook) { %>
+                <a href="<%- url %>/auth/facebook" class="btn btn-lg btn-block btn-social btn-facebook">
+                    <i class="fa fa-facebook"></i> Sign in via Facebook
+                </a>
+                <% } %>
+                <% if(twitter) { %>
+                <a href="<%- url %>/auth/twitter" class="btn btn-lg btn-block btn-social btn-twitter">
+                    <i class="fa fa-twitter"></i> Sign in via Twitter
+                </a>
+                <% } %>
+                <% if(github) { %>
+                <a href="<%- url %>/auth/github" class="btn btn-lg btn-block btn-social btn-github">
+                    <i class="fa fa-github"></i> Sign in via GitHub
+                </a>
+                <% } %>
+                <% if(dropbox) { %>
+                <a href="<%- url %>/auth/dropbox" class="btn btn-lg btn-block btn-social btn-dropbox">
+                    <i class="fa fa-dropbox"></i> Sign in via Dropbox
+                </a>
+                <% } %>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index ed6e638f..c8e959f4 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -49,8 +49,8 @@
                 <% } else { %>
                 	<span class="ui-no-lastchangeuser">&thinsp;<i class="fa fa-clock-o"></i></span>
                 <% } %>
-                &nbsp;<span class="text-uppercase">changed</span>
-                <span class="ui-lastchange text-uppercase"><%- updatetime %></span>
+                &nbsp;<span class="text-uppercase ui-status-lastchange"></span>
+                <span class="ui-lastchange text-uppercase" data-createtime="<%- createtime %>" data-updatetime="<%- updatetime %>"></span>
             </span>
             <span class="pull-right"><%- viewcount %> views <a href="#" class="ui-edit" title="Edit this note"><i class="fa fa-fw fa-pencil"></i></a></span>
         </small>
diff --git a/public/views/slide/reveal.hbs b/public/views/slide.hbs
index 8a93c267..262a5df7 100644
--- a/public/views/slide/reveal.hbs
+++ b/public/views/slide.hbs
@@ -20,7 +20,7 @@
         <script>
           document.write( '<link rel="stylesheet" href="{{{url}}}/vendor/reveal.js/css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
         </script>
-		<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+		<script src="{{{url}}}/vendor/jquery/dist/jquery.min.js"></script>
     </head>
     <body>
 
diff --git a/public/views/slide/listing.hbs b/public/views/slide/listing.hbs
deleted file mode 100644
index 7da8ebab..00000000
--- a/public/views/slide/listing.hbs
+++ /dev/null
@@ -1,22 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <title>Directory Listing</title>
-        <link rel="stylesheet" href="{{{url}}}/vendor/reveal.js/{{{theme}}}" id="theme">
-        <style type="text/css">
-            body {
-                margin: 1em;
-            }
-            a {
-                color: white;
-                display: block;
-            }
-        </style>
-		<link rel="icon" href="http://i.imgur.com/IVlU2PU.png" sizes="512x512" />
-    </head>
-
-    <body>
-        {{{listing}}}
-    </body>
-</html>