updating latest tutorials

2020-02-29 21:59:31 +00:00
parent 72ef877bcc
commit ca42763a44
6 changed files with 131 additions and 45 deletions
--- a/tutorials/events-app/package.json
+++ b/tutorials/events-app/package.json
@@ -8,10 +8,12 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "@beyonk/google-fonts-webpack-plugin": "^1.2.3",
    "axios": "^0.19.2",
    "bulma": "^0.8.0",
    "core-js": "^3.6.4",
    "moment": "^2.24.0",
+    "v-blur": "^1.0.4",
    "vue": "^2.6.11",
    "vue-axios": "^2.1.5",
    "vue-router": "^3.1.5"
--- a/tutorials/events-app/src/components/EventsList.vue
+++ b/tutorials/events-app/src/components/EventsList.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="events container">
+    <h2 class="subtitle is-3">
+      Check out our incoming events
+    </h2>
+    <div class="columns is-multiline">
+      <div class="column is-one-quarter">
+        <EventCard />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import EventCard from '@/components/EventCard';
+export default {
+  name: 'EventsList',
+  components: {
+    EventCard
+  },
+  data() {
+    return {
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.events {
+  margin-top: 100px;
+  text-align: center;
+}
+</style>
--- a/tutorials/events-app/src/components/partials/Nav.vue
+++ b/tutorials/events-app/src/components/partials/Nav.vue
@@ -4,7 +4,8 @@
      <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">
+      <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>
@@ -23,22 +24,46 @@
            </a>
          </div>
        </div>
+        <div class="navbar-item" id="live-time" v-if="timeReady">
+          {{ time }}
+        </div>
      </div>
    </div>
  </nav>
 </template>
 <script>
+import moment from 'moment'
 export default {
-  name: 'Nav'
+  name: 'Nav',
+  data: () => {
+    return {
+      time: '',
+      timeReady: false,
+    }
+  },
+  methods: {
+    getTime () {
+      // console.log('Getting current time');
+      return moment().format('HH:mm:ss')
+    }
+  },
+  mounted () {
+    setInterval(() => {
+      this.time = this.getTime(), 1000
+    });
+    this.timeReady = true;
+  }
 }
 </script>
 <style lang="scss">
 nav {
  margin-top: 25px;
  margin-bottom: 30px;
+
  a {
    font-weight: bold;
    color: #2c3e50;
+
    &.router-link-exact-active {
      color: #d88d00;
    }
--- a/tutorials/events-app/src/views/Home.vue
+++ b/tutorials/events-app/src/views/Home.vue
@@ -10,58 +10,41 @@
            Make sure you check out the upcoming events below:
          </h2>
          <div class="button-block">
-            <button class="button is-xl is-dark" v-if="dataReady">{{date}}</button>
+            <button class="button is-xl is-dark">Sign Up to Browse Events</button>
          </div>
        </div>
-        <!-- <h1 >{{ date }}</h1> -->
-        <h1 v-if="dataReady">{{ date }}</h1>
      </div>
    </section>
+    <EventsList />
    <!-- <img class="blurify" src="https://cdn.auth0.com/blog/vue-meetup/event-banner.png"> -->
  </div>
 </template>
 <script>
-import moment from 'moment'
+import Vue from 'vue'
+import vBlur from 'v-blur'
+import EventsList from '@/components/EventsList'
+
+Vue.use(vBlur)
+
 export default {
  name: 'home',
-  // components: {},
-  created() {
-    // console.log(this);
-    // console.log(this.$moment().format("HH:mm:ss"));
-    // this.date = moment().format("HH:mm:ss");
+  components: {
+    EventsList
  },
-  data: function() {
+  data: () => {
    return {
-      date: '',
-      dd: '',
-      ddd: '',
-      dataReady: false
+      isBlurred: true,
+      disableBlur: {
+        isBlurred: false,
+      }
    }
-  },
-  methods: {
-    async logger () {
-      console.log("a string");
-      this.dd = "a first string";
-    },
-    getTime () {
-      console.log("getting time");
-      return moment().format("HH:mm:ss");
-    },
-  },
-  mounted() {
-    console.log("a second string");
-    // await this.logger();
-    setInterval(() => {
-      this.date = this.getTime(), 1000
-  });
-    this.dataReady = true;
  }
 }
 </script>
 <style lang="scss" scoped>
 .hero {
  text-align: center;
-  background-image: url('https://cdn.auth0.com/blog/vue-meetup/event-banner.png');
+  // background-image: url('https://cdn.auth0.com/blog/vue-meetup/event-banner.png');
  background-image: url('https://face4pets.files.wordpress.com/2018/01/shelter-data-1.jpg');
  background-size: cover;
  background-position: center;
--- a/tutorials/events-app/vue.config.js
+++ b/tutorials/events-app/vue.config.js
--- a/tutorials/events-app/yarn.lock
+++ b/tutorials/events-app/yarn.lock
@@ -768,6 +768,16 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

+"@beyonk/google-fonts-webpack-plugin@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@beyonk/google-fonts-webpack-plugin/-/google-fonts-webpack-plugin-1.2.3.tgz#9600a4d807f221ba6726231cc3c71f506438385c"
+  integrity sha512-QtWDQJmfqJrIuC6tZNNKYV9/+upRlGnu+11ycrSS22MutpSYeeqDzsSHUc0qKxfaiOAn4ASg13tj7EED5Wy68A==
+  dependencies:
+    lodash "^4.17.4"
+    node-fetch "^2.1.2"
+    webpack-sources "^1.1.0"
+    yauzl "^2.8.0"
+
 "@hapi/address@2.x.x":
  version "2.1.4"
  resolved "https://registry.npm.taobao.org/@hapi/address/download/@hapi/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1811,6 +1821,11 @@ browserslist@^4.0.0, browserslist@^4.8.3, browserslist@^4.8.5, browserslist@^4.8
    electron-to-chromium "^1.3.349"
    node-releases "^1.1.49"

+buffer-crc32@~0.2.3:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
+
 buffer-from@^1.0.0:
  version "1.1.1"
  resolved "https://registry.npm.taobao.org/buffer-from/download/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
@@ -3469,6 +3484,13 @@ faye-websocket@~0.11.1:
  dependencies:
    websocket-driver ">=0.5.1"

+fd-slicer@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
+  integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
+  dependencies:
+    pend "~1.2.0"
+
 figgy-pudding@^3.5.1:
  version "3.5.1"
  resolved "https://registry.npm.taobao.org/figgy-pudding/download/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
@@ -4926,7 +4948,7 @@ lodash.uniq@^4.5.0:
  resolved "https://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=

-lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3:
+lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4:
  version "4.17.15"
  resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.15.tgz?cache=0&sync_timestamp=1563503395559&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
  integrity sha1-tEf2ZwoEVbv+7dETku/zMOoJdUg=
@@ -5348,6 +5370,11 @@ no-case@^2.2.0:
  dependencies:
    lower-case "^1.1.1"

+node-fetch@^2.1.2:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
+
 node-forge@0.9.0:
  version "0.9.0"
  resolved "https://registry.npm.taobao.org/node-forge/download/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@@ -5884,6 +5911,11 @@ pbkdf2@^3.0.3:
    safe-buffer "^5.0.1"
    sha.js "^2.4.8"

+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
+
 performance-now@^2.1.0:
  version "2.1.0"
  resolved "https://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -7905,6 +7937,11 @@ uuid@^3.0.1, uuid@^3.3.2:
  resolved "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
  integrity sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=

+v-blur@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/v-blur/-/v-blur-1.0.4.tgz#eb51f0aef61e92426db2d9e5c3c4b151d999ed29"
+  integrity sha512-4Cuq/BLUDIXmU7Ld7K4Cue4agiutjtj9KwEPQvF7Ubt31cvXdNhON/ORVKgkRq6X7uZxKjcSAubsJGd7wfxN5g==
+
 v8-compile-cache@^2.0.3:
  version "2.1.0"
  resolved "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.1.0.tgz?cache=0&sync_timestamp=1574423978501&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fv8-compile-cache%2Fdownload%2Fv8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
@@ -8315,6 +8352,14 @@ yargs@^15.0.0:
    y18n "^4.0.0"
    yargs-parser "^16.1.0"

+yauzl@^2.8.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.1.0"
+
 yorkie@^2.0.0:
  version "2.0.0"
  resolved "https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgz#92411912d435214e12c51c2ae1093e54b6bb83d9"