message

assets/bulma.scss

@@ -41,10 +41,13 @@ p.footer-link > a:hover {
 @import "~buefy/src/scss/buefy";
 
 
+
+// My custom theme
 .nuxt-link-exact-active {
   border-bottom: 2px solid $primary;
 }
 
+
 ul {
   @extend .list;
   @extend .is-hoverable;

components/BlogCardList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="columns">
     <div v-for="article in articles" :key="article.id" class="column is-one-third">
-      <div class="card">
+      <div class="card rounded">
         <div class="card-image">
           <figure class="image is-4by3">
             <img :src="article.image.src" :alt="product.images[0].altText">

components/TheFooter.vue

@@ -27,6 +27,11 @@
           <p class="is-size-5">
             Policy
           </p>
+          <p class="footer-link">
+            <nuxt-link :to="`/policy/${privacyPolicy.handle}`">
+              Privacy Policy
+            </nuxt-link>
+          </p>
         </div>
         <div class="column is-4">
           <p class="is-size-5">
@@ -40,7 +45,12 @@
 
 <script>
 export default {
-  name: 'TheFooter'
+  name: 'TheFooter',
+  computed: {
+    privacyPolicy () {
+      return this.$store.state.shop.privacyPolicy
+    }
+  }
 }
 </script>
 

components/TheNavbar.vue

@@ -1,7 +1,7 @@
 <template>
   <b-navbar>
     <template slot="brand">
-      <b-navbar-item tag="a" href="/">
+      <b-navbar-item tag="nuxt-link" to="/">
         <img
           src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
           alt="Lightweight UI components for Vue.js based on Bulma"
@@ -16,19 +16,13 @@
         Products
       </b-navbar-item>
       <b-navbar-dropdown label="Blog">
-        <b-navbar-item
-          tag="a"
-          href="/blog"
-        >
-          All
-        </b-navbar-item>
         <b-navbar-item
           v-for="blog in blogs"
           :key="blog.id"
-          tag="a"
-          :href="`/blog/${blog.handle}`"
+          tag="nuxt-link"
+          :to="`/blog/${blog.node.handle}`"
         >
-          {{ blog.title }}
+          {{ blog.node.title }}
         </b-navbar-item>
       </b-navbar-dropdown>
     </template>

layouts/default.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="app">
     <the-navbar />
-    <div id="content-wrap" class="container" style="margin-top: 2em">
+    <section id="content-wrap" class="section">
       <nuxt />
-    </div>
+    </section>
     <the-footer />
   </div>
 </template>
@@ -29,9 +29,6 @@ export default {
 </script>
 
 <style>
-  body {
-    margin: 0;
-  }
   #content-wrap {
     min-height: 100vh;
   }

layouts/noContainer.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="app">
-    <the-navbar />
-    <div id="content-wrap">
-      <nuxt />
-    </div>
-    <the-footer />
-  </div>
-</template>
-
-<style>
-</style>
-<script>
-import TheNavbar from '../components/TheNavbar'
-import TheFooter from '../components/TheFooter'
-export default {
-  components: {
-    TheFooter,
-    TheNavbar
-  }
-}
-</script>
-
-<style>
-</style>

nuxt.config.js

@@ -5,11 +5,9 @@ export default {
   ** Headers of the page
   */
   head: {
-    title: process.env.npm_package_name || '',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
@@ -49,6 +47,13 @@ export default {
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
+  axios: {
+    baseURL: process.env.API_URL,
+    headers: {
+      'X-Shopify-Storefront-Access-Token': process.env.STOREFRONT_ACCESS_TOKEN,
+      Accept: 'application/json'
+    }
+  },
   shopify: {
     domain: process.env.DOMAIN, // your shopify domain
     storefrontAccessToken: process.env.STOREFRONT_ACCESS_TOKEN// your shopify storefront access token

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"
     />

store/index.js

@@ -1,4 +1,5 @@
 export const state = () => ({
+  shop: {},
   products: [],
   blogs: [],
   checkout: {
@@ -15,5 +16,8 @@ export const mutations = {
   },
   setBlogs (state, data) {
     state.blogs = data
+  },
+  setShop (state, data) {
+    state.shop = data
   }
 }