Upgrade to GitHub-native Dependabot

[Security] Bump ssri from 6.0.1 to 6.0.2

.github/dependabot.yml

@@ -0,0 +1,30 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "10:00"
+    timezone: Europe/Paris
+  open-pull-requests-limit: 10
+  ignore:
+  - dependency-name: nuxt-buefy
+    versions:
+    - 0.4.4
+    - 0.4.5
+    - 0.4.6
+  - dependency-name: y18n
+    versions:
+    - 4.0.1
+    - 4.0.2
+  - dependency-name: nuxt
+    versions:
+    - 2.14.12
+    - 2.15.0
+    - 2.15.1
+    - 2.15.3
+  - dependency-name: "@nuxtjs/axios"
+    versions:
+    - 5.12.5
+    - 5.13.0
+    - 5.13.1

README.md

@@ -1,6 +1,6 @@
-# my-sockets
+# Shopify Storefront
 
-> My premium Nuxt.js project
+> Nuxt js front-end integration for shopify store
 
 ## Build Setup
 
@@ -20,3 +20,13 @@ $ npm run generate
 ```
 
 For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
+
+## Configuration
+
+Simply register these variable in a .env file
+
+```dotenv
+DOMAIN=<your-store.myshopify.com/>
+STOREFRONT_ACCESS_TOKEN=<SHOPIFY STOREFRONT API ACCESS TOKEN>
+API_URL=https://<DOMAIN>/api/2020-01/graphql
+```

assets/bulma.scss

@@ -40,13 +40,19 @@ p.footer-link > a:hover {
 @import "~bulma";
 @import "~buefy/src/scss/buefy";
 
-
+.is-shadow {
+  text-shadow: 2px 2px 4px #000000;
+}
 
 // My custom theme
 .nuxt-link-exact-active {
   border-bottom: 2px solid $primary;
 }
 
+.card {
+  border-radius: .6rem;
+  overflow: hidden;
+}
 
 ul {
   @extend .list;

components/BlogCardList.vue

@@ -1,55 +1,57 @@
 <template>
-  <div class="columns">
+  <div class="columns is-multiline">
-    <div v-for="article in articles" :key="article.id" class="column is-one-third">
+    <div
-      <div class="card rounded">
+      v-for="article in blog.articles.edges"
-        <div class="card-image">
+      :key="article.node.id"
-          <figure class="image is-4by3">
+      class="column is-full-mobile is-half-tablet is-one-third-desktop"
-            <img :src="article.image.src" :alt="product.images[0].altText">
+    >
-          </figure>
+      <nuxt-link :to="`/blog/${blog.handle}/article/${article.node.handle}`">
-        </div>
+        <div class="card">
-        <div class="card-content">
+          <div class="card-image">
-          <div class="media">
+            <figure v-if="article.node.image !== null">
-            <div class="media-content">
+              <img
-              <p class="title is-4">
+                :src="article.node.image.originalSrc"
-                {{ product.title }}
+                :alt="article.node.image.altText"
-              </p>
+              >
-              <p class="subtitle is-6">
+            </figure>
-                {{ product.variants[0].price }} €
+            <figure v-else class="is-flex">
-              </p>
+              <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 class="content">
-            <b-button
-              tag="router-link"
-              :to="'/products/' + product.handle"
-              type="is-primary"
-            >
-              See
-            </b-button>
-            <b-button
-              type="is-primary"
-              icon-left="cart"
-              @click="addToCart(product.variants[0].id, 1)"
-            >
-              Buy
-            </b-button>
-          </div>
         </div>
-      </div>
+      </nuxt-link>
     </div>
   </div>
 </template>
 
 <script>
-import cartMixins from '../mixins/cartMixins'
-
 export default {
-  name: 'ProductCardList',
+  name: 'BlogCardList',
-  mixins: [cartMixins],
   props: {
-    products: {
+    blog: {
-      type: Array,
+      type: Object,
       required: true
     }
   }
@@ -57,5 +59,13 @@ export default {
 </script>
 
 <style scoped>
-
+  .subtitle {
+    height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 1rem;
+  }
+  figure.is-flex {
+    justify-content: center;
+  }
 </style>

components/PolicyPage.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="columns">
+    <div class="column">
+      <h1>{{ policy.title }}</h1>
+      <div v-html="policy.body" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PolicyPage',
+  props: {
+    policy: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/ProductCardList.vue

@@ -1,42 +1,42 @@
 <template>
-  <div class="columns">
+  <div class="columns is-multiline">
-    <div v-for="product in products" :key="product.id" class="column is-one-third">
+    <div v-for="product in products" :key="product.id" class="column is-half-tablet is-one-third-widescreen">
-      <div class="card">
+      <nuxt-link :to="`/products/${product.handle}`">
-        <div class="card-image">
+        <div class="card">
-          <figure class="image is-4by3">
+          <div class="card-image">
-            <img :src="product.images[0].src" :alt="product.images[0].altText">
+            <figure class="image is-4by3" v-if="product.images[0].src !== null">
-          </figure>
+              <img :src="product.images[0].src" :alt="product.images[0].altText">
-        </div>
+            </figure>
-        <div class="card-content">
+            <figure v-else class="is-flex">
-          <div class="media">
+              <img
-            <div class="media-content">
+                src="/img/no-image.jpg"
-              <p class="title is-4">
+                alt="image-not-found"
-                {{ product.title }}
+              >
-              </p>
+            </figure>
-              <p class="subtitle is-6">
+          </div>
-                {{ product.variants[0].price }} €
+          <div class="card-content">
-              </p>
+            <div class="media">
+              <div class="media-content">
+                <p class="title is-4">
+                  {{ product.title }}
+                </p>
+                <p class="subtitle is-6">
+                  {{ product.variants[0].price }} €
+                </p>
+              </div>
+            </div>
+            <div class="content">
+              <b-button
+                type="is-primary"
+                icon-left="cart"
+                @click="addToCart(product.variants[0].id, 1)"
+              >
+                Buy
+              </b-button>
             </div>
           </div>
-
-          <div class="content">
-            <b-button
-              tag="router-link"
-              :to="'/products/' + product.handle"
-              type="is-primary"
-            >
-              See
-            </b-button>
-            <b-button
-              type="is-primary"
-              icon-left="cart"
-              @click="addToCart(product.variants[0].id, 1)"
-            >
-              Buy
-            </b-button>
-          </div>
         </div>
-      </div>
+      </nuxt-link>
     </div>
   </div>
 </template>

components/TheFooter.vue

@@ -3,10 +3,8 @@
     <div class="content has-text-light">
       <div class="columns">
         <div class="column has-text-centered">
-          <p>
+          <p class="footer-link">
-            <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
+            Made with ❤️, 🍺 and ☕ by <a href="https://github.com/thomas-philippot"> Thomas Philippot</a>
-            <a href="http://opensource.org/licenses/mit-license.php">MIT</a>
-            . The website content is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
           </p>
         </div>
       </div>
@@ -15,23 +13,26 @@
           <p class="footer-link-title">
             Newsletter
           </p>
-          <p
-            v-for="i in 5"
-            :key="i"
-            class="footer-link"
-          >
-            <a href="">link {{ i }}</a>
-          </p>
         </div>
         <div class="column is-4">
           <p class="is-size-5">
             Policy
           </p>
           <p class="footer-link">
-            <nuxt-link :to="`/policy/${privacyPolicy.handle}`">
+            <nuxt-link to="/policy/privacy-policy">
               Privacy Policy
             </nuxt-link>
           </p>
+          <p class="footer-link">
+            <nuxt-link to="/policy/refund-policy">
+              Refund Policy
+            </nuxt-link>
+          </p>
+          <p class="footer-link">
+            <nuxt-link to="/policy/terms-of-service">
+              Terms of service
+            </nuxt-link>
+          </p>
         </div>
         <div class="column is-4">
           <p class="is-size-5">
@@ -45,12 +46,7 @@
 
 <script>
 export default {
-  name: 'TheFooter',
+  name: 'TheFooter'
-  computed: {
-    privacyPolicy () {
-      return this.$store.state.shop.privacyPolicy
-    }
-  }
 }
 </script>
 

layouts/default.vue

@@ -17,13 +17,6 @@ export default {
   components: {
     TheFooter,
     TheNavbar
-  },
-  asyncData ({ $shopify }) {
-    return $shopify.collection.fetchAllWithProducts().then((collections) => {
-      return {
-        collections
-      }
-    })
   }
 }
 </script>

layouts/noContainer.vue

@@ -0,0 +1,28 @@
+<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>
+  #content-wrap {
+    min-height: 100vh;
+  }
+</style>

nuxt.config.js

@@ -1,4 +1,5 @@
 require('dotenv').config()
+const axios = require("axios")
 export default {
   mode: 'universal',
   /*
@@ -26,7 +27,10 @@ export default {
   /*
   ** Plugins to load before mounting the App
   */
-  plugins: [{ src: '~/plugins/localStorage.js', ssr: false }],
+  plugins: [
+    { src: '~/plugins/localStorage.js', ssr: false },
+    { src: '~/plugins/moment' }
+  ],
   /*
   ** Nuxt.js dev-modules
   */
@@ -58,6 +62,68 @@ export default {
     domain: process.env.DOMAIN, // your shopify domain
     storefrontAccessToken: process.env.STOREFRONT_ACCESS_TOKEN// your shopify storefront access token
   },
+  generate: {
+    routes () {
+      return axios({
+        url: process.env.API_URL,
+        method: 'POST',
+        headers: {
+          'X-Shopify-Storefront-Access-Token': process.env.STOREFRONT_ACCESS_TOKEN,
+          Accept: 'application/json'
+        },
+        data: {
+          query: `query {
+                    blogs (first: 250) {
+                      edges {
+                        node {
+                          handle,
+                          articles (first: 250) {
+                            edges {
+                              node {
+                                handle
+                              }
+                            }
+                          }
+                        }
+                      }
+                    },
+                    products (first: 250) {
+                      edges {
+                        node {
+                          handle
+                        }
+                      }
+                    },
+                    collections (first: 250) {
+                      edges {
+                        node {
+                          handle
+                        }
+                      }
+                    }
+                  }`
+        }
+      }).then((response) => {
+        const res = []
+        const blogRoutes = response.data.data.blogs.edges
+        const productRoutes = response.data.data.products.edges
+        const CollectionRoutes = response.data.data.collections.edges
+        blogRoutes.forEach((blog) => {
+          res.push('/blog/' + blog.node.handle)
+          blog.node.articles.edges.forEach((article) => {
+            res.push('/blog/' + blog.node.handle + '/article/' + article.node.handle)
+          })
+        })
+        productRoutes.forEach((product) => {
+          res.push('/products/' + product.node.handle)
+        })
+        CollectionRoutes.forEach((collection) => {
+          res.push('/collection/' + collection.node.handle)
+        })
+        return res
+      })
+    }
+  },
   /*
   ** Build configuration
   */

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "my-sockets",
+  "name": "shopify-storefront",
   "version": "1.0.0",
   "description": "My premium Nuxt.js project",
   "author": "thomas",
@@ -12,20 +12,21 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.9.5",
+    "@nuxtjs/axios": "^5.13.1",
     "dotenv": "^8.2.0",
-    "node-sass": "^4.13.1",
+    "moment": "^2.29.1",
-    "nuxt": "^2.11.0",
+    "node-sass": "^5.0.0",
-    "nuxt-buefy": "^0.3.23",
+    "nuxt": "^2.15.4",
-    "nuxt-shopify": "^1.8.0",
+    "nuxt-buefy": "^0.3.31",
-    "sass-loader": "^8.0.2",
+    "nuxt-shopify": "^1.10.7",
-    "vuex-persistedstate": "^2.7.1"
+    "sass-loader": "^10.1.1",
+    "vuex-persistedstate": "^3.2.0"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^2.0.2",
-    "@nuxtjs/eslint-module": "^1.0.0",
+    "@nuxtjs/eslint-module": "^3.0.1",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.8.0",
-    "eslint-plugin-nuxt": ">=0.5.1"
+    "eslint-plugin-nuxt": ">=2.0.0"
   }
 }

pages/basket/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container">
     <div v-if="checkout.lineItems.length === 0">
       <div class="column">
         <h1 class="is-size-1">
@@ -11,51 +11,55 @@
       <div class="columns">
         <div class="column">
           <h1 class="is-size-1">
-            Panier
+            Cart
           </h1>
         </div>
       </div>
       <div class="columns">
         <div class="column">
-          <b-table :data="checkout.lineItems">
+          <div class="card">
-            <template slot-scope="props">
+            <div class="card-content">
-              <b-table-column field="image" label="Image">
+              <b-table :data="checkout.lineItems">
-                <figure class="image is-96x96">
+                <template slot-scope="props">
-                  <img class="is-rounded" :src="props.row.variant.image.src" :alt="props.row.description">
+                  <b-table-column field="image" label="Image">
-                </figure>
+                    <figure class="image is-96x96">
-              </b-table-column>
+                      <img class="is-rounded" :src="props.row.variant.image.src" :alt="props.row.description">
-              <b-table-column field="title" label="Title">
+                    </figure>
-                <p class="title">
+                  </b-table-column>
-                  {{ props.row.title }}
+                  <b-table-column field="title" label="Title">
-                </p>
+                    <p class="title">
-              </b-table-column>
+                      {{ props.row.title }}
-              <b-table-column field="price" label="Price">
+                    </p>
-                {{ props.row.variant.price }}€
+                  </b-table-column>
-              </b-table-column>
+                  <b-table-column field="price" label="Price">
-              <b-table-column field="quantity" label="Quantity">
+                    {{ props.row.variant.price }}€
-                {{ props.row.quantity }}
+                  </b-table-column>
-              </b-table-column>
+                  <b-table-column field="quantity" label="Quantity">
-              <b-table-column field="total" label="Total">
+                    {{ props.row.quantity }}
-                {{ getItemTotal(props.row) }} €
+                  </b-table-column>
-              </b-table-column>
+                  <b-table-column field="total" label="Total">
-              <b-table-column field="delete" label="Delete">
+                    {{ getItemTotal(props.row) }} €
-                <b-button
+                  </b-table-column>
-                  class="is-danger"
+                  <b-table-column field="delete" label="Delete">
-                  icon-left="delete"
+                    <b-button
-                  @click="deleteItem(props.row.id)"
+                      class="is-danger"
-                >
+                      icon-left="delete"
-                  Delete
+                      @click="deleteItem(props.row.id)"
-                </b-button>
+                    >
-              </b-table-column>
+                      Delete
-            </template>
+                    </b-button>
-          </b-table>
+                  </b-table-column>
-          <div class="columns">
+                </template>
-            <div class="column">
+              </b-table>
-            </div>
+              <div class="columns">
-            <div class="column is-2 is-pulled-right">
+                <div class="column">
-              <p class="subtitle">
+                </div>
-                Subtotal : {{ checkout.subtotalPrice }} €
+                <div class="column is-2 is-pulled-right">
-              </p>
+                  <p class="subtitle">
+                    Subtotal : {{ checkout.subtotalPrice }} €
+                  </p>
+                </div>
+              </div>
             </div>
           </div>
         </div>

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

@@ -1,29 +1,59 @@
 <template>
-  <div class="container">
+  <div>
-    Article {{ params }}
+    <section class="hero is-info is-medium is-bold">
-    {{ article }}
+      <div
+        class="hero-body"
+        :style="{
+          backgroundImage: (article.image === null) ? '' : `url(${article.image.originalSrc})`,
+          backgroundPosition: 'center',
+          backgroundSize: 'cover'
+        }"
+      />
+    </section>
+    <section class="articles section">
+      <div class="container">
+        <div class="card article">
+          <div class="card-content">
+            <div class="media">
+              <div class="media-content has-text-centered">
+                <p class="title article-title">{{ article.title }}</p>
+                <div class="tags has-addons level-item">
+                  <span class="tag is-rounded is-info">@{{ article.authorV2.name }}</span>
+                  <span class="tag is-rounded">{{ $moment(article.publishedAt, $moment.ISO_8601).format('DD MMMM Y') }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="content article-body">
+              <p v-html="article.contentHtml" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script>
 export default {
   name: 'Index',
+  layout: 'noContainer',
   asyncData ({ app, params }) {
     return app.$axios({
       method: 'POST',
       data: {
         query: `query {
                   blogByHandle (handle:"${params.handle}") {
-                    title,
-                    handle
                     articleByHandle (handle: "${params.articleHandle}") {
                       title,
+                      publishedAt,
                       contentHtml
                       authorV2 {
-                        bio,
+                        name
-                        firstName,
-                        lastName
                       },
+                      seo {
+                        title,
+                        description
+                      }
                       image (maxWidth: 2000) {
                         altText,
                         originalSrc
@@ -37,9 +67,41 @@ export default {
         article: response.data.data.blogByHandle.articleByHandle
       }
     })
+  },
+  head () {
+    return {
+      title: this.article.seo.title,
+      meta: [
+        { hid: 'description', name: 'description', content: this.article.seo.description }
+      ]
+    }
   }
 }
 </script>
 
 <style scoped>
