[gulp] Add gulpfile for build

2026-08-23 11:56:14 +00:00 · 2016-07-23 22:51:47 +02:00
parent 597cc3cb99
commit 8a555d29a3
30 changed files with 5849 additions and 21 deletions
@@ -19,11 +19,9 @@

 <head>
  <meta charset="UTF-8">
-  <LINK href="node_modules/dialog-polyfill/dialog-polyfill.css" rel="stylesheet" type="text/css">
-  <LINK href="node_modules/material-design-lite/dist/material.min.css" rel="stylesheet" type="text/css">
-  <LINK href="node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet" type="text/css">
-  <LINK href="style.css" rel="stylesheet" type="text/css">
-  <LINK href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
+  <link rel="stylesheet" href="vendor.css">
+  <link rel="stylesheet" href="style.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
  <title>Docker Registry UI</title>
 </head>

@@ -55,19 +53,9 @@
      </div>
    </footer>
  </div>
-  <script src="catalog.tag" type="riot/tag"></script>
-  <script src="taglist.tag" type="riot/tag"></script>
-  <script src="add.tag" type="riot/tag"></script>
-  <script src="change.tag" type="riot/tag"></script>
-  <script src="remove.tag" type="riot/tag"></script>
-  <script src="menu.tag" type="riot/tag"></script>
-  <script src="app.tag" type="riot/tag"></script>
-  <script src="node_modules/riot/riot+compiler.min.js"></script>
-  <script src="node_modules/riotgear-router/dist/rg-router.min.js"></script>
-  <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-  <script src="node_modules/material-design-lite/dist/material.min.js"></script>
-  <script src="script.js"></script>
-  <script src="http.js"></script>
+  <script src="scripts/vendor.js"></script>
+  <script src="scripts/tags.js"></script>
+  <script src="scripts/script.js"></script>
 </body>

 </html>
