Cleaned up pages, added lambdas namespace and pages

Author: aeksco

pages/index.vue

@@ -111,16 +111,10 @@ export default {
 
 <style scoped lang="sass">
 p.wow
-  // color: blue
   -ms-transform: rotate(-7deg)
   -webkit-transform: rotate(-7deg)
   transform: rotate(-7deg)
-  // margin-left: 10%
-  // position: absolute
-  // left: 0
   font-size: 1.5rem
   margin-bottom: 0
   font-family: "Comic Sans MS", cursive, sans-serif
-// .header
-//   transform: scale(1, 1.5) skew(10deg, 0deg)
 </style>

pages/items/index.vue

@@ -4,17 +4,14 @@
       <div class="col-lg-12">
         <h2 class="mb-0">Items</h2>
         <p class="text-muted">
-          Instantly generate your next codebase using any of the following
-          Collection
+          Pre-render dynamic pages from static data
         </p>
       </div>
 
       <b-col lg="12">
         <b-row>
           <b-col lg="12">
-            <transition-group name="generator-list" tag="div">
-              <Item v-for="m in collection" :key="m.id" :model="m" />
-            </transition-group>
+            <Item v-for="m in collection" :key="m.id" :model="m" />
           </b-col>
         </b-row>
       </b-col>
@@ -49,21 +46,3 @@ export default {
   }
 }
 </script>
-
-<style type="text/css">
-.generator-list-item {
-  transition: all 1s;
-  display: inline-block;
-  margin-right: 10px;
-}
-
-.generator-list-enter,
-.generator-list-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.generator-list-leave-active {
-  position: absolute;
-}
-</style>

pages/lambdas/hello.vue

@@ -0,0 +1,72 @@
+<template>
+  <section class="container">
+    <div class="row mt-3 mb-5">
+      <div class="col-lg-12">
+        <h2 class="mb-0">Hello World Lambda</h2>
+        <p class="text-muted">
+          A very simple lambda function that returns some text
+        </p>
+      </div>
+
+      <b-col lg="12">
+        <div class="card card-body bg-dark text-light">
+          <b-row>
+            <b-col v-if="loading" lg="12" class="text-center">
+              <font-awesome-icon size="4x" icon="spinner" spin />
+            </b-col>
+            <b-col v-else lg="12">
+              <p>Response from Lambda: {{ response }}</p>
+              <p v-if="error">
+                <strong>Error {{ error.status }}</strong>
+                <br />
+                {{ error.data }}
+              </p>
+            </b-col>
+          </b-row>
+        </div>
+      </b-col>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: 'Nuxt Netlify Lambda - Hello World',
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: 'Nuxt Netlify Lambda - Hello World Description'
+        }
+      ]
+    }
+  },
+  data() {
+    return {
+      response: '',
+      error: null,
+      loading: false
+    }
+  },
+  created() {
+    this.invokeLambda()
+  },
+  methods: {
+    async invokeLambda() {
+      this.loading = true
+      try {
+        const res = await this.$axios.$get('/.netlify/functions/hello')
+        this.response = res
+        this.error = null
+        this.loading = false
+      } catch (e) {
+        this.error = e.response
+        this.response = '—'
+        this.loading = false
+      }
+    }
+  }
+}
+</script>

pages/lambdas/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <section class="container">
+    <div class="row mt-3 mb-5">
+      <div class="col-lg-12">
+        <h2 class="mb-0">Lambdas</h2>
+        <p class="text-muted">
+          A series of example Netlify Lambda functions
+        </p>
+      </div>
+
+      <b-col lg="12">
+        <b-row>
+          <b-col lg="12">
+            Lambdas go here
+          </b-col>
+        </b-row>
+      </b-col>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: 'Nuxt Netlify Lambda Starter - Lambdas',
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: 'My custom description'
+        }
+      ]
+    }
+  }
+}
+</script>