+  .articles {
+    margin: -200px 0 5rem;
+  }
+  .articles .content p {
+    line-height: 1.9;
+    margin: 15px 0;
+  }
+  .media-content {
+    margin-top: 3rem;
+  }
+  .article {
+    margin-top: 6rem;
+  }
+  @media screen and (min-width: 768px) {
+    .article-body {
+      margin: 0 6rem;
+    }
+  }
+  .article-body {
+    line-height: 1.4;
+  }
+  .hero-body {
+    height: 500px;
+  }
 </style>

pages/blog/_handle/index.vue

@@ -1,57 +1,27 @@
 <template>
   <div class="container">
-    <h1>{{ blog.title }}</h1>
+    <div class="columns">
-    <div class="columns is-multiline">
+      <div class="column">
-      <div
+        <h1>{{ blog.title }}</h1>
-        v-for="article in blog.articles.edges"
+      </div>
-        :key="article.node.id"
+    </div>
-        class="column is-full-mobile is-half-tablet is-one-third-desktop"
+    <div class="columns">
-      >
+      <div class="column">
-        <nuxt-link :to="`/blog/${blog.handle}/article/${article.node.handle}`">
+        <blog-card-list
-          <div class="card">
+          :blog="blog"
-            <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>
+import BlogCardList from '../../../components/BlogCardList'
 export default {
   name: 'Index',
+  components: {
+    BlogCardList
+  },
   asyncData ({ app, params }) {
     return app.$axios({
       method: 'POST',
@@ -84,18 +54,14 @@ export default {
         blog: response.data.data.blogByHandle
       }
     })
+  },
+  head () {
+    return {
+      title: this.$store.state.shop.name + ' | ' + this.blog.title
+    }
   }
 }
 </script>
 
 <style scoped>
