From fbaefd7d20113763c4fce2b3a3ced67903e32893 Mon Sep 17 00:00:00 2001
From: dtomlinson <dtomlinson@panaetius.co.uk>
Date: Thu, 27 Feb 2020 01:15:04 +0000
Subject: [PATCH] adding latest tutorials

---
 tutorials/events-app/package.json             |  1 +
 tutorials/events-app/src/App.vue              | 31 ++++------
 .../events-app/src/components/HelloWorld.vue  |  2 +-
 .../src/components/partials/Nav.vue           | 60 ++++++++++++++-----
 tutorials/events-app/src/main.js              |  6 ++
 tutorials/events-app/src/views/Home.vue       | 13 +++-
 tutorials/events-app/yarn.lock                |  5 ++
 7 files changed, 79 insertions(+), 39 deletions(-)

diff --git a/tutorials/events-app/package.json b/tutorials/events-app/package.json
index d15e295..24a54f8 100644
--- a/tutorials/events-app/package.json
+++ b/tutorials/events-app/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "blurify": "^1.2.0",
     "bulma": "^0.8.0",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
diff --git a/tutorials/events-app/src/App.vue b/tutorials/events-app/src/App.vue
index 504d6cd..4e3a10b 100644
--- a/tutorials/events-app/src/App.vue
+++ b/tutorials/events-app/src/App.vue
@@ -1,31 +1,24 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
+    <Nav />
+    <router-view/>
   </div>
 </template>
+<script>
+  import Nav from './components/partials/Nav.vue';
+  export default {
+    name: 'App',
+    components: {
+      Nav
+    }
+  }
+</script>
 <style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
 }
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 </style>
diff --git a/tutorials/events-app/src/components/HelloWorld.vue b/tutorials/events-app/src/components/HelloWorld.vue
index dd3ebb3..119458e 100644
--- a/tutorials/events-app/src/components/HelloWorld.vue
+++ b/tutorials/events-app/src/components/HelloWorld.vue
@@ -37,7 +37,7 @@
 export default {
   name: 'HelloWorld',
   props: {
-    msg: String
+    msg: String,
   }
 }
 </script>
diff --git a/tutorials/events-app/src/components/partials/Nav.vue b/tutorials/events-app/src/components/partials/Nav.vue
index 7a6984a..8661024 100644
--- a/tutorials/events-app/src/components/partials/Nav.vue
+++ b/tutorials/events-app/src/components/partials/Nav.vue
@@ -1,19 +1,47 @@
 <template>
-    <nav class="navbar-brand">
-        <a class="navbar-item" href="/">
-            <strong class="is-size4">
-                Animal Rescue League
-            </strong>
-        </a>
-        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-        </a>
-        <div id="navbar" class="navbar-menu">
-            <div class="navbar-start">
-                
-            </div>
+  <nav class="navbar container" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="/">
+        <strong class="is-size-4">Animal Rescue League</strong>
+      </a>
+      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+    <div id="navbar" class="navbar-menu">
+      <div class="navbar-start">
+        <router-link to="/" class="navbar-item">Home</router-link>
+        <router-link to="/about" class="navbar-item">About</router-link>
+      </div>
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <a class="button is-dark">
+              <strong>Sign In</strong>
+            </a>
+          </div>
         </div>
-    </nav>
+      </div>
+    </div>
+  </nav>
 </template>
+<script>
+export default {
+  name: 'Nav'
+}
+</script>
+<style lang="scss">
+  nav {
+    margin-top: 25px;
+    margin-bottom: 30px;
+    a {
+      font-weight: bold;
+      color: #2c3e50;
+      &.router-link-exact-active{
+        color: #d88d00;
+      }
+    }
+  }
+</style>
diff --git a/tutorials/events-app/src/main.js b/tutorials/events-app/src/main.js
index 64429d6..38f6cc3 100644
--- a/tutorials/events-app/src/main.js
+++ b/tutorials/events-app/src/main.js
@@ -2,10 +2,16 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import './../node_modules/bulma/css/bulma.css'
+import blurify from './../node_modules/blurify'
 
 Vue.config.productionTip = false
 
+
 new Vue({
   router,
   render: h => h(App)
 }).$mount('#app')
+
+Object.defineProperty(Vue.prototype, "$blurify", { value: blurify})
+
+
diff --git a/tutorials/events-app/src/views/Home.vue b/tutorials/events-app/src/views/Home.vue
index 828a7c8..813c65d 100644
--- a/tutorials/events-app/src/views/Home.vue
+++ b/tutorials/events-app/src/views/Home.vue
@@ -15,16 +15,21 @@
         </div>
       </div>
     </section>
+    <img class="blurify" src="https://cdn.auth0.com/blog/vue-meetup/event-banner.png">
   </div>
 </template>
-
 <script>
 export default {
   name: 'home',
-  components: {}
+  components: {},
+  created() {
+    this.$blurify({
+      images: document.querySelectorAll('.blurify')
+  });
+  }
 }
-</script>
 
+</script>
 <style lang="scss" scoped>
 .hero {
   text-align: center;
@@ -39,11 +44,13 @@ export default {
   text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
   padding: 40px 0 20px 0;
   font-size: 60px;
+  color: white
 }
 
 .subtitle {
   text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
   font-size: 30px;
+  color: white;
 }
 
 .button-block {
diff --git a/tutorials/events-app/yarn.lock b/tutorials/events-app/yarn.lock
index c16d5bc..6a07d37 100644
--- a/tutorials/events-app/yarn.lock
+++ b/tutorials/events-app/yarn.lock
@@ -1662,6 +1662,11 @@ bluebird@^3.1.1, bluebird@^3.5.5:
   resolved "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha1-nyKcFb4nJFT/qXOs4NvueaGww28=
 
+blurify@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/blurify/-/blurify-1.2.0.tgz#dcff133b546c71dd0146712869d25398e781d6b3"
+  integrity sha512-ltx+7Gic2gClvzYAV9WLTzoSL2uyTwfViLEzqjT5mgF7yebVwdU/jw4Pj5WYb4m6KgK8mkKzmRRBmCWWS8VTNw==
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.npm.taobao.org/bn.js/download/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"