add tailwindcss, fix url resolver, add global components, add environ…

…mental variables

.env.template

@@ -0,0 +1 @@
+MAGENTO_BACKEND_URL=https://magento.test/graphql

.eslintrc.js

@@ -19,5 +19,9 @@ module.exports = {
   ],
   // add your custom rules here
   rules: {
+  },
+  globals: {
+    BaseLoader: true,
+    BaseInlineSvg: true,
   }
 }

.graphqlconfig

@@ -4,7 +4,7 @@
   "extensions": {
     "endpoints": {
       "Default GraphQL Endpoint": {
-        "url": "https://magento23.test/graphql",
+        "url": "http://magento.test/graphql",
         "headers": {
           "user-agent": "JS GraphQL"
         },

assets/css/tailwind.css

@@ -0,0 +1,5 @@
+/* purgecss start ignore */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+/* purgecss end ignore */
+@import 'tailwindcss/utilities';

components/Breadcrumbs.vue

@@ -0,0 +1,51 @@
+<template>
+  <apollo-query
+    :query="require('~/queries/getBreadcrumbData.graphql')"
+    :variables="{ category_id: id }"
+  >
+    <template slot-scope="{ result: { data } }">
+      <template v-if="data" class="result apollo">
+        <div class="text-sm py-2">
+          <nuxt-link to="/">Home</nuxt-link>
+          <span class="px-2">/</span>
+          <template v-for="(breadcrumb, index) in data.category.breadcrumbs">
+            <nuxt-link
+              :to="`/${breadcrumb.category_url_path}.html`"
+              :key="index"
+            >
+              {{ breadcrumb.category_name }}
+            </nuxt-link>
+            <span class="px-2" :key="`seprator-${index}`">/</span>
+          </template>
+          <nuxt-link
+            :to="`/${data.category.url_path}.html`"
+            v-if="currentProduct"
+          >
+            {{ data.category.name }}
+          </nuxt-link>
+          <span v-else>
+            {{ data.category.name }}
+          </span>
+          <span v-if="currentProduct">
+            {{ currentProduct }}
+          </span>
+        </div>
+      </template>
+    </template>
+  </apollo-query>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    currentProduct: {
+      Type: String,
+      default: null
+    }
+  }
+}
+</script>

components/CategoryList.vue

@@ -0,0 +1,46 @@
+<template>
+  <apollo-query
+    :query="require('~/queries/getCategory.graphql')"
+    :variables="{
+      id: id,
+      pageSize: 30,
+      currentPage: 1,
+      onServer: false,
+      filters: {},
+      sort: {
+        relevance: 'ASC'
+      }
+    }"
+  >
+    <template slot-scope="{ result: { loading, error, data }, isLoading }">
+      <!-- Loading -->
+      <BaseLoader v-if="isLoading" />
+      <!-- Error -->
+      <div v-else-if="error" class="error apollo">An error occurred</div>
+      <!-- Result -->
+      <div v-else-if="data" class="result apollo">
+        <h2 class="text-xl uppercase mb-6 text-center">
+          {{ data.category.name }}
+        </h2>
+        <ul>
+          <li v-for="product in data.products.items" :key="product.id">
+            <NuxtLink :to="'/' + product.url_key + '.html'">
+              {{ product.name }}
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </apollo-query>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

components/Footer.vue

@@ -0,0 +1,18 @@
+<template>
+  <footer
+    class="p-4 w-full border-t border-gray bg-gray-light text-gray-darker text-center"
+  >
+    <apollo-query :query="require('~/queries/getStoreConfigData.graphql')">
+      <template slot-scope="{ result: { loading, error, data }, isLoading }">
+        <!-- Loading -->
+        <div v-if="isLoading" class="loading apollo">Loading...</div>
+        <!-- Error -->
+        <div v-else-if="error" class="error apollo">An error occurred</div>
+        <!-- Result -->
+        <div v-else-if="data" class="result apollo">
+          <small class="text-xs">{{ data.storeConfig.copyright }}</small>
+        </div>
+      </template>
+    </apollo-query>
+  </footer>
+</template>

components/Header.vue

@@ -0,0 +1,22 @@
+<template>
+  <header
+    class="flex items-center justify-between absolute w-full bg-gray-light border-gray border-b"
+  >
+    <button @click="toggleNavigation">
+      <BaseInlineSvg svg="menu.svg" class="w-12 h-12 p-3" />
+    </button>
+    <nuxt-link to="/" alt="Hoopoe" class="mx-auto">
+      <BaseInlineSvg svg="logo.svg" class="w-12 h-12 p-2" />
+    </nuxt-link>
+  </header>
+</template>
+
+<script>
+export default {
+  methods: {
+    toggleNavigation() {
+      this.$store.commit('toggleNavigation')
+    }
+  }
+}
+</script>

components/Index.vue

@@ -0,0 +1,40 @@
+<template>
+  <section class="mx-auto text-center">
+    <h2 class="text-xl uppercase mb-6">Shop by category</h2>
+    <apollo-query
+      :query="require('~/queries/getNavigationMenu.graphql')"
+      :variables="{ id: rootCategoryId }"
+    >
+      <template slot-scope="{ result: { loading, error, data } }">
+        <!-- Loading -->
+        <div v-if="loading" class="loading apollo">Loading...</div>
+        <!-- Error -->
+        <div v-else-if="error" class="error apollo">An error occurred</div>
+        <!-- Result -->
+        <div v-else-if="data" class="result apollo flex justify-around">
+          <ul class="flex">
+            <li
+              v-for="category in data.category.children"
+              :key="category.id"
+              class="m-3"
+            >
+              <NuxtLink :to="category.url_path + '.html'">
+                {{ category.name }}
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+      </template>
+    </apollo-query>
+  </section>
+</template>
+
+<script>
+export default {
+  computed: {
+    rootCategoryId() {
+      return 2
+    }
+  }
+}
+</script>

components/Product.vue

@@ -1,12 +1,18 @@
 <template>
   <div>
     <h1>{{ product.name }}</h1>
+    <!-- eslint-disable-next-line -->
     <div v-html="product.description.html"></div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ['product']
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  }
 }
 </script>

components/base/BaseInlineSvg.vue

@@ -0,0 +1,15 @@
+<template>
+  <!-- eslint-disable-next-line -->
+  <div v-html="require(`~/assets/svg/${svg}?include`)"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    svg: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>