@@ -0,0 +1,18 @@
+/*!
+ * docker-registry-ui
+ * Copyright (C) 2016  Jones Magloire @Joxit
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+function Http(){this.oReq=new XMLHttpRequest,this._events={}}Http.prototype.addEventListener=function(t,e){switch(this._events[t]=e,t){case"loadend":this.oReq.addEventListener("loadend",function(){if(401==this.status){var t=new XMLHttpRequest;for(key in this.http._events)t.addEventListener(key,this.http._events[key]);t.withCredentials=!0,t.open(this.http._method,this.http._url),t.send()}else e.bind(this.oReq)});break;default:this.oReq.addEventListener(t,function(){e.bind(this.oReq)})}},Http.prototype.open=function(t,e){this._method=t,this._url=e,this.oReq.open(t,e)},Http.prototype.send=function(){this.oReq.http=this,this.oReq.send()};var registryUI={};registryUI.url=function(){return registryUI.getRegistryServer(0)},registryUI.getRegistryServer=function(t){try{var e=JSON.parse(localStorage.getItem("registryServer"));if(e instanceof Array)return isNaN(t)?e.map(function(t){return t.trim().replace(/\/*$/,"")}):e[t]}catch(r){}return isNaN(t)?[]:""},registryUI.addServer=function(t){var e=registryUI.getRegistryServer();t=t.trim().replace(/\/*$/,"");var r=e.indexOf(t);r==-1&&(e.push(t),localStorage.setItem("registryServer",JSON.stringify(e)))},registryUI.changeServer=function(t){var e=registryUI.getRegistryServer();t=t.trim().replace(/\/*$/,"");var r=e.indexOf(t);r!=-1&&(e.splice(r,1),e=[t].concat(e),localStorage.setItem("registryServer",JSON.stringify(e)))},registryUI.removeServer=function(t){var e=registryUI.getRegistryServer();t=t.trim().replace(/\/*$/,"");var r=e.indexOf(t);r!=-1&&(e.splice(r,1),localStorage.setItem("registryServer",JSON.stringify(e)))},registryUI.catalog={},registryUI.taglist={},riot.mount("add"),riot.mount("change"),riot.mount("remove"),riot.mount("menu"),riot.mount("app");
@@ -0,0 +1,262 @@
+/*!
+ * docker-registry-ui
+ * Copyright (C) 2016  Jones Magloire @Joxit
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+riot.tag2('add', '<dialog id="add-server-dialog" class="mdl-dialog"> <h4 class="mdl-dialog__title">Add your Server ?</h4> <div class="mdl-dialog__content"> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="add-server-input"> <label class="mdl-textfield__label" for="add-server-input">Server url</label> </div> </div> <div class="mdl-dialog__actions"> <button type="button" class="mdl-button change" onclick="registryUI.addTag.add();">Add</button> <button type="button" class="mdl-button close" onclick="registryUI.addTag.close();">Cancel</button> </div> </dialog>', '', '', function(opts) {
+    registryUI.addTag = registryUI.addTag || {};
+    registryUI.addTag.update = this.update;
+    this.on('updated', function () {
+      componentHandler.upgradeElements(this['add-server-dialog']);
+      registryUI.addTag.dialog = registryUI.addTag.dialog || document.querySelector('#add-server-dialog');
+      registryUI.addTag.addServer = registryUI.addTag.tileServerList || registryUI.addTag.dialog.querySelector('#add-server-input');
+      if (!registryUI.addTag.dialog.showModal) {
+        dialogPolyfill.registerDialog(registryUI.addTag.dialog);
+      }
+      this['add-server-input'].onkeyup = function (e) {
+        // if keyCode is Enter
+        if (e.keyCode == 13) {
+          registryUI.addTag.add();
+        }
+      };
+    });
+    registryUI.addTag.show = function () {
+      registryUI.addTag.dialog.showModal();
+    };
+    registryUI.addTag.add = function () {
+      if (registryUI.addTag.addServer.value && registryUI.addTag.addServer.value.length > 0) {
+        registryUI.addServer(registryUI.addTag.addServer.value);
+      }
+      registryUI.addTag.addServer.value = '';
+      rg.router.go('home');
+      registryUI.addTag.dialog.close();
+    };
+    registryUI.addTag.close = function () {
+      registryUI.addTag.addServer.value = '';
+      registryUI.addTag.dialog.close();
+    };
+    registryUI.addTag.update();
+});
+
+
+riot.tag2('app', '<catalog if="{!rg.router.current || rg.router.current.name == \'home\'}"></catalog> <taglist if="{rg.router.current.name == \'taglist\'}"></taglist>', '', '', function(opts) {
+
+    this.mixin('rg.router');
+    this.router.add({name: 'home', url: ''});
+    this.router.add({name: 'taglist', url: '/taglist/:repository/:image'});
+    this.router.on('go', state => {
+      switch (state.name) {
+        case 'taglist':
+          if (registryUI.taglist.display) {
+            registryUI.taglist.display();
+          }
+          break;
+        case 'home':
+          if (registryUI.catalog.display) {
+            registryUI.catalog.display();
+          }
+          break;
+      }
+    })
+    this.router.start();
+});
+
+
+riot.tag2('catalog', '<div id="catalog-tag" class="catalog"> <div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Repositories of {registryUI.url()}</h2> </div> <div id="catalog-spinner" hide="{registryUI.catalog.loadend}" class="mdl-spinner mdl-js-spinner is-active section-centerd"></div> <ul class="mdl-list"> <li class="mdl-list__item mdl-menu__item" style="opacity: 1;" each="{item in registryUI.catalog.repositories}" onclick="registryUI.catalog.go(\'{item}\');"> <span class="mdl-list__item-primary-content"> <i class="material-icons mdl-list__item-icon">send</i> {item} </span> </li> </ul> </div> <div id="error-snackbar" aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-js-snackbar mdl-snackbar"> <div class="mdl-snackbar__text"></div> <button class="mdl-snackbar__action" type="button"></button> </div> </div>', '', '', function(opts) {
+    registryUI.catalog.instance = this;
+    this.mixin('rg.router');
+    registryUI.catalog.display = function () {
+      var oReq = new Http();
+      registryUI.catalog.createSnackbar = function (msg) {
+        var snackbar = document.querySelector('#error-snackbar');
+        registryUI.catalog.error = msg;
+        var data = {
+          message: registryUI.catalog.error,
+          timeout: 100000,
+          actionHandler: function () {
+            snackbar.classList.remove('mdl-snackbar--active');
+          },
+          actionText: 'Undo'
+        };
+        snackbar.MaterialSnackbar.showSnackbar(data);
+      };
+      oReq.addEventListener('load', function () {
+        if (this.status == 200) {
+          registryUI.catalog.repositories = JSON.parse(this.responseText).repositories.sort();
+        } else if (this.status == 404) {
+          registryUI.catalog.createSnackbar('Server not found');
+        } else {
+          registryUI.catalog.createSnackbar(this.responseText);
+        }
+      });
+      oReq.addEventListener('error', function () {
+        registryUI.catalog.createSnackbar('An error occured');
+      });
+      oReq.addEventListener('loadend', function () {
+        registryUI.catalog.loadend = true;
+        registryUI.catalog.instance.update();
+      });
+      oReq.open('GET', registryUI.url() + '/v2/_catalog');
+      oReq.send();
+    };
+    this.on('updated', function () {
+      componentHandler.upgradeElements(this['catalog-tag']);
+    });
+    registryUI.catalog.go = function (image) {
+      rg.router.go('taglist', {
+        repository: image.split('/')[0],
+        image: image.split('/')[1]
+      });
+    };
+    registryUI.catalog.display();
+});
+
+
+riot.tag2('change', '<dialog id="change-server-dialog" class="mdl-dialog"> <h4 class="mdl-dialog__title">Change your Server ?</h4> <div class="mdl-dialog__content"> <div class="mdl-textfield mdl-js-textfield"> <select class="mdl-textfield__input mdl-textfield__select" name="server-list" id="server-list"> <option each="{url in registryUI.getRegistryServer()}" value="{url}">{url}</option> </select> </div> </div> <div class="mdl-dialog__actions"> <button type="button" class="mdl-button change" onclick="registryUI.changeTag.change();">Change</button> <button type="button" class="mdl-button close" onclick="registryUI.changeTag.close();">Cancel</button> </div> </dialog>', '', '', function(opts) {
+    registryUI.changeTag = registryUI.changeTag || {};
+    registryUI.changeTag.update = this.update;
+    this.on('updated', function () {
+      componentHandler.upgradeElements(this['change-server-dialog']);
+      registryUI.changeTag.dialog = registryUI.changeTag.dialog || document.querySelector('#change-server-dialog');
+      registryUI.changeTag.serverList = registryUI.changeTag.serverList || registryUI.changeTag.dialog.querySelector('#server-list');
+      if (!registryUI.changeTag.dialog.showModal) {
+        dialogPolyfill.registerDialog(registryUI.changeTag.dialog);
+      }
+      this['server-list'].onkeyup = function (e) {
+        // if keyCode is Enter
+        if (e.keyCode == 13) {
+          registryUI.changeTag.change();
+        }
+      };
+    });
+    registryUI.changeTag.show = function () {
+      registryUI.changeTag.update();
+      registryUI.changeTag.serverList.value = registryUI.url();;
+      registryUI.changeTag.dialog.showModal();
+    };
+    registryUI.changeTag.change = function () {
+      if (registryUI.changeTag.serverList.value && registryUI.changeTag.serverList.value.length > 0) {
+        registryUI.changeServer(registryUI.changeTag.serverList.value);
+      }
+      registryUI.changeTag.serverList.value = '';
+      rg.router.go('home');
+      registryUI.changeTag.dialog.close();
+    };
+    registryUI.changeTag.close = function () {
+      registryUI.changeTag.dialog.close();
+    };
+});
+
+
+riot.tag2('menu', '<div id="card-menu" class="mdl-card__menu"> <button id="registry-menu" name="registry-menu" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="registry-menu"> <li class="mdl-menu__item" onclick="registryUI.addTag.show();">Add URL</li> <li class="mdl-menu__item" onclick="registryUI.changeTag.show();">Change URL</li> <li class="mdl-menu__item" onclick="registryUI.removeTag.show();">Remove URL</li> </ul> </div>', '', '', function(opts) {
+    registryUI.menuTag = registryUI.menuTag || {};
+    registryUI.menuTag.update = this.update;
+    this.on('updated', function () {
+      componentHandler.upgradeElements(this['card-menu']);
+    });
+    registryUI.menuTag.update();
+});
+
+
+riot.tag2('remove', '<dialog id="remove-server-dialog" class="mdl-dialog"> <h4 class="mdl-dialog__title">Remove your Registry Server ?</h4> <div class="mdl-dialog__content"> <div class="mdl-textfield mdl-js-textfield"> <ul class="mdl-list"> <li class="mdl-list__item" each="{url in registryUI.getRegistryServer()}"> <span class="mdl-list__item-primary-content"> <a href="#" onclick="registryUI.removeTag.removeUrl(\'{url}\');"> <i class="material-icons mdl-list__item-icon">delete</i> </a> <span class="url">{url}</span> </span> </li> </ul> </div> </div> <div class="mdl-dialog__actions"> <button type="button" class="mdl-button close" onclick="registryUI.removeTag.close();">Close</button> </div> </dialog>', '', '', function(opts) {
+    registryUI.removeTag = registryUI.removeTag || {}
+    registryUI.removeTag.update = this.update;
+
+    registryUI.removeTag.removeUrl = function (url) {
+      registryUI.removeServer(url);
+      registryUI.removeTag.update();
+    };
+
+    registryUI.removeTag.close = function () {
+      registryUI.removeTag.dialog.close();
+      registryUI.removeTag.update();
+    };
+
+    registryUI.removeTag.show = function () {
+      registryUI.removeTag.update();
+      registryUI.removeTag.dialog.showModal();
+    };
+
+    this.on('updated', function () {
+      registryUI.removeTag.dialog = this['remove-server-dialog'];
+      if (!registryUI.removeTag.dialog.showModal) {
+        dialogPolyfill.registerDialog(registryUI.removeTag.dialog);
+      }
+    });
+});
+
+
+riot.tag2('taglist', '<div id="taglist-tag" class="taglist"> <div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col"> <div class="mdl-card__title"> <a href="#" onclick="registryUI.taglist.back();"> <i class="material-icons mdl-list__item-icon">arrow_back</i> </a> <h2 class="mdl-card__title-text">Tags of {registryUI.url() + \'/\' + registryUI.taglist.name}</h2> </div> <div id="taglist-spinner" hide="{registryUI.taglist.loadend}" class="mdl-spinner mdl-js-spinner section-centerd"></div> <table class="mdl-data-table mdl-js-data-table full-table" style="border: none;"> <thead> <tr> <th class="mdl-data-table__cell--non-numeric">Repository</th> <th class="mdl-data-table__header--sorted-ascending" onclick="registryUI.taglist.reverse(this);">Tag</th> </tr> </thead> <tbody> <tr each="{item in registryUI.taglist.tags}"> <td class="mdl-data-table__cell--non-numeric">{registryUI.taglist.name}</td> <td>{item}</td> </tr> </tbody> </table> </div> <div id="error-snackbar" aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-js-snackbar mdl-snackbar"> <div class="mdl-snackbar__text"></div> <button class="mdl-snackbar__action" type="button"></button> </div> </div>', '', '', function(opts) {
+    registryUI.taglist.instance = this;
+    registryUI.taglist.display = function () {
+      if (rg.router.current && rg.router.current.name == 'taglist') {
+        name = rg.router.current.params.repository + (rg.router.current.params.image
+          ? '/' + rg.router.current.params.image
+          : '');
+        var oReq = new Http();
+        registryUI.taglist.name = name;
+        registryUI.taglist.createSnackbar = function (msg) {
+          var snackbar = document.querySelector('#error-snackbar');
+          registryUI.taglist.error = msg;
+          var data = {
+            message: registryUI.taglist.error,
+            timeout: 100000,
+            actionHandler: function () {
+              snackbar.classList.remove('mdl-snackbar--active');
+            },
+            actionText: 'Undo'
+          };
+          snackbar.MaterialSnackbar.showSnackbar(data);
+        };
+        oReq.addEventListener('load', function () {
+          if (this.status == 200) {
+            registryUI.taglist.tags = JSON.parse(this.responseText).tags.sort();
+          } else if (this.status == 404) {
+            registryUI.taglist.createSnackbar('Server not found');
+          } else {
+            registryUI.taglist.createSnackbar(this.responseText);
+          }
+        });
+        oReq.addEventListener('error', function () {
+          registryUI.taglist.createSnackbar('An error occured');
+        });
+        oReq.addEventListener('loadend', function () {
+          registryUI.taglist.loadend = true;
+          registryUI.taglist.instance.update();
+        });
+        oReq.open('GET', registryUI.url() + '/v2/' + name + '/tags/list');
+        oReq.send();
+      }
+    };
+    registryUI.taglist.display();
+    registryUI.taglist.instance.update();
+    this.on('updated', function () {
+      componentHandler.upgradeElements(this['taglist-tag']);
+    });
+
+    registryUI.taglist.reverse = function (th) {
+      if (th.className == 'mdl-data-table__header--sorted-ascending') {
+        th.className = 'mdl-data-table__header--sorted-descending';
+      } else {
+        th.className = 'mdl-data-table__header--sorted-ascending';
+      }
+      registryUI.taglist.tags.reverse();
+      registryUI.taglist.instance.update();
+    };
+    registryUI.taglist.back = function () {
+      rg.router.go('home');
+    };
+});
@@ -0,0 +1,18 @@
+/*!
+ * docker-registry-ui
+ * Copyright (C) 2016  Jones Magloire @Joxit
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(MaterialIcons-Regular.eot);src:local('fonts/Material Icons'),local('fonts/MaterialIcons-Regular'),url(fonts/MaterialIcons-Regular.woff2) format('woff2'),url(fonts/MaterialIcons-Regular.woff) format('woff'),url(fonts/MaterialIcons-Regular.ttf) format('truetype')}.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:24px;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga'}html>body{font-family:Roboto,Helvetica,Arial,sans-serif!important}.mdl-mini-footer{padding-top:8px;padding-bottom:8px}.catalog,.taglist{padding:16px}.section-centerd{margin:auto}.mdl-data-table th{font-size:18px}.mdl-data-table td{font-size:16px}.full-table{width:100%;border:none}.url{font-size:14px;word-break:break-all}
@@ -0,0 +1,84 @@
+'use strict';
+var cleanCSS = require('gulp-clean-css');
+var concat = require('gulp-concat');
+var del = require('del');
+var filter = require('gulp-filter');
+var fs = require('fs');
+var gIf = require('gulp-if');
+var gulp = require('gulp');
+var htmlmin = require('gulp-htmlmin');
+var license = require('gulp-license');
+var riot = require('gulp-riot');
+var uglify = require('gulp-uglify');
+var useref = require('gulp-useref');
+
+gulp.task('html', function() {
+  var htmlFilter = filter('**/*.html');
+  var assets;
+  return gulp.src(['src/index.html'])
+    .pipe(useref())
+    .pipe(gIf(['*.js'], uglify({
+      preserveComments: 'license'
+    }))) // FIXME
+    .pipe(htmlFilter)
+    .pipe(htmlmin())
+    .pipe(htmlFilter.restore())
+    .pipe(gulp.dest('dist'));
+});
+
+gulp.task('clean', function(done) {
+  del(['dist'], done);
+});
+
+gulp.task('riot-tag', ['html'], function() {
+  return gulp.src('src/tags/*.tag')
+    .pipe(concat('tags.js'))
+    .pipe(riot())
+    .pipe(license('agpl3', {
+      tiny: false,
+      project: 'docker-registry-ui',
+      year: '2016',
+      organization: 'Jones Magloire @Joxit'
+    }))
+    .pipe(gulp.dest('dist/scripts'));
+});
+
+gulp.task('scripts', ['html'], function() {
+  return gulp.src(['src/scripts/http.js','src/scripts/script.js'])
+    .pipe(concat('script.js'))
+    .pipe(uglify())
+    .pipe(license('agpl3', {
+      tiny: false,
+      project: 'docker-registry-ui',
+      year: '2016',
+      organization: 'Jones Magloire @Joxit'
+    }))
+    .pipe(gulp.dest('dist/scripts'));
+});
+
+gulp.task('styles', ['html'], function() {
+  return gulp.src(['src/*.css'])
+    .pipe(concat('style.css'))
+    .pipe(cleanCSS({compatibility: 'ie8'}))
+    .pipe(license('agpl3', {
+      tiny: false,
+      project: 'docker-registry-ui',
+      year: '2016',
+      organization: 'Jones Magloire @Joxit'
+    }))
+    .pipe(gulp.dest('dist/'));
+});
+
+gulp.task('fonts', function() {
+  return gulp.src('src/fonts/*')
+    .pipe(filter('**/*.{otf,eot,svg,ttf,woff,woff2}'))
+    .pipe(gulp.dest('dist/fonts'));
+});
+
+gulp.task('sources', ['riot-tag', 'scripts', 'styles'], function() {
+  gulp.start();
+});
+
+gulp.task('build', ['clean'], function() {
+  gulp.start(['sources', 'fonts']);
+});
@@ -9,9 +9,21 @@
  "license": "AGPLv3",
  "description": "A web UI for private docker registry",
  "dependencies": {
-    "material-design-lite": "^1.1",
-    "material-design-icons": "^2.2",
+  },
+  "devDependencies": {
+    "del": "^0.1.3",
    "dialog-polyfill": "^0.4",
+    "gulp": "^3.9",
+    "gulp-concat": "^2.6.0",
+    "gulp-filter": "^1.0.0",
+    "gulp-htmlmin": "^2.0.0",
+    "gulp-if": "^2.0.0",
+    "gulp-license": "^1.1.0",
+    "gulp-clean-css": "^2.0.11",
+    "gulp-riot": "^0.5.2",
+    "gulp-uglify": "^1.0.0",
+    "gulp-useref": "^3.0.0",
+    "material-design-lite": "^1.1",
    "riot": "^2.3",
    "riotgear-router": "^1.3.1"
  }