-  .subtitle {
-    height: 20px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: 1rem;
-  }
-  figure.is-flex {
-    justify-content: center;
-  }
 </style>

pages/collection/_handle/index.vue

@@ -1,43 +1,43 @@
 <template>
   <div>
-    <section class="hero is-primary" style="margin-bottom: 2rem">
+    <section class="hero is-medium is-info" style="margin-bottom: 2rem">
       <div
         class="hero-body"
         :style="{
-          backgroundImage: `url(${collection.image.src})`,
+          backgroundImage: (collection.image === null) ? '' : `url(${collection.image.src})`,
           backgroundPosition: 'center',
           backgroundSize: 'cover'
         }"
       >
         <div class="container has-text-centered">
-          <h1 class="title">
+          <h1 class="title is-shadow">
             {{ collection.title }}
           </h1>
         </div>
       </div>
     </section>
     <div class="container">
-      <div class="columns">
+      <section class="articles section">
-        <div class="column">
+        <div class="card article">
-          <p
+          <div class="card-content">
-            class="subtitle"
+            <div class="content article-body">
-            v-html="collection.descriptionHtml"
+              <p v-html="collection.descriptionHtml" />
-          />
+            </div>
+          </div>
         </div>
-      </div>
+      </section>
-      <hr class="hr" />
+      <section class="section">
-      <div class="columns">
+        <div class="container">
-        <div class="column">
+          <div class="columns">
-          <h2 class="is-2">Products in this collection</h2>
+            <div class="column">
-        </div>
+              <h2 class="is-size-4">Products in this collection</h2>
-      </div>
+            </div>
-      <div class="columns">
+          </div>
-        <div class="column">
           <product-card-list
             :products="collection.products"
           />
         </div>
