message

pages/blog/_handle/article/_articleHandle/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="container">
+    Article {{ params }}
+    {{ article }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index',
+  asyncData ({ app, params }) {
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+                  blogByHandle (handle:"${params.handle}") {
+                    title,
+                    handle
+                    articleByHandle (handle: "${params.articleHandle}") {
+                      title,
+                      contentHtml
+                      authorV2 {
+                        bio,
+                        firstName,
+                        lastName
+                      },
+                      image (maxWidth: 2000) {
+                        altText,
+                        originalSrc
+                      }
+                    }
+                  }
+                }`
+      }
+    }).then((response) => {
+      return {
+        article: response.data.data.blogByHandle.articleByHandle
+      }
+    })
+  }
+}
+</script>
+
+<style scoped>
+</style>

pages/blog/_handle/index.vue

@@ -1,15 +1,101 @@
 <template>
-  <div>
-    <h1>Blog id</h1>
+  <div class="container">
+    <h1>{{ blog.title }}</h1>
+    <div class="columns is-multiline">
+      <div
+        v-for="article in blog.articles.edges"
+        :key="article.node.id"
+        class="column is-full-mobile is-half-tablet is-one-third-desktop"
+      >
+        <nuxt-link :to="`/blog/${blog.handle}/article/${article.node.handle}`">
+          <div class="card">
+            <div class="card-image">
+              <figure v-if="article.node.image !== null">
+                <img
+                  :src="article.node.image.originalSrc"
+                  :alt="article.node.image.altText"
+                >
+              </figure>
+              <figure v-else class="is-flex">
+                <img
+                  src="/img/no-image.jpg"
+                  alt="image-not-found"
+                >
+              </figure>
+            </div>
+            <div class="card-content">
+              <p class="title is-4">
+                {{ article.node.title }}
+              </p>
+              <p class="subtitle is-6">{{ article.node.excerpt }}</p>
+              <div class="content">
+                <b-taglist class="is-marginless">
+                  <b-tag
+                    v-for="tag in article.node.tags"
+                    :key="tag"
+                    href="#"
+                    type="is-primary"
+                  >
+                    #{{ tag }}
+                  </b-tag>
+                </b-taglist>
+                <time datetime="2016-1-1">{{ article.node.publishedAt }}</time>
+              </div>
+            </div>
+          </div>
+        </nuxt-link>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Index'
+  name: 'Index',
+  asyncData ({ app, params }) {
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+          blogByHandle (handle:"${params.handle}") {
+            title,
+            handle,
+            articles(first: 250) {
+              edges {
+                node {
+                  id,
+                  title,
+                  handle,
+                  publishedAt,
+                  excerpt,
+                  tags,
+                  image (maxWidth: 768) {
+                    originalSrc,
+                    altText
+                  }
+                }
+              }
+            }
+          }
+        }`
+      }
+    }).then((response) => {
+      return {
+        blog: response.data.data.blogByHandle
+      }
+    })
+  }
 }
 </script>
 
 <style scoped>
-
+  .subtitle {
+    height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 1rem;
+  }
+  figure.is-flex {
+    justify-content: center;
+  }
 </style>

pages/blog/index.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <h1>Blog</h1>
-    {{ articles }}
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Index',
-  asyncData ({ app }) {
-    return app.$axios.get('https://home-deco35.myshopify.com/admin/api/2020-01/articles.json', {
-      headers: {
-        'X-Shopify-Access-Token': '99804a726edfba831c6671c3b66f413a'
-      }
-    }).then((response) => {
-      return {
-        articles: response.data
-      }
-    })
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

pages/collection/index.vue

@@ -1,4 +1,4 @@
-<template>
+<template class="container">
   <div></div>
 </template>
 

pages/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="full-width">
     <div class="container">
-      {{ policy }}
       <div class="columns">
         <div class="column">
           <h1 class="is-size-2">My home page</h1>
@@ -44,23 +43,45 @@
 
 <script>
 export default {
-  layout: 'noContainer',
   asyncData ({ app }) {
-    return app.$axios.get('https://home-deco35.myshopify.com/admin/api/2020-01/blogs.json', {
-      headers: {
-        'X-Shopify-Access-Token': '99804a726edfba831c6671c3b66f413a',
-        'Access-Control-Allow-Origin': '*'
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+              shop {
+                name,
+                description,
+                privacyPolicy {
+                  handle
+                },
+                termsOfService {
+                  handle
+                },
+                refundPolicy {
+                  handle
+                }
+              },
+              blogs(first: 10) {
+                edges {
+                    node {
+                      handle,
+                      title
+                    }
+                  }
+              }
+            }`
       }
     }).then((response) => {
       return {
-        blogs: response.data.blogs
+        description: response.data.data.shop.description,
+        shop: response.data.data.shop,
+        blogs: response.data.data.blogs.edges
       }
     })
   },
   data () {
     return {
-      collections: [],
-      policy: []
+      collections: []
     }
   },
   created () {
@@ -68,7 +89,7 @@ export default {
       this.collections = collections
     })
     this.$store.commit('setBlogs', this.blogs)
-    this.getPolicy()
+    this.$store.commit('setShop', this.shop)
   },
   beforeUpdate () {
     if (typeof this.$store.state.checkout.id === 'undefined') {
@@ -77,20 +98,19 @@ export default {
       })
     }
   },
-  methods: {
-    getPolicy () {
-      this.$axios.get('https://home-deco35.myshopify.com/admin/api/2020-01/blogs.json', {
-        headers: {
-          'X-Shopify-Access-Token': '99804a726edfba831c6671c3b66f413a'
-        }
-      }).then((response) => {
-        this.policy = response.data
-      })
+  head () {
+    return {
+      title: 'Home Page',
+      meta: [
+        { hid: 'description', name: 'description', content: this.description }
+      ]
     }
   }
 }
 </script>
 
 <style>
-
+.card-image {
+  height: 20rem;
+}
 </style>

pages/policy/_handle/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="container">
+    <h1>Policy id</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index'
+}
+</script>
+
+<style scoped>
+
+</style>

pages/products/_handle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container">
     <div class="columns">
       <div class="column is-4">
         <b-carousel :indicator-inside="false">

pages/products/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container">
     <product-card-list
       :products="products"
     />