Merge branch 'release/7.0.0'

w3tecch · Jan 28, 2018 · a010a53 · a010a53
2 parents 7900d04 + 9249478
commit a010a53
Show file tree

Hide file tree

Showing 24 changed files with 1,120 additions and 1,931 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,4 @@
+FROM nginx:alpine
+
+# Copy app source to work directory
+COPY ./dist /usr/share/nginx/html
diff --git a/README.md b/README.md
@@ -187,3 +187,27 @@ Sometimes the ```www``` symlink is removed (e.g. git clone). Run this command to
 npm start -- mobile.link
 ```
 
+## Docker
+There is a ```Dockerfile``` unsing the [nginx](https://hub.docker.com/_/nginx/) image to build the docker image.
+
+### Getting started
+First build your aurelia app with
+```shell
+npm start build
+```
+
+Then build the image with
+```shell
+docker build -t nginx-aurelia .
+```
+
+Then run a container with
+```shell
+docker run --name aurelia-app -d -p 8080:80 nginx-aurelia
+```
+Now your website is available with ```http://localhost:8080```.
+
+If you like to update the source do this
+```shell
+docker cp ./dist/. mycontainer:/usr/share/nginx/html
+```
diff --git a/package-scripts.js b/package-scripts.js
@@ -5,26 +5,11 @@ module.exports = {
   scripts: {
     default: 'nps webpack',
     test: {
-      default: 'nps test.jest',
-      jest: {
-        default: series(
-          rimraf('test/coverage-jest'),
-          'jest'
-        ),
-        watch: 'jest --watch',
-      },
-      karma: {
-        default: series(
-          rimraf('test/coverage-karma'),
-          'karma start test/karma.conf.js'
-        ),
-        watch: 'karma start test/karma.conf.js --auto-watch --no-single-run',
-        debug: 'karma start test/karma.conf.js --auto-watch --no-single-run --debug'
-      },
-      all: concurrent({
-        browser: series.nps('test.karma', 'e2e'),
-        jest: 'nps test.jest',
-      })
+      default: series(
+        rimraf('test/coverage-jest'),
+        'jest'
+      ),
+      watch: 'jest --watch'
     },
     e2e: {
       default: concurrent({
@@ -56,11 +41,11 @@ module.exports = {
         development: {
           default: series(
             'nps webpack.build.before',
-            'webpack --progress -d --env.config=development'
+            'webpack --progress -d --env.extractCss --env.config=development'
           ),
-          extractCss: series(
+          inlineCss: series(
             'nps webpack.build.before',
-            'webpack --progress -d --env.extractCss, --env.config=development'
+            'webpack --progress -d --env.config=development'
           ),
           serve: series.nps(
             'webpack.build.development',
@@ -83,8 +68,8 @@ module.exports = {
         }
       },
       server: {
-        default: `webpack-dev-server -d --inline --env.server`,
-        extractCss: `webpack-dev-server -d --inline --env.server --env.extractCss`,
+        default: `webpack-dev-server -d --inline --env.server --env.extractCss`,
+        inlineCss: `webpack-dev-server -d --inline --env.server`,
         hmr: `webpack-dev-server -d --inline --hot --env.server`
       },
     },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aurelia-typescript-boilerplate",
-  "version": "6.3.0",
+  "version": "7.0.0",
   "title": "Aurelia Typescript Boilerplate",
   "description": "A starter kit for building a standard navigation-style app with Aurelia and Webpack.",
   "main": "dist/app.bundle.js",
@@ -94,24 +94,20 @@
     "chalk": "^2.1.0",
     "compression-webpack-plugin": "^1.0.0",
     "copy-webpack-plugin": "^4.0.1",
-    "cordova": "^7.0.1",
-    "cross-env": "^5.0.5",
+    "cordova": "^8.0.0",
     "css-loader": "^0.28.7",
     "expose-loader": "^0.7.3",
     "extract-text-webpack-plugin": "^3.0.0",
     "favicons-webpack-plugin": "^0.0.7",
     "file-loader": "^1.1.5",
     "html-webpack-plugin": "^2.30.1",
-    "http-server": "^0.10.0",
+    "http-server": "^0.11.1",
     "img-loader": "^2.0.0",
     "istanbul-instrumenter-loader": "^3.0.0",
-    "jasmine-core": "^2.8.0",
     "jest": "^20.0.4",
     "jest-cli": "^20.0.4",
     "json-loader": "^0.5.7",
-    "karma": "^1.7.1",
     "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage-istanbul-reporter": "^1.3.0",
     "karma-jasmine": "^1.1.0",
     "karma-mocha-reporter": "^2.2.4",
     "karma-webpack": "^2.0.4",
@@ -123,9 +119,9 @@
     "postcss-loader": "^2.0.6",
     "protractor": "^5.1.2",
     "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
+    "style-loader": "^0.20.1",
     "ts-jest": "^20.0.14",
-    "ts-node": "^3.3.0",
+    "ts-node": "^4.1.0",
     "tslib": "^1.7.1",
     "tslint": "^5.7.0",
     "tslint-loader": "^3.5.3",
@@ -137,6 +133,8 @@
     "webpack-notifier": "^1.5.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.3",
+    "@fortawesome/fontawesome-free-solid": "^5.0.6",
     "animate.css": "^3.5.2",
     "aurelia-animator-css": "^1.0.2",
     "aurelia-bootstrapper": "^2.1.1",
@@ -156,11 +154,12 @@
     "aurelia-templating-router": "^1.1.0",
     "aurelia-validation": "^1.1.1",
     "bluebird": "^3.5.0",
-    "bootstrap-sass": "^3.3.7",
-    "font-awesome": "^4.7.0",
+    "bootstrap": "^4.0.0",
     "i18next-browser-languagedetector": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^3.2.1",
-    "moment": "^2.18.1"
+    "moment": "^2.18.1",
+    "normalize.css": "^7.0.0",
+    "popper.js": "^1.12.9"
   }
 }
diff --git a/src/app/main.ts b/src/app/main.ts
@@ -28,6 +28,11 @@ import de_CHTranslation from './../locales/de_CH.json';
 import 'isomorphic-fetch';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
+// Fontawesome setup
+import fontawesome from '@fortawesome/fontawesome';
+import fontawesomeSolid from '@fortawesome/fontawesome-free-solid';
+fontawesome.library.add(fontawesomeSolid);
+
 import * as Bluebird from 'bluebird';
 // remove out if you don't want a Promise polyfill (remove also from webpack.config.js)
 Bluebird.config({ warnings: { wForgottenReturn: false } });

diff --git a/src/app/modules/child-router/child-router.vm.html b/src/app/modules/child-router/child-router.vm.html
@@ -1,17 +1,21 @@
 <template>
-  <section class="au-animate">
+  <div class="container-fluid au-animate">
     <h2>${heading}</h2>
-    <div>
-      <div class="col-md-2">
-        <ul class="well nav nav-pills nav-stacked">
-          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
-            <a href.bind="row.href">${row.title}</a>
-          </li>
-        </ul>
+    <div class="row">
+      <div class="col-md-3">
+        <div class="card">
+          <div class="card-body">
+            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
+              <a repeat.for="row of router.navigation"
+                class="nav-link ${row.isActive ? 'active' : ''}"
+                href.bind="row.href">${ row.title }</a>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="col-md-10" style="padding: 0">
+      <div class="col-md-9" style="padding: 0">
         <router-view></router-view>
       </div>
     </div>
-  </section>
+  </div>
 </template>
diff --git a/src/app/modules/users/users.vm.html b/src/app/modules/users/users.vm.html
@@ -1,18 +1,19 @@
 <template>
-  <section class="au-animate">
+  <div class="container-fluid au-animate">
     <h2>${heading}</h2>
     <div class="row au-stagger">
-      <div class="col-sm-6 col-md-3 card-container au-animate" repeat.for="user of users">
-        <div class="card">
-          <div class="avatar">
-            <img src.bind="user.getAvatarUrl()" crossorigin ref="image"/>
-          </div>
-          <div class="content">
-            <p class="name">${user.getLogin()}</p>
-            <p><a target="_blank" class="btn btn-default" href.bind="user.getHtmlUrl()">Contact</a></p>
+      <div class="col-sm-6 col-md-3 au-animate" repeat.for="user of users">
+
+        <div class="card mb-4">
+          <img class="card-img-top" src.bind="user.getAvatarUrl()" crossorigin ref="image">
+          <div class="card-body">
+            <h5 class="card-title">${user.getLogin()}</h5>
+            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+            <a href.bind="user.getHtmlUrl()" target="_blank" class="btn btn-primary">Contact</a>
           </div>
         </div>
+
       </div>
     </div>
-  </section>
+  </div>
 </template>
diff --git a/src/app/modules/welcome/welcome.vm.html b/src/app/modules/welcome/welcome.vm.html
@@ -1,5 +1,5 @@
 <template>
-  <section class="au-animate">
+  <div class="container-fluid au-animate">
     <h1 t="TITLE"></h1>
     <h2>${heading}</h2>
     <form role="form" submit.delegate="submit()">
@@ -15,7 +15,7 @@ <h2>${heading}</h2>
         <label>Full Name</label>
         <p class="help-block">${fullName | upper}</p>
       </div>
-      <button type="submit" class="btn btn-default">Submit</button>
+      <button type="submit" class="btn btn-primary">Submit</button>
     </form>
 
     <show-name some-text.bind="firstName"></show-name>
@@ -42,5 +42,5 @@ <h3>Validation</h3>
 
     <h3>Dialog</h3>
     <button click.delegate="openDialog()" class="btn btn-primary">open dialog</button>
-  </section>
+  </div>
 </template>
diff --git a/src/app/resources/templates/nav-bar/nav-bar.html b/src/app/resources/templates/nav-bar/nav-bar.html
@@ -1,32 +1,22 @@
 <template bindable="router">
-  require("./nav-bar.scss");
-
-  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse">
-        <span class="sr-only">Toggle Navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="#">
-        <i class="fa fa-home"></i>
-        <span>${router.title}</span>
-      </a>
-    </div>
-
-    <div class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
-      <ul class="nav navbar-nav">
-        <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
-          <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
-        </li>
-      </ul>
-
-      <ul class="nav navbar-nav navbar-right">
-        <li class="loader" if.bind="router.isNavigating">
-          <i class="fa fa-spinner fa-spin fa-2x"></i>
+  <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
+    <a class="navbar-brand" href="#">
+      <i class="fa fa-home"></i>
+      <span>${ router.title }</span>
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
+      aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li repeat.for="row of router.navigation" class="nav-item ${row.isActive ? 'active' : ''}">
+          <a class="nav-link" href.bind="row.href">${ row.title }</a>
         </li>
       </ul>
     </div>
+    <span class="navbar-text" if.bind="router.isNavigating">
+      <i class="fa fa-spinner fa-spin"></i>
+    </span>
   </nav>
 </template>
diff --git a/src/app/resources/templates/nav-bar/nav-bar.scss b/src/app/resources/templates/nav-bar/nav-bar.scss
diff --git a/src/index.ejs b/src/index.ejs
@@ -15,49 +15,14 @@
   <% if (htmlWebpackPlugin.options.platform === 'browser') { %>
     <base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
   <% } %>
-
-  <style>
-    .splash {
-      text-align: center;
-      margin: 10% 0 0 0;
-    }
-
-    .splash .message {
-      font-size: 72px;
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-
-    .sk-three-bounce {
-      margin: 40px auto;
-    }
-
-    .sk-three-bounce .sk-child {
-      width: 30px;
-      height: 30px;
-      background-color: #333;
-      border-radius: 100%;
-      display: inline-block;
-      animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
-    }
-
-    .sk-three-bounce .sk-bounce1 { animation-delay: -0.32s; }
-    .sk-three-bounce .sk-bounce2 { animation-delay: -0.16s; }
-
-    @keyframes sk-three-bounce {
-      0%, 80%, 100% { transform: scale(0); }
-      40% { transform: scale(1); }
-    }
-  </style>
 </head>
 
 <body>
   <div aurelia-app="main">
-    <div class="splash">
-      <div class="message"><%- htmlWebpackPlugin.options.metadata.title %></div>
-      <div class="sk-three-bounce">
-        <div class="sk-child sk-bounce1"></div>
-        <div class="sk-child sk-bounce2"></div>
-        <div class="sk-child sk-bounce3"></div>
+    <div class="row mt-5 justify-content-md-center">
+      <div class="col-xs-4 text-center">
+        <h1><%- htmlWebpackPlugin.options.metadata.title %></h1>
+        <h3>Loading...</h3>
       </div>
     </div>
   </div>