From 277eff3803a525055d4826b2cbc3b557fe3b77b0 Mon Sep 17 00:00:00 2001
From: Yu-Jen Lin <yjlin5210@gmail.com>
Date: Mon, 15 May 2017 17:19:35 +0800
Subject: [PATCH 1/3] fixed undefined variable on titlebar

---
 renderer-process/components/titlebar.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/renderer-process/components/titlebar.js b/renderer-process/components/titlebar.js
index a40c532..1ac0cb2 100644
--- a/renderer-process/components/titlebar.js
+++ b/renderer-process/components/titlebar.js
@@ -19,6 +19,7 @@ var TitleBar = function(options) {
     var $element = $(html);
     var element = $element[0];
     this.element = element;
+	this.$element = $element;
 
     var self = this;
 	var close = $('.titlebar-close', element)[0];
@@ -53,7 +54,8 @@ TitleBar.prototype.appendTo = function(target) {
 	if(typeof target === 'string') target = $(target)[0];
 
 	var $element = this.$element;
-
+	console.log($element);
+	console.log(this.element);
 	$window.on('keydown', this._onkeydown = function(e) {
 
 		if(e.keyCode === 18) {

From 9482f16d031bcdbc8b1ffc7d1e0066626e6a9089 Mon Sep 17 00:00:00 2001
From: Yu-Jen Lin <yjlin5210@gmail.com>
Date: Mon, 15 May 2017 19:08:28 +0800
Subject: [PATCH 2/3] clean up and set request timeout to 5000ms

---
 renderer-process/components/titlebar.js       |   7 +-
 renderer-process/content-loader.js            |  16 +-
 renderer-process/favorite-view.js             | 141 -------------
 renderer-process/load-after.js                |  10 +-
 renderer-process/parsers/8comic.js            | 140 +++++++------
 renderer-process/parsers/dm5.js               | 134 ++++++------
 .../parsers/readcomicbooksonline.js           | 143 ++++++-------
 renderer-process/parsers/sfacg.js             | 101 ++++-----
 renderer-process/util.js                      |  31 ++-
 .../viewcontrollers/about-viewcontroller.js   |   6 +-
 .../favorite-viewcontroller.js                |  77 ++++---
 .../viewcontrollers/read-viewcontroller.js    | 193 ++++++++----------
 .../viewcontrollers/search-viewcontroller.js  |  69 +++----
 .../titlebar-viewcontroller.js                |  35 ++--
 .../translate-viewcontroller.js               |  10 +-
 .../view-switch-viewcontroller.js             |  20 +-
 .../viewmodels/comicparse-viewmodel.js        |  74 ++++---
 .../viewmodels/search-viewmodel.js            |  22 +-
 .../viewmodels/subscribe-viewmodel.js         |  86 ++++----
 19 files changed, 544 insertions(+), 771 deletions(-)
 delete mode 100644 renderer-process/favorite-view.js

diff --git a/renderer-process/components/titlebar.js b/renderer-process/components/titlebar.js
index 1ac0cb2..5d42c04 100644
--- a/renderer-process/components/titlebar.js
+++ b/renderer-process/components/titlebar.js
@@ -1,13 +1,11 @@
 var events = require('events');
 var util = require('util');
 var fs = require('fs');
-// var domify = require('domify');
-// var $ = require("dombo");
 
 var $window = $(window);
 var html_mac = fs.readFileSync(__dirname + '/../../sections/titlebar-mac.html', 'utf-8');
 var html_win = fs.readFileSync(__dirname + '/../../sections/titlebar-win.html', 'utf-8');
-// console.log(html);
+
 var TitleBar = function(options) {
     if (!(this instanceof TitleBar)) return new TitleBar(options);
     events.EventEmitter.call(this);
@@ -54,8 +52,6 @@ TitleBar.prototype.appendTo = function(target) {
 	if(typeof target === 'string') target = $(target)[0];
 
 	var $element = this.$element;
-	console.log($element);
-	console.log(this.element);
 	$window.on('keydown', this._onkeydown = function(e) {
 
 		if(e.keyCode === 18) {
@@ -66,7 +62,6 @@ TitleBar.prototype.appendTo = function(target) {
 	$window.on('keyup', this._onkeyup = function(e) {
 		if(e.keyCode === 18) $element.removeClass('alt');
 	});
-	// console.log(typeof this.element)
 	target.appendChild(this.element);
 	return this;
 };
diff --git a/renderer-process/content-loader.js b/renderer-process/content-loader.js
index 7ba926f..f404ee3 100644
--- a/renderer-process/content-loader.js
+++ b/renderer-process/content-loader.js
@@ -13,18 +13,4 @@ $.get('./sections/read-view.html', function(result) {
 
 $.get('./sections/about-view.html', function(result) {
     $("#main-view").append(result);
-})
-
-// $.get('./sections/page.html', function(result) {
-//     for(var i = 0; i < 50; i++) {
-//         var view = $(result);
-//         view.find("img").attr("src", "./assets/img/test/80x100.png")
-//         $("#read-area").append(view);
-//     }
-
-// })
-
-// tmp.load('./sections/search-view.html');
-// $("#main-view").append(tmp.find("loader").html());
-// tmp.load('./sections/read-view.html');
-// $("#main-view").append(tmp.find("loader").html());
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/renderer-process/favorite-view.js b/renderer-process/favorite-view.js
deleted file mode 100644
index b616492..0000000
--- a/renderer-process/favorite-view.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- *      Favorite View
- *      favorite-view.js
- *
- *      See Also: ../sections/favorite-view.html,
- *      ../sections/favorite-entry.html,
- *      ./subscriber.js
- */
-
-const settings = require("electron-settings");
-
-
-module.exports = {
-    updateSubscribeUI: updateSubscribeUI,
-
-    // Binding functions
-    bindRegister: bindRegister,
-    bindSubscribe: bindSubscribe,
-    bindUnsubscribe: bindUnsubscribe,
-    bindSelectComic: bindSelectComic
-}
-
-/**
- * Action Binding
- */
-var register;
-var subscribe;
-var unsubscribe;
-var selectComic;
-
-function bindRegister(func) {
-    register = func;
-}
-
-function bindSubscribe(func) {
-    subscribe = func;
-}
-
-function bindUnsubscribe(func) {
-    unsubscribe = func;
-}
-
-function bindSelectComic(func) {
-    selectComic = func;
-}
-
-/**
- * Update subscription indicator UI
- */
-function updateSubscribeUI() {
-    $("#favorite-contents").html("");
-    var comics = settings.get("comic");
-
-    for (var host in comics) {
-        for (var titleKey in comics[host]) {
-            if (comics[host][titleKey].subscribed) {
-                var link = comics[host][titleKey].link;
-                var imguri = comics[host][titleKey].thumbnail;
-                var title = comics[host][titleKey].title;
-
-                var view = createFavEntry(link, titleKey, imguri, title, host);
-
-                if (comics[host][titleKey].hasupdate) {
-                    view.addClass("hasupdate");
-                }
-                $("#favorite-contents").append(view);
-            }
-        }
-    }
-
-}
-
-/**
- * Create a favorite entry HTML DOM object
- * @param {String} link      : link to comic
- * @param {String} titleKey  : title key store in settings
- * @param {String} imguri    : thumbnail's url
- * @param {String} title     : comic's name (human-readable)
- * @param {String} host      : host name
- */
-function createFavEntry(link, titleKey, imguri, title, host) {
-    var view = $(favEntryViewStr);
-    view.find("img").each(function(n, img) {
-            view.find(".thumb").css({
-                'background': '#fff url(' + imguri + ') center center no-repeat',
-                'background-size': 'cover'
-            });
-            img.remove();
-        });
-    view.find(".comic-name").text(title);
-    view.find(".host").text(host);
-    var lastread = settings.get("comic." + host + "." + titleKey + ".lastread");
-    var newest = settings.get("comic." + host + "." + titleKey + ".newestchapter");
-    view.find(".last-read").text(lastread);
-    view.find(".newest").text(newest)
-    view.attr("title", title);
-    view.attr("link", link);
-    view.attr("titlekey", titleKey);
-    view.attr("host", host);
-
-    view.find(".subscribe-btn").click(function(e){
-        e.stopPropagation();
-        console.log(host);
-        console.log(titleKey);
-        unsubscribe(host, titleKey);
-    });
-
-    view.click(function(e){
-        console.log("fav click:" + title + ", from:" + host);
-        selectComic(host, link, title, titleKey, imguri);
-
-    });
-
-    return view;
-}
-
-
-
-
-/**
- *      Initialized
- */
-
-function init () {
-    $.get('./sections/favorite-entry.html', function(result) {
-        favEntryViewStr = result;
-    })
-}
-
-// init when documen is ready
-function lateInit() {
-    // updateSubscribeUIStatus();
-}
-
-
-/**
- *      Main Script
- */
-
-init();
-$(document).ready(lateInit);
diff --git a/renderer-process/load-after.js b/renderer-process/load-after.js
index b91dc2a..0eac0a3 100644
--- a/renderer-process/load-after.js
+++ b/renderer-process/load-after.js
@@ -3,18 +3,18 @@
  */
 // const path = require('path');
 // 3rd party library
-var schedule = require('node-schedule');
+let schedule = require('node-schedule');
 
 // viewmodel
-var subscriber = require('./viewmodels/subscribe-viewmodel');
+let subscriber = require('./viewmodels/subscribe-viewmodel');
 
 // viewcontroller
-var viewswitch_viewcontroller = require('./viewcontrollers/view-switch-viewcontroller');
+let viewswitch_viewcontroller = require('./viewcontrollers/view-switch-viewcontroller');
 const isDev = require('electron-is-dev');
 
-var scheduledTask;
+let scheduledTask;
 $(document).ready(function() {
-    console.log(viewswitch_viewcontroller)
+    // console.log(viewswitch_viewcontroller)
     if (subscriber.hasSubscription()) {
         viewswitch_viewcontroller.tabswitch(viewswitch_viewcontroller.TAB_NAME.FAVORITE);
     } else {
diff --git a/renderer-process/parsers/8comic.js b/renderer-process/parsers/8comic.js
index 1728077..252c14e 100644
--- a/renderer-process/parsers/8comic.js
+++ b/renderer-process/parsers/8comic.js
@@ -35,9 +35,9 @@
  * 
  */
 
-var request = require("request");
+let request = require("request");
 const util = require("../util");
-var async = require('async');
+let async = require('async');
 
 module.exports = {
     search: search,
@@ -45,9 +45,9 @@ module.exports = {
     loadChapter: loadChapter
 }
 
-var host = "8comic";
-var searchuri = "http://8comic.se/搜尋結果/?w={search}";
-var baseuri = "http://8comic.se";
+let host = "8comic";
+let searchuri = "http://8comic.se/搜尋結果/?w={search}";
+let baseuri = "http://8comic.se";
 
 /**
  * Search comic books
@@ -67,10 +67,10 @@ var baseuri = "http://8comic.se";
  *          description {String}
  */
 function search(search_term, callback) {
-    // console.log(encodeURI(searchuri.replace("{search}", search_term)))
     request({
         method: "GET",
-        uri: encodeURI(searchuri.replace("{search}", search_term))
+        uri: encodeURI(searchuri.replace("{search}", search_term)),
+        timeout: 5000
     }, searchResponse.bind({callback:callback}));
 }
 
@@ -79,18 +79,19 @@ function search(search_term, callback) {
  * @param see npm request module
  */
 function searchResponse(error, response, body) {
-    // console.log(body);
-    var tmp = $("#post-35 .post-list-full", "<div>" + body + "</div>").find('.data a');
-    var result = [];
-    var callback = this.callback;
+    let tmp = $("#post-35", "<div>" + body + "</div>").find('.post-list-full .data a');
+    let result = [];
+    let callback = this.callback;
     async.each(tmp, function(e, callback1){
-        var title = $(e).text();
-        var link = baseuri + $(e).attr('href');
-        var rel_link = $(e).attr('href');
-        var titlekey = $(e).attr('href').substr(1, rel_link.length - 2);
+        let $e = $(e);
+        let title = $e.text();
+        let link = baseuri + $e.attr('href');
+        let rel_link = $e.attr('href');
+        let titlekey = $e.attr('href').substr(1, rel_link.length - 2);
         request({
             method: "GET",
-            uri: link
+            uri: link,
+            timeout: 5000
         }, onDetailInfoGet.bind({
             callback: callback1,
             link: link,
@@ -108,24 +109,26 @@ function searchResponse(error, response, body) {
     this.callback(result, host);
 }
 
+/**
+ * Since 8Comic's search result does not return detail information, we will
+ * need another GET request to get those information
+ * @param see npm request module
+ */
 function onDetailInfoGet(error, response, body) {
-    var tmp = $("#content table tr:first-child", "<div>" + body + "</div>");
-    // console.log(this.title);
-    // console.log(this.titleKey);
+    let tmp = $("#content", "<div>" + body + "</div>").find('table tr:first-child');
     
-    var imguri = tmp.find('img').attr('src');
-    var description = tmp.find('p').text().replace(/^\s+|\s+$/g, '');
-    // console.log(imgurl);
-    // console.log(description);
-
-    var obj = {};
-    obj.link = this.link;
-    obj.titlekey = this.titlekey;
-    obj.imguri = imguri;
-    obj.title = this.title;
-    obj.host = host;
-    obj.updateinfo = "";
-    obj.description = description;
+    let imguri = tmp.find('img').attr('src');
+    let description = tmp.find('p').text().replace(/^\s+|\s+$/g, '');
+
+    let obj = {
+        link: this.link,
+        titlekey: this.titlekey,
+        imguri: imguri,
+        title: this.title,
+        host: host,
+        updateinfo: "",
+        description: description
+    }
     this.result.push(obj);
 
     this.callback();
@@ -153,28 +156,33 @@ function onDetailInfoGet(error, response, body) {
 function grabChapters(titlekey, link, callback) {
     request({
         methos: 'GET',
-        uri: link
+        uri: link,
+        timeout: 5000
     }, onChapterGrabbed.bind({callback: callback, titlekey: titlekey}));
 }
 
+/**
+ * 
+ * @param see npm request module
+ */
 function onChapterGrabbed(error, response, body) {
-    var hostpath = response.request.host;
-    var tmp = $("#content table tr:nth-child(n+3):nth-last-child(n+1)", "<div>" + body + "</div>").find('td');
-    var result = [];
-    var newest = "";
-    var titlekey = this.titlekey;
+    let hostpath = response.request.host;
+    let tmp = $("#content", "<div>" + body + "</div>").find('table tr:nth-child(n+3):nth-last-child(n+1) td');
+    let result = [];
+    let newest = "";
+    let titlekey = this.titlekey;
     tmp.each(function(i, e){
-        if($(e).find('a').attr('href') == undefined) return;
-        var ch_name = $(e).find('a').text();
-        var ch_link = $(e).find('a').attr('href');
-        var ch_group = "cr_main";
-        var link_chunks = $(e).find('a').attr('href').split('/');
-        var lastIndex = link_chunks.length;
-        var domid = link_chunks[lastIndex-1] == ""? link_chunks[lastIndex-2]:link_chunks[lastIndex-1];
-        var ch_key = domid;
-        // console.log(chName + ":" + chLink + ":" + chGroup + ":" + domid);
-
-        var obj = {
+        let $e = $(e);
+        if($e.find('a').attr('href') == undefined) return;
+        let ch_name = $e.find('a').text();
+        let ch_link = $e.find('a').attr('href');
+        let ch_group = "cr_main";
+        let link_chunks = $e.find('a').attr('href').split('/');
+        let lastIndex = link_chunks.length;
+        let domid = link_chunks[lastIndex-1] == ""? link_chunks[lastIndex-2]:link_chunks[lastIndex-1];
+        let ch_key = domid;
+
+        let obj = {
             ch_name: ch_name,
             ch_link: ch_link,
             ch_group: ch_group,
@@ -184,10 +192,9 @@ function onChapterGrabbed(error, response, body) {
         };
         result.unshift(obj)
     });
-    for (var i = 0; i < result.length; i++) {
+    for (let i = 0; i < result.length; i++) {
         result[i].index = i;
     }
-    // console.log(result);
     newest = result[0].ch_name;
 
     this.callback(result, newest);
@@ -209,7 +216,8 @@ function onChapterGrabbed(error, response, body) {
 function loadChapter(ch_link, ch_group, ch_key, callback) {
     request({
         method: 'GET',
-        uri: ch_link
+        uri: ch_link,
+        timeout: 5000
     }, onSingleChapterLoaded.bind({callback:callback, ch_group: ch_group, ch_key: ch_key}))    
 
 }
@@ -221,21 +229,19 @@ function loadChapter(ch_link, ch_group, ch_key, callback) {
  * @param see npm request module
  */
 function onSingleChapterLoaded(error, response, body) {
-    // console.log(this.chKey);
-    var tmp = $("<div>" + body + "</div>");
-    var find_script = tmp.find('#pull option:nth-child(2)').attr('value').split("'");
-    var chapters_num = find_script[1];
-    var num_pages = find_script[3];
-    var img_template = tmp.find("#caonima").attr("src");
-    console.log(img_template);
-    var pid = '/' + chapters_num + '/';
-    var img = img_template.split(pid);
-    var result = [];
-    for (var i = 1; i <= num_pages; i++) {
-        var src = img[0] + pid + util.pad(i, 3) + '.jpg'; 
-        // console.log(src);
-        var id = 'pic' + i;
-        var obj = {
+    let tmp = $("<div>" + body + "</div>");
+    let find_script = tmp.find('#pull').find('option:nth-child(2)').attr('value').split("'");
+    let chapters_num = find_script[1];
+    let num_pages = find_script[3];
+    let img_template = tmp.find("#caonima").attr("src");
+    
+    let pid = '/' + chapters_num + '/';
+    let img = img_template.split(pid);
+    let result = [];
+    for (let i = 1; i <= num_pages; i++) {
+        let src = img[0] + pid + util.pad(i, 3) + '.jpg'; 
+        let id = 'pic' + i;
+        let obj = {
             imgurl: src,
             id: id,
             idx: i-1
diff --git a/renderer-process/parsers/dm5.js b/renderer-process/parsers/dm5.js
index 007737d..89547cc 100644
--- a/renderer-process/parsers/dm5.js
+++ b/renderer-process/parsers/dm5.js
@@ -35,18 +35,18 @@
  * 
  */
 
-var request = require("request");
+let request = require("request");
 const util = require("../util");
-var async = require('async');
+let async = require('async');
 
 module.exports = {
     search: search,
     grabChapters: grabChapters,
     loadChapter: loadChapter
 }
-var host = "dm5";
-var searchuri = "http://www.dm5.com/search?title={search}&language=1";
-var baseuri = "http://www.dm5.com/";
+let host = "dm5";
+let searchuri = "http://www.dm5.com/search?title={search}&language=1";
+let baseuri = "http://www.dm5.com/";
 
 /**
  * Search comic books
@@ -66,7 +66,6 @@ var baseuri = "http://www.dm5.com/";
  *          description {String}
  */
 function search(search_term, callback) {
-    // console.log(encodeURI(searchuri.replace("{search}", search_term)))
     request({
         method: "GET",
         uri: encodeURI(searchuri.replace("{search}", search_term)),
@@ -75,7 +74,8 @@ function search(search_term, callback) {
 			'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
 			'Accept-Language': 'en-US,en;q=0.8,zh-TW;q=0.6,zh;q=0.4,ja;q=0.2',
             cookie: 'isAdult=1'
-        }
+        },
+        timeout: 5000
     }, searchResponse.bind({callback:callback}));
 }
 
@@ -84,31 +84,27 @@ function search(search_term, callback) {
  * @param see npm request module
  */
 function searchResponse(error, response, body) {
-    // console.log(body);
-    // var tmp2 = $("<div>" + body + "</div>");
-    // console.log(tmp2.html());
-    var tmp = $(".container .midBar .item", "<div>" + body + "</div>");
-    // console.log (tmp);
-    var result = [];
-    var callback = this.callback;
+    let tmp = $(".container .midBar .item", "<div>" + body + "</div>");
+    let result = [];
+    let callback = this.callback;
     async.each(tmp, function(e, callback1){
-        var title = $(e).find('a.title').text();
-        // console.log(title);
-        var rel_link = $(e).find('a.title').attr('href');
-        var titlekey = rel_link.substring(1, rel_link.length - 2);
-        var link = baseuri + rel_link;
-        var imguri = $(e).find('img').attr('src');
-        var updateinfo = "作者：" + $(e).find('dt>a:first-of-type').text();
-        // console.log(updateinfo);
-        var description = $(e).find('.info .value').text().replace(/^\s+|\s+$/g, '');
-        var obj = {};
-        obj.link = link;
-        obj.titlekey = titlekey;
-        obj.imguri = imguri;
-        obj.title = title;
-        obj.host = host;
-        obj.updateinfo = updateinfo;
-        obj.description = description;
+        let $e = $(e);
+        let title = $e.find('a.title').text();
+        let rel_link = $e.find('a.title').attr('href');
+        let titlekey = rel_link.substring(1, rel_link.length - 2);
+        let link = baseuri + rel_link;
+        let imguri = $e.find('img').attr('src');
+        let updateinfo = "作者：" + $e.find('dt>a:first-of-type').text();
+        let description = $(e).find('.info .value').text().replace(/^\s+|\s+$/g, '');
+        let obj = {
+            link: link,
+            titlekey: titlekey,
+            imguri: imguri,
+            title: title,
+            host: host,
+            updateinfo: updateinfo,
+            description: description
+        }
         result.push(obj);
         callback1();
     }, function () {
@@ -116,7 +112,6 @@ function searchResponse(error, response, body) {
         callback(result, host);
     });
 
-    // this.callback(result, host);
 }
 
 
@@ -147,32 +142,33 @@ function grabChapters(titlekey, link, callback) {
 			'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
 			'Accept-Language': 'en-US,en;q=0.8,zh-TW;q=0.6,zh;q=0.4,ja;q=0.2',
             cookie: 'isAdult=1'
-        }
+        },
+        timeout: 5000
     }, onChapterGrabbed.bind({callback: callback, titlekey: titlekey}));
 }
 
+/**
+ * 
+ * @param see npm request module
+ */
 function onChapterGrabbed(error, response, body) {
-    // var hostpath = response.request.host;
-    var tmp = $("<div>" + body + "</div>").find('[id^=cbc] li a');
-    var result = [];
-    var result_keys = {};
-    var newest = "";
-    var titlekey = this.titlekey;
+    // let hostpath = response.request.host;
+    let tmp = $("<div>" + body + "</div>").find('[id^=cbc] li a');
+    let result = [];
+    let result_keys = {};
+    let newest = "";
+    let titlekey = this.titlekey;
     tmp.each(function(i, e){
         if($(e).attr('href') == undefined) return;
-        var ch_name = $(e).text().replace(/.*(?:漫畫|漫画)\s*/g, '');
-        // console.log(ch_name);
-        var rel_link = $(e).attr('href');
+        let ch_name = $(e).text().replace(/.*(?:漫畫|漫画)\s*/g, '');
+        let rel_link = $(e).attr('href');
         if (rel_link.includes("javascript")) return;
-        var ch_link = baseuri + rel_link;
-        var ch_group = "cr_main";
-    //     var link_chunks = $(e).find('a').attr('href').split('/');
-    //     var lastIndex = link_chunks.length;
+        let ch_link = baseuri + rel_link;
+        let ch_group = "cr_main";
         
-        var domid = rel_link.replace(/\//g, '');
-        var ch_key = domid;
-    //     // console.log(chName + ":" + chLink + ":" + chGroup + ":" + domid);
-        var obj = {
+        let domid = rel_link.replace(/\//g, '');
+        let ch_key = domid;
+        let obj = {
             ch_name: ch_name,
             ch_link: ch_link,
             ch_group: ch_group,
@@ -180,7 +176,6 @@ function onChapterGrabbed(error, response, body) {
             domid: domid,
             index: i
         };
-        // console.log(ch_name + ":" + i + ":" + ch_key);
         if (ch_key in result_keys) {
 
         } else {
@@ -188,11 +183,6 @@ function onChapterGrabbed(error, response, body) {
             result_keys[ch_key] = true;
         }
     });
-    // for(var i = 0; i < result.length; i++) {
-    //     result[i].index = i;
-    // }
-    // console.log(this.titlekey)
-    // console.log(result);
     newest = result[0].ch_name;
 
     this.callback(result, newest);
@@ -220,7 +210,8 @@ function loadChapter(ch_link, ch_group, ch_key, callback) {
 			'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
 			'Accept-Language': 'en-US,en;q=0.8,zh-TW;q=0.6,zh;q=0.4,ja;q=0.2',
             cookie: 'isAdult=1'
-        }
+        },
+        timeout: 5000
     }, onSingleChapterLoaded.bind({callback:callback, ch_group: ch_group, ch_key: ch_key}))    
 
 }
@@ -232,21 +223,18 @@ function loadChapter(ch_link, ch_group, ch_key, callback) {
  * @param see npm request module
  */
 function onSingleChapterLoaded(error, response, body) {
-    var doc = body;
-    // console.log(body);
-    var tmp = $("<div>" + body + "</div>");
-    // console.log(body);
-    var script1=/<script type\=\"text\/javascript\">(.*)reseturl/.exec(body)[1];
+    let doc = body;
+    let tmp = $("<div>" + body + "</div>");
+    let script1=/<script type\=\"text\/javascript\">(.*)reseturl/.exec(body)[1];
 	eval(script1);
     
 
-    var url = response.request.href;
-    // console.log(DM5_IMAGE_COUNT);
-    var callback = this.callback;
-    var ch_group = this.ch_group;
-    var ch_key = this.ch_key;
+    let url = response.request.href;
+    let callback = this.callback;
+    let ch_group = this.ch_group;
+    let ch_key = this.ch_key;
     async.times(DM5_IMAGE_COUNT, function(n, next) {
-        var src = baseuri + "chapterfun.ashx?cid=" + DM5_CID.toString() + "&page=" + (n + 1) + "&key=&language=1";
+        let src = baseuri + "chapterfun.ashx?cid=" + DM5_CID.toString() + "&page=" + (n + 1) + "&key=&language=1";
         request({
             method: 'GET',
             uri: src,
@@ -255,15 +243,16 @@ function onSingleChapterLoaded(error, response, body) {
                 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
                 'Accept-Language': 'en-US,en;q=0.8,zh-TW;q=0.6,zh;q=0.4,ja;q=0.2',
                 cookie: 'isAdult=1'
-            }
+            },
+            timeout: 5000
         }, function(error, response, body){
-            var images = eval(body);
+            let images = eval(body);
             if (images == undefined) {
                 next(null, null);
                 return;
             }
-            var id = 'pic' + n;
-            var obj = {
+            let id = 'pic' + n;
+            let obj = {
                 imgurl: images[0],
                 id: id,
                 idx: n
@@ -271,7 +260,6 @@ function onSingleChapterLoaded(error, response, body) {
             next(null, obj);
         })
     },function(err, result) {
-        // console.log(images);
         callback(result, ch_group, ch_key);
     })
    
diff --git a/renderer-process/parsers/readcomicbooksonline.js b/renderer-process/parsers/readcomicbooksonline.js
index 29581d4..e120801 100644
--- a/renderer-process/parsers/readcomicbooksonline.js
+++ b/renderer-process/parsers/readcomicbooksonline.js
@@ -35,13 +35,13 @@
  * 
  */
 
-var requestModule = require("request");
+let requestModule = require("request");
 const util = require("../util");
-var async = require('async');
-var jar = requestModule.jar();
+let async = require('async');
+let jar = requestModule.jar();
 
 
-var request = requestModule.defaults({jar: jar});
+let request = requestModule.defaults({jar: jar});
 
 
 module.exports = {
@@ -49,9 +49,9 @@ module.exports = {
     grabChapters: grabChapters,
     loadChapter: loadChapter
 }
-var host = "read-comicbooks-online";
-var searchuri = "http://readcomicbooksonline.net/search/node/{search}";
-var baseuri = "http://readcomicbooksonline.net";
+let host = "read-comicbooks-online";
+let searchuri = "http://readcomicbooksonline.net/search/node/{search}";
+let baseuri = "http://readcomicbooksonline.net";
 
 /**
  * Search comic books
@@ -71,10 +71,10 @@ var baseuri = "http://readcomicbooksonline.net";
  *          description {String}
  */
 function search(search_term, callback) {
-    // console.log(encodeURI(searchuri.replace("{search}", search_term)))
     request({
         method: "GET",
-        uri: encodeURI(searchuri.replace("{search}", search_term))
+        uri: encodeURI(searchuri.replace("{search}", search_term)),
+        timeout: 5000
     }, searchResponse.bind({callback:callback}));
 }
 
@@ -83,45 +83,31 @@ function search(search_term, callback) {
  * @param see npm request module
  */
 function searchResponse(error, response, body) {
-    // console.log(body);
-    // // var tmp2 = $("<div>" + body + "</div>");
-    // // console.log(tmp2.html());
-    var tmp = $("#block-system-main", "<div>" + body + "</div>").find(".search-result");
-    console.log (tmp);
-    var result = [];
-    var callback = this.callback;
+    let tmp = $("#block-system-main", "<div>" + body + "</div>").find(".search-result");
+    let result = [];
+    let callback = this.callback;
     async.each(tmp, function(e, callback1){
-        console.log(e);
         let titleinfo = e.querySelector(".title");
         let title = titleinfo.textContent.replace(/^\s+|\s+$/g, '');
-        // console.log(title);
-        var link = titleinfo.querySelector('a').getAttribute('href');
-        var titlekey = link.substr(link.lastIndexOf('/') + 1);
-        // console.log(titlekey);
-    //     var imguri = $(e).find('img').attr('src');
-    //     var updateinfo = "作者：" + $(e).find('dt>a:first-of-type').text();
-    //     // console.log(updateinfo);
-    //     var description = $(e).find('.info .value').text().replace(/^\s+|\s+$/g, '');
-        var obj = {};
-        obj.link = link;
-        obj.titlekey = titlekey;
-        // obj.imguri = imguri;
-        obj.title = title;
-        obj.host = host;
-    //     obj.updateinfo = updateinfo;
-    //     obj.description = description;
+        let link = titleinfo.querySelector('a').getAttribute('href');
+        let titlekey = link.substr(link.lastIndexOf('/') + 1);
+        let obj = {
+            link: link,
+            titlekey: titlekey,
+            title: title,
+            host: host
+        }
         request({
             method: "GET",
-            uri: link
+            uri: link,
+            timeout: 5000
         }, onDetailInfoGet.bind({
             callback: callback1,
             obj: obj,
             result: result
         }));
-        // result.push(obj);
-        // callback1();
     }, function () {
-        console.log("All Search dm5 done");
+        console.log("All Search readcomicbooksonline done");
         callback(result, host);
     });
 
@@ -129,9 +115,7 @@ function searchResponse(error, response, body) {
 }
 
 function onDetailInfoGet(error, response, body) {
-    // console.log(response);
-    var tmp = $("#infoblock", "<div>" + body + "</div>");
-    console.log(tmp);
+    let tmp = $("#infoblock", "<div>" + body + "</div>");
     this.obj.imguri = baseuri + tmp.find('img').attr('src');
     this.obj.updateinfo = tmp.find("#statsblock").find('tr:nth-child(4) .info').text();
     this.obj.description = tmp.find("#summary").children().remove().end().text();
@@ -162,34 +146,34 @@ function grabChapters(titlekey, link, callback) {
     request({
         methos: 'GET',
         uri: link,
+        timeout: 5000
     }, onChapterGrabbed.bind({callback: callback, titlekey: titlekey}));
 }
 
+/**
+ * 
+ * @param see npm request module
+ */
 function onChapterGrabbed(error, response, body) {
-    var hostpath = response.request.host;
-    var tmp = $("#chapterlist", "<div>" + body + "</div>").find(".chapter");
-    // console.log(tmp);
-    // var tmp = $("<div>" + body + "</div>").find('[id^=cbc] li a');
-    var comic_title = $("#content-wrap", "<div>" + body + "</div>").find(".page-title").text();
-    var comic_title_alt = comic_title.replace(/[^\w\s]/gi, '');
-console.log(comic_title);
-    var result = [];
-    var result_keys = {};
-    var newest = "";
-    var titlekey = this.titlekey;
+    let hostpath = response.request.host;
+    let tmp = $("#chapterlist", "<div>" + body + "</div>").find(".chapter");
+    let comic_title = $("#content-wrap", "<div>" + body + "</div>").find(".page-title").text();
+    let comic_title_alt = comic_title.replace(/[^\w\s]/gi, '');
+    let result = [];
+    let result_keys = {};
+    let newest = "";
+    let titlekey = this.titlekey;
     tmp.each(function(i, e){
-        // console.log(e);
-        var ch_name = $(e).text().replace(comic_title, '');
+        let $e = $(e);
+        let ch_name = $e.text().replace(comic_title, '');
         ch_name = ch_name.replace(comic_title_alt, "");
 
-        var ch_link = $(e).find('a').attr("href");
-        var ch_group = "cr_main";
+        let ch_link = $e.find('a').attr("href");
+        let ch_group = "cr_main";
 
-        var ch_key = ch_link.substr(ch_link.lastIndexOf('/') + 1).replace(/[^\w\s]/gi, '');;
-        var domid = ch_key;
-    //     var ch_key = domid;
-        // console.log(ch_name + ":" + ch_link + ":" + ch_group + ":" + domid + ":" + ch_key);
-        var obj = {
+        let ch_key = ch_link.substr(ch_link.lastIndexOf('/') + 1).replace(/[^\w\s]/gi, '');;
+        let domid = ch_key;
+        let obj = {
             ch_name: ch_name,
             ch_link: ch_link,
             ch_group: ch_group,
@@ -221,7 +205,8 @@ console.log(comic_title);
 function loadChapter(ch_link, ch_group, ch_key, callback) {
     request({
         method: 'GET',
-        uri: ch_link
+        uri: ch_link,
+        timeout: 5000
     }, onSingleChapterLoaded.bind({callback:callback, ch_group: ch_group, ch_key: ch_key}))    
 
 }
@@ -233,22 +218,17 @@ function loadChapter(ch_link, ch_group, ch_key, callback) {
  * @param see npm request module
  */
 function onSingleChapterLoaded(error, response, body) {
-    // var doc = body;
-    // console.log(body);
-    console.log(response.request.href);
-    var tmp = $("<div>" + body + "</div>");
-    var omv = tmp.find("#omv");
-    var num_pages = omv.find(".pager:first-child select:nth-child(2) option").length;
-    var rel_img_url_template = omv.find(".picture").attr("src");
-    // console.log(num_pages)
-    // console.log(rel_img_url_template);
-    var result = [];
-    var callback = this.callback;
-    var ch_group = this.ch_group;
-    var ch_key = this.ch_key;
+    let tmp = $("<div>" + body + "</div>");
+    let omv = tmp.find("#omv");
+    let num_pages = omv.find(".pager:first-child select:nth-child(2) option").length;
+    let rel_img_url_template = omv.find(".picture").attr("src");
+    let result = [];
+    let callback = this.callback;
+    let ch_group = this.ch_group;
+    let ch_key = this.ch_key;
     async.times(num_pages, function(i, next) {
-        var rel_img_url = rel_img_url_template.replace(/(\d*)(\.jpg|\.png)$/g, util.pad(i+1, 3) + "$2");
-        var img_url = baseuri + "/reader/" + rel_img_url;
+        let rel_img_url = rel_img_url_template.replace(/(\d*)(\.jpg|\.png)$/g, util.pad(i+1, 3) + "$2");
+        let img_url = baseuri + "/reader/" + rel_img_url;
         request({
             method:'GET',
             uri: img_url,
@@ -256,15 +236,12 @@ function onSingleChapterLoaded(error, response, body) {
                 Referer: 'http://readcomicbooksonline.net/reader/',
                 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
                 cookie: 'has_js=1'
-            }
+            },
+            timeout: 5000
 
         }, function(error, response, body) {
-            // console.log(error);
-            // console.log(response);
-            // console.log(body);
-            // console.log(rel_img_url);
-            var id = "pic" + i;
-            var obj = {
+            let id = "pic" + i;
+            let obj = {
                 imgurl: img_url,
                 id: id,
                 idx: i
diff --git a/renderer-process/parsers/sfacg.js b/renderer-process/parsers/sfacg.js
index 62ac235..04c0493 100644
--- a/renderer-process/parsers/sfacg.js
+++ b/renderer-process/parsers/sfacg.js
@@ -35,7 +35,7 @@
  * 
  */
 
-var request = require("request");
+let request = require("request");
 const util = require("../util");
 
 
@@ -45,8 +45,8 @@ module.exports = {
     loadChapter: loadChapter
 }
 
-var host = "sfacg";
-var searchuri = "http://s.sfacg.com/?Key={search}&S=0&SS=0";
+let host = "sfacg";
+let searchuri = "http://s.sfacg.com/?Key={search}&S=0&SS=0";
 
 
 /**
@@ -69,7 +69,8 @@ var searchuri = "http://s.sfacg.com/?Key={search}&S=0&SS=0";
 function search(search_term, callback) {
     request({
         method: "GET",
-        uri: searchuri.replace("{search}", util.toUnicode(search_term))
+        uri: searchuri.replace("{search}", util.toUnicode(search_term)),
+        timeout: 5000
     }, searchResponse.bind({callback:callback}));
 }
 
@@ -78,26 +79,27 @@ function search(search_term, callback) {
  * @param see npm request module
  */
 function searchResponse(error, response, body) {
-    var tmp = $("#form1", "<div>" + body + "</div>").find("table:nth-of-type(5)");
-    var result = [];
+    let tmp = $("#form1", "<div>" + body + "</div>").find("table:nth-of-type(5)");
+    let result = [];
     tmp.find("ul").each(function(i, e){
-        var imguri = $(e).find("li:first-child img").attr("src");
-        // console.log(imguri);
-        var title = $(e).find("li:nth-child(2)").find("a").text();
-        var link = $(e).find("li:nth-child(2)").find("a").attr("href");
-        var info = $(e).find("li:nth-child(2)").text().split("\n");
+        let $e = $(e);
+        let imguri = $e.find("li:first-child img").attr("src");
+        let title = $e.find("li:nth-child(2)").find("a").text();
+        let link = $e.find("li:nth-child(2)").find("a").attr("href");
+        let info = $e.find("li:nth-child(2)").text().split("\n");
         $.map(info, $.trim);
-        var updateinfo = info[1];
-        var description = info.splice(2).join('\n').trim();
-        var titlekey = link.substr(link.lastIndexOf('/') + 1);
-        var obj = {};
-        obj.link = link;
-        obj.titlekey = titlekey;
-        obj.imguri = imguri;
-        obj.title = title;
-        obj.host =host;
-        obj.updateinfo = updateinfo;
-        obj.description = description;
+        let updateinfo = info[1];
+        let description = info.splice(2).join('\n').trim();
+        let titlekey = link.substr(link.lastIndexOf('/') + 1);
+        let obj = {
+            link: link,
+            titlekey: titlekey,
+            imguri: imguri,
+            title: title,
+            host: host,
+            updateinfo: updateinfo,
+            description: description
+        }
         result.push(obj);
     });
 
@@ -125,24 +127,29 @@ function searchResponse(error, response, body) {
 function grabChapters(titlekey, link, callback) {
     request({
         methos: 'GET',
-        uri: link
+        uri: link,
+        timeout: 5000
     }, onChapterGrabbed.bind({callback: callback, titlekey: titlekey}));
 }
 
+/**
+ * 
+ * @param see npm request module
+ */
 function onChapterGrabbed(error, response, body) {
-    var hostpath = response.request.host;
-    var tmp = $("table:nth-of-type(9)", "<div>" + body + "</div>").find("ul.serialise_list.Blue_link2");
-    var result = [];
-    var newest = "";
-    var titlekey = this.titlekey;
+    let hostpath = response.request.host;
+    let tmp = $("table:nth-of-type(9)", "<div>" + body + "</div>").find("ul.serialise_list.Blue_link2");
+    let result = [];
+    let newest = "";
+    let titlekey = this.titlekey;
     tmp.find("li").each(function(i, e) {
-        var ch_name = $(e).text();
-        var ch_link = "http://" + hostpath + $(e).find('a').attr('href');
-        var domid = "chapter" + i;
-        var ch_group = "";
-        var ch_key = "";
-        var link_chunks = ch_link.split("/");
-        // console.log(linkChunks[linkChunks.length - 3] + ":" + titleKey);
+        let $e = $(e);
+        let ch_name = $e.text();
+        let ch_link = "http://" + hostpath + $e.find('a').attr('href');
+        let domid = "chapter" + i;
+        let ch_group = "";
+        let ch_key = "";
+        let link_chunks = ch_link.split("/");
         if (link_chunks[link_chunks.length - 3] == titlekey) {
             ch_group = "cr_main";
             ch_key = link_chunks[link_chunks.length - 2];
@@ -154,7 +161,7 @@ function onChapterGrabbed(error, response, body) {
             ch_key = link_chunks[link_chunks.length - 2];
         }
 
-        var obj = {
+        let obj = {
             ch_name: ch_name,
             ch_link: ch_link,
             ch_group: ch_group,
@@ -184,7 +191,8 @@ function onChapterGrabbed(error, response, body) {
 function loadChapter(ch_link, ch_group, ch_key, callback) {
     request({
         method: 'GET',
-        uri: ch_link
+        uri: ch_link,
+        timeout: 5000
     }, onSingleChapterLoaded.bind({callback:callback, ch_group: ch_group, ch_key: ch_key}))    
 
 }
@@ -194,12 +202,13 @@ function loadChapter(ch_link, ch_group, ch_key, callback) {
  * @param see npm request module
  */
 function onSingleChapterLoaded(error, response, body) {
-    var tmp = $("<div>" + body + "</div>");
-    var scripts = tmp.find("script").eq(1).attr("src");
-    var hostpath = response.request.host;
+    let tmp = $("<div>" + body + "</div>");
+    let scripts = tmp.find("script").eq(1).attr("src");
+    let hostpath = response.request.host;
     request({
         method: 'GET',
-        uri: "http://" + hostpath + scripts
+        uri: "http://" + hostpath + scripts,
+        timeout: 5000
     }, utilParser.bind({callback:this.callback, ch_group: this.ch_group, ch_key: this.ch_key}));
 }
 
@@ -213,14 +222,14 @@ function onSingleChapterLoaded(error, response, body) {
  * @param see npm request module
  */
 function utilParser (error, response, body) {
-    var host = response.request.host;
+    let host = response.request.host;
     eval(body);
-    var pichost = hosts[0];
-    var result = [];
+    let pichost = hosts[0];
+    let result = [];
     for(idx in picAy) {
         imgurl = "http://" + host+picAy[idx];
-        var id = "pic" + idx;
-        var obj = {
+        let id = "pic" + idx;
+        let obj = {
             imgurl: imgurl,
             id: id,
             idx: idx
diff --git a/renderer-process/util.js b/renderer-process/util.js
index f325acc..3de56ac 100644
--- a/renderer-process/util.js
+++ b/renderer-process/util.js
@@ -1,9 +1,3 @@
-module.exports = {
-    toUnicode : toUnicode,
-    pad: pad,
-    getSelected: getSelected
-}
-
 /**
  * Convert an input string to Unicode format
  * @param {String} str
@@ -11,8 +5,8 @@ module.exports = {
  * @return {String} string in unicode format
  */
 function toUnicode(str, header="%u"){
-    var result = "";
-    for(var i = 0; i < str.length; i++){
+    let result = "";
+    for(let i = 0; i < str.length; i++){
         // Assumption: all characters are < 0xffff
         result += header + ("000" + str[i].charCodeAt(0).toString(16)).substr(-4);
     }
@@ -21,7 +15,7 @@ function toUnicode(str, header="%u"){
 
 
 function pad(num, size) {
-    var s = "000000000" + num;
+    let s = "000000000" + num;
     return s.substr(s.length-size);
 }
 
@@ -29,14 +23,15 @@ function getSelected() {
     if (window.getSelection) {
         return window.getSelection().toString();
     }
-    // } else if (document.getSelection) {
-    //     return document.getSelection().toString();
-    // } else {
-    //     var selection = document.selection && document.selection.createRange();
-    //     if (selection.text) {
-    //         return selection.text.toString();
-    //     }
-    //     return "";
-    // }
+
     return "";
 }
+
+/**
+ *      Interface
+ */
+module.exports = {
+    toUnicode : toUnicode,
+    pad: pad,
+    getSelected: getSelected
+}
diff --git a/renderer-process/viewcontrollers/about-viewcontroller.js b/renderer-process/viewcontrollers/about-viewcontroller.js
index 503c6ec..1118bb6 100644
--- a/renderer-process/viewcontrollers/about-viewcontroller.js
+++ b/renderer-process/viewcontrollers/about-viewcontroller.js
@@ -1,13 +1,13 @@
 const ipc = require('electron').ipcRenderer;
-var pjson = require('../../package.json');
+let pjson = require('../../package.json');
 
 function lateInit() {
     $("#update-btn").click(function(e) {
-            console.log("check update click");
+            // console.log("check update click");
             ipc.send('check-for-update');
         }
     );
-    var about_view = $("#about-view");
+    let about_view = $("#about-view");
     about_view.find(".app-name").text(pjson.productName)
     about_view.find(".description").text(pjson.description);
     about_view.find(".version").text(pjson.version);
diff --git a/renderer-process/viewcontrollers/favorite-viewcontroller.js b/renderer-process/viewcontrollers/favorite-viewcontroller.js
index bf332dc..7169c5d 100644
--- a/renderer-process/viewcontrollers/favorite-viewcontroller.js
+++ b/renderer-process/viewcontrollers/favorite-viewcontroller.js
@@ -8,28 +8,21 @@
  */
 const util = require('../util');
 const EA = require('electron-analytics');
+let fs = require('fs');
 
-module.exports = {
-    updateSubscribeUI: updateSubscribeUI,
-
-    // Binding functions
-    bindRegister: bindRegister,
-    bindSubscribe: bindSubscribe,
-    bindUnsubscribe: bindUnsubscribe,
-    bindSelectComic: bindSelectComic
-}
-//
-
-var favorite_entry_template_str = "";
-var favorite_empty_template_str = "";
+/**
+ * HTML String template
+ */
+const favorite_entry_template_str = fs.readFileSync(__dirname + '/../../sections/favorite-entry.html', 'utf-8');
+const favorite_empty_template_str = fs.readFileSync(__dirname + '/../../sections/favorite-empty.html', 'utf-8');
 
 /**
  * Action Binding
  */
-var registerFunc;
-var subscribeFunc;
-var unsubscribeFunc;
-var selectComicFunc;
+let registerFunc;
+let subscribeFunc;
+let unsubscribeFunc;
+let selectComicFunc;
 
 function bindRegister(func) {
     registerFunc = func;
@@ -54,16 +47,16 @@ function updateSubscribeUI(all_comic_data, has_subscription = true) {
     $("#favorite-contents").html("");
 
     if (has_subscription) {
-        for (var host in all_comic_data) {
-            for (var titlekey in all_comic_data[host]) {
-                var comic_data = all_comic_data[host][titlekey];
+        for (let host in all_comic_data) {
+            for (let titlekey in all_comic_data[host]) {
+                let comic_data = all_comic_data[host][titlekey];
                 if (comic_data.subscribed) {
-                    var link = comic_data.link;
-                    var imguri = comic_data.thumbnail;
-                    var title = comic_data.title;
-                    var lastread = comic_data.lastread;
-                    var newest = comic_data.newestchapter;
-                    var view = createFavEntry(link, titlekey, imguri, title, host, lastread, newest);
+                    let link = comic_data.link;
+                    let imguri = comic_data.thumbnail;
+                    let title = comic_data.title;
+                    let lastread = comic_data.lastread;
+                    let newest = comic_data.newestchapter;
+                    let view = createFavEntry(link, titlekey, imguri, title, host, lastread, newest);
 
                     if (all_comic_data[host][titlekey].hasupdate) {
                         view.addClass("hasupdate");
@@ -73,7 +66,7 @@ function updateSubscribeUI(all_comic_data, has_subscription = true) {
             }
         }
     } else {
-        var view = $(favorite_empty_template_str);
+        let view = $(favorite_empty_template_str);
         $("#favorite-contents").append(view);
     }
 
@@ -88,7 +81,7 @@ function updateSubscribeUI(all_comic_data, has_subscription = true) {
  * @param {String} host      : host name
  */
 function createFavEntry(link, titlekey, imguri, title, host, lastread, newest)  {
-    var view = $(favorite_entry_template_str);
+    let view = $(favorite_entry_template_str);
     view.find("img").each(function(n, img) {
             view.find(".thumb").css({
                 'background': '#fff url(' + imguri + ') center center no-repeat',
@@ -108,16 +101,12 @@ function createFavEntry(link, titlekey, imguri, title, host, lastread, newest)
     view.find(".subscribe-btn").click(function(e){
         EA.send("MOUSE_CLICKED_FAVORITE_SUBSCRIBE"); 
         e.stopPropagation();
-        console.log(host);
-        console.log(titlekey);
         unsubscribeFunc(host, titlekey);
     });
 
     view.click(function(e){
         EA.send("MOUSE_CLICKED_FAVORITE_ENTRY"); 
-        // console.log("fav click:" + title + ", from:" + host);
-        var sel = util.getSelected().toString();
-        // console.log(sel);
+        let sel = util.getSelected().toString();
         if (sel === '') {
             selectComicFunc(host, link, title, titlekey, imguri);
         }
@@ -136,18 +125,10 @@ function createFavEntry(link, titlekey, imguri, title, host, lastread, newest)
  */
 
 function init () {
-    $.get('./sections/favorite-entry.html', function(result) {
-        favorite_entry_template_str = result;
-    })
-
-    $.get('./sections/favorite-empty.html', function(result) {
-        favorite_empty_template_str = result;
-    })
 }
 
 // init when documen is ready
 function lateInit() {
-    // updateSubscribeUIStatus();
 }
 
 
@@ -157,3 +138,17 @@ function lateInit() {
 
 init();
 $(document).ready(lateInit);
+
+/**
+ *      Interface
+ */
+module.exports = {
+    updateSubscribeUI: updateSubscribeUI,
+
+    // Binding functions
+    bindRegister: bindRegister,
+    bindSubscribe: bindSubscribe,
+    bindUnsubscribe: bindUnsubscribe,
+    bindSelectComic: bindSelectComic
+}
+//
\ No newline at end of file
diff --git a/renderer-process/viewcontrollers/read-viewcontroller.js b/renderer-process/viewcontrollers/read-viewcontroller.js
index fbe3194..99fca0c 100644
--- a/renderer-process/viewcontrollers/read-viewcontroller.js
+++ b/renderer-process/viewcontrollers/read-viewcontroller.js
@@ -8,69 +8,34 @@
  *      ./comic-parser.js
  */
 const EA = require('electron-analytics');
-
-module.exports = {
-    // create new elements
-    createChapterEntry: createChapterEntry,
-    createComicPage: createComicPage,
-    createLastpageNotice: createLastpageNotice,
-
-    // append to the screen
-    appendNewPage: appendNewPage,
-    appendNewChapter: appendNewChapter,
-
-    // UI update / clear
-    updateSubscribeUI: updateSubscribeUI,
-    clearReadArea: clearReadArea,
-    clearChapterSelector: clearChapterSelector,
-    toggleLoadingAnimation: toggleLoadingAnimation,
-    scrollToPage: scrollToPage,
-    selectChapter: selectChapter,
-    showToolTips: showToolTips,
-
-    // Action Binding
-    bindSubscribe: bindSubscribe,
-    bindSelectChapter: bindSelectChapter,
-
-    // Getter / Setter
-    getChIdx: function() {return current_chapter_idx},
-    getCurHost: function() {return current_host},
-    getCurTitleKey: function() {return current_titlekey},
-    setPageIds: function(x) { page_id_list = x},
-    getChapterList: function() { return chapter_list },
-    setChapterList: function(x) { chapter_list = x},
-    getCurrentChapterKey: function () {return current_chapter_key},
-    setCurrentComic: setCurrentComic,
-    getCurrentPageIdx: getCurrentPageIdx,
-    updateChapterList: updateChapterList
-}
+let fs = require('fs');
 
 /**
  *      Variable Defintion
  */
 // HTML DOM Template
-var chapter_entry_template_str = "";
-var page_container_template_str = "";
-var lastpage_notice_template_str = "";
+const chapter_entry_template_str = fs.readFileSync(__dirname + '/../../sections/chapter-entry.html', 'utf-8');
+const page_container_template_str = fs.readFileSync(__dirname + '/../../sections/page.html', 'utf-8');
+const lastpage_notice_template_str = fs.readFileSync(__dirname + '/../../sections/lastpagenotice-view.html', 'utf-8');
 
 // Binded Function
-var subscribeFunc;
-var selectChapterFunc;
+let subscribeFunc;
+let selectChapterFunc;
 
 // Info
-var current_host = "";
-var current_titlekey = "";
-var current_title = "";
-var current_link = "";
-var current_imguri = "";
+let current_host = "";
+let current_titlekey = "";
+let current_title = "";
+let current_link = "";
+let current_imguri = "";
 
-var page_id_list = [];
-var chapter_list = [];
-var current_page_idx = 0;
-var current_chapter_idx = -1;
-var current_chapter_key = "";
+let page_id_list = [];
+let chapter_list = [];
+let current_page_idx = 0;
+let current_chapter_idx = -1;
+let current_chapter_key = "";
 
-var did_scroll = false;
+let did_scroll = false;
 
 
 // Action Binding
@@ -91,10 +56,10 @@ function bindSelectChapter(func) {
 }
 
 function getCurrentPageIdx() {
-    if (did_scroll && $("#read-view").css('display') != "none") {
+    if (did_scroll && $("#read-view").css('display') !== "none") {
         did_scroll = false;
-        var height = $('.comic-page-container').outerHeight(true);
-        var pos = $('#read-area').scrollTop();
+        let height = $('.comic-page-container').outerHeight(true);
+        let pos = $('#read-area').scrollTop();
         current_page_idx = Math.ceil(pos / height);
     }
     return current_page_idx;
@@ -120,7 +85,7 @@ function setCurrentComic(host, titlekey, title, link, imguri) {
 
     // Update HTML DOM
     $("#comic-header .comic-title").html(title);
-    var header = $("#comic-header");
+    let header = $("#comic-header");
     header.attr("host", host);
     header.attr("link", link);
     header.attr("title", title);
@@ -133,11 +98,11 @@ function setCurrentComic(host, titlekey, title, link, imguri) {
  */
 function updateSubscribeUI(all_comic_data) {
     // console.log("update subscribe ui: " + current_page_idx);
-    var dom = $("#comic-header");
-    var host = dom.attr("host");
-    var titlekey = dom.attr("titlekey");
+    let dom = $("#comic-header");
+    let host = dom.attr("host");
+    let titlekey = dom.attr("titlekey");
 
-    var isSubscribed = all_comic_data[host]
+    let isSubscribed = all_comic_data[host]
         && all_comic_data[host][titlekey]
         && all_comic_data[host][titlekey].subscribed;
 
@@ -155,8 +120,8 @@ function updateSubscribeUI(all_comic_data) {
 function updateChapterList(comic_data) {
     // console.log(comicData);
     $(".chapter-entry").each(function(i, e) {
-        var ch_key = $(e).attr("chKey");
-        var ch_group = $(e).attr("chGroup");
+        let ch_key = $(e).attr("chKey");
+        let ch_group = $(e).attr("chGroup");
 
         if (comic_data.chapters[ch_group][ch_key].read) {
             $(e).addClass("read");
@@ -173,19 +138,16 @@ function updateChapterList(comic_data) {
  */
 function prevPic() {
 
-    var height = $('.comic-page-container').outerHeight(true);
+    let height = $('.comic-page-container').outerHeight(true);
     if (did_scroll) {
         did_scroll = false;
-        var pos = $('#read-area').scrollTop();
+        let pos = $('#read-area').scrollTop();
         current_page_idx = Math.ceil(pos / height);
     }
     current_page_idx--;
     if (current_page_idx < 0) current_page_idx = 0;
 
     if ($("#" + page_id_list[current_page_idx]).offset() !== undefined ) {
-        // $('#read-area').animate({
-        //     scrollTop: current_page_idx * height
-        // }, 100);
         scrollToPage(current_page_idx);
     }
 }
@@ -194,10 +156,10 @@ function prevPic() {
  * Scroll to next pic
  */
 function nextPic() {
-    var height = $('.comic-page-container').outerHeight(true);
+    let height = $('.comic-page-container').outerHeight(true);
     if (did_scroll) {
         did_scroll = false;
-        var pos = $('#read-area').scrollTop();
+        let pos = $('#read-area').scrollTop();
         current_page_idx = Math.floor(pos / height);
     }
     current_page_idx++;
@@ -216,10 +178,9 @@ function nextPic() {
  * Scroll to previous chapter
  */
 function nextChapter() {
-    if (current_chapter_idx == 0) return;
+    if (current_chapter_idx === 0) return;
     current_chapter_idx--;
     if (current_chapter_idx < 0) current_chapter_idx = 0;
-    // console.log(chapterList[curChapterIdx]);
     $(chapter_list[current_chapter_idx]).trigger('click');
     scrollMiddlePanel();
 }
@@ -228,7 +189,7 @@ function nextChapter() {
  * Scroll to next chapter
  */
 function prevChapter() {
-    if (current_chapter_idx == chapter_list.length - 1) return;
+    if (current_chapter_idx === chapter_list.length - 1) return;
     current_chapter_idx++;
     if (current_chapter_idx >= chapter_list.length) current_chapter_idx = chapter_list.length - 1;
     $(chapter_list[current_chapter_idx]).trigger('click');
@@ -236,14 +197,11 @@ function prevChapter() {
 }
 
 function scrollToPage(page_idx, use_animation = true) {
-    // console.log("scroll to page: " + page_idx + ":" + page_id_list.length);
     if (page_idx >= 0) {
         current_page_idx = page_idx;
     }
-    // console.log("scroll to page: " + page_idx + ":" + current_page_idx);
-    var height = $('.comic-page-container').outerHeight(true);
-    // console.log("pos.top: " + pos.top);
-    var read_area = $('#read-area');
+    let height = $('.comic-page-container').outerHeight(true);
+    let read_area = $('#read-area');
     if (use_animation) {
         read_area.animate({
             scrollTop: (current_page_idx >= page_id_list.length)? read_area[0].scrollHeight :current_page_idx * height
@@ -261,8 +219,8 @@ function scrollToPage(page_idx, use_animation = true) {
  * will always be visible
  */
 function scrollMiddlePanel() {
-    var scroll_bottom = $("#chapter-selector").height() + $("#titlebar").outerHeight();
-    var e = $(chapter_list[current_chapter_idx]);
+    let scroll_bottom = $("#chapter-selector").height() + $("#titlebar").outerHeight();
+    let e = $(chapter_list[current_chapter_idx]);
     if (e.offset() && e.offset().top  + e.height() >= scroll_bottom) {
         $("#chapter-selector").animate({
             scrollTop: $("#chapter-selector").scrollTop() + e.offset().top - $("#comic-header").outerHeight() - $("#titlebar").outerHeight()
@@ -280,17 +238,6 @@ function scrollMiddlePanel() {
  */
 
 function init() {
-    $.get('./sections/chapter-entry.html', function(result) {
-        chapter_entry_template_str = result;
-    });
-
-    $.get('./sections/page.html', function(result) {
-        page_container_template_str = result;
-    })
-
-    $.get('./sections/lastpagenotice-view.html', function(result){
-        lastpage_notice_template_str = result;
-    });
 }
 
 function lateInit() {
@@ -348,19 +295,11 @@ function showToolTips() {
 
 function selectChapter(ch_link, ch_group, ch_key, last_page = 0) {
     $(".chapter-entry").each(function(i, v) {
-        if ($(v).attr("link") == ch_link) {
+        if ($(v).attr("link") === ch_link) {
             $(v).trigger('click');
             return false;
         }
     });
-
-    // if (last_page != 0) {
-    //     setTimeout(function() {
-    //         scrollToPage(last_page);
-    //     }, 2000);
-    // } else {
-    //     scrollToPage(last_page);
-    // }
 }
 
 /**
@@ -372,7 +311,7 @@ function selectChapter(ch_link, ch_group, ch_key, last_page = 0) {
  * @param {int}    index   : index of selected chapter in the chapter list
  */
 function createChapterEntry(ch_group, ch_key, ch_name, ch_link, domid, index) {
-    var view = $(chapter_entry_template_str);
+    let view = $(chapter_entry_template_str);
     view.attr("link", ch_link);
     view.attr("chGroup", ch_group);
     view.attr("chKey", ch_key);
@@ -404,7 +343,7 @@ function createChapterEntry(ch_group, ch_key, ch_name, ch_link, domid, index) {
  * @param {int}    idx    : index in the pic array
  */
 function createComicPage(imguri, id, idx) {
-        var view = $(page_container_template_str);
+        let view = $(page_container_template_str);
         view.attr("id", id);
         view.attr("idx", idx);
         view.find("img").attr("src", imguri);
@@ -434,7 +373,7 @@ function createComicPage(imguri, id, idx) {
 
 
 function createLastpageNotice() {
-    var view = $(lastpage_notice_template_str);
+    let view = $(lastpage_notice_template_str);
     return view;
 }
 
@@ -442,7 +381,7 @@ function createLastpageNotice() {
  * Toggle Chapter Selector, used in mobile view only
  */
 function toggleChapterSelector() {
-    var chapter_selector = $("#chapter-selector");
+    let chapter_selector = $("#chapter-selector");
     if (chapter_selector.hasClass("is-hidden-mobile")) {
         chapter_selector.removeClass("is-hidden-mobile");
         $('#read-area').find('.zoom-btn').css("z-index","0");
@@ -460,7 +399,7 @@ function toggleChapterSelector() {
  * @param {bool} shown
  */
 function toggleLoadingAnimation(shown) {
-    var loading_bg = $(".middle-panel .loading-bg");
+    let loading_bg = $(".middle-panel .loading-bg");
     if (shown) {
         loading_bg.removeClass("is-hidden");
     } else {
@@ -521,16 +460,7 @@ function onKeydown(e) {
 $(function(){
     $(window).bind('mousewheel', function(e){
         if (!$('#read-panel').hasClass('is-hidden')){
-            // curPageIdx = 0;
-            // var height = $('.comic-page-container').outerHeight(true);
-            // var pos = $("#read-area").scrollTop();
-            // curPageIdx = Math.round(pos / height);
-            // console.log("scroll: " + height + "," + pos + "," +curPageIdx);
-            // console.log("scrolled: " + curPageIdx);
-            // EA.send("MOUSE_SCROLL_READVIEW");
             did_scroll = true;
-            // console.log("scroll");
-
         }
     });
 
@@ -550,3 +480,40 @@ init();
 $(document).ready(lateInit);
 
 $(document).keydown(onKeydown);
+
+
+module.exports = {
+    // create new elements
+    createChapterEntry: createChapterEntry,
+    createComicPage: createComicPage,
+    createLastpageNotice: createLastpageNotice,
+
+    // append to the screen
+    appendNewPage: appendNewPage,
+    appendNewChapter: appendNewChapter,
+
+    // UI update / clear
+    updateSubscribeUI: updateSubscribeUI,
+    clearReadArea: clearReadArea,
+    clearChapterSelector: clearChapterSelector,
+    toggleLoadingAnimation: toggleLoadingAnimation,
+    scrollToPage: scrollToPage,
+    selectChapter: selectChapter,
+    showToolTips: showToolTips,
+
+    // Action Binding
+    bindSubscribe: bindSubscribe,
+    bindSelectChapter: bindSelectChapter,
+
+    // Getter / Setter
+    getChIdx: function() {return current_chapter_idx},
+    getCurHost: function() {return current_host},
+    getCurTitleKey: function() {return current_titlekey},
+    setPageIds: function(x) { page_id_list = x},
+    getChapterList: function() { return chapter_list },
+    setChapterList: function(x) { chapter_list = x},
+    getCurrentChapterKey: function () {return current_chapter_key},
+    setCurrentComic: setCurrentComic,
+    getCurrentPageIdx: getCurrentPageIdx,
+    updateChapterList: updateChapterList
+}
diff --git a/renderer-process/viewcontrollers/search-viewcontroller.js b/renderer-process/viewcontrollers/search-viewcontroller.js
index 036d286..68770b6 100644
--- a/renderer-process/viewcontrollers/search-viewcontroller.js
+++ b/renderer-process/viewcontrollers/search-viewcontroller.js
@@ -9,31 +9,19 @@
 const util = require('../util');
 const values = require('../models/values');
 const EA = require("electron-analytics");
-
-module.exports = {
-    createResultView: createResultView,
-    getSearchQuery: getSearchQuery,
-    clearSearchResults: clearSearchResults,
-    appendNewResult: appendNewResult,
-    loadingUI: loadingUI,
-    updateSubscribeUI: updateSubscribeUI,
-    updateSearchResult: updateSearchResult,
-    bindSearch: bindSearch,
-    bindSubscribe: bindSubscribe,
-    bindSelectComic: bindSelectComic,
-}
+let fs = require('fs');
 
 /**
  *      View
  *      Initialize & UI Interaction
  */
 
-var resultview_template_str = "";
-var filter_template_str = "";
+const resultview_template_str = fs.readFileSync(__dirname + '/../../sections/search-result-entry.html', 'utf-8');
+const filter_template_str = fs.readFileSync(__dirname + '/../../sections/search-filter.html', 'utf-8');
 // search function
-var searchFunc;
-var subscribeFunc;
-var selectComicFunc;
+let searchFunc;
+let subscribeFunc;
+let selectComicFunc;
 
 /**
  * Create a single search result HTML DOM
@@ -52,7 +40,7 @@ var selectComicFunc;
  * @return {jQueryObject} result view HTML DOM
  */
 function createResultView(link, titlekey, imguri, title, host, updateinfo, description) {
-    var view = $(resultview_template_str);
+    let view = $(resultview_template_str);
     view.find("img").each(function(n, img) {
             view.find(".thumb").css({
                 'background': '#fff url(' + imguri + ') center center no-repeat',
@@ -72,7 +60,7 @@ function createResultView(link, titlekey, imguri, title, host, updateinfo, descr
 
     view.click(function() {
         EA.send("MOUSE_CLICKED_SEARCH_ENTRY");
-        var sel = util.getSelected();
+        let sel = util.getSelected();
         if (sel === '') {
             selectComicFunc(host, link, title, titlekey, imguri);
         }
@@ -128,10 +116,10 @@ function loadingUI(shown) {
  */
 function updateSubscribeUI(all_comic_Data) {
     $(".search-result").each(function(i, e) {
-        var dom = $(e);
-        var host = dom.attr("host");
-        var titlekey = dom.attr("titlekey");
-        // var keyPath = "comic." + host + "." + titleKey;
+        let dom = $(e);
+        let host = dom.attr("host");
+        let titlekey = dom.attr("titlekey");
+        // let keyPath = "comic." + host + "." + titleKey;
 
         if (all_comic_Data && all_comic_Data[host]
             && all_comic_Data[host][titlekey]
@@ -146,7 +134,7 @@ function updateSubscribeUI(all_comic_Data) {
 }
 
 function updateSearchResult() {
-    var activetags = {};
+    let activetags = {};
     $('#search-filters .tag').each(function() {
         if ($(this).hasClass('active')) {
             activetags[$(this).attr('host')] = true;
@@ -188,12 +176,7 @@ function bindSelectComic(func) {
 
 // init as soon as the script loads.
 function init() {
-    $.get('./sections/search-result-entry.html', function(result) {
-        resultview_template_str = result;
-    });
-    $.get('./sections/search-filter.html', function(result) {
-        filter_template_str = result;
-    });
+
 }
 
 // init when document is ready
@@ -223,14 +206,14 @@ function lateInit() {
     $("#search-btn").click(searchFunc);
 
     // create filters
-    for (var key in values.hostnames) {
-        var view = $(filter_template_str);
+    for (let key in values.hostnames) {
+        let view = $(filter_template_str);
         view.text(key);
         view.attr('host', key);
         view.click(function () {
             EA.send("MOUSE_CLICKED_SEARCH_FILTER");
-            var host = $(this).attr('host');
-            var activate = $(this).hasClass('active');
+            let host = $(this).attr('host');
+            let activate = $(this).hasClass('active');
             console.log(activate);
             activate = !activate;
             if (!activate) {
@@ -250,3 +233,19 @@ function lateInit() {
  */
 init();
 $(document).ready(lateInit);
+
+/**
+ *      Interface
+ */
+module.exports = {
+    createResultView: createResultView,
+    getSearchQuery: getSearchQuery,
+    clearSearchResults: clearSearchResults,
+    appendNewResult: appendNewResult,
+    loadingUI: loadingUI,
+    updateSubscribeUI: updateSubscribeUI,
+    updateSearchResult: updateSearchResult,
+    bindSearch: bindSearch,
+    bindSubscribe: bindSubscribe,
+    bindSelectComic: bindSelectComic,
+}
\ No newline at end of file
diff --git a/renderer-process/viewcontrollers/titlebar-viewcontroller.js b/renderer-process/viewcontrollers/titlebar-viewcontroller.js
index e3fc6f3..e559c6d 100644
--- a/renderer-process/viewcontrollers/titlebar-viewcontroller.js
+++ b/renderer-process/viewcontrollers/titlebar-viewcontroller.js
@@ -1,30 +1,26 @@
-var pjson = require('../../package.json');
+let pjson = require('../../package.json');
 const remote = require('electron').remote;
-var titlebar = require('../components/titlebar')({
+let titlebar = require('../components/titlebar')({
     iswin: process.platform == 'win32'
     // iswin: true
 });
 
-module.exports = {
-    updateTitle: updateTitle
-}
-
-var _is_maximized = false;
+let _is_maximized = false;
 
 function updateTitle() {
     if ($('#read-view').hasClass('is-hidden')) {
         setTitle(pjson.productName);
     } else {
-        var comicTitle = $('#comic-header').attr('title');
-        var episode = $('.chapter-entry.active').text();
+        let comicTitle = $('#comic-header').attr('title');
+        let episode = $('.chapter-entry.active').text();
         setTitle(comicTitle, [episode]);
     }
 }
 
 function setTitle(name, options) {
-    var result = name;
+    let result = name;
     if (options !== undefined) {
-        var subtitle = options.join('-');
+        let subtitle = options.join('-');
         result += '-' + subtitle;
 
     }
@@ -35,20 +31,20 @@ function setTitle(name, options) {
 function lateInit() {
     titlebar.appendTo(document.querySelector('#titlebar'))
         .on('close', function() {
-            var window = remote.getCurrentWindow();
+            let window = remote.getCurrentWindow();
             window.close();
         })
         .on('minimize', function() {
-            var window = remote.getCurrentWindow();
+            let window = remote.getCurrentWindow();
             window.minimize();
         })
         .on('fullscreen', function() {
-            var window = remote.getCurrentWindow();
+            let window = remote.getCurrentWindow();
             window.setFullScreen(!window.isFullScreen());
         
         })
         .on('maximize', function() {
-            var window = remote.getCurrentWindow();
+            let window = remote.getCurrentWindow();
             console.log(window.isMaximized());
             // console.log(window.isMaximizable());
             _is_maximized == process.platform == 'win32' ? _is_maximized : window.isMaximized();
@@ -65,4 +61,11 @@ function lateInit() {
 }
 
 
-$(document).ready(lateInit);
\ No newline at end of file
+$(document).ready(lateInit);
+
+/**
+ *      Interface
+ */
+module.exports = {
+    updateTitle: updateTitle
+}
\ No newline at end of file
diff --git a/renderer-process/viewcontrollers/translate-viewcontroller.js b/renderer-process/viewcontrollers/translate-viewcontroller.js
index f41a2f0..c59259c 100644
--- a/renderer-process/viewcontrollers/translate-viewcontroller.js
+++ b/renderer-process/viewcontrollers/translate-viewcontroller.js
@@ -1,4 +1,4 @@
-var fs = require("fs");
+let fs = require("fs");
 const EA = require('electron-analytics');
 
 function read(f) {
@@ -8,12 +8,12 @@ function include(f) {
   eval.apply(global, [read(f)]);
 }
 
-var t = require('../tongwen/tongwen_core');
+let t = require('../tongwen/tongwen_core');
 const table1 = require('../tongwen/tongwen_table_ps2t.js');
 const table2 = require('../tongwen/tongwen_table_pt2s.js');
 const table3 = require('../tongwen/tongwen_table_s2t.js');
 const table4 = require('../tongwen/tongwen_table_t2s.js');
-var TongWen = t.TongWen();
+let TongWen = t.TongWen();
 TongWen.addS2TTable(table1.S2TTable);
 TongWen.addT2STable(table2.T2STable);
 TongWen.addS2TTable(table3.S2TTable);
@@ -24,7 +24,7 @@ module.exports = {
     translate: translate
 }
 
-var to_traditional_chinese = true;
+let to_traditional_chinese = true;
 
 function translate() {
     if (to_traditional_chinese) {
@@ -36,7 +36,7 @@ function translate() {
 
 $(document).ready(function () {
     //chinese convert
-    var zhconvert = document.getElementById("zh-convert");
+    let zhconvert = document.getElementById("zh-convert");
     zhconvert.onclick = function () {
         EA.send("MOUSE_CLICKED_TRANSLATE");
         if (zhconvert.dataset.zh == "tw") {
diff --git a/renderer-process/viewcontrollers/view-switch-viewcontroller.js b/renderer-process/viewcontrollers/view-switch-viewcontroller.js
index 1a18bea..97d5ac3 100644
--- a/renderer-process/viewcontrollers/view-switch-viewcontroller.js
+++ b/renderer-process/viewcontrollers/view-switch-viewcontroller.js
@@ -5,15 +5,15 @@
  *      See: ../sections/sidebar.html
  */
 
-// var subscriber = require('../subscribe-viewmodel'); 
-var read_viewcontroller = require('./read-viewcontroller');
-var titlebar_viewcontroller = require('./titlebar-viewcontroller');
+// let subscriber = require('../subscribe-viewmodel'); 
+let read_viewcontroller = require('./read-viewcontroller');
+let titlebar_viewcontroller = require('./titlebar-viewcontroller');
 const EA = require("electron-analytics");
 const ipc = require('electron').ipcRenderer;
 
 // Variable definition
-var updateAllUIFunc;
-var TAB_NAME = {
+let updateAllUIFunc;
+let TAB_NAME = {
         FAVORITE: 0,
         SEARCH: 1,
         READ: 2,
@@ -23,10 +23,10 @@ var TAB_NAME = {
 // Scroll behavior
 
 // Hide Header on on scroll down
-var did_scroll;
-var last_scroll_top = 0;
-var delta = 5;
-var navbar_height = $('aside').outerHeight();
+let did_scroll;
+let last_scroll_top = 0;
+let delta = 5;
+let navbar_height = $('aside').outerHeight();
 $(window).scroll(function(event){
     did_scroll = ($(".sidebar.float-menu").css("flex-direction") == "row")
 });
@@ -43,7 +43,7 @@ setInterval(function() {
 }, 250);
 
 function hasScrolled() {
-    var st = $(this).scrollTop();
+    let st = $(this).scrollTop();
 
     // Make sure they scroll more than delta
     if(Math.abs(last_scroll_top - st) <= delta)
diff --git a/renderer-process/viewmodels/comicparse-viewmodel.js b/renderer-process/viewmodels/comicparse-viewmodel.js
index 35b5c90..48f083a 100644
--- a/renderer-process/viewmodels/comicparse-viewmodel.js
+++ b/renderer-process/viewmodels/comicparse-viewmodel.js
@@ -7,32 +7,28 @@
  */
 
 // 3rd party library
-var settings = require('electron-settings');
+let settings = require('electron-settings');
 
 // model
 const values = require('../models/values');
 
 // view model
-var subscribe_viewmodel = require('./subscribe-viewmodel');
+let subscribe_viewmodel = require('./subscribe-viewmodel');
 
 // view controller
-var search_viewcontroller = require('../viewcontrollers/search-viewcontroller');
-var favorite_viewcontroller = require('../viewcontrollers/favorite-viewcontroller');
-var read_viewcontroller = require('../viewcontrollers/read-viewcontroller');
-var viewswitch_viewcontroller = require("../viewcontrollers/view-switch-viewcontroller");
-var translate_viewcontroller = require("../viewcontrollers/translate-viewcontroller");
-var titlebar_viewcontroller = require("../viewcontrollers/titlebar-viewcontroller");
-
-module.exports = {
-    selectComic: selectComic
-}
+let search_viewcontroller = require('../viewcontrollers/search-viewcontroller');
+let favorite_viewcontroller = require('../viewcontrollers/favorite-viewcontroller');
+let read_viewcontroller = require('../viewcontrollers/read-viewcontroller');
+let viewswitch_viewcontroller = require("../viewcontrollers/view-switch-viewcontroller");
+let translate_viewcontroller = require("../viewcontrollers/translate-viewcontroller");
+let titlebar_viewcontroller = require("../viewcontrollers/titlebar-viewcontroller");
 
 
 /**
  *      Variable Definition
  */
-// variable to store the settings. Preventing frequently I/O operations
-var comic_data = {};
+// letiable to store the settings. Preventing frequently I/O operations
+let comic_data = {};
 
 /**
  * Set information for selected comic and grab chapters-info
@@ -73,17 +69,17 @@ function onChaptersGrabbed(result, newest){
     read_viewcontroller.clearChapterSelector();
 
     // create an empty chapter list with size of the length of the result
-    var chapter_list = new Array(result.length);
+    let chapter_list = new Array(result.length);
 
     // Get information from settings
-    var keyPath = "comic." + read_viewcontroller.getCurHost() 
+    let keyPath = "comic." + read_viewcontroller.getCurHost() 
                     + "." + read_viewcontroller.getCurTitleKey();
     comic_data = settings.get(keyPath)
-    var chapters_data = comic_data.chapters;
+    let chapters_data = comic_data.chapters;
     
-    for (var index in result) {
-        var obj = result[index];
-        var view = read_viewcontroller.createChapterEntry(obj.ch_group, obj.ch_key, obj.ch_name, obj.ch_link, obj.domid, obj.index);
+    for (let index in result) {
+        let obj = result[index];
+        let view = read_viewcontroller.createChapterEntry(obj.ch_group, obj.ch_key, obj.ch_name, obj.ch_link, obj.domid, obj.index);
         chapter_list[obj.index] = "#" + obj.domid;
         
         // if it is a new chapter, update the setting files
@@ -119,18 +115,15 @@ function onChaptersGrabbed(result, newest){
     read_viewcontroller.toggleLoadingAnimation(false);
 
     // select last chapter
-    // console.log(result);
-    if (comic_data.lastread_ch_key != undefined) {
-        // console.log("old");
-        var lastpage = comic_data.lastpage;
-        if (comic_data.lastread_ch_key != obj.ch_key) {
+    if (comic_data.lastread_ch_key !== undefined) {
+        let obj = result[result.length - 1];
+        let lastpage = comic_data.lastpage;
+        if (comic_data.lastread_ch_key !== obj.ch_key) {
             lastpage = 0;
         }
         read_viewcontroller.selectChapter(comic_data.chapters[comic_data.lastread_ch_group][comic_data.lastread_ch_key].ch_link, comic_data.lastread_ch_group, comic_data.lastread_ch_key, lastpage);
     } else {
-        var obj = result[result.length - 1];
-        // console.log("new")
-        // console.log(obj);
+        let obj = result[result.length - 1];
         read_viewcontroller.selectChapter(obj.ch_link, obj.ch_group, obj.ch_key);
     }
 }
@@ -143,10 +136,8 @@ function onChaptersGrabbed(result, newest){
  * @param {String} ch_key   : Chapter's unique key
  */
 function selectChapter(ch_link, ch_group, ch_key) {
-    // console.log("select " + ch_link + ":" + ch_group + ":" + ch_key);
     read_viewcontroller.clearReadArea();
     
-    // curPageIdx = 0;
     values.hostnames[read_viewcontroller.getCurHost()].parsers.loadChapter(ch_link, ch_group, ch_key, onSingleChapterLoaded);
     
 }
@@ -162,21 +153,21 @@ function selectChapter(ch_link, ch_group, ch_key) {
  * @param {String} ch_key   : Chapter's unique key
  */
 function onSingleChapterLoaded(result, ch_group, ch_key) {
-    if (ch_key != $(read_viewcontroller.getChapterList()[read_viewcontroller.getChIdx()]).attr("chkey")) {
+    if (ch_key !== $(read_viewcontroller.getChapterList()[read_viewcontroller.getChIdx()]).attr("chkey")) {
         return;
     }
-    var pageIds = new Array(result.length);
-    for (var index in result) {
-        var obj = result[index];
-        var view = read_viewcontroller.createComicPage(obj.imgurl, obj.id, obj.idx);
+    let pageIds = new Array(result.length);
+    for (let index in result) {
+        let obj = result[index];
+        let view = read_viewcontroller.createComicPage(obj.imgurl, obj.id, obj.idx);
         pageIds[obj.idx] = obj.id;
         read_viewcontroller.appendNewPage(view);
     }
-    var lastpage_view = read_viewcontroller.createLastpageNotice();
+    let lastpage_view = read_viewcontroller.createLastpageNotice();
     read_viewcontroller.appendNewPage(lastpage_view);
     read_viewcontroller.setPageIds(pageIds);
-    var lastpage = comic_data.lastpage;
-    if (comic_data.lastread_ch_key != ch_key) {
+    let lastpage = comic_data.lastpage;
+    if (comic_data.lastread_ch_key !== ch_key) {
         lastpage = 0;
     }
     console.log("scroll to page: comicparse");
@@ -197,7 +188,7 @@ function onSingleChapterLoaded(result, ch_group, ch_key) {
  */
 function updateChapterList() {
     read_viewcontroller.updateChapterList(comic_data);
-    var keypath = "comic." + read_viewcontroller.getCurHost() + "." + read_viewcontroller.getCurTitleKey();
+    let keypath = "comic." + read_viewcontroller.getCurHost() + "." + read_viewcontroller.getCurTitleKey();
     settings.set(keypath, comic_data);
     titlebar_viewcontroller.updateTitle();
 }
@@ -223,3 +214,8 @@ function lateInit() {
 
 init();
 $(document).ready(lateInit);
+
+
+module.exports = {
+    selectComic: selectComic
+}
\ No newline at end of file
diff --git a/renderer-process/viewmodels/search-viewmodel.js b/renderer-process/viewmodels/search-viewmodel.js
index 87845bf..58e384f 100644
--- a/renderer-process/viewmodels/search-viewmodel.js
+++ b/renderer-process/viewmodels/search-viewmodel.js
@@ -10,23 +10,23 @@
 const values = require("../models/values");
 
 // viewmodel
-var subscribe_viewmodel = require("./subscribe-viewmodel");
-var comicparser_viewmodel = require("./comicparse-viewmodel");
+let subscribe_viewmodel = require("./subscribe-viewmodel");
+let comicparser_viewmodel = require("./comicparse-viewmodel");
 
 //view controller
-var search_viewcontroller = require("../viewcontrollers/search-viewcontroller");
+let search_viewcontroller = require("../viewcontrollers/search-viewcontroller");
 
 /**
  *      Variable Definition
  */
 // {tring} store the html template for search result
-var result_view_str_template = "";         
+let result_view_str_template = "";         
 
 // {Object} key: hostname value: boolean flag
 // Store information of the search request to every host
 // true: is searching
 // false: not searching
-var search_flag_dict = {};        
+let search_flag_dict = {};        
 
 /**
  *      Backend Functionality / View
@@ -58,7 +58,7 @@ function search() {
     if (isSearching()) return; // if still in the middle of searching, abort
     
     // get the search query from input box
-    var search_str = search_viewcontroller.getSearchQuery(); 
+    let search_str = search_viewcontroller.getSearchQuery(); 
 
     // clear the previous search results
     search_viewcontroller.clearSearchResults();
@@ -67,7 +67,7 @@ function search() {
     search_viewcontroller.loadingUI(true);
 
     // Send requests using parsers
-    for (var key in values.hosts) {
+    for (let key in values.hosts) {
         values.hosts[key].parsers.search(search_str, searchResponse)
         search_flag_dict[values.hosts[key].name] = true;
     }
@@ -90,9 +90,9 @@ function searchResponse(result, host) {
     search_flag_dict[host] = false;
 
     // construct UI element
-    for (var idx in result) {
-        var obj = result[idx];
-        var view = search_viewcontroller.createResultView(
+    for (let idx in result) {
+        let obj = result[idx];
+        let view = search_viewcontroller.createResultView(
             obj.link, obj.titlekey, obj.imguri, obj.title, obj.host, 
             obj.updateinfo, obj.description);
         search_viewcontroller.appendNewResult(view);
@@ -111,7 +111,7 @@ function searchResponse(result, host) {
  */
 // init as soon as the script loads.
 function init() {
-    for (var key in values.hosts) {
+    for (let key in values.hosts) {
         search_flag_dict[values.hosts[key].name] = false;
     }
     search_viewcontroller.bindSearch(search);
diff --git a/renderer-process/viewmodels/subscribe-viewmodel.js b/renderer-process/viewmodels/subscribe-viewmodel.js
index 4dfc306..10ca70d 100644
--- a/renderer-process/viewmodels/subscribe-viewmodel.js
+++ b/renderer-process/viewmodels/subscribe-viewmodel.js
@@ -10,32 +10,25 @@
 //      Move the detailed comic subscription information to a different file
 
 // 3rd party library
-var async = require('async');
-var ipc = require('electron').ipcRenderer;
+let async = require('async');
+let ipc = require('electron').ipcRenderer;
 const settings = require("electron-settings");
 
 // model
 const values = require("../models/values");
 
 // viewcontroller
-var favorite_viewcontroller = require('../viewcontrollers/favorite-viewcontroller')
-var search_viewcontroller = require('../viewcontrollers/search-viewcontroller');
-var read_viewcontroller = require('../viewcontrollers/read-viewcontroller');
-var viewswitch_viewcontroller = require('../viewcontrollers/view-switch-viewcontroller')
+let favorite_viewcontroller = require('../viewcontrollers/favorite-viewcontroller')
+let search_viewcontroller = require('../viewcontrollers/search-viewcontroller');
+let read_viewcontroller = require('../viewcontrollers/read-viewcontroller');
+let viewswitch_viewcontroller = require('../viewcontrollers/view-switch-viewcontroller')
 const translate_viewcontroller = require('../viewcontrollers/translate-viewcontroller');
 
-module.exports = {
-    register: register,
-    subscribe: subscribe,
-    updateUI: updateSubscribeUIStatus,
-    checkUpdate: checkUpdate,
-    hasSubscription: hasSubscription
-}
 
 /**
  *      Variable Definition
  */
-var notification;
+let notification;
 
 /**
  * Register a comic. Save the info for a comic, but do not subscribe it. 
@@ -48,7 +41,7 @@ var notification;
  * @param {String} subscribed     : status of subscription
  */
 function register(host, titlekey, title, link, thumbnail_uri, subscribed=false) {
-    var key_path = "comic." + host + "." + titlekey;
+    let key_path = "comic." + host + "." + titlekey;
     if (!settings.has(key_path)) {
         settings.set(key_path, {
             "title": title,
@@ -71,8 +64,8 @@ function register(host, titlekey, title, link, thumbnail_uri, subscribed=false)
  * @param see register(...) 
  */
 function subscribe(host, titlekey, title, link, thumbnail_uri) {
-    var keyPath = "comic." + host + "." + titlekey;
-    var comic_data = settings.get(keyPath);
+    let keyPath = "comic." + host + "." + titlekey;
+    let comic_data = settings.get(keyPath);
     if (comic_data) {
         
         comic_data.subscribed = !comic_data.subscribed;
@@ -92,8 +85,8 @@ function subscribe(host, titlekey, title, link, thumbnail_uri) {
  * @param see register(...)
  */
 function unsubscribe(host, titlekey) {
-    var key_path = "comic." + host + "." + titlekey;
-    var comicData = settings.get(key_path);
+    let key_path = "comic." + host + "." + titlekey;
+    let comicData = settings.get(key_path);
     if (comicData) {
         comicData.subscribed = false;
         settings.set(key_path, comicData);
@@ -107,8 +100,8 @@ function unsubscribe(host, titlekey) {
  * @param {String} titlekey 
  */
 function checkUpdateSingle(host, titlekey) {
-    console.log("---- Start checking for one comic's updates ----")
-    var all_comic_data = settings.get('comic');
+    console.log(`---- Start checking for ${titlekey} comic's updates ----`)
+    let all_comic_data = settings.get('comic');
     async.apply(values.hostnames[host].parsers.grabChapters(titlekey, all_comic_data[host][titlekey].link,onChaptersGrabbed.bind({
                         all_comic_data: all_comic_data,
                         host: host,
@@ -122,7 +115,7 @@ function checkUpdateSingle(host, titlekey) {
  */
 function checkUpdate() {
     console.log("---- Start checking for updates ----")
-    var all_comic_data = settings.get('comic');
+    let all_comic_data = settings.get('comic');
     async.eachOf(all_comic_data, function(hostDict, host, callback1) {
         async.eachOf(hostDict, function(comics, titlekey, callback2){
             if (all_comic_data[host][titlekey].subscribed) {
@@ -160,8 +153,8 @@ function checkUpdate() {
  */
 function onChaptersGrabbed(result, newest) {
     console.log("---One Comic Update Checked---")
-    var comic = this.all_comic_data[this.host][this.titlekey];
-    var chapters_data = comic.chapters;
+    let comic = this.all_comic_data[this.host][this.titlekey];
+    let chapters_data = comic.chapters;
     // console.log(result.length + ":" + comic.chapters_count);
     if (result.length != comic.chapters_count) {
         comic.hasupdate = true;
@@ -172,10 +165,8 @@ function onChaptersGrabbed(result, newest) {
         });
     }
     
-    for (var index in result) {
-        // console.log(result[index].chLink);
-        
-        var obj = result[index];
+    for (let index in result) {
+        let obj = result[index];
         // if is a new group
         if (!chapters_data[obj.ch_group]) {
             chapters_data[obj.ch_group] = {}
@@ -217,25 +208,23 @@ function updateSubscribeUIStatus() {
     favorite_viewcontroller.updateSubscribeUI(all_comic_data, hasSubscription());
     read_viewcontroller.updateSubscribeUI(all_comic_data);
     translate_viewcontroller.translate();
-    var page_idx = read_viewcontroller.getCurrentPageIdx();
-    var titlekey = read_viewcontroller.getCurTitleKey();
-    var host = read_viewcontroller.getCurHost();
-    // console.log(page_idx + ":" + titlekey + ":" + host); 
+    let page_idx = read_viewcontroller.getCurrentPageIdx();
+    let titlekey = read_viewcontroller.getCurTitleKey();
+    let host = read_viewcontroller.getCurHost();
     if (host && titlekey && page_idx != 0) {
         all_comic_data[host][titlekey].lastpage = page_idx;
         settings.set('comic', all_comic_data);
     }
 
     let count = 0;
-    for (var host_key in all_comic_data) {
-        for (var comic_key in all_comic_data[host_key]) {
-            var comic = all_comic_data[host_key][comic_key]; 
+    for (let host_key in all_comic_data) {
+        for (let comic_key in all_comic_data[host_key]) {
+            let comic = all_comic_data[host_key][comic_key]; 
             if (comic.subscribed && comic.hasupdate) {
                 count ++;
             }
         }
     }
-    // console.log(count);
     ipc.send("comic-update", count);
 }
 
@@ -243,8 +232,8 @@ function hasSubscription() {
     all_comic_data = settings.get('comic');
     if (all_comic_data == undefined) return false;
 
-    for (var host in all_comic_data) {
-        for (var comic in all_comic_data[host]) {
+    for (let host in all_comic_data) {
+        for (let comic in all_comic_data[host]) {
             if (all_comic_data[host][comic].subscribed) {
                 return true;
             }
@@ -277,11 +266,11 @@ function lateInit() {
 }
 
 function unload(e) {
-    console.log("test2");
-    var page_idx = read_viewcontroller.getCurrentPageIdx();
-    var titlekey = read_viewcontroller.getCurTitleKey();
-    var host = read_viewcontroller.getCurHost();
-    console.log(page_idx + ":" + titlekey + ":" + host); 
+    // console.log("test2");
+    let page_idx = read_viewcontroller.getCurrentPageIdx();
+    let titlekey = read_viewcontroller.getCurTitleKey();
+    let host = read_viewcontroller.getCurHost();
+    // console.log(page_idx + ":" + titlekey + ":" + host); 
     if (host && titlekey && page_idx != 0) {
         all_comic_data[host][titlekey].lastpage = page_idx;
         settings.set('comic', all_comic_data);
@@ -293,4 +282,13 @@ function unload(e) {
  */
 
 init();
-$(document).ready(lateInit);
\ No newline at end of file
+$(document).ready(lateInit);
+
+
+module.exports = {
+    register: register,
+    subscribe: subscribe,
+    updateUI: updateSubscribeUIStatus,
+    checkUpdate: checkUpdate,
+    hasSubscription: hasSubscription
+}
\ No newline at end of file

From 2648e4fa0629f528c9a03f241ecd00a9a4fe1de1 Mon Sep 17 00:00:00 2001
From: Yu-Jen Lin <yjlin5210@gmail.com>
Date: Tue, 16 May 2017 17:17:04 +0800
Subject: [PATCH 3/3] Fixed the problem that external URL won't open in
 external browser.

---
 assets/css/main.css                           |  147 +-
 assets/scss/main.scss                         | 1909 +++++++++--------
 package.json                                  |    4 +-
 .../viewcontrollers/about-viewcontroller.js   |   11 +
 .../viewcontrollers/read-viewcontroller.js    |    4 +
 sections/about-view.html                      |    3 +-
 6 files changed, 1108 insertions(+), 970 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index b0b6134..e116faf 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -55,17 +55,22 @@
 /* ---- Utility ----*/
 /* ---- Overall area ----*/
 /** LAYOUT **/
-body, html, .whole-view {
+.whole-view,
+body,
+html {
   font-family: 'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
   background: #222935;
   height: 100%;
   margin: 0;
   overflow-y: hidden; }
   @media only screen and (max-width: 768px) {
-    body, html, .whole-view {
+    .whole-view,
+    body,
+    html {
       height: 100%; } }
 
-h1, h2 {
+h1,
+h2 {
   margin: 0; }
 
 ::-webkit-scrollbar {
@@ -149,7 +154,9 @@ h1, h2 {
     .titlebar.is-mac .titlebar-stoplight:hover svg.fullscreen-svg,
     .titlebar.is-mac .titlebar-stoplight:hover svg.maximize-svg {
       opacity: 1; }
-  .titlebar.is-mac .titlebar-close, .titlebar.is-mac .titlebar-minimize, .titlebar.is-mac .titlebar-fullscreen {
+  .titlebar.is-mac .titlebar-close,
+  .titlebar.is-mac .titlebar-fullscreen,
+  .titlebar.is-mac .titlebar-minimize {
     float: left;
     border-radius: 50%;
     margin: 6px 4px;
@@ -160,7 +167,8 @@ h1, h2 {
     border: 1px solid #e2463f;
     background-color: #ff5f57;
     margin-left: 6px; }
-    .titlebar.is-mac .titlebar-close:hover, .titlebar.is-mac .titlebar-close :active {
+    .titlebar.is-mac .titlebar-close:hover,
+    .titlebar.is-mac .titlebar-close :active {
       border-color: #ad3934;
       background-color: #bf4943; }
     .titlebar.is-mac .titlebar-close svg {
@@ -172,7 +180,8 @@ h1, h2 {
   .titlebar.is-mac .titlebar-minimize {
     border: 1px solid #e1a116;
     background-color: #ffbd2e; }
-    .titlebar.is-mac .titlebar-minimize:hover, .titlebar.is-mac .titlebar-minimize :active {
+    .titlebar.is-mac .titlebar-minimize:hover,
+    .titlebar.is-mac .titlebar-minimize :active {
       border-color: #ad7d15;
       background-color: #bf9123; }
     .titlebar.is-mac .titlebar-minimize svg {
@@ -185,7 +194,8 @@ h1, h2 {
   .titlebar.is-mac .titlebar-maximize {
     border: 1px solid #12ac28;
     background-color: #28c940; }
-    .titlebar.is-mac .titlebar-fullscreen:hover, .titlebar.is-mac .titlebar-fullscreen :active,
+    .titlebar.is-mac .titlebar-fullscreen:hover,
+    .titlebar.is-mac .titlebar-fullscreen :active,
     .titlebar.is-mac .titlebar-maximize:hover,
     .titlebar.is-mac .titlebar-maximize :active {
       border-color: #128622;
@@ -209,7 +219,7 @@ h1, h2 {
     display: block; }
 
 .titlebar.is-win {
-  padding: 0px;
+  padding: 0;
   background-color: #3c4659;
   position: fixed;
   z-index: 100000;
@@ -240,8 +250,8 @@ h1, h2 {
       display: table;
       clear: both; }
   .titlebar.is-win .titlebar-close,
-  .titlebar.is-win .titlebar-minimize,
-  .titlebar.is-win .titlebar-fullscreen {
+  .titlebar.is-win .titlebar-fullscreen,
+  .titlebar.is-win .titlebar-minimize {
     float: left;
     width: 45px;
     height: 31px;
@@ -250,8 +260,8 @@ h1, h2 {
     line-height: 29px;
     transition: background-color .2s; }
   .titlebar.is-win .titlebar-close svg,
-  .titlebar.is-win .titlebar-minimize svg,
-  .titlebar.is-win .titlebar-fullscreen svg {
+  .titlebar.is-win .titlebar-fullscreen svg,
+  .titlebar.is-win .titlebar-minimize svg {
     width: 10px;
     height: 10px;
     shape-rendering: crispEdges; }
@@ -261,13 +271,13 @@ h1, h2 {
     display: none; }
   .titlebar.is-win .titlebar.fullscreen svg.fullscreen-svg {
     display: none; }
+  .titlebar.is-win .titlebar-fullscreen:hover,
   .titlebar.is-win .titlebar-minimize:hover,
-  .titlebar.is-win .titlebar-resize:hover,
-  .titlebar.is-win .titlebar-fullscreen:hover {
+  .titlebar.is-win .titlebar-resize:hover {
     background-color: rgba(255, 255, 255, 0.1); }
+  .titlebar.is-win .titlebar-light .titlebar-fullscreen:hover,
   .titlebar.is-win .titlebar-light .titlebar-minimize:hover,
-  .titlebar.is-win .titlebar-light .titlebar-resize:hover,
-  .titlebar.is-win .titlebar-light .titlebar-fullscreen:hover {
+  .titlebar.is-win .titlebar-light .titlebar-resize:hover {
     background-color: rgba(0, 0, 0, 0.1); }
   .titlebar.is-win .titlebar-close:hover {
     background-color: rgba(232, 17, 35, 0.9); }
@@ -275,16 +285,16 @@ h1, h2 {
     fill: white; }
   .titlebar.is-win .titlebar-light .titlebar-close:hover {
     fill: black; }
+  .titlebar.is-win .titlebar-light svg > path,
   .titlebar.is-win .titlebar-light svg polygon,
-  .titlebar.is-win .titlebar-light svg rect,
-  .titlebar.is-win .titlebar-light svg > path {
+  .titlebar.is-win .titlebar-light svg rect {
     fill: white; }
   .titlebar.is-win .titlebar-light .titlebar-close:hover {
     background-color: rgba(232, 17, 35, 0.9); }
 
 /* ---- Side Bar ---- */
 .sidebar {
-  box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.3);
   z-index: 99;
   margin: 0;
   -webkit-app-region: drag;
@@ -297,7 +307,7 @@ h1, h2 {
       position: fixed;
       z-index: 10000;
       top: 25px;
-      transition: top 0.2s; }
+      transition: top .2s; }
       .sidebar.float-menu.nav-up {
         top: -60px; } }
   @media only screen and (min-width: 769px) {
@@ -310,7 +320,8 @@ h1, h2 {
       height: 100vh;
       flex-direction: column;
       position: fixed; } }
-  .sidebar .entry, .sidebar .convert {
+  .sidebar .convert,
+  .sidebar .entry {
     height: 60px;
     flex-grow: 0;
     flex-basis: 60px;
@@ -325,18 +336,22 @@ h1, h2 {
     -webkit-app-region: no-drag;
     -webkit-user-select: none; }
     @media only screen and (max-width: 768px) {
-      .sidebar .entry, .sidebar .convert {
+      .sidebar .convert,
+      .sidebar .entry {
         width: 33.33333%;
         flex-basis: 33.33333%;
         border-bottom: none; }
-        .sidebar .entry:not(:last-child), .sidebar .convert:not(:last-child) {
+        .sidebar .convert:not(:last-child),
+        .sidebar .entry:not(:last-child) {
           border-right: 1px solid #2b3b55; } }
-    .sidebar .entry:hover, .sidebar .convert:hover {
+    .sidebar .convert:hover,
+    .sidebar .entry:hover {
       background-color: #26344b;
-      border-bottom: 0px; }
-    .sidebar .entry.active, .sidebar .convert.active {
+      border-bottom: 0; }
+    .sidebar .convert.active,
+    .sidebar .entry.active {
       background-color: #1f2631;
-      border: 0px;
+      border: 0;
       color: #00ffc0; }
   .sidebar .func-area {
     position: absolute;
@@ -354,10 +369,10 @@ h1, h2 {
       padding: 5px 0;
       border-top: 1px solid #2b3b55;
       display: block;
-      border-bottom: 0px;
+      border-bottom: 0;
       flex-basis: auto; }
       .sidebar .func-area .setting:not(:last-child) {
-        border-top: 0px; }
+        border-top: 0; }
       .sidebar .func-area .setting:hover {
         color: #857af8;
         background: none; }
@@ -412,16 +427,16 @@ h1, h2 {
   box-shadow: none;
   background: #2c3e50;
   color: #fff;
-  border: 0px; }
+  border: 0; }
   #search-view .input:hover {
-    box-shadow: 0px;
-    border: 0px; }
+    box-shadow: 0;
+    border: 0; }
   #search-view .input:focus {
-    box-shadow: 0px;
-    border: 0px; }
+    box-shadow: 0;
+    border: 0; }
   #search-view .input:active {
-    box-shadow: 0px;
-    border: 0px; }
+    box-shadow: 0;
+    border: 0; }
 
 #search-view .loading-bg {
   background-color: #222935;
@@ -448,26 +463,26 @@ h1, h2 {
     height: 40px;
     left: -6px;
     background: #2c3e50;
-    border-left: 0px;
+    border-left: 0;
     color: #425c77;
-    border: 0px;
+    border: 0;
     font-size: 25px; }
     #search-header .button:hover {
-      box-shadow: 0px;
-      border: 0px; }
+      box-shadow: 0;
+      border: 0; }
     #search-header .button:focus {
-      box-shadow: 0px;
-      border: 0px; }
+      box-shadow: 0;
+      border: 0; }
     #search-header .button:active {
-      box-shadow: 0px;
-      border: 0px; }
+      box-shadow: 0;
+      border: 0; }
 
 #search-filters {
   margin-top: 1em; }
   #search-filters .tag {
     -webkit-user-select: none;
     font-size: 14px;
-    margin: 0 0.2em;
+    margin: 0 .2em;
     background-color: #313743;
     color: #526c77;
     cursor: pointer;
@@ -480,7 +495,7 @@ h1, h2 {
 
 #search-results {
   width: 100%;
-  background: url(../img/ground.png) 0 calc(100% - 25px) repeat-x;
+  background: url("../img/ground.png") 0 calc(100% - 25px) repeat-x;
   transition: all 1s ease;
   padding: 0; }
   @media only screen and (max-width: 768px) {
@@ -515,7 +530,7 @@ h1, h2 {
     overflow: hidden;
     white-space: nowrap;
     line-height: 25px;
-    padding: 5px 0 5px 0;
+    padding: 5px 0;
     border-bottom: 1px solid #242e40;
     color: #fff; }
   .search-result.media:hover, .favorite-entry.media:hover {
@@ -523,14 +538,14 @@ h1, h2 {
   .search-result.media.subscribed, .subscribed.favorite-entry.media {
     background-color: #373f4e;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    border-bottom: 0px;
+    border-bottom: 0;
     border-radius: 3px; }
   .search-result.media .content p, .favorite-entry.media .content p {
     margin: 10px 0;
     font-size: 14px;
     color: #8a8a90; }
     .search-result.media .content p.comic-host, .favorite-entry.media .content p.comic-host, .search-result.media .content p.comic-update-info, .favorite-entry.media .content p.comic-update-info {
-      margin: 5px 0 0 0;
+      margin: 5px 0 0;
       color: #698aca;
       font-weight: 600;
       line-height: 15px;
@@ -560,7 +575,7 @@ h1, h2 {
     display: block; }
   @media only screen and (max-width: 768px) {
     #favorite-view {
-      padding: 0.2em 0;
+      padding: .2em 0;
       height: calc(100vh - 25px - 0.8em); } }
   #favorite-view h2 {
     font-size: 38px;
@@ -629,7 +644,7 @@ h1, h2 {
     white-space: nowrap;
     width: 150px;
     line-height: 25px;
-    padding: 15px 0 5px 0;
+    padding: 15px 0 5px;
     border-bottom: 2px dotted #676c75;
     color: #b1dad8; }
     .favorite-entry.media .comic-name small {
@@ -638,7 +653,7 @@ h1, h2 {
       font-size: 13px;
       line-height: 15px; }
   .favorite-entry.media .level {
-    margin: 0.5em 0;
+    margin: .5em 0;
     font-size: 13px;
     line-height: 20px; }
   .favorite-entry.media .level-item {
@@ -699,14 +714,14 @@ h1, h2 {
       transition: .3s ease-in-out; }
   #read-view .toggleTag {
     position: absolute;
-    left: 0px;
+    left: 0;
     bottom: 25px;
     z-index: 2;
     width: 40px;
     height: 40px;
     background: #415983;
     border-radius: 0 3px 3px 0;
-    box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.3);
+    box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.3);
     color: #fff;
     font-size: 28px;
     text-align: center;
@@ -741,7 +756,7 @@ h1, h2 {
       left: -190px; }
     #read-view .middle-panel #comic-header {
       border-left: 7px solid #e4ff67;
-      padding-left: 0px;
+      padding-left: 0;
       width: 250px;
       position: fixed;
       left: calc($sidebar-widt + 1);
@@ -756,7 +771,7 @@ h1, h2 {
           position: fixed;
           height: 60px;
           width: 100%;
-          transition: top 0.2s;
+          transition: top .2s;
           top: calc(60px + 25px);
           cursor: pointer;
           padding: 0 0 0 25px; }
@@ -810,7 +825,7 @@ h1, h2 {
         cursor: pointer;
         background: #373e4a;
         border-bottom: 1px solid #313743;
-        padding: 0.73rem 0.72rem 0.73rem 25px; }
+        padding: .73rem .72rem .73rem 25px; }
         @media only screen and (max-width: 768px) {
           #read-view .middle-panel #chapter-selector .chapter-entry {
             position: relative;
@@ -852,7 +867,7 @@ h1, h2 {
       line-height: 50px;
       text-align: center;
       position: absolute;
-      opacity: 0.6;
+      opacity: .6;
       background: rgba(0, 0, 0, 0.5); }
       #read-view .controlTips li:nth-child(1) {
         left: 55px; }
@@ -890,22 +905,22 @@ h1, h2 {
         height: calc(100vh - 25px);
         display: block;
         margin: 0 auto;
-        background: url(../img/download-bg.png) center 30vh no-repeat;
+        background: url("../img/download-bg.png") center 30vh no-repeat;
         min-width: 334px; }
         @media only screen and (max-width: 768px) {
           #read-view #read-area .comic-page-container img {
             height: calc(100vh - 25px - 60px * 2); } }
       #read-view #read-area .comic-page-container .zoom-btn {
-        opacity: 0.3;
+        opacity: .3;
         font-size: 1.5em;
         position: absolute;
-        padding: 0.5em 0.8em 0.4em;
+        padding: .5em .8em .4em;
         background-color: rgba(0, 0, 0, 0.8);
         border-radius: 0 0 5px 5px;
         z-index: 99; }
         #read-view #read-area .comic-page-container .zoom-btn:hover {
           opacity: 1;
-          transition: opacity 0.2s ease-out; }
+          transition: opacity .2s ease-out; }
     #read-view #read-area .last-page {
       border: solid 1px #aaa;
       padding: 1em;
@@ -923,6 +938,8 @@ h1, h2 {
   #about-view .app-info .app-name {
     font-size: 35px;
     line-height: 1; }
+  #about-view .app-info a:hover {
+    color: #857af8; }
   #about-view .app-info .other-info {
     font-size: 13px;
     line-height: 25px; }
@@ -930,8 +947,8 @@ h1, h2 {
       color: #857af8; }
   #about-view .app-info .version {
     display: inline-block;
-    padding: 0 0 10px 0; }
+    padding: 0 0 10px; }
   #about-view .app-info .description {
-    padding: 15px 0 0 0; }
+    padding: 15px 0 0; }
   #about-view .app-info .update-btn {
-    margin: 0 0 30px 0; }
+    margin: 0 0 30px; }
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 8ab0e6e..d277d57 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,8 +1,7 @@
 /** Import **/
 @import "loading";
-@import url('https://fonts.googleapis.com/css?family=Raleway:100,400');
-@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
-
+@import url( 'https://fonts.googleapis.com/css?family=Raleway:100,400');
+@import url( 'https://fonts.googleapis.com/css?family=Roboto+Condensed');
 
 /** media query **/
 $info-mobile: "only screen and (max-width : 768px)";
@@ -43,824 +42,881 @@ $non-subscribe-hover-color: #558;
 $subscribed-color: #fc5fa1;
 $subscribed-hover-color: #d55;
 
-
 /** Read View */
 // layout
 $chapter-selector-width: 250px;
 
-
 /* ---- Utility ----*/
 /* ---- Overall area ----*/
 // .tile.is-ancestor.content {
 //     display: flex;
 // }
 
-
-
 /** LAYOUT **/
-body, html, .whole-view {
-    font-family:'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
-    background: #222935;
-    @media #{$info-mobile} {
-      height: 100%;
-    }
+.whole-view,
+body,
+html {
+  font-family: 'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
+  background: #222935;
+  @media #{$info-mobile} {
     height: 100%;
-    margin: 0;
-    overflow-y: hidden;
+  }
+  height: 100%;
+  margin: 0;
+  overflow-y: hidden;
 }
 
-h1, h2 {margin: 0;}
+h1,
+h2 {
+  margin: 0;
+}
 
 //ScrollBar
 ::-webkit-scrollbar {
-    width: 10px;
-    @media #{$info-mobile} {
-        display: none;
-    }
+  width: 10px;
+  @media #{$info-mobile} {
+    display: none;
+  }
 }
+
 ::-webkit-scrollbar-track {
-    border-radius: 3px;
-    background: #333c4a
+  border-radius: 3px;
+  background: #333c4a;
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    background-color: #63676d;
+  border-radius: 3px;
+  background-color: #63676d;
 }
 
-
 .whole-view {
+  @media #{$info-mobile} {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.tile.is-ancestor#whole-view {
+    margin: 0;
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    top: 25px;
     @media #{$info-mobile} {
-        display: flex;
-        flex-direction: column;
-    }
-    &.tile.is-ancestor#whole-view {
-        margin: 0;
-        height: 100vh;
-        width: 100vw;
-        position: fixed;
-        top: 25px;
-        @media #{$info-mobile} {
-            height: calc(100vh - #{$titlebar-height});
-        }
+      height: calc(100vh - #{$titlebar-height});
     }
+  }
 }
 
 #main-view {
-    @media #{$info-mobile} {
-        display: flex;
-        margin-top: #{$sidebar-width};
-        // flex: 1 1 auto;
-        // position: relative;
-        // overflow-y: auto;
-    }
-
-    @media #{$info-tablet} {
-        min-height: 100vh;
-        flex-shrink: 0;
-        flex-basis: calc(100% - #{$sidebar-width});
-        // margin-top: $titlebar-height;
-        margin-left: $sidebar-width;
-    }
-    height: 100vh;
-    overflow-y: auto;
+  @media #{$info-mobile} {
+    display: flex;
+    margin-top: #{$sidebar-width};
+    // flex: 1 1 auto;
+    // position: relative;
+    // overflow-y: auto;
+  }
+  @media #{$info-tablet} {
+    min-height: 100vh;
+    flex-shrink: 0;
+    flex-basis: calc(100% - #{$sidebar-width});
+    // margin-top: $titlebar-height;
+    margin-left: $sidebar-width;
+  }
+  height: 100vh;
+  overflow-y: auto;
 }
 
-.input{
-  font-family:'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
+.input {
+  font-family: 'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
 }
 
 /** TITLEBAR **/
 .titlebar.is-mac {
-    padding: 0 3px;
-    background-color: #3c4659;
-    position: fixed;
-    z-index: 10000;
-    width: 100%;
-    height: $titlebar-height;
-    top: 0;
+  padding: 0 3px;
+  background-color: #3c4659;
+  position: fixed;
+  z-index: 10000;
+  width: 100%;
+  height: $titlebar-height;
+  top: 0;
+  -webkit-app-region: drag;
+  margin: 0;
+  overflow: hidden;
+
+  &.webkit-draggable {
     -webkit-app-region: drag;
-    margin: 0;
+  }
+
+  &:after {
+    content: ' ';
+    display: table;
+    clear: both;
+  }
+
+  #titlebar-title {
+    text-align: center;
+    line-height: $titlebar-height;
+    color: #fff;
+    padding: 0 60px 0 0;
     overflow: hidden;
-    &.webkit-draggable {
-        -webkit-app-region: drag;
-    }
+  }
+
+  .titlebar-stoplight {
+    float: left;
+    text-align: left;
 
     &:after {
-        content: ' ';
-        display: table;
-        clear: both;
+      content: ' ';
+      display: table;
+      clear: both;
     }
 
-    #titlebar-title {
-        text-align: center;
-        line-height: $titlebar-height;
-        color: #fff;
-        padding: 0 60px 0 0;
-        overflow: hidden;
+    &:hover {
+      svg,
+      svg.fullscreen-svg,
+      svg.maximize-svg {
+        opacity: 1;
+      }
     }
+  }
 
+  .titlebar-close,
+  .titlebar-fullscreen,
+  .titlebar-minimize {
+    float: left;
+    border-radius: 50%;
+    margin: 6px 4px;
+    line-height: 0;
+    width: 12px;
+    height: 12px;
+  }
 
-    .titlebar-stoplight {
-        float:left;
-        text-align:left;
-        &:after {
-            content: ' ';
-            display: table;
-            clear: both;
-        }
+  .titlebar-close {
+    border: 1px solid #e2463f;
+    background-color: #ff5f57;
+    margin-left: 6px;
 
-        &:hover {
-            svg,
-            svg.fullscreen-svg,
-            svg.maximize-svg {
-                opacity: 1;
-            }
-        }
+    &:hover,
+    :active {
+      border-color: #ad3934;
+      background-color: #bf4943;
     }
 
-    .titlebar-close,.titlebar-minimize,.titlebar-fullscreen {
-        float: left;
-        border-radius: 50%;
-        margin: 6px 4px;
-        line-height: 0;
-        width: 12px;
-        height: 12px;
+    svg {
+      width: 6px;
+      height: 6px;
+      margin-top: 2px;
+      margin-left: 2px;
+      opacity: 0;
     }
 
-    .titlebar-close {
-        border: 1px solid #e2463f;
-        background-color: #ff5f57;
-        margin-left: 6px;
-        &:hover, :active {
-            border-color: #ad3934;
-            background-color: #bf4943;
-        }
+  }
 
-        svg {
-            width: 6px;
-            height: 6px;
-            margin-top: 2px;
-            margin-left: 2px;
-            opacity: 0;
-        }
+  .titlebar-minimize {
+    border: 1px solid #e1a116;
+    background-color: #ffbd2e;
 
+    &:hover,
+    :active {
+      border-color: #ad7d15;
+      background-color: #bf9123;
     }
 
-    .titlebar-minimize {
-        border: 1px solid #e1a116;
-        background-color: #ffbd2e;
-        &:hover, :active {
-            border-color: #ad7d15;
-            background-color: #bf9123;
-        }
-        svg {
-            width: 8px;
-            height: 8px;
-            margin-top: 1px;
-            margin-left: 1px;
-            opacity: 0;
-        }
+    svg {
+      width: 8px;
+      height: 8px;
+      margin-top: 1px;
+      margin-left: 1px;
+      opacity: 0;
     }
+  }
 
+  .titlebar-fullscreen,
+  .titlebar-maximize {
+    border: 1px solid #12ac28;
+    background-color: #28c940;
 
-    .titlebar-fullscreen,
-    .titlebar-maximize {
-        border: 1px solid #12ac28;
-        background-color: #28c940;
-
-        &:hover, :active {
-            border-color: #128622;
-            background-color: #1f9a31;
-        }
+    &:hover,
+    :active {
+      border-color: #128622;
+      background-color: #1f9a31;
     }
+  }
 
-    svg.fullscreen-svg {
-        width: 6px;
-        height: 6px;
-        margin-top: 2px;
-        margin-left: 2px;
-        opacity: 0;
-    }
+  svg.fullscreen-svg {
+    width: 6px;
+    height: 6px;
+    margin-top: 2px;
+    margin-left: 2px;
+    opacity: 0;
+  }
 
-    svg.maximize-svg {
-        width: 8px;
-        height: 8px;
-        margin-top: 1px;
-        margin-left: 1px;
-        opacity: 0;
-        display: none;
-    }
+  svg.maximize-svg {
+    width: 8px;
+    height: 8px;
+    margin-top: 1px;
+    margin-left: 1px;
+    opacity: 0;
+    display: none;
+  }
 
-    &.alt svg.fullscreen-svg {
-        display: none;
-    }
+  &.alt svg.fullscreen-svg {
+    display: none;
+  }
 
-    &.alt svg.maximize-svg {
-        display: block;
-    }
+  &.alt svg.maximize-svg {
+    display: block;
+  }
 }
 
 .titlebar.is-win {
-    padding: 0px;
-    background-color: #3c4659;
-    position: fixed;
-    z-index: 100000;
-    width: 100%;
-    height: $titlebar-height;
-    top: 0;
+  padding: 0;
+  background-color: #3c4659;
+  position: fixed;
+  z-index: 100000;
+  width: 100%;
+  height: $titlebar-height;
+  top: 0;
+  -webkit-app-region: drag;
+  margin: 0;
+  height: 32px;
+  overflow: hidden;
+
+  &.webkit-draggable {
     -webkit-app-region: drag;
-    margin: 0;
-    height: 32px;
-    overflow: hidden;
+  }
 
-    &.webkit-draggable {
-        -webkit-app-region: drag;
-    }
+  &:after {
+    content: ' ';
+    display: table;
+    clear: both;
+  }
+
+  #titlebar-title {
+    text-align: center;
+    line-height: 32px;
+    color: #fff;
+    padding: 0 0 0 110px;
+  }
+
+  .titlebar-stoplight {
+    float: right;
+    text-align: left;
+    -webkit-app-region: no-drag;
 
     &:after {
-        content: ' ';
-        display: table;
-        clear: both;
+      content: ' ';
+      display: table;
+      clear: both;
     }
+  }
 
-    #titlebar-title {
-        text-align: center;
-        line-height: 32px;
-        color: #fff;
-        padding: 0 0 0 110px;
-    }
-
-    .titlebar-stoplight {
-        float:right;
-        text-align:left;
-        -webkit-app-region: no-drag;
-        &:after {
-            content: ' ';
-            display: table;
-            clear: both;
-        }
-    }
+  .titlebar-close,
+  .titlebar-fullscreen,
+  .titlebar-minimize {
+    float: left;
+    width: 45px;
+    height: 31px;
+    margin: 1px 1px 0 0;
+    text-align: center;
+    line-height: 29px;
+    transition: background-color .2s;
+  }
 
-    .titlebar-close,
-    .titlebar-minimize,
-    .titlebar-fullscreen {
-      float: left;
-      width: 45px;
-      height: 31px;
-      margin: 1px 1px 0 0;
-      text-align: center;
-      line-height: 29px;
-      transition: background-color .2s;
-    }
-    .titlebar-close svg,
-    .titlebar-minimize svg,
-    .titlebar-fullscreen  svg{
-      width: 10px;
-      height: 10px;
-      shape-rendering: crispEdges;
-    }
+  .titlebar-close svg,
+  .titlebar-fullscreen svg,
+  .titlebar-minimize svg {
+    width: 10px;
+    height: 10px;
+    shape-rendering: crispEdges;
+  }
 
-    .titlebar-close svg polygon{
-      transition: fill .2s;
-        }
-    .titlebar:not(.fullscreen) svg.maximize-svg {
-        display: none;
-    }
-    .titlebar.fullscreen svg.fullscreen-svg {
+  .titlebar-close svg polygon {
+    transition: fill .2s;
+  }
+
+  .titlebar:not(.fullscreen) svg.maximize-svg {
     display: none;
-    }
+  }
 
-    .titlebar-minimize:hover,
-    .titlebar-resize:hover,
-    .titlebar-fullscreen:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
+  .titlebar.fullscreen svg.fullscreen-svg {
+    display: none;
+  }
 
-    .titlebar-light .titlebar-minimize:hover,
-    .titlebar-light .titlebar-resize:hover,
-    .titlebar-light .titlebar-fullscreen:hover {
-        background-color: rgba(0, 0, 0, 0.1);
-    }
+  .titlebar-fullscreen:hover,
+  .titlebar-minimize:hover,
+  .titlebar-resize:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
 
-    .titlebar-close:hover {
-        background-color: rgba(232, 17, 35, 0.9);
-    }
+  .titlebar-light .titlebar-fullscreen:hover,
+  .titlebar-light .titlebar-minimize:hover,
+  .titlebar-light .titlebar-resize:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
 
-    .titlebar-close:hover svg polygon {
-        fill: rgba(255, 255, 255, 1);
-    }
+  .titlebar-close:hover {
+    background-color: rgba(232, 17, 35, 0.9);
+  }
 
-    .titlebar-light .titlebar-close:hover {
-        fill: rgba(0, 0, 0, 1);
-    }
+  .titlebar-close:hover svg polygon {
+    fill: rgba(255, 255, 255, 1);
+  }
 
-    .titlebar-light svg polygon,
-    .titlebar-light svg rect,
-    .titlebar-light svg > path {
-        fill: rgba(255, 255, 255, 1);
-    }
+  .titlebar-light .titlebar-close:hover {
+    fill: rgba(0, 0, 0, 1);
+  }
 
-    .titlebar-light .titlebar-close:hover {
-        background-color: rgba(232, 17, 35, 0.9);
-    }
+  .titlebar-light svg > path,
+  .titlebar-light svg polygon,
+  .titlebar-light svg rect {
+    fill: rgba(255, 255, 255, 1);
+  }
+
+  .titlebar-light .titlebar-close:hover {
+    background-color: rgba(232, 17, 35, 0.9);
+  }
 
 }
 
 /* ---- Side Bar ---- */
 // Tabview switcher
 .sidebar {
-    box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.3);
-    z-index: 99;
-    @media #{$info-mobile} {
-        &.float-menu {
-            display:flex;
-            flex-direction: row;
-            width: 100%;
-            // flex: 0 0 auto
-            position: fixed;
-            z-index: 10000;
-            top: $titlebar-height;
-            transition: top 0.2s;
-
-            &.nav-up {
-                top: -#{$sidebar-width};
-
-            }
-        }
+  box-shadow: 2px 0 5px 0 rgba(0,0,0,0.3);
+  z-index: 99;
+  @media #{$info-mobile} {
+    &.float-menu {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      // flex: 0 0 auto
+      position: fixed;
+      z-index: 10000;
+      top: $titlebar-height;
+      transition: top .2s;
+
+      &.nav-up {
+        top: -#{$sidebar-width};
+
+      }
     }
+  }
+  @media #{$info-tablet} {
+    width: $sidebar-width;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: $sidebar-width;
+    top: 25px;
+    height: 100vh;
+    flex-direction: column;
+    position: fixed;
+  }
+  margin: 0;
+  -webkit-app-region: drag;
+  background-color: $sidebar-bg-color;
 
-    @media #{$info-tablet} {
-        width: $sidebar-width;
-        flex-grow: 0;
-        flex-shrink: 0;
-        flex-basis: $sidebar-width;
-        top: 25px;
-        height: 100vh;
-        flex-direction: column;
-        position:fixed;
+  .convert,
+  .entry {
+    @media #{$info-mobile} {
+      width: 33.33333%;
+      flex-basis: 33.33333%;
+      border-bottom: none;
+
+      &:not(:last-child) {
+        border-right: 1px solid $sidebar-divider-color;
+      }
     }
-    margin: 0;
-    -webkit-app-region: drag;
-    background-color: $sidebar-bg-color;
+    // Size
+    height: $sidebar-width;
+    flex-grow: 0;
+    flex-basis: $sidebar-width;
 
-    .entry, .convert {
-        @media #{$info-mobile} {
-            width: 33.33333%;
-            flex-basis: 33.33333%;
-            border-bottom: none;
-            &:not(:last-child) {
-                border-right: 1px solid $sidebar-divider-color;
-            }
-        }
-        // Size
-        height: $sidebar-width;
-        flex-grow:0;
-        flex-basis: $sidebar-width;
-
-        // content-inside arrangement
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        // color
-        border-bottom: 1px solid #121b29;
-        border-top: 1px solid $sidebar-divider-color;
-        color: $sidebar-icon-color;
-        font-size: 22px;
+    // content-inside arrangement
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-        // gesture
-        cursor: pointer;
+    // color
+    border-bottom: 1px solid #121b29;
+    border-top: 1px solid $sidebar-divider-color;
+    color: $sidebar-icon-color;
+    font-size: 22px;
 
-        //divider
-        -webkit-app-region: no-drag;
-        -webkit-user-select: none;
+    // gesture
+    cursor: pointer;
 
-        &:hover {
-            background-color: $sidebar-entry-hover-bg-color;
-            border-bottom: 0px;
-        }
+    //divider
+    -webkit-app-region: no-drag;
+    -webkit-user-select: none;
 
-        &.active {
-            background-color: $sidebar-entry-active-bg-color;
-            border: 0px;
-            color: #00ffc0;
-        }
+    &:hover {
+      background-color: $sidebar-entry-hover-bg-color;
+      border-bottom: 0;
     }
 
-    .func-area{
-      position: absolute;
-      bottom: 25px;
-      left: 0;
-      z-index: 10;
-      width: 100%;
+    &.active {
+      background-color: $sidebar-entry-active-bg-color;
+      border: 0;
+      color: #00ffc0;
+    }
+  }
 
-      .setting {
-            height: 40px;
-            font-size: 20px;
-            color: #fff;
-            width: 80%;
-            text-align: center;
-            margin: 0 auto;
-            padding: 5px 0;
-            border-top: 1px solid $sidebar-divider-color;
-            display: block;
-            border-bottom: 0px;
-            flex-basis: auto;
-
-            &:not(:last-child) {
-                border-top: 0px;
-            }
-            &:hover {
-                color: #857af8;
-                background: none;
-            }
-            &.active {
-                color: #857af8;
-                background: none;
-                border-top: 1px solid $sidebar-divider-color;
-              }
-            @media #{$info-mobile} {
-                  display: none;
-            }
-        }
+  .func-area {
+    position: absolute;
+    bottom: 25px;
+    left: 0;
+    z-index: 10;
+    width: 100%;
+
+    .setting {
+      height: 40px;
+      font-size: 20px;
+      color: #fff;
+      width: 80%;
+      text-align: center;
+      margin: 0 auto;
+      padding: 5px 0;
+      border-top: 1px solid $sidebar-divider-color;
+      display: block;
+      border-bottom: 0;
+      flex-basis: auto;
+
+      &:not(:last-child) {
+        border-top: 0;
+      }
+
+      &:hover {
+        color: #857af8;
+        background: none;
+      }
+
+      &.active {
+        color: #857af8;
+        background: none;
+        border-top: 1px solid $sidebar-divider-color;
+      }
+      @media #{$info-mobile} {
+        display: none;
+      }
     }
+  }
 }
 
 /* SEARCH VIEW */
 #search-view {
+  @media #{$info-mobile} {
+    min-height: 100%;
+    // height: 100%;
+    // display: block;
+    &:after {
+      content: ('.');
+      height: 50px;
+      display: block;
+    }
+  }
+
+  h2 {
+    font-size: 80px;
+    font-family: 'Raleway', sans-serif;
+    color: #17c4bb;
+    width: 600px;
+    margin-top: 80px;
+    margin-left: calc(50% - 300px);
+    font-weight: 100;
+    transition: all 1s ease;
+    text-align: left;
     @media #{$info-mobile} {
-        min-height: 100%;
-        // height: 100%;
-        // display: block;
-        &:after{
-            content: ('.');
-            height: 50px;
-            display: block;
-        }
+      font-size: 35px;
+      width: 100%;
+      text-align: center;
+      margin: 15% 0 auto;
     }
 
-    h2{
-      font-size: 80px;
-      font-family: 'Raleway', sans-serif;
-      color: #17c4bb;
-      width: 600px;
-      margin-top: 80px;
-      margin-left: calc(50% - 300px);
-      font-weight: 100;
-      transition: all 1s ease;
-      text-align: left;
+    span {
+      color: #e4ff67;
+    }
+
+    &.active {
+      font-size: 30px;
+      font-weight: 400;
+      margin: 0;
+      width: 300px;
       @media #{$info-mobile} {
-          font-size: 35px;
-          width: 100%;
-          text-align: center;
-          margin: 15% 0 auto;
-      }
-      span{
-        color: #e4ff67;
-      }
-      &.active{
-        font-size: 30px;
-        font-weight: 400;
-        margin: 0;
-        width: 300px;
-        @media #{$info-mobile} {
-            width: 100%;
-            text-align: center;
-        }
+        width: 100%;
+        text-align: center;
       }
     }
-    .input{
-      border-radius: 5px 0 0 5px;
-      height: 40px;
-      box-shadow: none;
-      background: #2c3e50;
-      color: #fff;
-      border: 0px;
-      &:hover{
-        box-shadow: 0px;
-        border: 0px;
-      }
-      &:focus{
-        box-shadow: 0px;
-        border: 0px;
-      }
-      &:active{
-        box-shadow: 0px;
-        border: 0px;
-      }
+  }
+
+  .input {
+    border-radius: 5px 0 0 5px;
+    height: 40px;
+    box-shadow: none;
+    background: #2c3e50;
+    color: #fff;
+    border: 0;
+
+    &:hover {
+      box-shadow: 0;
+      border: 0;
     }
-    .loading-bg {
-        background-color: #222935;
-        display: flex;
-        flex: 1 1 auto;
-        align-items: center;
-        justify-content: center;
-        @media #{$info-mobile} {
-            height: calc(100vh - #{$sidebar-width} - 68px);
-        }
+
+    &:focus {
+      box-shadow: 0;
+      border: 0;
     }
-    .loading {
-        width: 2em;
-        height: 2em;
+
+    &:active {
+      box-shadow: 0;
+      border: 0;
+    }
+  }
+
+  .loading-bg {
+    background-color: #222935;
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    @media #{$info-mobile} {
+      height: calc(100vh - #{$sidebar-width} - 68px);
     }
+  }
+
+  .loading {
+    width: 2em;
+    height: 2em;
+  }
 }
 
 #search-header {
-    background-color: $search-header-bg-color;
-    padding: 1em;
+  background-color: $search-header-bg-color;
+  padding: 1em;
 
-    .container {
-        max-width: $container-max-width;;
+  .container {
+    max-width: $container-max-width;
+  }
+
+  .button {
+    width: 100%;
+    border-radius: 0 5px 5px 0;
+    height: 40px;
+    left: -6px;
+    background: #2c3e50;
+    border-left: 0;
+    color: #425c77;
+    border: 0;
+    font-size: 25px;
+
+    &:hover {
+      box-shadow: 0;
+      border: 0;
     }
 
-    .button {
-        width: 100%;
-        border-radius: 0 5px 5px 0;
-        height: 40px;
-        left: -6px;
-        background: #2c3e50;
-        border-left: 0px;
-        color: #425c77;
-        border: 0px;
-        font-size: 25px;
-        &:hover{
-          box-shadow: 0px;
-          border: 0px;
-        }
-        &:focus{
-          box-shadow: 0px;
-          border: 0px;
-        }
-        &:active{
-          box-shadow: 0px;
-          border: 0px;
-        }
+    &:focus {
+      box-shadow: 0;
+      border: 0;
+    }
+
+    &:active {
+      box-shadow: 0;
+      border: 0;
     }
+  }
 }
 
 #search-filters {
-    margin-top: 1em;
-    .tag {
-        -webkit-user-select: none;
-        font-size: 14px;
-        margin: 0 0.2em;
-        background-color: #313743;
-        color: #526c77;
-        cursor: pointer;
-        font-family:'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
-        &:hover {
-            background-color: #425c77;
-        }
-        &.active {
-            background-color: #857af8;
-            color: #fff;
-        }
+  margin-top: 1em;
+
+  .tag {
+    -webkit-user-select: none;
+    font-size: 14px;
+    margin: 0 .2em;
+    background-color: #313743;
+    color: #526c77;
+    cursor: pointer;
+    font-family: 'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
+
+    &:hover {
+      background-color: #425c77;
     }
+
+    &.active {
+      background-color: #857af8;
+      color: #fff;
+    }
+  }
 }
 
-#search-results{
-    width: 100%;
-    background: url(../img/ground.png) 0 calc(100% - 25px) repeat-x;
-    transition: all 1s ease;
+#search-results {
+  width: 100%;
+  background: url("../img/ground.png") 0 calc(100% - 25px) repeat-x;
+  transition: all 1s ease;
+  padding: 0;
+  @media #{$info-mobile} {
+    background-image: none;
+  }
+  @media #{$info-tablet} {
     padding: 0;
-    @media #{$info-mobile} {
-        background-image: none;
-    }
-    @media #{$info-tablet} {
-        padding: 0;
-    }
-    &:after{
-      content: ('.');
-      height: 50px;
-      display: block;
+  }
 
-    }
-    &.active{
-      background-image: none;
-      max-width: $container-max-width;
-    }
+  &:after {
+    content: ('.');
+    height: 50px;
+    display: block;
+
+  }
+
+  &.active {
+    background-image: none;
+    max-width: $container-max-width;
+  }
 
 }
 
 .search-result.media {
-    margin: 5px 0;
-    padding: 1em;
-    border-top: none;
-    box-shadow: none;
-    background: transparent;
-    border-bottom: 1px solid #313e56;
-    cursor: pointer;
+  margin: 5px 0;
+  padding: 1em;
+  border-top: none;
+  box-shadow: none;
+  background: transparent;
+  border-bottom: 1px solid #313e56;
+  cursor: pointer;
+  color: #fff;
+
+  .thumb {
+    width: 115px;
+    height: 160px;
+    border-radius: 3px;
+  }
+
+  .comic-name {
+    font-size: 23px;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: 25px;
+    padding: 5px 0;
+    border-bottom: 1px solid #242e40;
     color: #fff;
-    .thumb{
-      width: 115px;
-      height: 160px;
-      border-radius: 3px;
+  }
+
+  &:hover {
+    background-color: $search-result-hover-bg-color;
+  }
+
+  &.subscribed {
+    background-color: $search-result-bg-color;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+    border-bottom: 0;
+    border-radius: 3px;
+  }
+
+  .content p {
+    margin: 10px 0;
+    font-size: 14px;
+    color: #8a8a90;
+
+    &.comic-host,
+    &.comic-update-info {
+      margin: 5px 0 0;
+      color: #698aca;
+      font-weight: 600;
+      line-height: 15px;
+      font-size: 13px;
     }
-    .comic-name{
-      font-size: 23px;
+
+    &.comic-description {
+      height: 85px;
+      color: #b6cfce;
       overflow: hidden;
-      white-space : nowrap;
-      line-height: 25px;
-      padding: 5px 0 5px 0;
-      border-bottom: 1px solid #242e40;
-      color: #fff;
     }
+  }
+
+  .subscribe-btn {
+    font-size: 1.4em;
+    color: $non-subscribe-color;
+
     &:hover {
-        background-color: $search-result-hover-bg-color;
-    }
-    &.subscribed {
-        background-color: $search-result-bg-color;
-        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
-        border-bottom: 0px;
-        border-radius: 3px;
-        }
-    .content p {
-        margin: 10px 0;
-        font-size: 14px;
-        color: #8a8a90;
-        &.comic-host, &.comic-update-info {
-            margin: 5px 0 0 0;
-            color:#698aca;
-            font-weight: 600;
-            line-height: 15px;
-            font-size: 13px;
-        }
-        &.comic-description {
-            height: 85px;
-            color: #b6cfce;
-            overflow: hidden;
-        }
+      color: $non-subscribe-hover-color;
     }
 
-    .subscribe-btn {
-        font-size: 1.4em;
-        color: $non-subscribe-color;
+    &.subscribed {
+      color: $subscribed-color;
 
-        &:hover {
-            color: $non-subscribe-hover-color;
-        }
-        &.subscribed {
-            color: $subscribed-color;
-            &:hover {
-                color: $subscribed-hover-color;
-            }
-        }
+      &:hover {
+        color: $subscribed-hover-color;
+      }
     }
+  }
 }
 
 /** FAVORITE VIEW **/
 #favorite-view {
-    background: #222935;
-    height: 100vh;
-    padding: 2em 0;
-    &:after{
-      content: ('.');
-      height: 50px;
-      display: block;
+  background: #222935;
+  height: 100vh;
+  padding: 2em 0;
 
-    }
-    // max-width: 960px
-    @media #{$info-mobile} {
-        padding: 0.2em 0;
-        height: calc(100vh - #{$titlebar-height} - 0.8em);
-    }
-    h2{
-      font-size: 38px;
-      font-family: 'Raleway', sans-serif;
-      color: #7a8587;
-      width: 100%;
-      text-align: center;
-      margin: 0 auto;
-    }
-    .columns {
-        flex-wrap: wrap;
-        align-content: flex-start;
-        margin: auto;
-        @media #{$info-tablet} {
-            width: 647px;
-        }
-        @media #{$info-widescreen} {
-            width: 970.5px;
-        }
+  &:after {
+    content: ('.');
+    height: 50px;
+    display: block;
 
-        @media #{$info-fullhd} {
-            width: 1294px;
-        }
+  }
+  // max-width: 960px
+  @media #{$info-mobile} {
+    padding: .2em 0;
+    height: calc(100vh - #{$titlebar-height} - 0.8em);
+  }
 
-    }
+  h2 {
+    font-size: 38px;
+    font-family: 'Raleway', sans-serif;
+    color: #7a8587;
+    width: 100%;
+    text-align: center;
+    margin: 0 auto;
+  }
 
-    .media-content{
-      color: #fff;
+  .columns {
+    flex-wrap: wrap;
+    align-content: flex-start;
+    margin: auto;
+    @media #{$info-tablet} {
+      width: 647px;
     }
-    .icon-help{
-      color: #e4ff67;
-      font-size: 150px;
-      text-align: center;
-      width:  150px;
-      display: block;
-      margin: 100px auto 10px;
+    @media #{$info-widescreen} {
+      width: 970.5px;
     }
-    .messages{
-      color:  #fff;
-      text-align: center;
-      font-size: 25px;
-      width:  100%;
+    @media #{$info-fullhd} {
+      width: 1294px;
     }
-}
 
+  }
+
+  .media-content {
+    color: #fff;
+  }
+
+  .icon-help {
+    color: #e4ff67;
+    font-size: 150px;
+    text-align: center;
+    width: 150px;
+    display: block;
+    margin: 100px auto 10px;
+  }
+
+  .messages {
+    color: #fff;
+    text-align: center;
+    font-size: 25px;
+    width: 100%;
+  }
+}
 
 .favorite-entry.media {
-    @extend .search-result.media;
-    // margin: 0 auto;
-    overflow: hidden;
+  @extend .search-result.media;
+  // margin: 0 auto;
+  overflow: hidden;
+  border-radius: 3px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+  position: relative;
+  margin: 3px;
+  background: #373f4e;
+  border-top: 7px solid #3c4659;
+
+  &:hover {
+    background: #303744;
+  }
+
+  .media-left {
+    margin-right: 5px;
+  }
+
+  .media-right {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 2;
+  }
+
+  .content p {
+    margin: 0;
+    line-height: 15px;
+    padding: 0;
+  }
+
+  .thumb {
+    width: 115px;
+    height: 160px;
     border-radius: 3px;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
-    position: relative;
-    margin: 3px;
-    background: #373f4e;
-    border-top: 7px solid #3c4659;
-    &:hover{
-      background: #303744;
-    }
-    .media-left {
-        margin-right: 5px;
-    }
-    .media-right {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-      z-index: 2;
-    }
+  }
 
-    .content p {
-        margin: 0;
-        line-height: 15px;
-        padding: 0;
-    }
-    .thumb{
-      width: 115px;
-      height: 160px;
-      border-radius: 3px;
-    }
-    .comic-name{
-      font-size: 20px;
-      overflow: hidden;
-      text-overflow : ellipsis;
-      white-space : nowrap;
-      width : 150px;
-      line-height: 25px;
-      padding: 15px 0 5px 0;
-      border-bottom: 2px dotted #676c75;
-      color: #b1dad8;
-      small{
-        font-family: 'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
-        font-weight: 600;
-        font-size:13px;
-        line-height: 15px;
-      }
-    }
-    .level {
-        margin: 0.5em 0;
-        font-size: 13px;
-        line-height: 20px;
-    }
-    .level-item{
+  .comic-name {
+    font-size: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 150px;
+    line-height: 25px;
+    padding: 15px 0 5px;
+    border-bottom: 2px dotted #676c75;
+    color: #b1dad8;
+
+    small {
       font-family: 'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
-      margin: 0;
-      padding: 0;
+      font-weight: 600;
       font-size: 13px;
-      color: #fff;
-      justify-content: inherit;
-
-      &.last-read, &.newest{
-        display: block;
-        width: 105px;
-        overflow: hidden;
-        text-overflow : ellipsis;
-        white-space : nowrap;
-      }
-    }
-    @media #{$info-tablet} {
-        width: 317px;
+      line-height: 15px;
     }
+  }
 
-    &.hasupdate {
-        border-top: 10px solid #857af8
+  .level {
+    margin: .5em 0;
+    font-size: 13px;
+    line-height: 20px;
+  }
+
+  .level-item {
+    font-family: 'Roboto Condensed',"文泉驛正黑","WenQuanYi Zen Hei","黑體-繁","Heiti TC","微軟正黑體","Microsoft JhengHei",sans-serif;
+    margin: 0;
+    padding: 0;
+    font-size: 13px;
+    color: #fff;
+    justify-content: inherit;
+
+    &.last-read,
+    &.newest {
+      display: block;
+      width: 105px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
-    .subscribe-btn{
-      color: #697d8d;
-      &:hover{
-        color: #857af8;
-      }
+  }
+  @media #{$info-tablet} {
+    width: 317px;
+  }
+
+  &.hasupdate {
+    border-top: 10px solid #857af8;
+  }
+
+  .subscribe-btn {
+    color: #697d8d;
+
+    &:hover {
+      color: #857af8;
     }
+  }
 }
 /** READ VIEW **/
 #read-view {
   transition: all .8s ease;
-  .chapToggle{
+
+  .chapToggle {
     @media #{$info-mobile} {
-        display: none;
+      display: none;
     }
     color: #b1cece;
     font-size: 16px;
@@ -872,39 +928,44 @@ h1, h2 {margin: 0;}
     position: relative;
     z-index: 9999;
     height: 40px;
-    span{
-        font-size: 28px;
-        float: left;
-        margin-left: calc(50% - 40px)
-        }
-    p{
+
+    span {
+      font-size: 28px;
+      float: left;
+      margin-left: calc(50% - 40px);
+    }
+
+    p {
       line-height: 27px;
       display: block;
       padding: 0;
       opacity: 0;
     }
-    &:hover{
-      p{
+
+    &:hover {
+      p {
         opacity: 1;
         padding: 0 0 0 35px;
         transition: .3s ease-in-out;
       }
-      span{
+
+      span {
         margin: 0;
         transition: .3s ease-in-out;
       }
     }
   }
+
   .toggleTag {
     position: absolute;
-    left: 0px;
+    left: 0;
     bottom: 25px;
     z-index: 2;
     width: 40px;
     height: 40px;
     background: #415983;
     border-radius: 0 3px 3px 0;
-    box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.3);
+    box-shadow: 2px 0 5px 0 rgba(0,0,0,0.3);
     color: #fff;
     font-size: 28px;
     text-align: center;
@@ -912,287 +973,331 @@ h1, h2 {margin: 0;}
     display: block;
     transition: all 1s ease;
 
-    &.active{
+    &.active {
       left: 60px;
       transition: all 1s ease;
     }
-    &:hover{
+
+    &:hover {
       background: #0cffc0;
     }
   }
-    .middle-panel {
-        @media #{$info-mobile} {
-            height: calc(100vh - #{$sidebar-width} - #{$titlebar-height});
-            width: 100vw;
-            top: calc( #{$titlebar-height} + #{$sidebar-width});
-            z-index: 3;
 
+  .middle-panel {
+    @media #{$info-mobile} {
+      height: calc(100vh - #{$sidebar-width} - #{$titlebar-height});
+      width: 100vw;
+      top: calc( #{$titlebar-height} + #{$sidebar-width});
+      z-index: 3;
+
+    }
+    @media #{$info-tablet} {
+      height: 100vh;
+      width: $chapter-selector-width;
+      position: fixed;
+      overflow-y: auto;
+      left: $sidebar-width;
+      overflow-x: hidden;
+    }
+
+    &.active {
+      left: -190px;
+    }
+    transition: all .8s ease;
+    z-index: 0;
+    position: fixed;
+    -webkit-user-select: none;
+
+    #comic-header {
+      border-left: 7px solid #e4ff67;
+      padding-left: 0;
+      @media #{$info-mobile} {
+        &.float-menu {
+          position: fixed;
+          height: $sidebar-width;
+          width: 100%;
+          transition: top .2s;
+          top: calc(#{$sidebar-width} + #{$titlebar-height});
+          cursor: pointer;
+          padding: 0 0 0 25px;
+
+          &.nav-up {
+            top: -#{$sidebar-width};
+          }
         }
-        @media #{$info-tablet} {
-            height: 100vh;
-            width: $chapter-selector-width;
-            position: fixed;
-            overflow-y: auto;
-            left: $sidebar-width;
-            overflow-x: hidden;
-        }
-        &.active{
-          left: -190px;
-        }
-        transition: all .8s ease;
-        z-index: 0;
-        position: fixed;
-        -webkit-user-select: none;
-        #comic-header {
-            border-left: 7px solid #e4ff67;
-            padding-left: 0px;
-            @media #{$info-mobile} {
-                &.float-menu {
-                    position: fixed;
-                    height: $sidebar-width;
-                    width: 100%;
-                    transition: top 0.2s;
-                    top: calc(#{$sidebar-width} + #{$titlebar-height});
-                    cursor: pointer;
-                    padding: 0 0 0 25px;
-                    &.nav-up {
-                        top: -#{$sidebar-width};
-                    }
-                }
-            }
-            @media #{$info-tablet} {
-
-            }
-            width: #{$chapter-selector-width};
-            position: fixed;
-            left: calc($sidebar-widt + 1);
-            height: $sidebar-width;
-            box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3);
-            font-size: 16px;
-            background-color: #4d5769;
-            color: #fff;
-            display: flex;
-            .level-item {
-                margin: 0;
-            }
-            .subscribe-btn {
-                cursor: pointer;
-                position: absolute;
-                right: 15px;
-                top: 19px;
-                &.subscribed {
-                    color: #ff558d;
-                }
-            }
-        }
-        .loading-bg {
-            @media #{$info-mobile} {
-                height: calc(100vh - #{$sidebar-width} - 68px);
-            }
-            @media #{$info-tablet} {
-                width: $chapter-selector-width;
-                position: fixed;
-                height: calc(100vh - #{$sidebar-width});
-                background-color: rgba(0,0,0,0.8);
-                margin-top: $sidebar-width;
-            }
-            z-index: 10000;
-            .loading {
-                width: 4em;
-                height: 4em;
-                margin: auto;
-                vertical-align: middle;
-                position: absolute;
-                top: 50%;
-                left: calc(50% - 2em);
-            }
+      }
+      @media #{$info-tablet} {
         }
-        #chapter-selector {
-            @media #{$info-mobile} {
-                height: calc(100vh - #{$sidebar-width}*2);
-                margin-top: $sidebar-width
-            }
-            @media #{$info-tablet} {
-                width: $chapter-selector-width;
-            }
-            overflow-y: auto;
-            height: calc(100vh - 125px);
-            margin-top: calc(#{$sidebar-width} + 1px);
-            padding: 0;
-            color: #cecece;
-            &:hover{
-              overflow-y: scroll;
-            }
-            .chapter-entry {
-                @media #{$info-mobile} {
-                    position: relative;
-                    z-index: 1000;
-                }
-                cursor: pointer;
-                background: #373e4a;
-                border-bottom: 1px solid #313743;
-                padding:0.73rem 0.72rem 0.73rem 25px;
-                &:hover {
-                    background-color: #2f3640;
-                }
-                &.read {
-                    background-color: #3f4654;
-                }
-                &.active {
-                    background-color: #2f3640;
-                    border-bottom: 2px solid #17c4bb;
-                    &:before{
-                      color: #17c4bb;
-                    }
-                }
-                &:before{
-                  content:"• ";
-                  font-size: 22px;
-                  line-height: 22px;
-                  letter-spacing: 3px;
-                }
-            }
+      width: #{$chapter-selector-width};
+      position: fixed;
+      left: calc($sidebar-widt + 1);
+      height: $sidebar-width;
+      box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3);
+      font-size: 16px;
+      background-color: #4d5769;
+      color: #fff;
+      display: flex;
+
+      .level-item {
+        margin: 0;
+      }
+
+      .subscribe-btn {
+        cursor: pointer;
+        position: absolute;
+        right: 15px;
+        top: 19px;
+
+        &.subscribed {
+          color: #ff558d;
         }
+      }
     }
-    .controlTips{
-      position: absolute;
-      left: 325px;
-      top: 35px;
-      z-index: 99;
-      width: 160px;
-      transition: opacity 1.5s;
-      opacity: 0;
 
-      &.is-visible{
-        transition: opacity 1.5s;
-        opacity: 1;
-      }
+    .loading-bg {
       @media #{$info-mobile} {
-          display: none;
+        height: calc(100vh - #{$sidebar-width} - 68px);
       }
-      li{
-        display: block;
-        width: 50px;
-        height: 50px;
-        font-size: 50px;
-        color: #17c4bb;
-        line-height: 50px;
-        text-align: center;
+      @media #{$info-tablet} {
+        width: $chapter-selector-width;
+        position: fixed;
+        height: calc(100vh - #{$sidebar-width});
+        background-color: rgba(0,0,0,0.8);
+        margin-top: $sidebar-width;
+      }
+      z-index: 10000;
+
+      .loading {
+        width: 4em;
+        height: 4em;
+        margin: auto;
+        vertical-align: middle;
         position: absolute;
-        opacity: 0.6;
-        background: rgba(0, 0, 0, 0.5);;
-        &:nth-child(1){
-          left: 55px;
+        top: 50%;
+        left: calc(50% - 2em);
+      }
+    }
+
+    #chapter-selector {
+      @media #{$info-mobile} {
+        height: calc(100vh - #{$sidebar-width}*2);
+        margin-top: $sidebar-width;
+      }
+      @media #{$info-tablet} {
+        width: $chapter-selector-width;
+      }
+      overflow-y: auto;
+      height: calc(100vh - 125px);
+      margin-top: calc(#{$sidebar-width} + 1px);
+      padding: 0;
+      color: #cecece;
+
+      &:hover {
+        overflow-y: scroll;
+      }
+
+      .chapter-entry {
+        @media #{$info-mobile} {
+          position: relative;
+          z-index: 1000;
+        }
+        cursor: pointer;
+        background: #373e4a;
+        border-bottom: 1px solid #313743;
+        padding: .73rem .72rem .73rem 25px;
+
+        &:hover {
+          background-color: #2f3640;
         }
-        &:nth-child(2){
-          top: 55px;
+
+        &.read {
+          background-color: #3f4654;
         }
-        &:nth-child(3){
-          top: 55px;
-          left: 55px;
+
+        &.active {
+          background-color: #2f3640;
+          border-bottom: 2px solid #17c4bb;
+
+          &:before {
+            color: #17c4bb;
+          }
         }
-        &:nth-child(4){
-          top: 55px;
-          left: 110px;
+
+        &:before {
+          content: "• ";
+          font-size: 22px;
+          line-height: 22px;
+          letter-spacing: 3px;
         }
+      }
+    }
+  }
+
+  .controlTips {
+    position: absolute;
+    left: 325px;
+    top: 35px;
+    z-index: 99;
+    width: 160px;
+    transition: opacity 1.5s;
+    opacity: 0;
+
+    &.is-visible {
+      transition: opacity 1.5s;
+      opacity: 1;
+    }
+    @media #{$info-mobile} {
+      display: none;
+    }
+
+    li {
+      display: block;
+      width: 50px;
+      height: 50px;
+      font-size: 50px;
+      color: #17c4bb;
+      line-height: 50px;
+      text-align: center;
+      position: absolute;
+      opacity: .6;
+      background: rgba(0, 0, 0, 0.5);
 
+      &:nth-child(1) {
+        left: 55px;
       }
+
+      &:nth-child(2) {
+        top: 55px;
+      }
+
+      &:nth-child(3) {
+        top: 55px;
+        left: 55px;
+      }
+
+      &:nth-child(4) {
+        top: 55px;
+        left: 110px;
+      }
+
     }
-    #read-area {
-        @media #{$info-mobile} {
-            margin-top: $sidebar-width;
-            min-height: calc(100vh - #{$sidebar-width} * 2 - #{$titlebar-height});
-        }
-        @media #{$info-tablet} {
-            margin-left: $chapter-selector-width;
-            // margin-top: 22px;
-            min-height: calc(100vh - #{$titlebar-height});
-        }
-        &.active{
-          margin-left: -45px;
-          .zoom-btn {
-              left: 47px;
-              }
-        }
+  }
+
+  #read-area {
+    @media #{$info-mobile} {
+      margin-top: $sidebar-width;
+      min-height: calc(100vh - #{$sidebar-width} * 2 - #{$titlebar-height});
+    }
+    @media #{$info-tablet} {
+      margin-left: $chapter-selector-width;
+      // margin-top: 22px;
+      min-height: calc(100vh - #{$titlebar-height});
+    }
+
+    &.active {
+      margin-left: -45px;
+
+      .zoom-btn {
+        left: 47px;
+      }
+    }
+    height: calc(100vh - #{$titlebar-height});
+    overflow-y: auto;
+    background-color: #222935;
+    color: #fff;
+    padding: 0;
+
+    .comic-page-container {
+      // height: 100vh;
+      // background-color: #aaa;
+      position: relative;
+      -webkit-user-select: none;
+      margin-bottom: 1em;
+
+      img {
         height: calc(100vh - #{$titlebar-height});
-        overflow-y: auto;
-        background-color: #222935;
-        color: #fff;
-        padding: 0;
-        .comic-page-container {
-            // height: 100vh;
-            // background-color: #aaa;
-            position: relative;
-            -webkit-user-select: none;
-            margin-bottom: 1em;
-            img {
-                height: calc(100vh - #{$titlebar-height});
-                display: block;
-                margin: 0 auto;
-                background: url(../img/download-bg.png) center 30vh no-repeat;
-                min-width: 334px;
-                @media #{$info-mobile} {
-                    height: calc(100vh - #{$titlebar-height} - #{$sidebar-width} * 2)
-                }
-            }
-            .zoom-btn {
-                // z-index: 10000;
-                // visibility: hidden;
-                opacity: 0.3;
-                font-size: 1.5em;
-                position: absolute;
-                padding: 0.5em 0.8em 0.4em;
-                background-color: rgba(0,0,0,0.8);
-                border-radius: 0 0 5px 5px;
-                z-index:99;
-                &:hover {
-                    // visibility: visible;
-                    opacity: 1;
-                    transition: opacity 0.2s ease-out;
-                }
-
-            }
+        display: block;
+        margin: 0 auto;
+        background: url("../img/download-bg.png") center 30vh no-repeat;
+        min-width: 334px;
+        @media #{$info-mobile} {
+          height: calc(100vh - #{$titlebar-height} - #{$sidebar-width} * 2);
         }
-        .last-page {
-            border: solid 1px #aaa;
-            padding: 1em;
-            margin: 0 auto 1em;
-            width: 334px;
-            text-align: center;
+      }
+
+      .zoom-btn {
+        // z-index: 10000;
+        // visibility: hidden;
+        opacity: .3;
+        font-size: 1.5em;
+        position: absolute;
+        padding: .5em .8em .4em;
+        background-color: rgba(0,0,0,0.8);
+        border-radius: 0 0 5px 5px;
+        z-index: 99;
+
+        &:hover {
+          // visibility: visible;
+          opacity: 1;
+          transition: opacity .2s ease-out;
         }
+
+      }
+    }
+
+    .last-page {
+      border: solid 1px #aaa;
+      padding: 1em;
+      margin: 0 auto 1em;
+      width: 334px;
+      text-align: center;
     }
+  }
 }
 /* ABOUT VIEW */
-#about-view{
-  .app-info{
+#about-view {
+  .app-info {
     text-align: center;
     color: #fff;
-    img{
+
+    img {
       max-width: 310px;
       margin: 15vh auto 0;
     }
-    .app-name{
+
+    .app-name {
       font-size: 35px;
       line-height: 1;
     }
-    .other-info{
+
+    a {
+      &:hover {
+        color: #857af8;
+      }
+    }
+
+    .other-info {
       font-size: 13px;
       line-height: 25px;
-      a{
-        &:hover{
-          color:#857af8;
+
+      a {
+        &:hover {
+          color: #857af8;
         }
       }
     }
-    .version{
+
+    .version {
       display: inline-block;
-      padding: 0 0 10px 0;
+      padding: 0 0 10px;
     }
-    .description{
-      padding: 15px 0 0 0;
+
+    .description {
+      padding: 15px 0 0;
     }
-    .update-btn{
-      margin: 0 0 30px 0;
+
+    .update-btn {
+      margin: 0 0 30px;
     }
 
   }
diff --git a/package.json b/package.json
index 6804899..a832b4c 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,8 @@
   "name": "comic-reader",
   "productName": "Comic Reader",
   "author": "Team Comic Reader",
-  "version": "0.1.46",
-  "description": "Quickly, smoothly and cooler reading experience. The best move to read comics.",
+  "version": "0.1.47",
+  "description": "A quicker, smoother and cooler reading experience. The best way to read comics.",
   "main": "main.js",
   "devDependencies": {
     "concurrently": "^3.4.0",
diff --git a/renderer-process/viewcontrollers/about-viewcontroller.js b/renderer-process/viewcontrollers/about-viewcontroller.js
index 1118bb6..a842165 100644
--- a/renderer-process/viewcontrollers/about-viewcontroller.js
+++ b/renderer-process/viewcontrollers/about-viewcontroller.js
@@ -1,5 +1,6 @@
 const ipc = require('electron').ipcRenderer;
 let pjson = require('../../package.json');
+const {shell} = require('electron');
 
 function lateInit() {
     $("#update-btn").click(function(e) {
@@ -7,6 +8,16 @@ function lateInit() {
             ipc.send('check-for-update');
         }
     );
+
+    $(document.getElementById("about-view")).find('.other-info .github-link').click(function(e) {
+        e.stopPropagation();
+        shell.openExternal('https://github.com/yjlintw/comic-reader');
+    });
+
+    $(document.getElementById("about-view")).find('.app-info .website-link').click(function(e) {
+        e.stopPropagation();
+        shell.openExternal('https://yjlintw.github.io/comic-reader');
+    });
     let about_view = $("#about-view");
     about_view.find(".app-name").text(pjson.productName)
     about_view.find(".description").text(pjson.description);
diff --git a/renderer-process/viewcontrollers/read-viewcontroller.js b/renderer-process/viewcontrollers/read-viewcontroller.js
index 99fca0c..5fb2dc2 100644
--- a/renderer-process/viewcontrollers/read-viewcontroller.js
+++ b/renderer-process/viewcontrollers/read-viewcontroller.js
@@ -55,6 +55,10 @@ function bindSelectChapter(func) {
     selectChapterFunc = func;
 }
 
+/**
+ * Return current page idx. If the user did scroll by mouse, calculate current
+ * page index by using the scroll position and image height.
+ */
 function getCurrentPageIdx() {
     if (did_scroll && $("#read-view").css('display') !== "none") {
         did_scroll = false;
diff --git a/sections/about-view.html b/sections/about-view.html
index aac1f5e..39448b6 100644
--- a/sections/about-view.html
+++ b/sections/about-view.html
@@ -2,6 +2,7 @@
     <div class="app-info">
         <img src="./assets/img/logo.svg">
         <div class="app-name"></div>
+        <div><a class="website-link" href="#">Official Website</a></div>
         version: <div class="version"></div><br>
         <button id="update-btn" class="button">
             Check for updates
@@ -11,7 +12,7 @@
 
 
         <div class="other-info">
-            If you would like to contribute to this project, please visit our <a href="http://www.github.com/yjlintw/comic-reader">Github site</a>.
+            <div>If you would like to contribute to this project, please visit our <a href="#" class="github-link">Github site</a>.</div>
         </div>
     </div>