Replace UI with Vue thingy

1 year ago · 8f6f7fe455
--- a/static/css/gate.css
+++ b/static/css/gate.css
@ -1,100 +0,0 @@
 body {
    font-size: .875rem;
 }

 .feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
 }

 /*
 * Sidebar
 */

 .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 48px 0 0; /* Height of navbar */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 }

 .sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
 }

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
 }

 .sidebar .nav-link {
    font-weight: 500;
    color: #333;
 }

 .sidebar .nav-link .feather {
    margin-right: 4px;
    color: #999;
 }

 .sidebar .nav-link.active {
    color: #007bff;
 }

 .sidebar .nav-link:hover .feather,
 .sidebar .nav-link.active .feather {
    color: inherit;
 }

 .sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
 }

 /*
 * Content
 */

 [role="main"] {
    padding-top: 48px; /* Space for fixed navbar */
 }

 /*
 * Navbar
 */

 .navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
 }

 .navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
    border-radius: 0;
 }

 .form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
 }

 .form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
 }
--- a/static/index.html
+++ b/static/index.html
@ -1,138 +1 @@
 <!-- doctype html -->
 <html>
 <head>
    <title>Gate SSH server</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="/css/gate.css" type="text/css">
 </head>
 <body class="">

 <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Gate</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#">Sign out</a>
        </li>
    </ul>
 </nav>

 <div class="container-fluid">
    <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-dark sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            <span data-feather="home"></span>
                            Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#/transport">
                            <span data-feather="file"></span>
                            Transports
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="shopping-cart"></span>
                            Products
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="users"></span>
                            Customers
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="bar-chart-2"></span>
                            Reports
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="layers"></span>
                            Integrations
                        </a>
                    </li>
                </ul>

                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                    <span>Saved reports</span>
                    <a class="d-flex align-items-center text-muted" href="#">
                        <span data-feather="plus-circle"></span>
                    </a>
                </h6>
                <ul class="nav flex-column mb-2">
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="file-text"></span>
                            Current month
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="file-text"></span>
                            Last quarter
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="file-text"></span>
                            Social engagement
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="file-text"></span>
                            Year-end sale
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <div id="root"></div>
        </main>
    </div>
 </div>

 <script src="/vendor/riot/js/riot+compiler.min.js"></script>
 <script src="/vendor/riot/js/route.min.js"></script>
 <script src="/js/request.js"></script>
 <script src="/tag/main.riot" type="riot"></script>
 <script src="/tag/index.riot" type="riot"></script>
 <script src="/tag/transport.riot" type="riot"></script>
 <script src="/tag/transports.riot" type="riot"></script>
 <script>
    (async function main() {
        await riot.compile()
        route('/', () => {
            console.log('mount main')
            riot.unmount('#root', true)
            riot.mount('#root', {}, 'index')
        })
        route('/transport', () => {
            console.log('mount transports')
            riot.mount('#root', {}, 'transports')
        })
        route('/transport/*', (transport) => {
            console.log('mount transport', transport)
            riot.mount('#root', {transport}, 'transport')
        })
        route.start(true)
        riot.mount('main')
    })()
 </script>
 <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
 <script>
    feather.replace()
 </script>
 </body>
 </html>
 <!DOCTYPE html><html><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1,minimal-ui" name=viewport><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons"><link rel=stylesheet href=https://unpkg.com/vue-material/dist/vue-material.min.css><link rel=stylesheet href=https://unpkg.com/vue-material/dist/theme/black-green-light.css><link href=/static/css/app.fb313c1b312964b82c51db3e3fdfcebc.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.2b6da1a6285516556a9c.js></script><script type=text/javascript src=/static/js/app.2b91f7ad93c9504b2296.js></script></body></html>
--- a/static/js/gate.jsx
+++ b/static/js/gate.jsx
@ -1,43 +0,0 @@
 import React from "react";
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";

 function Index() {
    return <h2>Home</h2>;
 }

 function About() {
    return <h2>About</h2>;
 }

 function Users() {
    return <h2>Users</h2>;
 }

 function AppRouter() {
    return (
        <Router>
            <div>
                <nav>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about/">About</Link>
                        </li>
                        <li>
                            <Link to="/users/">Users</Link>
                        </li>
                    </ul>
                </nav>

                <Route path="/" exact component={Index} />
                <Route path="/about/" component={About} />
                <Route path="/users/" component={Users} />
            </div>
        </Router>
    );
 }

 export default AppRouter;

--- a/static/js/request.js
+++ b/static/js/request.js
@ -1,20 +0,0 @@
 let request = obj => {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(obj.method || "GET", obj.url);
        if (obj.headers) {
            Object.keys(obj.headers).forEach(key => {
                xhr.setRequestHeader(key, obj.headers[key]);
            });
        }
        xhr.onload = () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send(obj.body);
    });
 };
