Merge pull request #195 from Yukaii/webpack-frontend

Use Webpack to bundle frontend code

.gitignore

@@ -21,3 +21,7 @@ backups/
 config.json
 public/js/config.js
 .sequelizerc
+
+# ignore webpack build
+public/build
+public/views/build

bower.json

@@ -16,51 +16,21 @@
   ],
   "dependencies": {
     "bootstrap": "~3.3.7",
-    "jquery": "~3.1.1",
     "font-awesome": "~4.6.3",
     "Ionicons": "ionicons#~2.0.1",
     "reveal.js": "~3.3.0",
-    "jquery-mousewheel": "~3.1.13",
     "spin.js": "~2.3.2",
     "moment": "~2.15.1",
     "handlebars": "~4.0.5",
-    "js-url": "~2.3.0",
-    "socket.io-client": "~1.5.0",
-    "viz.js": "~1.3.0",
     "js-yaml": "~3.6.1",
-    "to-markdown": "~3.0.1",
-    "lz-string": "~1.4.4",
     "raphael": "~2.2.6",
-    "flowchart": "~1.6.3",
-    "xss": "~0.2.13",
-    "markdown-it": "^8.0.0",
-    "markdown-it-abbr": "^1.0.4",
-    "markdown-it-footnote": "^3.0.1",
-    "markdown-it-deflist": "^2.0.1",
-    "markdown-it-mark": "^2.0.0",
-    "markdown-it-ins": "^2.0.0",
-    "markdown-it-sub": "^1.0.0",
-    "markdown-it-sup": "^1.0.0",
-    "markdown-it-container": "^2.0.0",
     "mermaid": "^6.0.0",
     "MathJax": "^2.6.1",
     "octicons": "~3.5.0",
     "velocity": "^1.3.1",
-    "highlightjs": "^9.7.0",
-    "lodash": "^4.16.4",
     "randomcolor": "randomColor#^0.4.4",
-    "file-saver": "FileSaver#^1.3.1",
     "Idle.Js": "idle.js#^1.0.0",
-    "js-cookie": "^2.1.3",
+    "gist-embed": "*"
-    "list.js": "^1.2.0",
-    "store-js": "store.js#^1.3.20",
-    "string": "^3.3.3",
-    "visibilityjs": "^1.2.4",
-    "pdfobject": "pdfobject2#*",
-    "gist-embed": "*",
-    "keymaster": "^1.6.3",
-    "prism": "^1.5.1",
-    "list.pagination.js": "^0.1.1"
   },
   "resolutions": {
     "jquery": "~3.1.1"

package.json

@@ -4,10 +4,16 @@
   "description": "Realtime collaborative markdown notes on all platforms.",
   "main": "app.js",
   "license": "MIT",
+  "scripts": {
+    "dev": "webpack --config webpack.config.js --progress --colors --watch",
+    "build": "webpack --config webpack.production.js --progress --colors"
+  },
   "dependencies": {
+    "Idle.Js": "github:shawnmclean/Idle.js",
     "async": "^2.0.1",
     "blueimp-md5": "^2.4.0",
     "body-parser": "^1.15.2",
+    "bootstrap": "^3.3.7",
     "chance": "^1.0.4",
     "cheerio": "^0.22.0",
     "compression": "^1.6.2",
@@ -17,15 +23,44 @@
     "diff-match-patch": "git+https://github.com/hackmdio/diff-match-patch.git",
     "ejs": "^2.5.2",
     "emojify.js": "^1.1.0",
+    "engine.io-client": "^1.7.0",
     "express": ">=4.14",
     "express-session": "^1.14.1",
+    "file-saver": "^1.3.3",
+    "flowchart.js": "^1.6.3",
     "formidable": "^1.0.17",
+    "gist-embed": "github:yukaii/gist-embed",
+    "handlebars": "^4.0.5",
     "helmet": "^2.3.0",
+    "highlight.js": "^9.7.0",
     "i18n": "^0.8.3",
     "imgur": "git+https://github.com/hackmdio/node-imgur.git",
+    "jquery": "^3.1.1",
+    "jquery-mousewheel": "^3.1.13",
+    "jquery-scrollspy": "github:softwarespot/jquery-scrollspy",
+    "jquery-textcomplete": "^1.7.3",
+    "jquery-ui": "^1.12.1",
+    "js-cookie": "^2.1.3",
+    "js-sequence-diagrams": "^1000000.0.6",
+    "js-url": "^2.3.0",
     "jsdom-nogyp": "^0.8.3",
+    "keymaster": "^1.6.2",
+    "list.js": "^1.2.0",
+    "list.pagination.js": "^0.1.1",
+    "lodash": "^4.16.4",
     "lz-string": "1.4.4",
     "markdown-it": "^8.0.0",
+    "markdown-it-abbr": "^1.0.4",
+    "markdown-it-container": "^2.0.0",
+    "markdown-it-deflist": "^2.0.1",
+    "markdown-it-footnote": "^3.0.1",
+    "markdown-it-imsize": "^2.0.1",
+    "markdown-it-ins": "^2.0.0",
+    "markdown-it-mark": "^2.0.0",
+    "markdown-it-mathjax": "^1.0.3",
+    "markdown-it-regexp": "^0.4.0",
+    "markdown-it-sub": "^1.0.0",
+    "markdown-it-sup": "^1.0.0",
     "markdown-pdf": "^7.0.0",
     "meta-marked": "^0.4.2",
     "method-override": "^2.3.6",
@@ -41,30 +76,69 @@
     "passport-google-oauth20": "^1.0.0",
     "passport-twitter": "^1.0.4",
     "passport.socketio": "^3.6.2",
+    "pdfobject": "^2.0.201604172",
     "pg": "^6.1.0",
     "pg-hstore": "^2.3.2",
+    "prismjs": "^1.5.1",
     "randomcolor": "^0.4.4",
+    "raphael": "github:dmitrybaranovskiy/raphael",
     "request": "^2.75.0",
-    "reveal.js": "3.3.0",
+    "reveal.js": "^3.3.0",
     "sequelize": "^3.24.3",
     "sequelize-cli": "^2.4.0",
     "shortid": "2.2.6",
     "socket.io": "1.5.0",
+    "socket.io-client": "^1.5.0",
+    "spin.js": "^2.3.2",
     "sqlite3": "^3.1.6",
+    "store": "^1.3.20",
     "string": "^3.3.1",
     "tedious": "^1.14.0",
+    "to-markdown": "^3.0.1",
     "toobusy-js": "^0.5.1",
-    "winston": "^2.2.0"
+    "visibilityjs": "^1.2.4",
+    "viz.js": "^1.3.0",
+    "winston": "^2.2.0",
+    "xss": "^0.2.13"
   },
   "engines": {
     "node": ">=4.x"
   },
   "bugs": "https://github.com/hackmdio/hackmd/issues",
-  "keywords": ["Collaborative", "Markdown", "Notes"],
+  "keywords": [
+    "Collaborative",
+    "Markdown",
+    "Notes"
+  ],
   "homepage": "https://hackmd.io",
-  "maintainers": [{"name": "Max Wu", "email": "jackymaxj@gmail.com"}],
+  "maintainers": [
+    {
+      "name": "Max Wu",
+      "email": "jackymaxj@gmail.com"
+    }
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/hackmdio/hackmd.git"
+  },
+  "devDependencies": {
+    "babel-core": "^6.17.0",
+    "babel-loader": "^6.2.5",
+    "bower-webpack-plugin": "^0.1.9",
+    "css-loader": "^0.25.0",
+    "ejs-loader": "^0.3.0",
+    "exports-loader": "^0.6.3",
+    "expose-loader": "^0.7.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.9.0",
+    "html-webpack-plugin": "^2.22.0",
+    "imports-loader": "^0.6.5",
+    "json-loader": "^0.5.4",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "script-loader": "^0.7.0",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.2"
   }
 }

