grim/devweb

Clean up the way the vue app is emebded and start our own ui
draft
2020-07-16, Gary Kramlich
4f1533323fbc
Parents 5ad16c08562a
Children 31c7ef6bc676
Clean up the way the vue app is emebded and start our own ui
8 files changed, 80 insertions(+), 82 deletions(-)
  • +1 -1
    frontend/frontend.go
  • +55 -10
    frontend/package-lock.json
  • +1 -0
    frontend/package.json
  • +1 -1
    frontend/public/index.html
  • +3 -12
    frontend/src/App.vue
  • +11 -0
    frontend/src/components/Header.vue
  • +0 -58
    frontend/src/components/HelloWorld.vue
  • +8 -0
    frontend/src/main.js
    • --- a/frontend/frontend.go Thu Jul 16 05:44:42 2020 -0500
    +++ b/frontend/frontend.go Thu Jul 16 18:25:46 2020 -0500
    @@ -1,4 +1,4 @@
    -//go:generate esc -o embedded.go -pkg frontend -include .+ -prefix dist -ignore node_modules dist/
    +//go:generate esc -o embedded.go -pkg frontend -include .+ -prefix dist dist/
    package frontend
    import (
    --- a/frontend/package-lock.json Thu Jul 16 05:44:42 2020 -0500
    +++ b/frontend/package-lock.json Thu Jul 16 18:25:46 2020 -0500
    @@ -1069,6 +1069,16 @@
    "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
    "dev": true
    },
    + "@nuxt/opencollective": {
    + "version": "0.3.0",
    + "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.0.tgz",
    + "integrity": "sha512-Vf09BxCdj1iT2IRqVwX5snaY2WCTkvM0O4cWWSO1ThCFuc4if0Q/nNwAgCxRU0FeYHJ7DdyMUNSdswCLKlVqeg==",
    + "requires": {
    + "chalk": "^2.4.2",
    + "consola": "^2.10.1",
    + "node-fetch": "^2.6.0"
    + }
    + },
    "@soda/friendly-errors-webpack-plugin": {
    "version": "1.7.1",
    "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
    @@ -1948,7 +1958,6 @@
    "version": "3.2.1",
    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
    "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
    - "dev": true,
    "requires": {
    "color-convert": "^1.9.0"
    }
    @@ -2393,6 +2402,23 @@
    "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
    "dev": true
    },
    + "bootstrap": {
    + "version": "4.5.0",
    + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
    + "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
    + },
    + "bootstrap-vue": {
    + "version": "2.15.0",
    + "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.15.0.tgz",
    + "integrity": "sha512-ncxWkDG0mKFVot314wWKJELi+ESO7k6ngV//qvJFs9iVzlFI8Hx3rBVbpcPW2vrJ+0vitH8N2SOwn4fdQ3frMQ==",
    + "requires": {
    + "@nuxt/opencollective": "^0.3.0",
    + "bootstrap": ">=4.5.0 <5.0.0",
    + "popper.js": "^1.16.1",
    + "portal-vue": "^2.1.7",
    + "vue-functional-data-merge": "^3.1.0"
    + }
    + },
    "brace-expansion": {
    "version": "1.1.11",
    "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
    @@ -2802,7 +2828,6 @@
    "version": "2.4.2",
    "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
    "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
    - "dev": true,
    "requires": {
    "ansi-styles": "^3.2.1",
    "escape-string-regexp": "^1.0.5",
    @@ -3115,7 +3140,6 @@
    "version": "1.9.3",
    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
    "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
    - "dev": true,
    "requires": {
    "color-name": "1.1.3"
    }
    @@ -3123,8 +3147,7 @@
    "color-name": {
    "version": "1.1.3",
    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
    - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
    - "dev": true
    + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
    },
    "color-string": {
    "version": "1.5.3",
    @@ -3240,6 +3263,11 @@
    "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
    "dev": true
    },
    + "consola": {
    + "version": "2.14.0",
    + "resolved": "https://registry.npmjs.org/consola/-/consola-2.14.0.tgz",
    + "integrity": "sha512-A2j1x4u8d6SIVikhZROfpFJxQZie+cZOfQMyI/tu2+hWXe8iAv7R6FW6s6x04/7zBCst94lPddztot/d6GJiuQ=="
    + },
    "console-browserify": {
    "version": "1.2.0",
    "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
    @@ -4406,8 +4434,7 @@
    "escape-string-regexp": {
    "version": "1.0.5",
    "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
    - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
    - "dev": true
    + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
    },
    "eslint": {
    "version": "6.8.0",
    @@ -5390,8 +5417,7 @@
    "has-flag": {
    "version": "3.0.0",
    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
    - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
    - "dev": true
    + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
    },
    "has-symbols": {
    "version": "1.0.1",
    @@ -7129,6 +7155,11 @@
    "lower-case": "^1.1.1"
    }
    },
    + "node-fetch": {
    + "version": "2.6.0",
    + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
    + "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
    + },
    "node-forge": {
    "version": "0.9.0",
    "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
    @@ -7765,6 +7796,16 @@
    "ts-pnp": "^1.1.6"
    }
    },
    + "popper.js": {
    + "version": "1.16.1",
    + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
    + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
    + },
    + "portal-vue": {
    + "version": "2.1.7",
    + "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
    + "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
    + },
    "portfinder": {
    "version": "1.0.26",
    "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
    @@ -9800,7 +9841,6 @@
    "version": "5.5.0",
    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
    "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
    - "dev": true,
    "requires": {
    "has-flag": "^3.0.0"
    }
    @@ -10519,6 +10559,11 @@
    }
    }
    },
    + "vue-functional-data-merge": {
    + "version": "3.1.0",
    + "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
    + "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
    + },
    "vue-hot-reload-api": {
    "version": "2.3.4",
    "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
    --- a/frontend/package.json Thu Jul 16 05:44:42 2020 -0500
    +++ b/frontend/package.json Thu Jul 16 18:25:46 2020 -0500
    @@ -8,6 +8,7 @@
    "lint": "vue-cli-service lint"
    },
    "dependencies": {
    + "bootstrap-vue": "^2.15.0",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
    },
    --- a/frontend/public/index.html Thu Jul 16 05:44:42 2020 -0500
    +++ b/frontend/public/index.html Thu Jul 16 18:25:46 2020 -0500
    @@ -3,7 +3,7 @@
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    - <meta name="viewport" content="width=device-width,initial-scale=1.0">
    + <meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    --- a/frontend/src/App.vue Thu Jul 16 05:44:42 2020 -0500
    +++ b/frontend/src/App.vue Thu Jul 16 18:25:46 2020 -0500
    @@ -1,28 +1,19 @@
    <template>
    <div id="app">
    - <img alt="Vue logo" src="./assets/logo.png">
    - <HelloWorld msg="Welcome to Your Vue.js App"/>
    + <Header/>
    </div>
    </template>
    <script>
    -import HelloWorld from './components/HelloWorld.vue'
    +import Header from './components/Header.vue'
    export default {
    name: 'App',
    components: {
    - HelloWorld
    + Header
    }
    }
    </script>
    <style>
    -#app {
    - font-family: Avenir, Helvetica, Arial, sans-serif;
    - -webkit-font-smoothing: antialiased;
    - -moz-osx-font-smoothing: grayscale;
    - text-align: center;
    - color: #2c3e50;
    - margin-top: 60px;
    -}
    </style>
    --- /dev/null Thu Jan 01 00:00:00 1970 +0000
    +++ b/frontend/src/components/Header.vue Thu Jul 16 18:25:46 2020 -0500
    @@ -0,0 +1,11 @@
    +<template>
    + <b-navbar type="dark" variant="secondary">
    + <b-navbar-brand href="#">DevWeb</b-navbar-brand>
    + </b-navbar>
    +</template>
    +
    +<script>
    +export default {
    + name: 'Header'
    +}
    +</script>
    --- a/frontend/src/components/HelloWorld.vue Thu Jul 16 05:44:42 2020 -0500
    +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
    @@ -1,58 +0,0 @@
    -<template>
    - <div class="hello">
    - <h1>{{ msg }}</h1>
    - <p>
    - For a guide and recipes on how to configure / customize this project,<br>
    - check out the
    - <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    - </p>
    - <h3>Installed CLI Plugins</h3>
    - <ul>
    - <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
    - <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    - </ul>
    - <h3>Essential Links</h3>
    - <ul>
    - <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
    - <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
    - <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
    - <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
    - <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    - </ul>
    - <h3>Ecosystem</h3>
    - <ul>
    - <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
    - <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
    - <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
    - <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
    - <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    - </ul>
    - </div>
    -</template>
    -
    -<script>
    -export default {
    - name: 'HelloWorld',
    - props: {
    - msg: String
    - }
    -}
    -</script>
    -
    -<!-- Add "scoped" attribute to limit CSS to this component only -->
    -<style scoped>
    -h3 {
    - margin: 40px 0 0;
    -}
    -ul {
    - list-style-type: none;
    - padding: 0;
    -}
    -li {
    - display: inline-block;
    - margin: 0 10px;
    -}
    -a {
    - color: #42b983;
    -}
    -</style>
    --- a/frontend/src/main.js Thu Jul 16 05:44:42 2020 -0500
    +++ b/frontend/src/main.js Thu Jul 16 18:25:46 2020 -0500
    @@ -1,8 +1,16 @@
    import Vue from 'vue'
    import App from './App.vue'
    +import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
    +
    +import 'bootstrap/dist/css/bootstrap.css'
    +import 'bootstrap-vue/dist/bootstrap-vue.css'
    +
    Vue.config.productionTip = false
    +Vue.use(BootstrapVue)
    +Vue.use(IconsPlugin)
    +
    new Vue({
    render: h => h(App),
    }).$mount('#app')