--- a/static/static/css/app.fb313c1b312964b82c51db3e3fdfcebc.css
+++ b/static/static/css/app.fb313c1b312964b82c51db3e3fdfcebc.css
--- a/static/static/css/app.fb313c1b312964b82c51db3e3fdfcebc.css.map
+++ b/static/static/css/app.fb313c1b312964b82c51db3e3fdfcebc.css.map
--- a/static/static/js/app.2b91f7ad93c9504b2296.js
+++ b/static/static/js/app.2b91f7ad93c9504b2296.js
--- a/static/static/js/app.2b91f7ad93c9504b2296.js.map
+++ b/static/static/js/app.2b91f7ad93c9504b2296.js.map
--- a/static/static/js/manifest.2ae2e69a05c33dfc65f8.js
+++ b/static/static/js/manifest.2ae2e69a05c33dfc65f8.js
@ -0,0 +1,2 @@
 !function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a<e.length;a++)i=e[a],o[i]&&l.push(o[i][0]),o[i]=0;for(f in u)Object.prototype.hasOwnProperty.call(u,f)&&(r[f]=u[f]);for(n&&n(e,u,c);l.length;)l.shift()();if(c)for(a=0;a<c.length;a++)p=t(t.s=c[a]);return p};var e={},o={2:0};function t(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return r[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=r,t.c=e,t.d=function(r,n,e){t.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},t.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(n,"a",n),n},t.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},t.p="/",t.oe=function(r){throw console.error(r),r}}([]);
 //# sourceMappingURL=manifest.2ae2e69a05c33dfc65f8.js.map
