fixe

gridsome.config.js

@@ -69,7 +69,7 @@ module.exports = {
                 path: './content/person/**/*.md',
                 refs: {
                     tags: {
-                        typeName: 'Tag',
+                        typeName: 'PersonTag',
                         create: true
                     },
                     memberships: {
@@ -91,7 +91,7 @@ module.exports = {
                 refs: {
                     author: 'Person',
                     tags: {
-                        typeName: 'Tag',
+                        typeName: 'BlogTag',
                         create: true
                     }
                 }
@@ -109,7 +109,7 @@ module.exports = {
                 refs: {
                     author: 'Person',
                     tags: {
-                        typeName: 'Tag',
+                        typeName: 'NewsTag',
                         create: true
                     }
                 }
@@ -130,7 +130,7 @@ module.exports = {
                     members: 'Person',
 
                     tags: {
-                        typeName: 'Tag',
+                        typeName: 'ProjectTag',
                         create: true
                     }
                 }
@@ -161,10 +161,6 @@ module.exports = {
             path: '/people/:id',
             component: '~/templates/Person.vue'
         }],        
-        Tag: [{
-            path: '/tags/:id',
-            component: '~/templates/Tag.vue'
-        }],
         Membership: [{
             path: '/memberships/:id',
             component: '~/templates/Membership.vue'

gridsome.server.js

@@ -58,6 +58,7 @@ module.exports = function(api) {
 
 
         if (options.internal.typeName === 'Person') {
+            options.tags = (typeof options.tags === 'string') ? options.tags.split(',').map(string => string.trim()) : options.tags;
             options.project_ids = (typeof options.project_ids === 'string') ? options.project_ids.split(',').map(string => string.trim()) : options.project_ids;
             options.memberships = (typeof options.memberships === 'string') ? options.memberships.split(',').map(string => string.trim()) : options.memberships;
             options.countries = (typeof options.countries === 'string') ? options.countries.split(',').map(string => string.trim()) : options.countries;

src/assets/scss/main.scss

@@ -98,6 +98,10 @@ ul {
     @apply -ml-3;
 }
 
+button:focus {
+    outline: none;
+}
+
 @media (min-width: 768px) {
     // .with-large>.flex-post:nth-child(5n),
     .with-large>.flex-post:nth-child(6n + 1) {

src/components/Group.vue

@@ -1,74 +0,0 @@
-<template>
-        <section class="py-12 px-4 text-center">
-  <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">{{title}}</h2>
-  
-  <p class="max-w-xl mx-auto mb-12 text-gray-400">{{description}}</p>
-       <div class="flex max-w-lg mb-12 mx-auto text-center border-b-2">
-  
-    <div v-for="(tag, index) in tags" :key="tag.node.id" class="w-1/3 pb-2">
-    <button @click="setSelected('')" v-if="index == 0" class="w-1/3 pb-2 border-b-4 border-indigo-600">All</button>
-      <button @click="setSelected(tag.node.title)" v-if="index == 0" class="w-1/3 pb-2 border-b-4 border-indigo-600">{{ tag.node.title }}</button>
-       <button @click="setSelected(tag.node.title)" v-if="index != 0" class="hover:text-indigo-600">{{ tag.node.title }}</button>
-    </div>
-
-  </div>
-  <div class="flex flex-wrap -mx-4">
-    <div  v-for="obj in filter(selected)" :key="obj.node.id" class="w-1/2 lg:w-1/4 p-4">
-    <g-link :to="obj.node.path" class="post-card-image-link">
-    <g-image
-        :src="obj.node.image"
-        :alt="obj.node.name"
-        class="w-1/2 mx-auto mb-4 rounded-full"
-      ></g-image>
-    </g-link>
-      <h3 class="text-xl mb-1 font-semibold font-heading font-semibold">{{ obj.name }}</h3>
-      <!-- <span>{{ edge.node.title }}</span> -->
-    </div> 
-  </div>
-</section>
-
-
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selected: "",
-     
-    }
-  },
-
-  props: {
-    title: String,
-    description: String,
-    objects: {},
-    tags: {},
-    tagsField: String,
-  },
-  methods: {
-    setSelected: function(tag){
-      this.selected = tag
-    },
-
-    filter: function(tag){
-      if (tag == '')
-        return this.objects
-      
-      var result = []
-
-      for(var i=0; i < this.objects.length; i++){
-          var obj = this.objects[i].node;
-          for (var j=0; j<obj[this.tagsField].length; j++){
-            var membership = obj[this.tagsField][j];
-            if (membership.title == tag){
-              result.push(this.objects[i]);
-              break
-            }
-          }
-      }
-      return result;
-    },
-  },
-}
-</script>

src/components/Team.vue

@@ -0,0 +1,108 @@
+<template>
+  <section class="py-12 px-4 text-center">
+    <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
+      {{ title }}
+    </h2>
+
+    <p class="max-w-xl mx-auto mb-12 text-gray-400">{{ description }}</p>
+    <div class="flex max-w-lg mx-auto mb-12 justify-center border-b-2">
+      <div v-for="(tag, index) in tags" :key="tag.node.id" class="w-1/3 mr-5 pb-2">
+        <a :href="`/#${selected}`"
+          @click="setSelected('', index)"
+          v-if="index == 0"
+          class="pb-2 hover:text-indigo-600 capitalize"
+          :class="{ 'border-b-4 border-indigo-600': activeIndex == index }"
+        >
+          All
+        </a>
+        
+        <a :href="`/#${selected}`"
+          @click="setSelected(tag.node.title, index)"
+          v-if="index != 0"
+          class="pb-2 hover:text-indigo-600 capitalize"
+          :class="{ 'border-b-4 border-indigo-600': activeIndex == index }"
+        >
+          {{ tag.node.title.replace("_", " ") }}
+        </a>
+      </div>
+    </div>
+    <div class="flex flex-wrap -mx-4 transition-all ease-in-out duration-150">
+      <div
+        v-for="obj in filter(selected)"
+        :key="obj.node.id"
+        class="w-1/2 lg:w-1/4 p-4"
+      >
+        <g-link :to="obj.node.path" class="post-card-image-link">
+          <g-image
+            :src="obj.node.image"
+            :alt="obj.node.name || obj.node.title"
+            class="w-1/2 mx-auto mb-4 rounded-full"
+          ></g-image>
+        </g-link>
+        <h3 class="text-xl mb-1 font-semibold font-heading font-semibold">
+          {{ obj.node.name || obj.node.title}}
+        </h3>
+        <!-- <span>{{ edge.node.title }}</span> -->
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+console.log
+export default {
+  data() {
+    var selected = this.$route.hash.replace("#", "")
+    var activeIndex = 0
+
+    for(var i=0; i < this.tags.length; i++){
+      if (this.tags[i].node.title == selected){
+        activeIndex = i;
+      }
+    }
+    return {
+      selected: selected,
+      activeIndex: activeIndex,
+    };
+  },
+
+  props: {
+    title: String,
+    description: String,
+    objects: {},
+    tags: {},
+    tagsField: String,
+  },
+  computed : {
+    url: function(){
+      return window.location.href + "#" + this.selected
+    }
+  },
+  methods: {
+    setSelected: function(tag, index){
+      this.selected = tag
+      this.activeIndex = index
+    },
+
+    filter: function(tag){
+
+      if (tag == '')
+        return this.objects
+      
+      var result = []
+
+      for(var i=0; i < this.objects.length; i++){
+          var obj = this.objects[i].node;
+          for (var j=0; j<obj[this.tagsField].length; j++){
+            var membership = obj[this.tagsField][j];
+            if (membership.title == tag){
+              result.push(this.objects[i]);
+              break
+            }
+          }
+      }
+      return result;
+    }
+  }
+};
+</script>

src/templates/People.vue

@@ -2,7 +2,7 @@
   <Layout>
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
       <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
-        <Group title="THREEFOLD TEAM" description="The heartbeat behind the ThreeFold Movement." :objects="$page.entries.edges" :tags="$page.memberships.edges" tagsField="memberships" />
+        <Team title="THREEFOLD TEAM" description="The heartbeat behind the ThreeFold Movement." :objects="$page.entries.edges" :tags="$page.memberships.edges" tagsField="memberships" />
       </div>
     </div>
   </Layout>
@@ -50,14 +50,14 @@ query ($private: Int){
 
 <script>
 import Pagination from "~/components/Pagination.vue";
-import Group from '~/components/Group.vue';
+import Team from '~/components/Team.vue';
 
 export default {
   metaInfo: {
     title: "People"
   },
   components: {
-    Group,
+    Team,
     Pagination
   },
   computed: {

src/templates/Projects.vue

@@ -2,7 +2,7 @@
   <Layout>
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
       <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
-        <PostListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" />
+        <Team title="THREEFOLD PROJECTS" description="The heartbeat behind the ThreeFold Movement." :objects="$page.entries.edges" :tags="$page.memberships.edges" tagsField="tags" />
       </div>
     </div>
   </Layout>
@@ -42,12 +42,22 @@ query ($private: Int){
       }
     }
   }
+
+  memberships: allProjectTag{
+     edges{
+      node{
+        id
+        title
+        path
+      }
+    }
+  }
 }
 
 </page-query>
 
 <script>
-import PostListItem from '~/components/PostListItem.vue';
+import Team from '~/components/Team.vue';
 import Pagination from "~/components/Pagination.vue";
 
 export default {
@@ -55,7 +65,7 @@ export default {
     title: "Projects"
   },
   components: {
-    PostListItem,
+    Team,
     Pagination
   },
   computed: {