Starting v2 properly

.eslintrc.json

@@ -0,0 +1,55 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 2017,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": false
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "rules": {
+    "arrow-spacing": "error",
+    "block-scoped-var": "error",
+    "block-spacing": "error",
+    "brace-style": ["error", "stroustrup", {}],
+    "camelcase": "error",
+    "comma-dangle": ["error", "never"],
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "comma-style": [1, "last"],
+    "consistent-this": [1, "_this"],
+    "curly": [1, "multi"],
+    "eol-last": 1,
+    "eqeqeq": 1,
+    "func-names": 1,
+    "indent": ["error", 2, { "SwitchCase": 1 }],
+    "lines-around-comment": ["error", { "beforeBlockComment": true, "allowArrayStart": true }],
+    "max-len": [1, 120, 2], // 2 spaces per tab, max 80 chars per line
+    "new-cap": 1,
+    "newline-before-return": "error",
+    "no-array-constructor": 1,
+    "no-inner-declarations": [1, "both"],
+    "no-mixed-spaces-and-tabs": 1,
+    "no-multi-spaces": 2,
+    "no-new-object": 1,
+    "no-shadow-restricted-names": 1,
+    "object-curly-spacing": ["error", "always"],
+    "padded-blocks": ["error", { "blocks": "never", "switches": "always" }],
+    "prefer-const": "error",
+    "prefer-template": "error",
+    "one-var": 0,
+    "quote-props": ["error", "always"],
+    "quotes": [1, "single"],
+    "radix": 1,
+    "semi": [1, "always"],
+    "space-before-blocks": [1, "always"],
+    "space-infix-ops": 1,
+    "vars-on-top": 1,
+    "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
+    "spaced-comment": ["error", "always", { "markers": ["/"] }]
+  }
+
+}

.gitignore

@@ -1,62 +1,17 @@
 # Created by .ignore support plugin (hsz.mobi)
-### JetBrains template
-# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
-
-*.iml
-
-/dist
-## Directory-based project format:
-.idea/
-# if you remove the above rule, at least ignore the following:
-
-# User-specific stuff:
-# .idea/workspace.xml
-# .idea/tasks.xml
-# .idea/dictionaries
-
-# Sensitive or high-churn files:
-# .idea/dataSources.ids
-# .idea/dataSources.xml
-# .idea/sqlDataSources.xml
-# .idea/dynamic.xml
-# .idea/uiDesigner.xml
-
-# Gradle:
-# .idea/gradle.xml
-# .idea/libraries
-
-# Mongo Explorer plugin:
-# .idea/mongoSettings.xml
-
-## File-based project format:
-*.ipr
-*.iws
-
-## Plugin-specific files:
-
-# IntelliJ
-/out/
-
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
 ### Node template
 # Logs
 logs
 *.log
 npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
 # Runtime data
 pids
 *.pid
 *.seed
+*.pid.lock
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
@@ -64,17 +19,129 @@ lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 
+# nyc test coverage
+.nyc_output
+
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
+# Bower dependency directory (https://bower.io/)
+bower_components
+
 # node-waf configuration
 .lock-wscript
 
-# Compiled binary addons (http://nodejs.org/api/addons.html)
+# Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release
 
-# Dependency directory
-# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
-node_modules
+# Dependency directories
+node_modules/
+jspm_packages/
 