public/js/common.js

@@ -1,3 +1,11 @@
+var config = require('./config');
+var domain = config.domain; // domain name
+var urlpath = config.urlpath; // sub url path, like: www.example.com/<urlpath>
+var debug = config.debug;
+var GOOGLE_API_KEY = config.GOOGLE_API_KEY;
+var GOOGLE_CLIENT_ID = config.GOOGLE_CLIENT_ID;
+var DROPBOX_APP_KEY = config.DROPBOX_APP_KEY;
+
 //common
 var port = window.location.port;
 var serverurl = window.location.protocol + '//' + (domain ? domain : window.location.hostname) + (port ? ':' + port : '') + (urlpath ? '/' + urlpath : '');
@@ -83,3 +91,31 @@ function checkIfAuth(yesCallback, noCallback) {
         noCallback();
     }
 }
+
+module.exports = {
+  domain: domain,
+  urlpath: urlpath,
+  debug: debug,
+  GOOGLE_API_KEY: GOOGLE_API_KEY,
+  GOOGLE_CLIENT_ID: GOOGLE_CLIENT_ID,
+  DROPBOX_APP_KEY: DROPBOX_APP_KEY,
+  port: port,
+  serverurl: serverurl,
+  noteid: noteid,
+  noteurl: noteurl,
+  version: version,
+  checkAuth: checkAuth,
+  profile: profile,
+  lastLoginState: lastLoginState,
+  lastUserId: lastUserId,
+  loginStateChangeEvent: loginStateChangeEvent,
+
+  /* export functions */
+  resetCheckAuth: resetCheckAuth,
+  setLoginState: setLoginState,
+  checkLoginStateChanged: checkLoginStateChanged,
+  getLoginState: getLoginState,
+  getUserId: getUserId,
+  clearLoginState: clearLoginState,
+  checkIfAuth: checkIfAuth
+};

public/js/config.js.example

@@ -1,10 +1,11 @@
-//config
+module.exports = {
-var domain = ''; // domain name
+    domain: '', // domain name
-var urlpath = ''; // sub url path, like: www.example.com/<urlpath>
+    urlpath: '', // sub url path, like: www.example.com/<urlpath>
-//settings
-var debug = false;
 
-var GOOGLE_API_KEY = '';
+    // settings
-var GOOGLE_CLIENT_ID = '';
+    debug: false,
 
-var DROPBOX_APP_KEY = '';
+    GOOGLE_API_KEY: '',
+    GOOGLE_CLIENT_ID: '',
+    DROPBOX_APP_KEY: ''
+};

public/js/cover.js

@@ -1,3 +1,26 @@
+var common = require('./common');
+var checkIfAuth = common.checkIfAuth;
+var urlpath = common.urlpath;
+var serverurl = common.serverurl;
+var resetCheckAuth = common.resetCheckAuth;
+var getLoginState = common.getLoginState;
+var clearLoginState = common.clearLoginState;
+
+var historyModule = require('./history');
+var parseStorageToHistory = historyModule.parseStorageToHistory;
+var parseHistory = historyModule.parseHistory;
+var getStorageHistory = historyModule.getStorageHistory;
+var getHistory = historyModule.getHistory;
+var saveHistory = historyModule.saveHistory;
+var removeHistory = historyModule.removeHistory;
+var postHistoryToServer = historyModule.postHistoryToServer;
+var deleteServerHistory = historyModule.deleteServerHistory;
+var parseServerToHistory = historyModule.parseServerToHistory;
+var saveStorageHistoryToServer = historyModule.saveStorageHistoryToServer;
+
+var saveAs = require('file-saver').saveAs;
+var List = require('list.js');
+
 var options = {
     valueNames: ['id', 'text', 'timestamp', 'fromNow', 'time', 'tags', 'pinned'],
     item: '<li class="col-xs-12 col-sm-6 col-md-6 col-lg-4">\

public/js/extra.js

@@ -1,3 +1,9 @@
+var hljs = require('highlight.js');
+var PDFObject = require('pdfobject');
+var S = require('string');
+var saveAs = require('file-saver').saveAs;
+require('../vendor/md-toc');
+
 //auto update last change
 var createtime = null;
 var lastchangetime = null;
@@ -257,50 +263,51 @@ function finishView(view) {
             MathJax.Hub.Queue(viewAjaxCallback);
         }
     } catch (err) {}
-    //sequence diagram
+        //sequence diagram
-    var sequences = view.find(".sequence-diagram.raw").removeClass("raw");
+        var sequences = view.find(".sequence-diagram.raw").removeClass("raw");
-    sequences.each(function (key, value) {
+        sequences.each(function (key, value) {
-        try {
+            try {
-            var $value = $(value);
+                var $value = $(value);
-            var $ele = $(value).parent().parent();
+                var $ele = $(value).parent().parent();
 
-            var sequence = $value;
+                var sequence = $value;
-            sequence.sequenceDiagram({
+                sequence.sequenceDiagram({
-                theme: 'simple'
+                    theme: 'simple'
-            });
+                });
 
-            $ele.addClass('sequence-diagram');
+                $ele.addClass('sequence-diagram');
-            $value.children().unwrap().unwrap();
+                $value.children().unwrap().unwrap();
-            var svg = $ele.find('> svg');
+                var svg = $ele.find('> svg');
-            svg[0].setAttribute('viewBox', '0 0 ' + svg.attr('width') + ' ' + svg.attr('height'));
+                svg[0].setAttribute('viewBox', '0 0 ' + svg.attr('width') + ' ' + svg.attr('height'));
-            svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet');
+                svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet');
-        } catch (err) {
+            } catch (err) {
-            console.warn(err);
+                console.warn(err);
-        }
+            }
-    });
+        });
-    //flowchart
+        //flowchart
-    var flow = view.find(".flow-chart.raw").removeClass("raw");
+        var flow = view.find(".flow-chart.raw").removeClass("raw");
-    flow.each(function (key, value) {
+        flow.each(function (key, value) {
-        try {
+            try {
-            var $value = $(value);
+                var $value = $(value);
-            var $ele = $(value).parent().parent();
+                var $ele = $(value).parent().parent();
 
-            var chart = flowchart.parse($value.text());
+                var chart = flowchart.parse($value.text());
-            $value.html('');
+                $value.html('');
-            chart.drawSVG(value, {
+                chart.drawSVG(value, {
-                'line-width': 2,
+                    'line-width': 2,
-                'fill': 'none',
+                    'fill': 'none',
-                'font-size': '16px',
+                    'font-size': '16px',
-                'font-family': "'Andale Mono', monospace"
+                    'font-family': "'Andale Mono', monospace"
-            });
+                });
 
-            $ele.addClass('flow-chart');
+                $ele.addClass('flow-chart');
-            $value.children().unwrap().unwrap();
+                $value.children().unwrap().unwrap();
-        } catch (err) {
+            } catch (err) {
-            console.warn(err);
+                console.warn(err);
-        }
+            }
-    });
+        });
     //graphviz