--- a/static/static/js/manifest.2ae2e69a05c33dfc65f8.js.map
+++ b/static/static/js/manifest.2ae2e69a05c33dfc65f8.js.map
@ -0,0 +1 @@
 {"version":3,"sources":["webpack:///webpack/bootstrap a09fb85889ad11c48708"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,IAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.2ae2e69a05c33dfc65f8.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap a09fb85889ad11c48708"],"sourceRoot":""}
--- a/static/static/js/vendor.2b6da1a6285516556a9c.js
+++ b/static/static/js/vendor.2b6da1a6285516556a9c.js
--- a/static/static/js/vendor.2b6da1a6285516556a9c.js.map
+++ b/static/static/js/vendor.2b6da1a6285516556a9c.js.map
--- a/static/tag/index.riot
+++ b/static/tag/index.riot
@ -1,3 +0,0 @@
 <index>
    <h2>Look ma, I can do HTML!</h2>
 </index>
--- a/static/tag/main.riot
+++ b/static/tag/main.riot
@ -1,5 +0,0 @@
 <main>
    <div id="root">
        <index/>
    </div>
 </main>
--- a/static/tag/transport.riot
+++ b/static/tag/transport.riot
@ -1,49 +0,0 @@
 <transport>
    <h2>Transport <addr>{props.transport}</addr></h2>
    <table class="table" if={state.transport}>
        <tbody>
        <tr>
            <th>User</th>
            <td>{state.transport.user}</td>
        </tr>
        <tr>
            <th>Source</th>
            <td>{state.transport.src}</td>
        </tr>
        <tr>
            <th>Target</th>
            <td>{state.transport.dst}</td>
        </tr>
        <tr>
            <th>Tunnels</th>
            <td>
                <ul if={state.transport.tunnels}>
                    <li each={tunnel in state.transport.tunnels}>
                        <addr>{tunnel.src}</addr> &rarr; <addr>{tunnel.dst}</addr>
                    </li>
                </ul>
            </td>
        </tr>
        </tbody>
    </table>

    <virtual if={state.transport}>
        <virtual each={tunnel in state.transport.tunnels}>
            <h3>Tunnel {tunnel.dst}</h3>
        </virtual>
    </virtual>

    <script>
        export default {
            onBeforeMount() {
                riot.unmount('#root', true)
            },
            onMounted(props) {
                request({url: `/api/transport/${props.transport}`}).then(data => {
                    this.state.transport = JSON.parse(data)
                    this.update()
                })
            }
        }
    </script>
 </transport>
--- a/static/tag/transports.riot
+++ b/static/tag/transports.riot
@ -1,39 +0,0 @@
 <transports>
    <h2>Connected transports</h2>
    <table class="table">
        <thead>
        <tr>
            <th>ID</th>
            <th>User</th>
            <th>Source</th>
            <th>Target</th>
        </tr>
        </thead>
        <tbody>
        <tr each="{transport in state.transports}">
            <th><a href="#/transport/{transport.id}">{transport.id}</a></th>
            <td>{transport.user}</td>
            <td>
                <addr>{transport.src}</addr>
            </td>
            <td>
                <addr>{transport.dst}</addr>
            </td>
        </tr>
        </tbody>
    </table>
    <script>
        export default {
            onBeforeMount() {
                riot.unmount('#root', true)
            },
            onMounted() {
                request({url: '/api/transport'}).then(data => {
                    this.state.transports = JSON.parse(data).data;
                    console.log(this.state);
                    this.update();
                })
            }
        }
    </script>
 </transports>
--- a/static/vendor/bootstrap
+++ b/static/vendor/bootstrap
@ -1 +0,0 @@
 bootstrap-4.3.1-dist
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-grid.css
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-grid.css
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-grid.css.map
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-grid.css.map
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css.map
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css.map
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-reboot.css
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-reboot.css
@ -1,331 +0,0 @@
 /*!
 * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */
 *,
 *::before,
 *::after {
  box-sizing: border-box;
 }

 html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }

 article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
 }

 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
 }

 [tabindex="-1"]:focus {
  outline: 0 !important;
 }

 hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
 }

 h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
 }

 p {
  margin-top: 0;
  margin-bottom: 1rem;
 }

 abbr[title],
 abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
 }

 address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
 }

 ol,
 ul,
 dl {
  margin-top: 0;
  margin-bottom: 1rem;
 }

 ol ol,
 ul ul,
 ol ul,
 ul ol {
  margin-bottom: 0;
 }

 dt {
  font-weight: 700;
 }

 dd {
  margin-bottom: .5rem;
  margin-left: 0;
 }

 blockquote {
  margin: 0 0 1rem;
 }

 b,
 strong {
  font-weight: bolder;
 }

 small {
  font-size: 80%;
 }

 sub,
 sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
 }

 sub {
  bottom: -.25em;
 }

 sup {
  top: -.5em;
 }

 a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
 }

 a:hover {
  color: #0056b3;
  text-decoration: underline;
 }

 a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
 }

 a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
 }

 a:not([href]):not([tabindex]):focus {
  outline: 0;
 }

 pre,
 code,
 kbd,
 samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
 }

 pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
 }

 figure {
  margin: 0 0 1rem;
 }

 img {
  vertical-align: middle;
  border-style: none;
 }

 svg {
  overflow: hidden;
  vertical-align: middle;
 }

 table {
  border-collapse: collapse;
 }

 caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
 }

 th {
  text-align: inherit;
 }

 label {
  display: inline-block;
  margin-bottom: 0.5rem;
 }

 button {
  border-radius: 0;
 }

 button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
 }

 input,
 button,
 select,
 optgroup,
 textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
 }

 button,
 input {
  overflow: visible;
 }

 button,
 select {
  text-transform: none;
 }

 select {
  word-wrap: normal;
 }

 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
  -webkit-appearance: button;
 }

 button:not(:disabled),
 [type="button"]:not(:disabled),
 [type="reset"]:not(:disabled),
 [type="submit"]:not(:disabled) {
  cursor: pointer;
 }

 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
 }

 input[type="radio"],
 input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
 }

 input[type="date"],
 input[type="time"],
 input[type="datetime-local"],
 input[type="month"] {
  -webkit-appearance: listbox;
 }

 textarea {
  overflow: auto;
  resize: vertical;
 }

 fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
 }

 legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
 }

 progress {
  vertical-align: baseline;
 }

 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
  height: auto;
 }

 [type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
 }

 [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
 }

 ::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
 }

 output {
  display: inline-block;
 }

 summary {
  display: list-item;
  cursor: pointer;
 }

 template {
  display: none;
 }

 [hidden] {
  display: none !important;
 }
 /*# sourceMappingURL=bootstrap-reboot.css.map */
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-reboot.css.map
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-reboot.css.map
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-reboot.min.css
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-reboot.min.css
@ -1,8 +0,0 @@
 /*!
 * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
 /*# sourceMappingURL=bootstrap-reboot.min.css.map */
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-reboot.min.css.map
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap-reboot.min.css.map
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap.css
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap.css
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap.css.map
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap.css.map
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap.min.css
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap.min.css
--- a/static/vendor/bootstrap-4.3.1-dist/css/bootstrap.min.css.map
+++ b/static/vendor/bootstrap-4.3.1-dist/css/bootstrap.min.css.map
--- a/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.bundle.js
+++ b/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.bundle.js
--- a/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.bundle.js.map
+++ b/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.bundle.js.map
--- a/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js
+++ b/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js
--- a/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js.map
+++ b/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js.map
--- a/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.js
+++ b/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.js
--- a/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.js.map
+++ b/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.js.map
--- a/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.min.js
+++ b/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.min.js
--- a/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.min.js.map
+++ b/static/vendor/bootstrap-4.3.1-dist/js/bootstrap.min.js.map
--- a/static/vendor/riot/js/riot+compiler.js
+++ b/static/vendor/riot/js/riot+compiler.js
--- a/static/vendor/riot/js/riot+compiler.min.js
+++ b/static/vendor/riot/js/riot+compiler.min.js
--- a/static/vendor/riot/js/riot.js
+++ b/static/vendor/riot/js/riot.js
--- a/static/vendor/riot/js/riot.min.js
+++ b/static/vendor/riot/js/riot.min.js
--- a/static/vendor/riot/js/route+tag.js
+++ b/static/vendor/riot/js/route+tag.js
@ -1,545 +0,0 @@
 var route = (function (riot) {
  'use strict';

  riot = riot && riot.hasOwnProperty('default') ? riot['default'] : riot;

  var observable = function(el) {

    /**
     * Extend the original object or create a new empty one
     * @type { Object }
     */

    el = el || {};

    /**
     * Private variables
     */
    var callbacks = {},
      slice = Array.prototype.slice;

    /**
     * Public Api
     */

    // extend the el object adding the observable methods
    Object.defineProperties(el, {
      /**
       * Listen to the given `event` ands
       * execute the `callback` each time an event is triggered.
       * @param  { String } event - event id
       * @param  { Function } fn - callback function
       * @returns { Object } el
       */
      on: {
        value: function(event, fn) {
          if (typeof fn == 'function')
            { (callbacks[event] = callbacks[event] || []).push(fn); }
          return el
        },
        enumerable: false,
        writable: false,
        configurable: false
      },

      /**
       * Removes the given `event` listeners
       * @param   { String } event - event id
       * @param   { Function } fn - callback function
       * @returns { Object } el
       */
      off: {
        value: function(event, fn) {
          if (event == '*' && !fn) { callbacks = {}; }
          else {
            if (fn) {
              var arr = callbacks[event];
              for (var i = 0, cb; cb = arr && arr[i]; ++i) {
                if (cb == fn) { arr.splice(i--, 1); }
              }
            } else { delete callbacks[event]; }
          }
          return el
        },
        enumerable: false,
        writable: false,
        configurable: false
      },

      /**
       * Listen to the given `event` and
       * execute the `callback` at most once
       * @param   { String } event - event id
       * @param   { Function } fn - callback function
       * @returns { Object } el
       */
      one: {
        value: function(event, fn) {
          function on() {
            el.off(event, on);
            fn.apply(el, arguments);
          }
          return el.on(event, on)
        },
        enumerable: false,
        writable: false,
        configurable: false
      },

      /**
       * Execute all callback functions that listen to
       * the given `event`
       * @param   { String } event - event id
       * @returns { Object } el
       */
      trigger: {
        value: function(event) {
          var arguments$1 = arguments;


          // getting the arguments
          var arglen = arguments.length - 1,
            args = new Array(arglen),
            fns,
            fn,
            i;

          for (i = 0; i < arglen; i++) {
            args[i] = arguments$1[i + 1]; // skip first argument
          }

          fns = slice.call(callbacks[event] || [], 0);

          for (i = 0; fn = fns[i]; ++i) {
            fn.apply(el, args);
          }

          if (callbacks['*'] && event != '*')
            { el.trigger.apply(el, ['*', event].concat(args)); }

          return el
        },
        enumerable: false,
        writable: false,
        configurable: false
      }
    });

    return el

  };

  /**
   * Simple client-side router
   * @module riot-route
   */

  var RE_ORIGIN = /^.+?\/\/+[^/]+/,
    EVENT_LISTENER = 'EventListener',
    REMOVE_EVENT_LISTENER = 'remove' + EVENT_LISTENER,
    ADD_EVENT_LISTENER = 'add' + EVENT_LISTENER,
    HAS_ATTRIBUTE = 'hasAttribute',
    POPSTATE = 'popstate',
    HASHCHANGE = 'hashchange',
    TRIGGER = 'trigger',
    MAX_EMIT_STACK_LEVEL = 3,
    win = typeof window != 'undefined' && window,
    doc = typeof document != 'undefined' && document,
    hist = win && history,
    loc = win && (hist.location || win.location), // see html5-history-api
    prot = Router.prototype, // to minify more
    clickEvent = doc && doc.ontouchstart ? 'touchstart' : 'click',
    central = observable();

  var
    started = false,
    routeFound = false,
    debouncedEmit,
    current,
    parser,
    secondParser,
    emitStack = [],
    emitStackLevel = 0;

  /**
   * Default parser. You can replace it via router.parser method.
   * @param {string} path - current path (normalized)
   * @returns {array} array
   */
  function DEFAULT_PARSER(path) {
    return path.split(/[/?#]/)
  }

  /**
   * Default parser (second). You can replace it via router.parser method.
   * @param {string} path - current path (normalized)
   * @param {string} filter - filter string (normalized)
   * @returns {array} array
   */
  function DEFAULT_SECOND_PARSER(path, filter) {
    var f = filter
      .replace(/\?/g, '\\?')
      .replace(/\*/g, '([^/?#]+?)')
      .replace(/\.\./, '.*');
    var re = new RegExp(("^" + f + "$"));
    var args = path.match(re);

    if (args) { return args.slice(1) }
  }

  /**
   * Simple/cheap debounce implementation
   * @param   {function} fn - callback
   * @param   {number} delay - delay in seconds
   * @returns {function} debounced function
   */
  function debounce(fn, delay) {
    var t;
    return function () {
      clearTimeout(t);
      t = setTimeout(fn, delay);
    }
  }

  /**
   * Set the window listeners to trigger the routes
   * @param {boolean} autoExec - see route.start
   */
  function start(autoExec) {
    debouncedEmit = debounce(emit, 1);
    win[ADD_EVENT_LISTENER](POPSTATE, debouncedEmit);
    win[ADD_EVENT_LISTENER](HASHCHANGE, debouncedEmit);
    doc[ADD_EVENT_LISTENER](clickEvent, click);

    if (autoExec) { emit(true); }
  }

  /**
   * Router class
   */
  function Router() {
    this.$ = [];
    observable(this); // make it observable
    central.on('stop', this.s.bind(this));
    central.on('emit', this.e.bind(this));
  }

  function normalize(path) {
    return path.replace(/^\/|\/$/, '')
  }

  function isString(str) {
    return typeof str == 'string'
  }

  /**
   * Get the part after domain name
   * @param {string} href - fullpath
   * @returns {string} path from root
   */
  function getPathFromRoot(href) {
    return (href || loc.href).replace(RE_ORIGIN, '')
  }

  /**
   * Get the part after base
   * @param {string} href - fullpath
   * @returns {string} path from base
   */
  function getPathFromBase(href) {
    var base = route._.base;
    return base[0] === '#'
      ? (href || loc.href || '').split(base)[1] || ''
      : (loc ? getPathFromRoot(href) : href || '').replace(base, '')
  }

  function emit(force) {
    // the stack is needed for redirections
    var isRoot = emitStackLevel === 0;
    if (MAX_EMIT_STACK_LEVEL <= emitStackLevel) { return }

    emitStackLevel++;
    emitStack.push(function() {
      var path = getPathFromBase();
      if (force || path !== current) {
        central[TRIGGER]('emit', path);
        current = path;
      }
    });

    if (isRoot) {
      var first;
      while (first = emitStack.shift()) { first(); } // stack increses within this call
      emitStackLevel = 0;
    }
  }

  function click(e) {
    if (
      e.which !== 1 // not left click
      || e.metaKey || e.ctrlKey || e.shiftKey // or meta keys
      || e.defaultPrevented // or default prevented
    ) { return }

    var el = e.target;
    while (el && el.nodeName !== 'A') { el = el.parentNode; }

    if (
      !el || el.nodeName !== 'A' // not A tag
      || el[HAS_ATTRIBUTE]('download') // has download attr
      || !el[HAS_ATTRIBUTE]('href') // has no href attr
      || el.target && el.target !== '_self' // another window or frame
      || el.href.indexOf(loc.href.match(RE_ORIGIN)[0]) === -1 // cross origin
    ) { return }

    var base = route._.base;

    if (el.href !== loc.href
      && (
        el.href.split('#')[0] === loc.href.split('#')[0] // internal jump
        || base[0] !== '#' && getPathFromRoot(el.href).indexOf(base) !== 0 // outside of base
        || base[0] === '#' && el.href.split(base)[0] !== loc.href.split(base)[0] // outside of #base
        || !go(getPathFromBase(el.href), el.title || doc.title) // route not found
      )) { return }

    e.preventDefault();
  }

  /**
   * Go to the path
   * @param {string} path - destination path
   * @param {string} title - page title
   * @param {boolean} shouldReplace - use replaceState or pushState
   * @returns {boolean} - route not found flag
   */
  function go(path, title, shouldReplace) {
    // Server-side usage: directly execute handlers for the path
    if (!hist) { return central[TRIGGER]('emit', getPathFromBase(path)) }

    path = route._.base + normalize(path);
    title = title || doc.title;
    // browsers ignores the second parameter `title`
    shouldReplace
      ? hist.replaceState(null, title, path)
      : hist.pushState(null, title, path);
    // so we need to set it manually
    doc.title = title;
    routeFound = false;
    emit();
    return routeFound
  }

  /**
   * Go to path or set action
   * a single string:                go there
   * two strings:                    go there with setting a title
   * two strings and boolean:        replace history with setting a title
   * a single function:              set an action on the default route
   * a string/RegExp and a function: set an action on the route
   * @param {(string|function)} first - path / action / filter
   * @param {(string|RegExp|function)} second - title / action
   * @param {boolean} third - replace flag
   */
  prot.m = function(first, second, third) {
    if (isString(first) && (!second || isString(second))) { go(first, second, third || false); }
    else if (second) { this.r(first, second); }
    else { this.r('@', first); }
  };

  /**
   * Stop routing
   */
  prot.s = function() {
    this.off('*');
    this.$ = [];
  };

  /**
   * Emit
   * @param {string} path - path
   */
  prot.e = function(path) {
    this.$.concat('@').some(function(filter) {
      var args = (filter === '@' ? parser : secondParser)(normalize(path), normalize(filter));
      if (typeof args != 'undefined') {
        this[TRIGGER].apply(null, [filter].concat(args));
        return routeFound = true // exit from loop
      }
    }, this);
  };

  /**
   * Register route
   * @param {string} filter - filter for matching to url
   * @param {function} action - action to register
   */
  prot.r = function(filter, action) {
    if (filter !== '@') {
      filter = '/' + normalize(filter);
      this.$.push(filter);
    }

    this.on(filter, action);
  };

  var mainRouter = new Router();
  var route = mainRouter.m.bind(mainRouter);

  // adding base and getPathFromBase to route so we can access them in route.tag's script
  route._ = { base: null, getPathFromBase: getPathFromBase };

  /**
   * Create a sub router
   * @returns {function} the method of a new Router object
   */
  route.create = function() {
    var newSubRouter = new Router();
    // assign sub-router's main method
    var router = newSubRouter.m.bind(newSubRouter);
    // stop only this sub-router
    router.stop = newSubRouter.s.bind(newSubRouter);
    return router
  };

  /**
   * Set the base of url
   * @param {(str|RegExp)} arg - a new base or '#' or '#!'
   */
  route.base = function(arg) {
    route._.base = arg || '#';
    current = getPathFromBase(); // recalculate current path
  };

  /** Exec routing right now **/
  route.exec = function() {
    emit(true);
  };

  /**
   * Replace the default router to yours
   * @param {function} fn - your parser function
   * @param {function} fn2 - your secondParser function
   */
  route.parser = function(fn, fn2) {
    if (!fn && !fn2) {
      // reset parser for testing...
      parser = DEFAULT_PARSER;
      secondParser = DEFAULT_SECOND_PARSER;
    }
    if (fn) { parser = fn; }
    if (fn2) { secondParser = fn2; }
  };

  /**
   * Helper function to get url query as an object
   * @returns {object} parsed query
   */
  route.query = function() {
    var q = {};
    var href = loc.href || current;
    href.replace(/[?&](.+?)=([^&]*)/g, function(_, k, v) { q[k] = v; });
    return q
  };

  /** Stop routing **/
  route.stop = function () {
    if (started) {
      if (win) {
        win[REMOVE_EVENT_LISTENER](POPSTATE, debouncedEmit);
        win[REMOVE_EVENT_LISTENER](HASHCHANGE, debouncedEmit);
        doc[REMOVE_EVENT_LISTENER](clickEvent, click);
      }

      central[TRIGGER]('stop');
      started = false;
    }
  };

  /**
   * Start routing
   * @param {boolean} autoExec - automatically exec after starting if true
   */
  route.start = function (autoExec) {
    if (!started) {
      if (win) {
        if (document.readyState === 'interactive' || document.readyState === 'complete') {
          start(autoExec);
        } else {
          document.onreadystatechange = function () {
            if (document.readyState === 'interactive') {
              // the timeout is needed to solve
              // a weird safari bug https://github.com/riot/route/issues/33
              setTimeout(function() { start(autoExec); }, 1);
            }
          };
        }
      }

      started = true;
    }
  };

  /** Prepare the router **/
  route.base();
  route.parser();

  riot.tag2('router', '<yield></yield>', '', '', function(opts) {
      var this$1 = this;


      this.route = route.create();
      this.select = function (target) {
        [].concat(this$1.tags.route)
          .forEach(function (r) { return r.show = (r === target); });
      };

      this.on('mount', function () {

        window.setTimeout(function () { return route.start(true); }, 0);
      });

      this.on('unmount', function () {
        this$1.route.stop();
      });
  });

  riot.tag2('route', '<virtual if="{show}"><yield></yield></virtual>', '', '', function(opts) {
      var this$1 = this;

      this.show = false;
      var showRoute = function () {
        var args = [], len = arguments.length;
        while ( len-- ) args[ len ] = arguments[ len ];


        this$1.one('updated', function () {
          flatten(this$1.tags).forEach(function (tag) {
            tag.trigger.apply(tag, [ 'route' ].concat( args ));
            tag.update();
          });
        });
        this$1.parent.select(this$1);
        this$1.parent.update();
      };

      var getPathFromBase = !!window && !!window.route && !!window.route._
                                 ? window.route._.getPathFromBase
                                 : function () { return ''; };

      if(opts.path === getPathFromBase()){

        setTimeout(showRoute, 0);
      }

      this.parent.route(opts.path, showRoute);

      function flatten(tags) {
        return Object.keys(tags)
          .map(function (key) { return tags[key]; })
          .reduce(function (acc, tag) { return acc.concat(tag); }, [])
      }
  });

  return route;

 }(riot));
--- a/static/vendor/riot/js/route+tag.min.js
+++ b/static/vendor/riot/js/route+tag.min.js
@ -1 +0,0 @@
 var route=function(e){"use strict";e=e&&e.hasOwnProperty("default")?e["default"]:e;var t=function(u){u=u||{};var f={},c=Array.prototype.slice;Object.defineProperties(u,{on:{value:function(e,t){if(typeof t=="function"){(f[e]=f[e]||[]).push(t)}return u},enumerable:false,writable:false,configurable:false},off:{value:function(e,t){if(e=="*"&&!t){f={}}else{if(t){var n=f[e];for(var r=0,i;i=n&&n[r];++r){if(i==t){n.splice(r--,1)}}}else{delete f[e]}}return u},enumerable:false,writable:false,configurable:false},one:{value:function(e,t){function n(){u.off(e,n);t.apply(u,arguments)}return u.on(e,n)},enumerable:false,writable:false,configurable:false},trigger:{value:function(e){var t=arguments;var n=arguments.length-1,r=new Array(n),i,a,o;for(o=0;o<n;o++){r[o]=t[o+1]}i=c.call(f[e]||[],0);for(o=0;a=i[o];++o){a.apply(u,r)}if(f["*"]&&e!="*"){u.trigger.apply(u,["*",e].concat(r))}return u},enumerable:false,writable:false,configurable:false}});return u};var r=/^.+?\/\/+[^/]+/,n="EventListener",i="remove"+n,a="add"+n,o="hasAttribute",u="popstate",f="hashchange",c="trigger",s=3,l=typeof window!="undefined"&&window,h=typeof document!="undefined"&&document,p=l&&history,d=l&&(p.location||l.location),v=K.prototype,m=h&&h.ontouchstart?"touchstart":"click",w=t();var g=false,y=false,b,_,$,A,O=[],P=0;function S(e){return e.split(/[/?#]/)}function T(e,t){var n=t.replace(/\?/g,"\\?").replace(/\*/g,"([^/?#]+?)").replace(/\.\./,".*");var r=new RegExp("^"+n+"$");var i=e.match(r);if(i){return i.slice(1)}}function x(e,t){var n;return function(){clearTimeout(n);n=setTimeout(e,t)}}function E(e){b=x(F,1);l[a](u,b);l[a](f,b);h[a](m,q);if(e){F(true)}}function K(){this.$=[];t(this);w.on("stop",this.s.bind(this));w.on("emit",this.e.bind(this))}function N(e){return e.replace(/^\/|\/$/,"")}function j(e){return typeof e=="string"}function k(e){return(e||d.href).replace(r,"")}function B(e){var t=R._.base;return t[0]==="#"?(e||d.href||"").split(t)[1]||"":(d?k(e):e||"").replace(t,"")}function F(t){var e=P===0;if(s<=P){return}P++;O.push(function(){var e=B();if(t||e!==_){w[c]("emit",e);_=e}});if(e){var n;while(n=O.shift()){n()}P=0}}function q(e){if(e.which!==1||e.metaKey||e.ctrlKey||e.shiftKey||e.defaultPrevented){return}var t=e.target;while(t&&t.nodeName!=="A"){t=t.parentNode}if(!t||t.nodeName!=="A"||t[o]("download")||!t[o]("href")||t.target&&t.target!=="_self"||t.href.indexOf(d.href.match(r)[0])===-1){return}var n=R._.base;if(t.href!==d.href&&(t.href.split("#")[0]===d.href.split("#")[0]||n[0]!=="#"&&k(t.href).indexOf(n)!==0||n[0]==="#"&&t.href.split(n)[0]!==d.href.split(n)[0]||!D(B(t.href),t.title||h.title))){return}e.preventDefault()}function D(e,t,n){if(!p){return w[c]("emit",B(e))}e=R._.base+N(e);t=t||h.title;n?p.replaceState(null,t,e):p.pushState(null,t,e);h.title=t;y=false;F();return y}v.m=function(e,t,n){if(j(e)&&(!t||j(t))){D(e,t,n||false)}else if(t){this.r(e,t)}else{this.r("@",e)}};v.s=function(){this.off("*");this.$=[]};v.e=function(n){this.$.concat("@").some(function(e){var t=(e==="@"?$:A)(N(n),N(e));if(typeof t!="undefined"){this[c].apply(null,[e].concat(t));return y=true}},this)};v.r=function(e,t){if(e!=="@"){e="/"+N(e);this.$.push(e)}this.on(e,t)};var L=new K;var R=L.m.bind(L);R._={base:null,getPathFromBase:B};R.create=function(){var e=new K;var t=e.m.bind(e);t.stop=e.s.bind(e);return t};R.base=function(e){R._.base=e||"#";_=B()};R.exec=function(){F(true)};R.parser=function(e,t){if(!e&&!t){$=S;A=T}if(e){$=e}if(t){A=t}};R.query=function(){var r={};var e=d.href||_;e.replace(/[?&](.+?)=([^&]*)/g,function(e,t,n){r[t]=n});return r};R.stop=function(){if(g){if(l){l[i](u,b);l[i](f,b);h[i](m,q)}w[c]("stop");g=false}};R.start=function(e){if(!g){if(l){if(document.readyState==="interactive"||document.readyState==="complete"){E(e)}else{document.onreadystatechange=function(){if(document.readyState==="interactive"){setTimeout(function(){E(e)},1)}}}}g=true}};R.base();R.parser();e.tag2("router","<yield></yield>","","",function(e){var n=this;this.route=R.create();this.select=function(t){[].concat(n.tags.route).forEach(function(e){return e.show=e===t})};this.on("mount",function(){window.setTimeout(function(){return R.start(true)},0)});this.on("unmount",function(){n.route.stop()})});e.tag2("route",'<virtual if="{show}"><yield></yield></virtual>',"","",function(e){var n=this;this.show=false;var t=function(){var t=[],e=arguments.length;while(e--)t[e]=arguments[e];n.one("updated",function(){i(n.tags).forEach(function(e){e.trigger.apply(e,["route"].concat(t));e.update()})});n.parent.select(n);n.parent.update()};var r=!!window&&!!window.route&&!!window.route._?window.route._.getPathFromBase:function(){return""};if(e.path===r()){setTimeout(t,0)}this.parent.route(e.path,t);function i(t){return Object.keys(t).map(function(e){return t[e]}).reduce(function(e,t){return e.concat(t)},[])}});return R}(riot);
--- a/static/vendor/riot/js/route.js
+++ b/static/vendor/riot/js/route.js
@ -1,486 +0,0 @@
 var route = (function () {
  'use strict';

  var observable = function(el) {

    /**
     * Extend the original object or create a new empty one
     * @type { Object }
     */

    el = el || {};

    /**
     * Private variables
     */
    var callbacks = {},
      slice = Array.prototype.slice;

    /**
     * Public Api
     */

    // extend the el object adding the observable methods
    Object.defineProperties(el, {
      /**
       * Listen to the given `event` ands
       * execute the `callback` each time an event is triggered.
       * @param  { String } event - event id
       * @param  { Function } fn - callback function
       * @returns { Object } el
       */
      on: {
        value: function(event, fn) {
          if (typeof fn == 'function')
            { (callbacks[event] = callbacks[event] || []).push(fn); }
          return el
        },
        enumerable: false,
        writable: false,
        configurable: false
      },

      /**
       * Removes the given `event` listeners
       * @param   { String } event - event id
       * @param   { Function } fn - callback function
       * @returns { Object } el
       */
      off: {
        value: function(event, fn) {
          if (event == '*' && !fn) { callbacks = {}; }
          else {
            if (fn) {
              var arr = callbacks[event];
              for (var i = 0, cb; cb = arr && arr[i]; ++i) {
                if (cb == fn) { arr.splice(i--, 1); }
              }
            } else { delete callbacks[event]; }
          }
          return el
        },
        enumerable: false,
        writable: false,
        configurable: false
      },

      /**
       * Listen to the given `event` and
       * execute the `callback` at most once
       * @param   { String } event - event id
       * @param   { Function } fn - callback function
       * @returns { Object } el
       */
      one: {
        value: function(event, fn) {
          function on() {
            el.off(event, on);
            fn.apply(el, arguments);
          }
          return el.on(event, on)
        },
        enumerable: false,
        writable: false,
        configurable: false
      },

      /**
       * Execute all callback functions that listen to
       * the given `event`
       * @param   { String } event - event id
       * @returns { Object } el
       */
      trigger: {
        value: function(event) {
          var arguments$1 = arguments;


          // getting the arguments
          var arglen = arguments.length - 1,
            args = new Array(arglen),
            fns,
            fn,
            i;

          for (i = 0; i < arglen; i++) {
            args[i] = arguments$1[i + 1]; // skip first argument
          }

          fns = slice.call(callb