-/jspm_packages/
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+### macOS template
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+### JetBrains template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+.idea/
+# User-specific stuff:
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/dictionaries
+
+# Sensitive or high-churn files:
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.xml
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+
+# Gradle:
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# CMake
+cmake-build-debug/
+
+# Mongo Explorer plugin:
+.idea/**/mongoSettings.xml
+
+## File-based project format:
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Elastic Beanstalk Files
+.elasticbeanstalk/*
+!.elasticbeanstalk/*.cfg.yml
+!.elasticbeanstalk/*.global.yml
+/src/bundle.js
+/src/bundle.js.map
+/live/

gulp/backbone.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const browserify = require('browserify');
+const gulp = require('gulp');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const uglify = require('gulp-uglify-es').default;
+const sourcemaps = require('gulp-sourcemaps');
+const gutil = require('gulp-util');
+const rename = require('gulp-rename');
+const stripDebug = require('gulp-strip-debug');
+var bump = require('gulp-bump');
+
+const version = 'v2';
+
+gulp.task('bundleBackbone', function () {
+  // set up the browserify instance on a task basis
+  const b = browserify({
+    'debug': true,
+    'entries': `./src/${version}/js/app.js`
+  });
+
+  return b.bundle()
+    .pipe(source('app.js'))
+    .pipe(buffer())
+    // .pipe(stripDebug())
+    .pipe(rename('bundle.js'))
+
+    .pipe(sourcemaps.init({ 'loadMaps': true }))
+  // Add transformation tasks to the pipeline here.
+    // .pipe(uglify())
+    .on('error', gutil.log)
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('./live/js'));
+});
+
+gulp.task('bump', function() {
+  gulp.src('src/service-worker.js')
+    .pipe(bump({ 'key': 'version' }))
+    .pipe(gulp.dest('src'));
+});
+
+gulp.task('buildBackbone', ['bump', 'bundleBackbone'], function() {
+  gulp.watch(`src/${version}/js/**/*.js`, ['bump', 'bundleBackbone']);
+});
+

gulp/build.js

@@ -1,13 +1,80 @@
-'use strict';
+const gulp = require('gulp'),
 
-var gulp = require('gulp');
+  autoprefixer = require('gulp-autoprefixer'),
+  cssnano = require('gulp-cssnano'),
+  uglify = require('gulp-uglify'),
 
+  rename = require('gulp-rename'),
+  concat = require('gulp-concat'),
+  cache = require('gulp-cache'),
+  htmlmin = require('gulp-htmlmin'),
+  inject = require('gulp-inject'),
+  del = require('del'),
+  htmlreplace = require('gulp-html-replace');
 
-function handleError(err) {
-    console.error(err.toString());
-    this.emit('end');
-}
+const scss = require('gulp-scss');
+const sass = require('gulp-sass');
+const googleWebFonts = require('gulp-google-webfonts');
 
-gulp.task('clean', function () {
-    return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.rimraf());
-});
+const fontOptions = { };
+
+const version = 'v2';
+const src = `src/${version}`;
+
+gulp.task('styles', function() {
+  return gulp.src(['node_modules/backbone.modal/backbone.modal.css', 'node_modules/backbone.modal/backbone.modal.theme.css'])
+    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
+
+  /* .pipe(gulp.dest('dist/css'))*/
+  /* .pipe(rename({suffix: '.min'}))*/
+    .pipe(concat('style.min.css'))
+    .pipe(cssnano())
+    .pipe(gulp.dest('live/css'));
+});
+
+gulp.task('copy', function() {
+  gulp.src([`${src}/img/**/*`]).pipe(gulp.dest('live/img'));
+  gulp.src([`${src}/gfx/**/*`]).pipe(gulp.dest('live/gfx'));
+  gulp.src([`${src}/browserconfig.xml`, `${src}/site.webmanifest`, `${src}/service-worker.js`, `${src}/bridger.js`]).pipe(gulp.dest('live'));
+  gulp.src([`${src}/index.html`]).pipe(gulp.dest('live'));
+});
+
+gulp.task('clean', function() {
+  return del(['live']);
+});
+
+gulp.task('customMUI', function() {
+  return gulp.src([`${src}/css/custom.scss`])
+    .pipe(sass({ 'outputStyle': 'compressed' }).on('error', sass.logError))
+    // .pipe(cssnano())
+    .pipe(rename('mui.custom.css'))
+    // .pipe(gulp.dest(`${dest}/css`));
+    .pipe(gulp.dest('live/css'));
+});
+
+gulp.task('vendor', function() {
+  return gulp.src([
+    'node_modules/muicss/dist/js/mui.min.js'
+  ])
+    .pipe(concat('vendor.js'))
+
+    /* .pipe(uglify({ 'mangle': false }))*/
+    .pipe(gulp.dest('live/js'));
+});
+
+gulp.task('fonts', function() {
+  return gulp.src('src/fonts.list')
+    .pipe(googleWebFonts(fontOptions))
+    .pipe(gulp.dest('live/fonts'))
+  ;
+});
+
+gulp.task('gotham', function() {
+  gulp.src(['fonts/gotham.css']).pipe(gulp.dest('live/fonts'));
+  gulp.src(['fonts/GothamSSm-Black.otf', 'fonts/GothamSSm-Bold.otf', 'fonts/GothamSSm-Book.otf', 'fonts/GothamSSm-Light.otf', 'fonts/GothamSSm-Medium.otf']).pipe(gulp.dest('live/fonts'));
+});
+
+gulp.task('fujicons', function() {
+  gulp.src(['fonts/fujicons.css']).pipe(gulp.dest('live/fonts'));
+  gulp.src(['fonts/fujicons.ttf']).pipe(gulp.dest('live/fonts'));
+});

gulpfile.js

@@ -1,77 +1,7 @@
-"use strict";
-var gulp = require('gulp'),
+const gulp = require('gulp');
 
-    autoprefixer = require('gulp-autoprefixer'),
-    cssnano = require('gulp-cssnano'),
-    jshint = require('gulp-jshint'),
-    uglify = require('gulp-uglify'),
+const requireDir = require('require-dir');
 
-    rename = require('gulp-rename'),
-    concat = require('gulp-concat'),
-    notify = require('gulp-notify'),
-    cache = require('gulp-cache'),
-    livereload = require('gulp-livereload'),
-    htmlmin = require('gulp-htmlmin'),
-    inject = require('gulp-inject'),
-    del = require('del'),
-    htmlreplace = require('gulp-html-replace');
+requireDir('./gulp');
 
-
-var filePath = {
-    build_dir: './dist'
-};
-
-gulp.task('scripts', function() {
-    return gulp.src('app/js/**/*.js')
-        .pipe(jshint('.jshintrc'))
-        .pipe(jshint.reporter('default'))
-        .pipe(concat('main.js'))
-        /*.pipe(gulp.dest('dist/js'))*/
-        /*.pipe(rename({suffix: '.min'}))*/
-        .pipe(concat('app.js'))
-        /*.pipe(uglify({mangle: false}))*/
-        .pipe(gulp.dest('dist/js'));
-});
-
-gulp.task('styles', function() {
-    return gulp.src(['app/css/app.css','app/css/md.css','app/css/read.css','app/css/gist.css'])
-        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
-        /*.pipe(gulp.dest('dist/css'))*/
-        /*.pipe(rename({suffix: '.min'}))*/
-        .pipe(cssnano())
-        .pipe(concat('app.css'))
-        .pipe(gulp.dest('dist/css'));
-});
-
-gulp.task('partials', function() {
-
-    gulp.src(['app/partials/**/*']).pipe(gulp.dest('dist/partials'));
-    gulp.src(['app/libs/ejs_production.js']).pipe(gulp.dest('dist/libs'));
-    gulp.src(['app/libs/microevent.js']).pipe(gulp.dest('dist/libs'));
-    gulp.src(['app/fav/**/*']).pipe(gulp.dest('dist/fav'));
-  gulp.src(['app/gfx/**/*']).pipe(gulp.dest('dist/gfx'));
-});
-
-
-
-gulp.task('index', function () {
-    var sources = gulp.src(['js/apps.js', 'css/app.css'], {read: false});
-
-    return gulp.src(['app/index.html'])
-        .pipe(htmlreplace({
-            'css': 'css/app.css',
-            'js': 'js/app.js',
-            'vendor': 'libs/ejs_production.js'
-        }))
-        .pipe(htmlmin({removeComments: true, collapseWhitespace: true, keepClosingSlash: true}))
-        .pipe(gulp.dest('dist/'));
-});
-
-gulp.task('clean', function() {
-    return del(['dist']);
-});
-
-
-gulp.task('default', ['clean'], function() {
-    gulp.start('styles', 'scripts','partials','index');
-});
+gulp.task('default', ['bundleBackbone', 'styles', 'copy', 'customMUI', 'vendor', 'fonts', 'gotham', 'fujicons']);

keeper-serverV2.js

@@ -22,7 +22,7 @@ app.use(bodyParser.urlencoded({extended: true}));
 app.use(cookieParser());
 
 //app.use(express.static(path.join(__dirname, 'dist')));
-app.use(express.static(path.join(__dirname, 'app')));
+app.use(express.static(path.join(__dirname, 'live')));
 
 app.use('/', keeper);
 

package.json

@@ -10,41 +10,56 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "backbone": "^1.3.3",
     "body-parser": "^1.15.0",
     "cheerio": "^0.20.0",
     "cloudant": "^1.6.2",
     "cookie-parser": "^1.4.1",
     "ejs": "^2.4.1",
     "express": "^4.13.4",
+    "jquery": "^3.3.1",
     "morgan": "^1.7.0",
+    "muicss": "^0.9.38",
     "nano": "^6.2.0",
-    "require-dir": "^0.3.0",
+    "require-dir": "^0.3.2",
     "serve-favicon": "^2.3.0",
     "string": "^3.3.1",
+    "underscore": "^1.8.3",
     "url": "^0.11.0"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",
-    "del": "^2.2.0",
+    "browserify": "^16.1.1",
+    "del": "^2.2.2",
     "eslint": "^4.1.1",
     "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.0",
-    "gulp-cache": "^0.4.2",
-    "gulp-concat": "^2.6.0",
-    "gulp-cssnano": "^2.1.1",
-    "gulp-html-replace": "^1.5.5",
+    "gulp-autoprefixer": "^3.1.1",
+    "gulp-bump": "^3.1.0",
+    "gulp-cache": "^0.4.6",
+    "gulp-concat": "^2.6.1",
+    "gulp-cssnano": "^2.1.2",
+    "gulp-google-webfonts": "^1.0.0",
+    "gulp-html-replace": "^1.6.2",
     "gulp-htmlmin": "^1.3.0",
-    "gulp-inject": "^4.0.0",
+    "gulp-inject": "^4.3.1",
     "gulp-jshint": "^2.0.0",
     "gulp-livereload": "^3.8.1",
     "gulp-notify": "^2.2.0",
     "gulp-rename": "^1.2.2",
-    "gulp-uglify": "^1.5.3",
+    "gulp-sass": "^3.2.1",
+    "gulp-scss": "^1.4.0",
+    "gulp-sourcemaps": "^2.6.4",
+    "gulp-strip-debug": "^3.0.0",
+    "gulp-uglify": "^1.5.4",
+    "gulp-uglify-es": "^1.0.1",
+    "gulp-util": "^3.0.8",
     "html-to-markdown": "^1.0.0",
     "jshint": "^2.9.1",
     "jsonfile": "^2.2.3",
     "log4js": "^0.6.31",
-    "simplecrawler": "^0.6.2"
+    "simplecrawler": "^0.6.2",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0"
   },
   "jspm": {
     "dependencies": {},

src/v2/css/app.scss

@@ -0,0 +1,237 @@
+html,
+body {
+    height: 100%;
+    background-color: #eee;
+}
+
+html,
+body,
+input,
+textarea,
+buttons {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
+}
+
+
+/**
+ * Layout CSS
+ */
+#header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 2;
+    transition: left 0.2s;
+}
+
+#sidedrawer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    width: 200px;
+    left: -200px;
+    overflow: auto;
+    z-index: 2;
+    background-color: #fff;
+    transition: transform 0.2s;
+}
+
+#content-wrapper {
+    min-height: 100%;
+    overflow-x: hidden;
+    margin-left: 0px;
+    transition: margin-left 0.2s;
+
+    /* sticky bottom */
+    margin-bottom: -160px;
+    padding-bottom: 160px;
+}
+
+#footer {
+    height: 160px;
+    margin-left: 0px;
+    transition: margin-left 0.2s;
+}
+
+@media (min-width: 600px) {
+    #header {
+        left: 200px;
+    }
+
+    #sidedrawer {
+        transform: translate(200px);
+    }
+
+    #content-wrapper {
+        margin-left: 200px;
+    }
+
+    #footer {
+        margin-left: 200px;
+    }
+
+    body.hide-sidedrawer #header {
+        left: 0;
+    }
+
+    body.hide-sidedrawer #sidedrawer {
+        transform: translate(0px);
+    }
+
+    body.hide-sidedrawer #content-wrapper {
+        margin-left: 0;
+    }
+
+    body.hide-sidedrawer #footer {
+        margin-left: 0;
+    }
+}
+
+
+/**
+ * Toggle Side drawer
+ */
+#sidedrawer.active {
+    transform: translate(200px);
+}
+
+
+/**
+ * Header CSS
+ */
+.sidedrawer-toggle {
+    color: #fff;
+    cursor: pointer;
+    font-size: 20px;
+    line-height: 20px;
+    margin-right: 10px;
+}
+
+.sidedrawer-toggle:hover {
+    color: #fff;
+    text-decoration: none;
+}
+
+
+/**
+ * Footer CSS
+ */
+#footer {
+    background-color: #0288D1;
+    color: #fff;
+}
+
+#footer a {
+    color: #fff;
+    text-decoration: underline;
+}
+
+/**
+* Side drawer CSS
+*/
+#sidedrawer-brand {
+   /* padding-left: 20px; */
+}
+
+#sidedrawer ul {
+    list-style: none;
+}
+
+#sidedrawer > ul {
+    padding-left: 0px;
+}
+
+#sidedrawer > ul > li:first-child {
+    padding-top: 15px;
+}
+
+#sidedrawer strong {
+    display: block;
+    padding: 15px 22px;
+    cursor: pointer;
+}
+
+#sidedrawer .entry:hover {
+    background-color: #E0E0E0;
+}
+
+#sidedrawer strong + ul > li {
+    padding: 6px 0px;
+}
+#sidedrawer .entry {
+    padding: 7px;
+
+  cursor:pointer;
+}
+
+/*#sidedrawer .entry:after {
+    font-family:Linearicons-Free;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
+float:right;
+    content:"\e87a"
+}*/
+
+
+
+#footer, .mui-appbar {
+    background-color: #62849C;
+}
+
+
+a.tag{
+  float:left;
+  margin-right:8px;
+  padding:2px 7px 3px 19px;
+  font:700 .7em "lucida grande", helvetica, arial, sans-serif;
+  color:#3d5295;
+  text-decoration:none;
+  text-shadow:0 1px 0 rgba(255,255,255,.5);
+  border-radius:0 .4em .4em 0;
+  background:
+    -moz-linear-gradient(
+      -45deg,
+      transparent 50%,
+      #d0daf7 50%
+    ),
+    -moz-linear-gradient(
+      45deg,
+      transparent 50%,
+      #d0daf7 50%
+    ),
+    -moz-linear-gradient(
+      #d0daf7,
+      #d0daf7
+    );
+  background:
+    -webkit-gradient(
+      linear,
+      0 0, 100% 100%,
+      color-stop(.5,transparent),
+      color-stop(.5,#d0daf7)
+    ),
+    -webkit-gradient(
+      linear,
+      0 100%, 100% 0,
+      color-stop(.5,transparent),
+      color-stop(.5,#d0daf7)
+    ),
+    -webkit-gradient(
+      linear,
+      0 0, 100% 0,
+      from(#d0daf7),
+      to(#d0daf7)
+    );
+  background-repeat:no-repeat;
+  background-position:0 0, 0 100%, 10px 0;
+  background-size:10px 53%, 10px 50%, 100% 100%;
+  -moz-padding-start:14px;
+  -webkit-mask-image:-webkit-gradient(
+    radial,
+    11 50%, 2.9, 11 50%, 3,
+    from(transparent),
+    to(rgba(0,0,0,1))
+  )}
+a.tag:hover {
+  opacity:.8}

src/v2/css/custom.scss

@@ -0,0 +1,25 @@
+// import MUI colors
+@import "./node_modules/muicss/lib/sass/mui/colors";
+
+// customize MUI variables
+$mui-primary-color: mui-color('blue-grey', '500');
+$mui-primary-color-dark: mui-color('blue-grey', '700');
+$mui-primary-color-light: mui-color('blue-grey', '100');
+
+$mui-accent-color: mui-color('deep-purple', '900');
+$mui-accent-color-dark: mui-color('indigo', 'A100');
+$mui-accent-color-light: mui-color('indigo', 'A400');
+
+$mui-base-font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, Verdana, "Trebuchet MS";
+$mui-base-font-weight: 400;
+
+$mui-appbar-font-color: mui-color('black') !default;
+
+$mui-link-font-color:   mui-color('yellow', '900') !default;
+
+// import MUI SASS
+@import "./node_modules/muicss/lib/sass/mui";
+////
+
+@import "./src/v2/css/app.scss";
+@import "./src/v2/css/md.scss";

src/v2/css/md.scss

@@ -0,0 +1,53 @@
+body {
+    font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial;
+}
+ul {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    display: inline;
+    margin: 0;
+    padding: 0 4px 0 0;
+}
+
+.dates {
+    padding: 2px;
+    border: solid 1px #80007e;
+    background-color: #ffffff;
+}
+
+#btc, #fx {
+    font-size: 75%;
+}
+
+.up, .ontime {
+    color: darkgreen;
+}
+
+.down, .delayed {
+    color: darkred;
+}
+
+.nochange {
+    color: #000000;
+}
+.password {
+    border: 1px solid #cccccc;
+    background-color: #efefef;
+    font-family: monospace;
+    white-space: pre;
+}
+
+.mui--text-danger {
+    color: #F44336;
+}
+
+.fnBlock {
+font-size:20px;
+}
+
+.fnRefresh {
+
+}

src/v2/index.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Jubilee</title>
+
+    <link href="/fonts/fonts.css" rel="stylesheet" type="text/css"/>
+    <link href="/fonts/fujicons.css" rel="stylesheet" type="text/css"/>
+    <link href="/css/mui.custom.css" rel="stylesheet" type="text/css"/>
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="apple-mobile-web-app-title" content="Train Times">
+    <meta name="application-name" content="Train Times">
+    <meta name="theme-color" content="#ffffff">
+
+
+</head>
+<body>
+
+<div id="sidedrawer" class="mui--no-user-select">
+  <div id="sidedrawer-brand" class="mui--appbar-line-height mui--text-title">Keeper</div>
+  <div class="mui-divider"></div>
+  <div id="functions" class="fnBlock">
+    <span id="fnRefresh" class="lnr lnr-sync"></span>
+    <span id="fnSearch" class="lnr lnr-magnifier"></span>
+        <span class="mui-dropdown">
+            <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
+                Tags
+                <span class="mui-caret"></span>
+            </button>
+            <ul class="mui-dropdown__menu" id="tagList">
+                <li><a href="#?node">Node</a></li>
+                <li><a href="#?ember">Ember</a></li>
+                <li><a href="#">Option 3</a></li>
+                <li><a href="#">Option 4</a></li>
+            </ul>
+        </span>
+  </div>
+  <div id='searchbox' class="mui-textfield" style="display: none;">
+    <input id='newsearch' type="text" placeholder="Search for..">
+  </div>
+  <div class="mui-divider"></div>
+  <div id="listContainer">
+
+  </div>
+  <div class="mui-divider"></div>
+  <div class="mui-textfield">
+    <input id='newurl' type="text" placeholder="Add new url">
+    <div id="addstatus" style="display:none;">Adding...</div>
+  </div>
+</div>
+<header id="header">
+  <div class="mui-appbar mui--appbar-line-height">
+    <div class="mui-container-fluid">
+      <a class="sidedrawer-toggle mui--visible-xs-inline-block js-show-sidedrawer"><span
+        class="lnr lnr-menu"></span></a>
+      <a class="sidedrawer-toggle mui--hidden-xs js-hide-sidedrawer "><span class="lnr lnr-menu"></span></a>
+      <span class="mui--text-title mui--visible-xs-inline-block">Keeper</span>
+    </div>
+  </div>
+</header>
+<div id="content-wrapper">
+  <div class="mui--appbar-height"></div>
+  <!--<div class="mui-container-fluid" id="bodyContents" class="mui-panel">-->
+  <!-- content here -->
+  <div class="mui-container" id="bodyContents" class="mui-panel">
+
+  </div>
+</div>
+<footer id="footer">
+  <div class="mui-container-fluid">
+    <br>
+    Made with&nbsp;<span class="lnr lnr-heart"></span>&nbsp;by Martin</a>
+  </div>
+</footer>
+
+
+
+
+
+<script src="js/vendor.js" async></script>
+<script type='module' src="js/bundle.js" async></script>
+
+<noscript>
+  <!-- anchor linking to external file -->
+  <h1>Javascript disabled</h1>
+    <p>This really requires javascript to work</p>
+</noscript>
+
+</body>
+
+</html>

src/v2/js/app.js

@@ -0,0 +1,12 @@
+/**
+ *
+ * User: Martin Donnelly
+ * Date: 2018-03-26
+ * Time: 20:49
+ *
+ */
+
+require('muicss');
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');