+    var Viz = require("viz.js");
     var graphvizs = view.find(".graphviz.raw").removeClass("raw");
     graphvizs.each(function (key, value) {
         try {
@@ -316,6 +323,7 @@ function finishView(view) {
             console.warn(err);
         }
     });
+
     //mermaid
     var mermaids = view.find(".mermaid.raw").removeClass("raw");
     mermaids.each(function (key, value) {
@@ -427,14 +435,14 @@ function finishView(view) {
         });
     //pdf
     view.find(".pdf.raw").removeClass("raw")
-        .each(function (key, value) {
+            .each(function (key, value) {
-            var url = $(value).attr('data-pdfurl');
+                var url = $(value).attr('data-pdfurl');
-            var inner = $('<div></div>');
+                var inner = $('<div></div>');
-            $(this).append(inner);
+                $(this).append(inner);
-            PDFObject.embed(url, inner, {
+                PDFObject.embed(url, inner, {
-                height: '400px'
+                    height: '400px'
+                });
             });
-        });
     //syntax highlighting
     view.find("pre.raw").removeClass("raw")
         .each(function (key, value) {
@@ -483,6 +491,7 @@ function postProcess(code) {
 	}
     return result;
 }
+window.postProcess = postProcess;
 
 function generateCleanHTML(view) {
     var src = view.clone();
@@ -534,6 +543,8 @@ function exportToRawHTML(view) {
     saveAs(blob, filename);
 }
 
+var common = require('./common.js');
+var serverurl = common.serverurl;
 //extract markdown body to html and compile to template
 function exportToHTML(view) {
     var title = renderTitle(ui.area.markdown);
@@ -829,7 +840,10 @@ emojify.setConfig({
     ignore_emoticons: true
 });
 
-var md = window.markdownit('default', {
+var markdownit = require('markdown-it');
+var markdownitContainer = require('markdown-it-container');
+
+var md = markdownit('default', {
     html: true,
     breaks: true,
     langPrefix: "",
@@ -837,25 +851,28 @@ var md = window.markdownit('default', {
     typographer: true,
     highlight: highlightRender
 });
-md.use(window.markdownitAbbr);
+window.md = md;
-md.use(window.markdownitFootnote);
+
-md.use(window.markdownitDeflist);
+md.use(require('markdown-it-abbr'));
-md.use(window.markdownitMark);
+md.use(require('markdown-it-footnote'));
-md.use(window.markdownitIns);
+md.use(require('markdown-it-deflist'));
-md.use(window.markdownitSub);
+md.use(require('markdown-it-mark'));
-md.use(window.markdownitSup);
+md.use(require('markdown-it-ins'));
-md.use(window.markdownitMathjax);
+md.use(require('markdown-it-sub'));
-md.use(window.markdownitImsize);
+md.use(require('markdown-it-sup'));
+md.use(require('../vendor/markdown-it-mathjax'));
+md.use(require('markdown-it-imsize'));
+
 function renderContainer(tokens, idx, options, env, self) {
     tokens[idx].attrJoin('role', 'alert');
     tokens[idx].attrJoin('class', 'alert');
     tokens[idx].attrJoin('class', 'alert-' + tokens[idx].info.trim());
     return self.renderToken.apply(self, arguments);
 }
-md.use(window.markdownitContainer, 'success', { render: renderContainer });
+md.use(markdownitContainer, 'success', { render: renderContainer });
-md.use(window.markdownitContainer, 'info', { render: renderContainer });
+md.use(markdownitContainer, 'info', { render: renderContainer });
-md.use(window.markdownitContainer, 'warning', { render: renderContainer });
+md.use(markdownitContainer, 'warning', { render: renderContainer });
-md.use(window.markdownitContainer, 'danger', { render: renderContainer });
+md.use(markdownitContainer, 'danger', { render: renderContainer });
 
 md.renderer.rules.image = function (tokens, idx, options, env, self) {
     tokens[idx].attrJoin('class', 'raw');
@@ -900,6 +917,9 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) {
         + '</code></pre>\n';
 };
 
+/* Defined regex markdown it plugins */
+require('script!../vendor/markdown-it-regexp');
+
 //youtube
 var youtubePlugin = new Plugin(
     // regexp to match
@@ -1047,3 +1067,25 @@ md.use(tocPlugin);
 md.use(slidesharePlugin);
 md.use(speakerdeckPlugin);
 md.use(pdfPlugin);
+
+module.exports = {
+  md: md,
+  createtime: createtime,
+  lastchangetime: lastchangetime,
+  updateLastChange: updateLastChange,
+  lastchangeui: lastchangeui,
+  lastchangeuser: lastchangeuser,
+  postProcess: postProcess,
+  finishView: finishView,
+  autoLinkify: autoLinkify,
+  deduplicatedHeaderId: deduplicatedHeaderId,
+  renderTOC: renderTOC,
+  renderTitle: renderTitle,
+  renderFilename: renderFilename,
+  generateToc: generateToc,
+  smoothHashScroll: smoothHashScroll,
+  scrollToHash: scrollToHash,
+  owner: owner,
+  updateLastChangeUser: updateLastChangeUser,
+  updateOwner: updateOwner
+};

public/js/history.js

@@ -1,3 +1,15 @@
+var store = require('store');
+
+var common = require('./common');
+var checkIfAuth = common.checkIfAuth;
+var urlpath = common.urlpath;
+var serverurl = common.serverurl;
+var getLoginState = common.getLoginState;
+
+var extra = require('./extra');
+var renderFilename = extra.renderFilename;
+var md = extra.md;
+
 var migrateHistoryFromTempCallback = null;
 
 migrateHistoryFromTemp();
@@ -393,3 +405,17 @@ function deleteServerHistory(noteId, callback) {
         return callback(error, null);
     });
 }
+
+module.exports = {
+    writeHistory: writeHistory,
+    parseHistory: parseHistory,
+    getStorageHistory: getStorageHistory,
+    getHistory: getHistory,
+    saveHistory: saveHistory,
+    removeHistory: removeHistory,
+    parseStorageToHistory: parseStorageToHistory,
+    postHistoryToServer: postHistoryToServer,
+    deleteServerHistory: deleteServerHistory,
+    parseServerToHistory: parseServerToHistory,
+    saveStorageHistoryToServer: saveStorageHistoryToServer
+}

public/js/index.js

@@ -1,3 +1,68 @@
+/* jquery and jquery plugins */
+require('../vendor/showup/showup');
+
+require('prismjs/themes/prism.css');
+require('highlight.js/styles/github-gist.css');
+
+require('prismjs');
+require('prismjs/components/prism-wiki');
+var toMarkdown = require('to-markdown');
+
+var saveAs = require('file-saver').saveAs;
+require('js-url');
+require('randomcolor');
+
+var _ = require("lodash");
+
+var List = require('list.js');
+
+var common = require('./common.js');
+var urlpath = common.urlpath;
+var noteid = common.noteid;
+var debug = common.debug;
+var version = common.version;
+var serverurl = common.serverurl;
+var GOOGLE_API_KEY = common.GOOGLE_API_KEY;
+var GOOGLE_CLIENT_ID = common.GOOGLE_CLIENT_ID;
+var DROPBOX_APP_KEY = common.DROPBOX_APP_KEY;
+var noteurl = common.noteurl;
+
+var checkLoginStateChanged = common.checkLoginStateChanged;
+
+var syncScroll = require('./syncscroll');
+var setupSyncAreas = syncScroll.setupSyncAreas;
+var clearMap = syncScroll.clearMap;
+var syncScrollToEdit = syncScroll.syncScrollToEdit;
+var syncScrollToView = syncScroll.syncScrollToView;
+
+require('./pretty');
+var extra = require('./extra');
+var md = extra.md;
+var createtime = extra.createtime;
+var updateLastChange = extra.updateLastChange;
+var postProcess = extra.postProcess;
+var finishView = extra.finishView;
+var lastchangetime = extra.lastchangetime;
+var autoLinkify = extra.autoLinkify;
+var generateToc = extra.generateToc;
+var smoothHashScroll = extra.smoothHashScroll;
+var lastchangeuser = extra.lastchangeuser;
+var deduplicatedHeaderId = extra.deduplicatedHeaderId;
+var renderTOC = extra.renderTOC;
+var renderTitle = extra.renderTitle;
+var renderFilename = extra.renderFilename;
+var scrollToHash = extra.scrollToHash;
+var owner = extra.owner;
+var updateLastChangeUser = extra.updateLastChangeUser;
+var updateOwner = extra.updateOwner;
+
+var historyModule = require('./history');
+var writeHistory = historyModule.writeHistory;
+var deleteServerHistory = historyModule.deleteServerHistory;
+
+var renderer = require('./render');
+var preventXSS = renderer.preventXSS;
+
 var defaultTextHeight = 20;
 var viewportMargin = 20;
 var mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
@@ -279,7 +344,7 @@ var supportExtraTags = [
         }
     }
 ];
-var modeType = {
+window.modeType = {
     edit: {
         name: "edit"
     },
@@ -310,18 +375,18 @@ var statusType = {
 var defaultMode = modeType.view;
 
 //global vars
-var loaded = false;
+window.loaded = false;
-var needRefresh = false;
+window.needRefresh = false;
-var isDirty = false;
+window.isDirty = false;
-var editShown = false;
+window.editShown = false;
-var visibleXS = false;
+window.visibleXS = false;
-var visibleSM = false;
+window.visibleSM = false;
-var visibleMD = false;
+window.visibleMD = false;
-var visibleLG = false;
+window.visibleLG = false;
-var isTouchDevice = 'ontouchstart' in document.documentElement;
+window.isTouchDevice = 'ontouchstart' in document.documentElement;
-var currentMode = defaultMode;
+window.currentMode = defaultMode;
-var currentStatus = statusType.offline;
+window.currentStatus = statusType.offline;
-var lastInfo = {
+window.lastInfo = {
     needRestore: false,
     cursor: null,
     scroll: null,
@@ -343,9 +408,9 @@ var lastInfo = {
     },
     history: null
 };
-var personalInfo = {};
+window.personalInfo = {};
-var onlineUsers = [];
+window.onlineUsers = [];
-var fileTypes = {
+window.fileTypes = {
     "pl": "perl",
     "cgi": "perl",
     "js": "javascript",
@@ -359,7 +424,7 @@ var fileTypes = {
 //editor settings
 var textit = document.getElementById("textit");
 if (!textit) throw new Error("There was no textit area!");
-var editor = CodeMirror.fromTextArea(textit, {
+window.editor = CodeMirror.fromTextArea(textit, {
     mode: defaultEditorMode,
     backdrop: defaultEditorMode,
     keyMap: "sublime",
@@ -1389,6 +1454,7 @@ function onGoogleAPILoaded() {
         .prop('defer', true)
         .appendTo('body');
 }
+window.onGoogleAPILoaded = onGoogleAPILoaded;
 
 //button actions
 //share
@@ -2188,8 +2254,11 @@ function havePermission() {
     }
     return bool;
 }
+// global module workaround
+window.havePermission = havePermission;
 
 //socket.io actions
+var io = require("socket.io-client");
 var socket = io.connect({
     path: urlpath ? '/' + urlpath + '/socket.io/' : '',
     timeout: 5000 //5 secs to timeout
@@ -2198,7 +2267,7 @@ var socket = io.connect({
 var on = socket.on;
 socket.on = function () {
     if (!checkLoginStateChanged() && !needRefresh)
-        on.apply(socket, arguments);
+        return on.apply(socket, arguments);
 };
 var emit = socket.emit;
 socket.emit = function () {

public/js/locale.js

@@ -1,3 +1,5 @@
+require('./cover');
+
 var lang = "en";
 var userLang = navigator.language || navigator.userLanguage;
 var userLangCode = userLang.split('-')[0];

public/js/pretty.js

@@ -1,3 +1,16 @@
+var extra = require('./extra');
+var md = extra.md;
+var finishView = extra.finishView;
+var autoLinkify = extra.autoLinkify;
+var deduplicatedHeaderId = extra.deduplicatedHeaderId;
+var renderTOC = extra.renderTOC;
+var generateToc = extra.generateToc;
+var smoothHashScroll = extra.smoothHashScroll;
+var postProcess = extra.postProcess;
+var lastchangeui = extra.lastchangeui;
+var updateLastChange = extra.updateLastChange;
+var preventXSS = require('./render').preventXSS;
+
 var markdown = $(".markdown-body");
 var text = $('<textarea/>').html(markdown.html()).text();
 var lastMeta = md.meta;
@@ -110,3 +123,11 @@ function scrollToBottom() {
         scrollTop: $(document.body)[0].scrollHeight
     }, 100, "linear");
 }
+
+window.scrollToTop = scrollToTop;
+window.scrollToBottom = scrollToBottom;
+
+module.exports = {
+  scrollToBottom: scrollToBottom,
+  scrollToTop: scrollToTop
+}

public/js/public.js

@@ -0,0 +1,27 @@
+/* jquery and jquery plugins */
+require('../vendor/showup/showup');
+
+require('prismjs/themes/prism.css');
+require('highlight.js/styles/github-gist.css');
+
+/* other vendors plugin */
+require('gist-embed');
+require('string');
+require('highlight.js');
+require('prismjs');
+require('prismjs/components/prism-wiki');
+require('to-markdown');
+
+require('file-saver');
+require('store');
+require('js-url');
+require('visibilityjs');
+require('list.js');
+require('../vendor/md-toc');
+require('randomcolor');
+
+require('./syncscroll');
+require('./extra');
+require('./history');
+require('./pretty');
+require('./render');

public/js/render.js

@@ -51,3 +51,8 @@ var filterXSSOptions = {
 function preventXSS(html) {
     return filterXSS(html, filterXSSOptions);
 }
+window.preventXSS = preventXSS;
+
+module.exports = {
+  preventXSS: preventXSS
+}

public/js/slide.js

@@ -1,3 +1,45 @@
+require('prismjs/themes/prism.css');
+
+/* other vendors plugin */
+var S = require('string');
+require('prismjs');
+require('prismjs/components/prism-wiki');
+require('to-markdown');
+
+require('../vendor/md-toc');
+require('randomcolor');
+
+var commonModule = require('./common');
+var urlpath = commonModule.urlpath;
+var noteid = commonModule.noteid;
+var debug = commonModule.debug;
+var version = commonModule.version;
+var serverurl = commonModule.serverurl;
+var GOOGLE_API_KEY = commonModule.GOOGLE_API_KEY;
+var GOOGLE_CLIENT_ID = commonModule.GOOGLE_CLIENT_ID;
+var DROPBOX_APP_KEY = commonModule.DROPBOX_APP_KEY;
+var noteurl = commonModule.noteurl;
+
+var extraModule = require('./extra');
+var md = extraModule.md;
+var createtime = extraModule.createtime;
+var updateLastChange = extraModule.updateLastChange;
+var postProcess = extraModule.postProcess;
+var finishView = extraModule.finishView;
+var lastchangetime = extraModule.lastchangetime;
+var lastchangeui = extraModule.lastchangeui;
+var autoLinkify = extraModule.autoLinkify;
+var generateToc = extraModule.generateToc;
+var smoothHashScroll = extraModule.smoothHashScroll;
+var lastchangeuser = extraModule.lastchangeuser;
+var deduplicatedHeaderId = extraModule.deduplicatedHeaderId;
+var renderTOC = extraModule.renderTOC;
+var renderTitle = extraModule.renderTitle;
+var renderFilename = extraModule.renderFilename;
+var scrollToHash = extraModule.scrollToHash;
+
+var render = require('./render');
+
 var body = $(".slides").html();
 $(".slides").html(S(body).unescapeHTML().s);
 

public/js/syncscroll.js

@@ -1,5 +1,8 @@
 // Inject line numbers for sync scroll.
 
+var extra = require('./extra');
+var md = extra.md;
+
 function addPart(tokens, idx) {
     if (tokens[idx].map && tokens[idx].level === 0) {
         var startline = tokens[idx].map[0] + 1;
@@ -99,10 +102,12 @@ function renderContainer(tokens, idx, options, env, self) {
     addPart(tokens, idx);
     return self.renderToken.apply(self, arguments);
 }
-md.use(window.markdownitContainer, 'success', { render: renderContainer });
+
-md.use(window.markdownitContainer, 'info', { render: renderContainer });
+var markdownitContainer = require('markdown-it-container');
-md.use(window.markdownitContainer, 'warning', { render: renderContainer });
+md.use(markdownitContainer, 'success', { render: renderContainer });
-md.use(window.markdownitContainer, 'danger', { render: renderContainer });
+md.use(markdownitContainer, 'info', { render: renderContainer });
+md.use(markdownitContainer, 'warning', { render: renderContainer });
+md.use(markdownitContainer, 'danger', { render: renderContainer });
 
 var syncscroll = true;
 
@@ -361,3 +366,10 @@ function syncScrollToView(event, preventAnimate) {
 function editScrollingTimeoutInner() {
     editScrolling = false;
 }
+
+module.exports = {
+  setupSyncAreas: setupSyncAreas,
+  clearMap: clearMap,
+  syncScrollToEdit: syncScrollToEdit,
+  syncScrollToView: syncScrollToView
+};

public/views/foot.ejs

@@ -3,83 +3,26 @@
 </script>
 <% if(useCDN) { %>
 <script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" defer></script>
-<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="//cdn.jsdelivr.net/velocity/1.3.1/velocity.min.js" defer></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" defer></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js" defer></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/js-yaml/3.6.1/js-yaml.min.js" defer></script>
 <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js" defer></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js" defer></script>
 <% } else { %>
 <script src="<%- url %>/vendor/spin.js/spin.min.js" defer></script>
-<script src="<%- url %>/vendor/jquery/dist/jquery.min.js"></script>
 <script src="<%- url %>/vendor/velocity/velocity.min.js" defer></script>
-<script src="<%- url %>/vendor/jquery-mousewheel/jquery.mousewheel.min.js" defer></script>
-<script src="<%- url %>/vendor/bootstrap/dist/js/bootstrap.min.js" defer></script>
-<script src="<%- url %>/vendor/socket.io-client/socket.io.js" defer></script>
 <script src="<%- url %>/vendor/js-yaml/dist/js-yaml.min.js" defer></script>
 <script type="text/javascript" src="<%- url %>/vendor/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
 <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
 <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
 <% } %>
-<script src="<%- url %>/vendor/jquery-ui/jquery-ui.min.js" defer></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<!--codemirror-->
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
-<script src="<%- url %>/vendor/codemirror/codemirror.min.js" defer></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js" defer></script>
-<script src="<%- url %>/vendor/inlineAttachment/inline-attachment.js" defer></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js" defer></script>
-<script src="<%- url %>/vendor/inlineAttachment/codemirror.inline-attachment.js" defer></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/viz.js/1.3.0/viz.js" defer></script>
-<script src="<%- url %>/vendor/codemirror-spell-checker/spell-checker.min.js" defer></script>
+<%- include build/index-scripts %>
-<!--ot-->
-<script src="<%- url %>/vendor/ot/ot.min.js" defer></script>
-<!--others-->
-<script src="<%- url %>/vendor/markdown-it/dist/markdown-it.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-abbr/dist/markdown-it-abbr.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-footnote/dist/markdown-it-footnote.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-deflist/dist/markdown-it-deflist.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-mark/dist/markdown-it-mark.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-ins/dist/markdown-it-ins.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-sub/dist/markdown-it-sub.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-sup/dist/markdown-it-sup.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-container/dist/markdown-it-container.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-mathjax.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-regexp.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-imsize.js" defer></script>
-<script src="<%- url %>/vendor/gist-embed/gist-embed.min.js" defer></script>
-<script src="<%- url %>/vendor/lz-string/libs/lz-string.min.js" defer></script>
-<script src="<%- url %>/vendor/xss/dist/xss.min.js" defer></script>
-<script src="<%- url %>/vendor/string/dist/string.min.js" defer></script>
-<script src="<%- url %>/vendor/highlightjs/highlight.pack.min.js" defer></script>
-<script src="<%- url %>/vendor/prism/prism.js" defer></script>
-<script src="<%- url %>/vendor/prism/components/prism-wiki.min.js" defer></script>
-<script src="<%- url %>/vendor/js-cookie/src/js.cookie.js" defer></script>
-<script src="<%- url %>/vendor/handlebars/handlebars.min.js" defer></script>
-<script src="<%- url %>/vendor/emojify/js/emojify.min.js" defer></script>
-<script src="<%- url %>/vendor/to-markdown/dist/to-markdown.js" defer></script>
-<script src="<%- url %>/vendor/raphael/raphael.min.js" defer></script>
-<script src="<%- url %>/vendor/lodash/dist/lodash.min.js" defer></script>
-<script src="<%- url %>/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
-<script src="<%- url %>/vendor/flowchart/release/flowchart.min.js" defer></script>
-<script src="<%- url %>/vendor/viz.js/viz.js" defer></script>
-<script src="<%- url %>/vendor/pdfobject/pdfobject.min.js" defer></script>
-<script src="<%- url %>/vendor/file-saver/FileSaver.min.js" defer></script>
-<script src="<%- url %>/vendor/store-js/store.min.js" defer></script>
-<script src="<%- url %>/vendor/js-url/url.min.js" defer></script>
-<script src="<%- url %>/vendor/jquery-textcomplete/jquery.textcomplete.js" defer></script>
-<script src="<%- url %>/vendor/Idle.Js/build/idle.min.js" defer></script>
-<script src="<%- url %>/vendor/visibilityjs/lib/visibility.core.js" defer></script>
-<script src="<%- url %>/vendor/list.js/dist/list.min.js" defer></script>
-<script src="<%- url %>/vendor/md-toc.js" defer></script>
-<script src="<%- url %>/vendor/showup/showup.js" defer></script>
-<script src="<%- url %>/vendor/randomcolor/randomColor.js" defer></script>
-<script src="<%- url %>/vendor/keymaster/keymaster.js" defer></script>
 <script src="<%- url %>/js/google-drive-upload.js" defer></script>
 <script src="<%- url %>/js/google-drive-picker.js" defer></script>
-<script src="<%- url %>/js/config.js" defer></script>
-<script src="<%- url %>/js/common.js" defer></script>
-<script src="<%- url %>/js/extra.js" defer></script>
-<script src="<%- url %>/js/render.js" defer></script>
-<script src="<%- url %>/js/history.js" defer></script>
 <script src="<%- url %>/js/reveal-markdown.js" defer></script>
-<script src="<%- url %>/js/syncscroll.js" defer></script>
-<script src="<%- url %>/js/index.js" defer></script>

public/views/head.ejs

@@ -8,18 +8,16 @@
 <link rel="icon" type="image/png" href="<%- url %>/favicon.png">
 <link rel="apple-touch-icon" href="<%- url %>/apple-touch-icon.png">
 <% if(useCDN) { %>
-<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
 <link rel="stylesheet" href="//cdn.jsdelivr.net/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.9.0/bootstrap-social.min.css">
 <% } else { %>
-<link rel="stylesheet" href="<%- url %>/vendor/bootstrap/dist/css/bootstrap.min.css">
-<link rel="stylesheet" href="<%- url %>/vendor/font-awesome/css/font-awesome.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/Ionicons/css/ionicons.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/octicons/octicons/octicons.css">
 <link rel="stylesheet" href="<%- url %>/css/bootstrap-social.css">
 <% } %>
+<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/jquery-ui/jquery-ui.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/codemirror/lib/codemirror.css">
 <link rel="stylesheet" href="<%- url %>/vendor/codemirror-spell-checker/spell-checker.min.css">
@@ -33,12 +31,11 @@
 <link rel="stylesheet" href="<%- url %>/vendor/codemirror/mode/tiddlywiki/tiddlywiki.css">
 <link rel="stylesheet" href="<%- url %>/vendor/codemirror/mode/mediawiki/mediawiki.css">
 <link rel="stylesheet" href="<%- url %>/css/github-extract.css">
-<link rel="stylesheet" href="<%- url %>/vendor/highlightjs/styles/github-gist.css">
-<link rel="stylesheet" href="<%- url %>/vendor/prism/themes/prism.css">
 <link rel="stylesheet" href="<%- url %>/vendor/emojify/css/emojify.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/showup/showup.css">
 <link rel="stylesheet" href="<%- url %>/css/mermaid.css">
 <link rel="stylesheet" href="<%- url %>/css/markdown.css">
+<%- include build/index-header %>
 <link rel="stylesheet" href="<%- url %>/css/index.css">
 <link rel="stylesheet" href="<%- url %>/css/extra.css">
 <link rel="stylesheet" href="<%- url %>/css/slide-preview.css">

public/views/includes/header.ejs

@@ -0,0 +1,3 @@
+<% for (var css in htmlWebpackPlugin.files.css) { %>
+<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+<% } %>

public/views/includes/scripts.ejs

@@ -0,0 +1,3 @@
+<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" defer></script>
+<% } %>

public/views/index.ejs

@@ -27,6 +27,7 @@
     <link rel="stylesheet" href="<%- url %>/vendor/select2/select2.css">
     <link rel="stylesheet" href="<%- url %>/vendor/select2/select2-bootstrap.css">
     <!-- Custom styles for this template -->
+    <%- include build/cover-header %>
     <link rel="stylesheet" href="<%- url %>/css/cover.css">
     <link rel="stylesheet" href="<%- url %>/css/site.css">
 </head>
@@ -194,31 +195,18 @@
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <% if(useCDN) { %>
-	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
     <script src="//cdn.jsdelivr.net/velocity/1.3.1/velocity.min.js" defer></script>
 	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js" defer></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js" defer></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/js-url/2.3.0/url.min.js" defer></script>
 	<% } else { %>
-	<script src="<%- url %>/vendor/jquery/dist/jquery.min.js" defer></script>
     <script src="<%- url %>/vendor/velocity/velocity.min.js" defer></script>
-	<script src="<%- url %>/vendor/bootstrap/dist/js/bootstrap.min.js" defer></script>
-	<script src="<%- url %>/vendor/select2/select2.min.js" defer></script>
 	<script src="<%- url %>/vendor/moment/min/moment-with-locales.min.js" defer></script>
-	<script src="<%- url %>/vendor/js-url/url.min.js" defer></script>
 	<% } %>
-    <script src="<%- url %>/vendor/js-cookie/src/js.cookie.js" defer></script>
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
-    <script src="<%- url %>/vendor/list.js/dist/list.min.js" defer></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js" defer></script>
-    <script src="<%- url %>/vendor/list.pagination.js/dist/list.pagination.min.js" defer></script>
+    <%- include build/cover-scripts %>
-    <script src="<%- url %>/vendor/file-saver/FileSaver.min.js" defer></script>
-    <script src="<%- url %>/vendor/store-js/store.min.js" defer></script>
-    <script src="<%- url %>/vendor/lz-string/libs/lz-string.min.js" defer></script>
-    <script src="<%- url %>/js/config.js" defer></script>
-    <script src="<%- url %>/js/common.js" defer></script>
-    <script src="<%- url %>/js/history.js" defer></script>
-    <script src="<%- url %>/js/cover.js" defer></script>
-    <script src="<%- url %>/js/locale.js" defer></script>
 </body>
 
 </html>

public/views/pretty.ejs

@@ -18,23 +18,20 @@
     <link rel="icon" type="image/png" href="<%- url %>/favicon.png">
 	<link rel="apple-touch-icon" href="<%- url %>/apple-touch-icon.png">
 	<% if(useCDN) { %>
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/ionicons/2.0.1/css/ionicons.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
 	<% } else { %>
-	<link rel="stylesheet" href='<%- url %>/vendor/bootstrap/dist/css/bootstrap.min.css'>
-    <link rel="stylesheet" href='<%- url %>/vendor/font-awesome/css/font-awesome.min.css'>
     <link rel="stylesheet" href="<%- url %>/vendor/Ionicons/css/ionicons.min.css">
     <link rel="stylesheet" href="<%- url %>/vendor/octicons/octicons/octicons.css">
 	<% } %>
+	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
     <link rel="stylesheet" href='<%- url %>/css/github-extract.css'>
     <link rel="stylesheet" href='<%- url %>/css/gist.css'>
-    <link rel="stylesheet" href='<%- url %>/vendor/highlightjs/styles/github-gist.css'>
-    <link rel="stylesheet" href="<%- url %>/vendor/prism/themes/prism.css">
     <link rel="stylesheet" href="<%- url %>/css/mermaid.css">
     <link rel="stylesheet" href='<%- url %>/css/markdown.css'>
     <link rel="stylesheet" href='<%- url %>/vendor/emojify/css/emojify.min.css'>
+    <%- include build/pretty-header %>
     <link rel="stylesheet" href='<%- url %>/css/extra.css'>
     <link rel="stylesheet" href="<%- url %>/css/slide-preview.css">
     <link rel="stylesheet" href='<%- url %>/css/site.css'>
@@ -92,53 +89,20 @@
     MathJax.Hub.Config({ messageStyle: "none", skipStartupTypeset: true ,tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true }});
 </script>
 <% if(useCDN) { %>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.6.1/js-yaml.min.js" defer></script>
 <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js" defer></script>
 <% } else { %>
-<script src="<%- url %>/vendor/jquery/dist/jquery.min.js"></script>
-<script src="<%- url %>/vendor/bootstrap/dist/js/bootstrap.min.js" defer></script>
 <script src="<%- url %>/vendor/js-yaml/dist/js-yaml.min.js" defer></script>
 <script type="text/javascript" src="<%- url %>/vendor/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
 <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
 <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
 <% } %>
-<script src="<%- url %>/vendor/lz-string/libs/lz-string.min.js" defer></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
-<script src="<%- url %>/vendor/xss/dist/xss.min.js" defer></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<script src="<%- url %>/vendor/markdown-it/dist/markdown-it.min.js" defer></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-abbr/dist/markdown-it-abbr.min.js" defer></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/viz.js/1.3.0/viz.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-footnote/dist/markdown-it-footnote.min.js" defer></script>
+<%- include build/pretty-scripts %>
-<script src="<%- url %>/vendor/markdown-it-deflist/dist/markdown-it-deflist.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-mark/dist/markdown-it-mark.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-ins/dist/markdown-it-ins.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-sub/dist/markdown-it-sub.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-sup/dist/markdown-it-sup.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-container/dist/markdown-it-container.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-mathjax.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-regexp.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-imsize.js" defer></script>
-<script src="<%- url %>/vendor/gist-embed/gist-embed.min.js" defer></script>
-<script src="<%- url %>/vendor/string/dist/string.min.js" defer></script>
-<script src="<%- url %>/vendor/highlightjs/highlight.pack.min.js" defer></script>
-<script src="<%- url %>/vendor/prism/prism.js" defer></script>
-<script src="<%- url %>/vendor/prism/components/prism-wiki.min.js" defer></script>
-<script src="<%- url %>/vendor/js-cookie/src/js.cookie.js" defer></script>
-<script src="<%- url %>/vendor/emojify/js/emojify.min.js" defer></script>
-<script src="<%- url %>/vendor/raphael/raphael.min.js" defer></script>
-<script src="<%- url %>/vendor/lodash/dist/lodash.min.js" defer></script>
-<script src="<%- url %>/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
-<script src="<%- url %>/vendor/flowchart/release/flowchart.min.js" defer></script>
-<script src="<%- url %>/vendor/viz.js/viz.js" defer></script>
-<script src="<%- url %>/vendor/pdfobject/pdfobject.min.js" defer></script>
-<script src="<%- url %>/vendor/md-toc.js" defer></script>
-<script src="<%- url %>/js/config.js" defer></script>
-<script src="<%- url %>/js/common.js" defer></script>
-<script src="<%- url %>/js/extra.js" defer></script>
-<script src="<%- url %>/js/render.js" defer></script>
 <script src="<%- url %>/js/reveal-markdown.js" defer></script>
-<script src="<%- url %>/js/pretty.js" defer></script>
-
 <%- include ga %>

public/views/slide.ejs

@@ -87,54 +87,24 @@
             MathJax.Hub.Config({ messageStyle: "none", skipStartupTypeset: true ,tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true }});
         </script>
         <% if(useCDN) { %>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script src="//cdn.jsdelivr.net/velocity/1.3.1/velocity.min.js" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.6.1/js-yaml.min.js" defer></script>
         <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js" defer></script>
         <% } else { %>
-        <script src="<%- url %>/vendor/jquery/dist/jquery.min.js"></script>
+        <script src="<%- url %>/vendor/reveal.js/lib/js/head.min.js"></script>
+        <script src="<%- url %>/vendor/reveal.js/js/reveal.js"></script>
         <script src="<%- url %>/vendor/velocity/velocity.min.js" defer></script>
         <script src="<%- url %>/vendor/js-yaml/dist/js-yaml.min.js" defer></script>
         <script type="text/javascript" src="<%- url %>/vendor/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
         <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
         <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
         <% } %>
-        <script src="<%- url %>/vendor/bootstrap/tooltip.min.js"></script>
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-        <script src="<%- url %>/vendor/reveal.js/lib/js/head.min.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js" defer></script>
-        <script src="<%- url %>/vendor/reveal.js/js/reveal.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/viz.js/1.3.0/viz.js" defer></script>
-        <script src="<%- url %>/vendor/xss/dist/xss.min.js" defer></script>
+        <%- include build/slide-scripts %>
-        <script src="<%- url %>/vendor/markdown-it/dist/markdown-it.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-abbr/dist/markdown-it-abbr.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-footnote/dist/markdown-it-footnote.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-deflist/dist/markdown-it-deflist.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-mark/dist/markdown-it-mark.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-ins/dist/markdown-it-ins.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-sub/dist/markdown-it-sub.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-sup/dist/markdown-it-sup.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-container/dist/markdown-it-container.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-mathjax.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-regexp.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-imsize.js" defer></script>
-        <script src="<%- url %>/vendor/gist-embed/gist-embed.min.js" defer></script>
-        <script src="<%- url %>/vendor/string/dist/string.min.js" defer></script>
-        <script src="<%- url %>/vendor/highlightjs/highlight.pack.min.js" defer></script>
-        <script src="<%- url %>/vendor/js-cookie/src/js.cookie.js" defer></script>
-        <script src="<%- url %>/vendor/emojify/js/emojify.min.js" defer></script>
-        <script src="<%- url %>/vendor/raphael/raphael.min.js" defer></script>
-        <script src="<%- url %>/vendor/lodash/dist/lodash.min.js" defer></script>
-        <script src="<%- url %>/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
-        <script src="<%- url %>/vendor/flowchart/release/flowchart.min.js" defer></script>
-        <script src="<%- url %>/vendor/viz.js/viz.js" defer></script>
-        <script src="<%- url %>/vendor/pdfobject/pdfobject.min.js" defer></script>
-        <script src="<%- url %>/vendor/md-toc.js" defer></script>
-        <script src="<%- url %>/js/config.js" defer></script>
-        <script src="<%- url %>/js/common.js" defer></script>
-        <script src="<%- url %>/js/extra.js" defer></script>
-        <script src="<%- url %>/js/render.js" defer></script>
-        <script src="<%- url %>/js/slide.js" defer></script>
-        
     </body>
 </html>
 

webpack.config.js

@@ -0,0 +1,3 @@
+var baseConfig = require('./webpackBaseConfig');
+
+module.exports = baseConfig;

webpack.production.js

@@ -0,0 +1,91 @@
+var baseConfig = require('./webpackBaseConfig');
+var webpack = require('webpack');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = Object.assign({}, baseConfig, {
+    plugins: [
+        new webpack.ProvidePlugin({
+            '_': 'lodash',
+            Visibility: "visibilityjs",
+            Cookies: "js-cookie",
+            emojify: "emojify.js",
+            key: "keymaster"
+        }),
+        new ExtractTextPlugin("[name].css"),
+        new webpack.optimize.CommonsChunkPlugin({
+            names: ["vendor", "public", "slide", "locale"],
+            children: true,
+            async: true,
+            filename: '[name].js',
+            minChunks: Infinity
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'index'],
+            filename: path.join(__dirname, 'public/views/build/index-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'index'],
+            filename: path.join(__dirname, 'public/views/build/index-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'locale'],
+            filename: path.join(__dirname, 'public/views/build/cover-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'locale'],
+            filename: path.join(__dirname, 'public/views/build/cover-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'public'],
+            filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'public'],
+            filename: path.join(__dirname, 'public/views/build/pretty-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'slide'],
+            filename: path.join(__dirname, 'public/views/build/slide-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'slide'],
+            filename: path.join(__dirname, 'public/views/build/slide-scripts.ejs'),
+            inject: false
+        }),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'NODE_ENV': JSON.stringify('production')
+            }
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            },
+            mangle: false,
+            sourceMap: false
+        })
+    ],
+
+    output: {
+        path: path.join(__dirname, 'public/build'),
+        publicPath: '/build/',
+        filename: '[id].[name].[hash].js'
+    },
+});

webpackBaseConfig.js

@@ -0,0 +1,174 @@
+var webpack = require('webpack');
+var path = require('path');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    plugins: [
+        new webpack.ProvidePlugin({
+            Visibility: "visibilityjs",
+            Cookies: "js-cookie",
+            emojify: "emojify.js",
+            key: "keymaster",
+            $: "jquery",
+            jQuery: "jquery",
+            "window.jQuery": "jquery"
+        }),
+        new ExtractTextPlugin("[name].css"),
+        new webpack.optimize.CommonsChunkPlugin({
+            names: ["vendor", "public", "slide", "locale"],
+            children: true,
+            async: true,
+            filename: '[name].js',
+            minChunks: Infinity
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'index'],
+            filename: path.join(__dirname, 'public/views/build/index-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'index'],
+            filename: path.join(__dirname, 'public/views/build/index-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'locale'],
+            filename: path.join(__dirname, 'public/views/build/cover-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'locale'],
+            filename: path.join(__dirname, 'public/views/build/cover-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'public'],
+            filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'public'],
+            filename: path.join(__dirname, 'public/views/build/pretty-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'slide'],
+            filename: path.join(__dirname, 'public/views/build/slide-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'slide'],
+            filename: path.join(__dirname, 'public/views/build/slide-scripts.ejs'),
+            inject: false
+        })
+    ],
+
+    entry: {
+        index: path.join(__dirname, 'public/js/index.js'),
+        public: path.join(__dirname, 'public/js/public.js'),
+        slide: path.join(__dirname, 'public/js/slide.js'),
+        locale: path.join(__dirname, 'public/js/locale.js'),
+        vendor: [
+            "jquery-mousewheel",
+            "jquery-scrollspy/jquery-scrollspy",
+            "jquery-ui/ui/widgets/resizable",
+            "jquery-ui/ui/widgets/tooltip",
+            "jquery-ui/ui/widgets/controlgroup",
+            "jquery-ui/ui/widgets/autocomplete",
+            "script!gist-embed",
+            "expose?filterXSS!xss",
+            "js-url",
+            "expose?Spinner!spin.js",
+            "script!Idle.Js",
+            "expose?LZString!lz-string",
+            "expose?ListPagination!list.pagination.js/dist/list.pagination.js",
+            "script!codemirror",
+            "script!select2",
+            "script!inlineAttachment",
+            "script!jqueryTextcomplete",
+            "script!codemirrorSpellChecker",
+            "script!codemirrorInlineAttachment",
+            "script!ot",
+            "flowchart.js",
+            "js-sequence-diagrams"
+        ]
+    },
+
+    output: {
+        path: path.join(__dirname, 'public/build'),
+        publicPath: '/build/',
+        filename: '[name].js'
+    },
+
+    resolve: {
+        modulesDirectories: [
+            path.resolve(__dirname, 'src'),
+            path.resolve(__dirname, 'node_modules')
+        ],
+        extensions: ["", ".js"],
+        alias: {
+            codemirror: path.join(__dirname, 'public/vendor/codemirror/codemirror.min.js'),
+            select2: path.join(__dirname, 'public/vendor/select2/select2.min.js'),
+            inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'),
+            jqueryTextcomplete: path.join(__dirname, 'public/vendor/jquery-textcomplete/jquery.textcomplete.js'),
+            codemirrorSpellChecker: path.join(__dirname, 'public/vendor/codemirror-spell-checker/spell-checker.min.js'),
+            codemirrorInlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/codemirror.inline-attachment.js'),
+            ot: path.join(__dirname, 'public/vendor/ot/ot.min.js')
+        }
+    },
+
+    externals: {
+        "viz.js": "Viz",
+        "socket.io-client": "io",
+        "lodash": "_",
+        "jquery": "$"
+    },
+
+    module: {
+        loaders: [{
+            test: /\.json$/,
+            loader: 'json-loader'
+        }, {
+            test: /\.css$/,
+            loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
+        }, {
+            test: /\.scss$/,
+            loader: ExtractTextPlugin.extract('style-loader', 'sass-loader')
+        }, {
+            test: /\.less$/,
+            loader: ExtractTextPlugin.extract('style-loader', 'less-loader')
+        }, {
+            test: require.resolve("js-sequence-diagrams"),
+            loader: "imports?Raphael=raphael"
+        }, {
+            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+            loader: "file"
+        }, {
+            test: /\.(woff|woff2)$/,
+            loader: "url?prefix=font/&limit=5000"
+        }, {
+            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+            loader: "url?limit=10000&mimetype=application/octet-stream"
+        }, {
+            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+            loader: "url?limit=10000&mimetype=image/svg+xml"
+        }],
+
+        noParse: [
+            "gist-embed"
+        ]
+    },
+
+    node: {
+        fs: "empty"
+    }
+};