From d6f625c94361f117d990dde53e883eeac5baf607 Mon Sep 17 00:00:00 2001
From: hamdy <hamdy.a.farag@gmail.com>
Date: Mon, 30 Nov 2020 13:45:04 +0200
Subject: [PATCH] fix tags

---
 gridsome.config.js    |  2 +-
 gridsome.server.js    | 36 +++++++++++++++++++++++++++++++++++-
 src/templates/Tag.vue | 22 +++++++++++-----------
 3 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/gridsome.config.js b/gridsome.config.js
index 5c8e3f8d5..e657df240 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -176,7 +176,7 @@ module.exports = {
         }],
 
         ProjectTag: [{
-            path: '/projects/tags/:id',
+            path: '/tags/:id',
             component: '~/templates/Tag.vue'
         }],
         
diff --git a/gridsome.server.js b/gridsome.server.js
index 0fd7a417e..9bc8ae3dd 100644
--- a/gridsome.server.js
+++ b/gridsome.server.js
@@ -97,8 +97,9 @@ module.exports = function(api) {
                 private: private
             }
         })
-    })
+    });
 
+    
     api.createPages(async({
         graphql,
         createPage
@@ -178,4 +179,37 @@ module.exports = function(api) {
       });
 
   });
+
+  api.createPages(async({
+    graphql,
+    createPage
+}) => {
+    // Use the Pages API here: https://gridsome.org/docs/pages-api
+    const {
+        data
+    } = await graphql(`{
+        allProjectTag {
+    edges {
+      
+      node {
+        id
+        path
+      }
+    }
+  }
+}
+`);
+
+    data.allProjectTag.edges.forEach(function(element) {
+        createPage({
+            path: element.node.path,
+            component: './src/templates/Tag.vue',
+            context: {
+                id: element.node.id
+            }
+        });
+
+    });
+
+});
 }
\ No newline at end of file
diff --git a/src/templates/Tag.vue b/src/templates/Tag.vue
index 32197c12a..a5f223dce 100644
--- a/src/templates/Tag.vue
+++ b/src/templates/Tag.vue
@@ -2,12 +2,12 @@
   <Layout :hideHeader="true" :disableScroll="true">
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-24">
       <div class="mx-4 sm:mx-0">
-        <h1 class="pb-0 mb-0 text-5xl font-medium">{{ $page.tag.title }}</h1>
+        <h1 class="pb-0 mb-0 text-5xl font-medium">{{ $page.projectTag.title }}</h1>
         <p class="text-gray-700 text-xl">
           A
           <span
             class="self-center"
-          >{{ $page.tag.belongsTo.totalCount }} Projects</span>
+          >{{ $page.projectTag.belongsTo.totalCount }} Projects</span>
         </p>
       </div>
 
@@ -15,7 +15,7 @@
 
       <div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
         <PostListItem
-          v-for="edge in $page.tag.belongsTo.edges"
+          v-for="edge in $page.projectTag.belongsTo.edges"
           :key="edge.node.id"
           :record="edge.node"
         />
@@ -23,11 +23,11 @@
 
       <div class="pagination flex justify-center mb-8">
         <Pagination
-          :baseUrl="$page.tag.path"
-          :currentPage="$page.tag.belongsTo.pageInfo.currentPage"
-          :totalPages="$page.tag.belongsTo.pageInfo.totalPages"
+          :baseUrl="$page.projectTag.path"
+          :currentPage="$page.projectTag.belongsTo.pageInfo.currentPage"
+          :totalPages="$page.projectTag.belongsTo.pageInfo.totalPages"
           :maxVisibleButtons="5"
-          v-if="$page.tag.belongsTo.pageInfo.totalPages > 1"
+          v-if="$page.projectTag.belongsTo.pageInfo.totalPages > 1"
         />
       </div>
     </div>
@@ -35,11 +35,11 @@
 </template>
 
 <page-query>
-  query($id: ID!, $page:Int) {
-    tag(id: $id) {
+  query($id: ID!) {
+    projectTag(id: $id) {
       title
       path
-      belongsTo(perPage: 10, page: $page) @paginate {
+      belongsTo{
         totalCount
         pageInfo {
           totalPages
@@ -90,7 +90,7 @@ export default {
  
   metaInfo() {
     return {
-      title: this.$page.tag.title
+      title: ""
     };
   }
 };