-      </div>
+      </section>
     </div>
   </div>
 </template>
@@ -60,4 +60,31 @@ export default {
 </script>
 
 <style scoped>
+  .container {
+    margin-bottom: 2.5rem;
+  }
+  .articles {
+    margin: -200px 0 5rem;
+  }
+  .articles .content p {
+    line-height: 1.9;
+    margin: 15px 0;
+  }
+  .media-content {
+    margin-top: 3rem;
+  }
+  .article {
+    margin-top: 6rem;
+  }
+  @media screen and (min-width: 768px) {
+    .article-body {
+      margin: 0 6rem;
+    }
+  }
+  .article-body {
+    line-height: 1.4;
+  }
+  .hero-body {
+    height: 500px;
+  }
 </style>

pages/index.vue

@@ -1,41 +1,39 @@
 <template>
   <div class="full-width">
-    <div class="container">
+    <section class="section">
-      <div class="columns">
+      <div class="container">
-        <div class="column">
+        <div class="columns">
-          <h1 class="is-size-2">My home page</h1>
+          <div class="column">
-          <p>ceci est la page d'acceuil, ce texte ne changera pas car c'est une boutique</p>
+            <h1 class="is-size-2">My home page</h1>
+            <p>This website is for developpement purpose, please don't try to buy something here.</p>
+          </div>
         </div>
       </div>
-    </div>
+    </section>
     <div
       v-for="collection in collections"
       :key="collection.id"
-      class="columns"
+      class="columns collection-banner"
     >
       <div class="column">
-        <section class="hero is-large is-primary">
+        <nuxt-link :to="`/collection/${collection.handle}`">
-          <div
+          <section class="hero is-large is-info">
-            class="hero-body"
+            <div
-            :style="{
+              class="hero-body"
-              backgroundImage: `url(${collection.image.src})`,
+              :style="{
-              backgroundPosition: 'center',
+                backgroundImage: (collection.image === null) ? '' : `url(${collection.image.src})`,
-              backgroundSize: 'cover'
+                backgroundPosition: 'center',
-            }"
+                backgroundSize: 'cover'
-          >
+              }"
-            <div class="container">
+            >
-              <h1 class="title">
+              <div class="container">
-                {{ collection.title }}
+                <h1 class="title is-shadow">
-              </h1>
+                  {{ collection.title }}
-              <h2 class="subtitle">
+                </h1>
-                {{ collection.description }}
+              </div>
-              </h2>
-              <nuxt-link :to="`/collection/${collection.handle}`" class="button is-primary">
-                <span>See</span>
-              </nuxt-link>
             </div>