@@ -0,0 +1,83 @@
+<!--
+ Copyright (C) 2016  Jones Magloire @Joxit
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <!-- build:css vendor.css -->
+  <LINK href="../node_modules/dialog-polyfill/dialog-polyfill.css" rel="stylesheet" type="text/css">
+  <LINK href="../node_modules/material-design-lite/dist/material.min.css" rel="stylesheet" type="text/css">
+  <!-- endbuild -->
+  <!-- build:css style.css -->
+  <LINK href="style.css" rel="stylesheet" type="text/css">
+  <LINK href="material-icons.css" rel="stylesheet" type="text/css">
+  <!-- endbuild -->
+  <LINK href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
+  <title>Docker Registry UI</title>
+</head>
+
+<body>
+  <!-- Always shows a header, even in smaller screens. -->
+  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+    <header class="mdl-layout__header">
+      <div class="mdl-layout__header-row">
+        <!-- Title -->
+        <span class="mdl-layout-title">Docker Registry UI</span>
+        <menu></menu>
+      </div>
+    </header>
+    <main class="mdl-layout__content">
+      <div class="page-content">
+        <app></app>
+      </div>
+    </main>
+    <change></change>
+    <add></add>
+    <remove></remove>
+    <footer class="mdl-mini-footer">
+      <div class="mdl-mini-footer__left-section">
+        <div class="mdl-logo">Docker Registry UI</div>
+        <ul class="mdl-mini-footer__link-list">
+          <li><a href="https://github.com/Joxit/docker-registry-ui">Contribute on GitHub</a></li>
+          <li><a href="https://github.com/Joxit/docker-registry-ui/blob/master/LICENSE">Privacy &amp; Terms</a></li>
+        </ul>
+      </div>
+    </footer>
+  </div>
+  <!-- build:js scripts/vendor.js -->
+  <script src="../node_modules/riot/riot+compiler.min.js"></script>
+  <script src="../node_modules/riotgear-router/dist/rg-router.min.js"></script>
+  <script src="../node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+  <script src="../node_modules/material-design-lite/dist/material.min.js"></script>
+  <!-- endbuild -->
+  <!-- build:js scripts/tags.js -->
+  <script src="tags/catalog.tag" type="riot/tag"></script>
+  <script src="tags/taglist.tag" type="riot/tag"></script>
+  <script src="tags/add.tag" type="riot/tag"></script>
+  <script src="tags/change.tag" type="riot/tag"></script>
+  <script src="tags/remove.tag" type="riot/tag"></script>
+  <script src="tags/menu.tag" type="riot/tag"></script>
+  <script src="tags/app.tag" type="riot/tag"></script>
+  <!-- endbuild -->
+  <!-- build:js scripts/script.js -->
+  <script src="scripts/http.js"></script>
+  <script src="scripts/script.js"></script>
+  <!-- endbuild -->
+</body>
+
+</html>
@@ -0,0 +1,39 @@
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('fonts/Material Icons'),
+       local('fonts/MaterialIcons-Regular'),
+       url(fonts/MaterialIcons-Regular.woff2) format('woff2'),
+       url(fonts/MaterialIcons-Regular.woff) format('woff'),
+       url(fonts/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
@@ -48,4 +48,4 @@ html > body {
 .url {
  font-size: 14px;
  word-break: break-all;
-}
+}