-          </div>
+          </section>
-        </section>
+        </nuxt-link>
       </div>
     </div>
   </div>
@@ -43,6 +41,7 @@
 
 <script>
 export default {
+  layout: 'noContainer',
   asyncData ({ app }) {
     return app.$axios({
       method: 'POST',
@@ -50,16 +49,7 @@ export default {
         query: `query {
               shop {
                 name,
-                description,
+                description
-                privacyPolicy {
-                  handle
-                },
-                termsOfService {
-                  handle
-                },
-                refundPolicy {
-                  handle
-                }
               },
               blogs(first: 10) {
                 edges {
@@ -100,7 +90,7 @@ export default {
   },
   head () {
     return {
-      title: 'Home Page',
+      title: this.shop.name,
       meta: [
         { hid: 'description', name: 'description', content: this.description }
       ]
@@ -110,7 +100,8 @@ export default {
 </script>
 
 <style>
-.card-image {
+.collection-banner {
-  height: 20rem;
+  margin-bottom: 2rem;
+  margin-top: 2rem !important;
 }
 </style>

pages/policy/_handle/index.vue

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

pages/policy/privacy-policy/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="container">
+    <policy-page
+      :policy="policy"
+    />
+  </div>
+</template>
+
+<script>
+import PolicyPage from '../../../components/PolicyPage'
+export default {
+  name: 'Index',
+  components: {
+    PolicyPage
+  },
+  asyncData ({ app }) {
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+                  shop {
+                    privacyPolicy {
+                      title,
+                      body
+                    }
+                  }
+                }`
+      }
+    }).then((response) => {
+      return {
+        policy: response.data.data.shop.privacyPolicy
+      }
+    })
+  },
+  head () {
+    return {
+      title: 'Privacy Policy'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/policy/refund-policy/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="container">
+    <policy-page
+      :policy="policy"
+    />
+  </div>
+</template>
+
+<script>
+import PolicyPage from '../../../components/PolicyPage'
+export default {
+  name: 'Index',
+  components: {
+    PolicyPage
+  },
+  asyncData ({ app }) {
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+                  shop {
+                    refundPolicy {
+                      title,
+                      body
+                    }
+                  }
+                }`
+      }
+    }).then((response) => {
+      return {
+        policy: response.data.data.shop.refundPolicy
+      }
+    })
+  },
+  head () {
+    return {
+      title: 'Refund Policy'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/policy/terms-of-service/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="container">
+    <policy-page
+      :policy="policy"
+    />
+  </div>
+</template>
+
+<script>
+import PolicyPage from '../../../components/PolicyPage'
+export default {
+  name: 'Index',
+  components: {
+    PolicyPage
+  },
+  asyncData ({ app }) {
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+                  shop {
+                    termsOfService {
+                      title,
+                      body
+                    }
+                  }
+                }`
+      }
+    }).then((response) => {
+      return {
+        policy: response.data.data.shop.termsOfService
+      }
+    })
+  },
+  head () {
+    return {
+      title: 'Terms of services'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/products/_handle/index.vue

@@ -51,7 +51,7 @@
                 </p>
               </div>
             </div>
-            <div class="columns">
+            <div class="columns is-flex">
               <div class="column is-1">
                 <p>Quantity</p>
               </div>
@@ -94,6 +94,14 @@ export default {
       product: {},
       quantity: 1
     }
+  },
+  head () {
+    return {
+      title: this.$store.state.shop.name + ' | ' + this.product.title,
+      meta: [
+        { hid: 'description', name: 'description', content: this.product.description }
+      ]
+    }
   }
 }
 </script>
@@ -105,4 +113,7 @@ export default {
   .al img {
     filter: grayscale(100%);
   }
+  .columns.is-flex {
+    align-items: center;
+  }
 </style>

pages/products/index.vue

@@ -26,6 +26,11 @@ export default {
     products () {
       return this.$store.state.products
     }
+  },
+  head () {
+    return {
+      title: this.$store.state.shop.name + ' | ' + 'Products'
+    }
   }
 }
 </script>

plugins/moment.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import moment from 'moment'
+
+moment.locale('fr')
+Vue.use(moment)
+
+export default ({ app }, inject) => {
+  app.$moment = moment
+  inject('moment', moment)
+}