Add filtration url

content/person/sophie_monpeyssen/sophie_monpeyssen.md

@@ -2,7 +2,7 @@
 id: sophie_monpeyssen
 name: Sophie Monpeyssen
 rank: 4
-memberships: guradian, ambassador
+memberships: guardian, ambassador
 bio: Sophie has devoted herself to the study of healthcare philosophies and practices that harmonize mind, body and spirit, including sophrology and massage. She is a graduate of the Sorbonne holding an MA in Musicology, Psychology and Pedagogy. Inspired by her training with Spiritual Elders since 2007, Sophie coaches companies and individuals to become the best version of themselves.
 excerpt: Co-Founder & CEO - Le Ciel Foundation
 linkedin: https://www.linkedin.com/in/sophie-monpeyssen-a92747179/

src/components/Team.vue

@@ -6,21 +6,27 @@
 
     <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">
+      <div class="w-1/3 mr-5 pb-2">
-        <a :href="`/#${selected}`"
+        <a
-          @click="setSelected('', index)"
+          href="#"
-          v-if="index == 0"
+          @click="setSelected('', -1)"
           class="pb-2 hover:text-indigo-600 capitalize"
-          :class="{ 'border-b-4 border-indigo-600': activeIndex == index }"
+          :class="{ 'border-b-4 border-indigo-600': activeIndex == 0 }"
         >
           All
         </a>
-        
+      </div>
-        <a :href="`/#${selected}`"
+
+      <div
+        v-for="(tag, index) in tags"
+        :key="tag.node.id"
+        class="w-1/3 mr-5 pb-2"
+      >
+        <a
+          :href="`#${tag.node.title}`"
           @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 }"
+          :class="{ 'border-b-4 border-indigo-600': activeIndex == index + 1 }"
         >
           {{ tag.node.title.replace("_", " ") }}
         </a>
@@ -40,7 +46,7 @@
           ></g-image>
         </g-link>
         <h3 class="text-xl mb-1 font-semibold font-heading font-semibold">
-          {{ obj.node.name || obj.node.title}}
+          {{ obj.node.name || obj.node.title }}
         </h3>
         <!-- <span>{{ edge.node.title }}</span> -->
       </div>
@@ -49,14 +55,13 @@
 </template>
 
 <script>
-console.log
 export default {
   data() {
-    var selected = this.$route.hash.replace("#", "")
+    var selected = this.$route.hash.replace("#", "");
-    var activeIndex = 0
+    var activeIndex = 0;
 
-    for(var i=0; i < this.tags.length; i++){
+    for (var i = 0; i < this.tags.length; i++) {
-      if (this.tags[i].node.title == selected){
+      if (this.tags[i].node.title == selected) {
         activeIndex = i;
       }
     }
@@ -73,36 +78,34 @@ export default {
     tags: {},
     tagsField: String,
   },
-  computed : {
+  computed: {
-    url: function(){
+    url: function () {
-      return window.location.href + "#" + this.selected
+      return window.location.href + "#" + this.selected;
-    }
+    },
   },
   methods: {
-    setSelected: function(tag, index){
+    setSelected: function (tag, index) {
-      this.selected = tag
+      this.selected = tag;
-      this.activeIndex = index
+      this.activeIndex = index + 1;
     },
 
-    filter: function(tag){
+    filter: function (tag) {
+      if (tag == "") return this.objects;
 
-      if (tag == '')
+      var result = [];
-        return this.objects
-      
-      var result = []
 
-      for(var i=0; i < this.objects.length; i++){
+      for (var i = 0; i < this.objects.length; i++) {
-          var obj = this.objects[i].node;
+        var obj = this.objects[i].node;
-          for (var j=0; j<obj[this.tagsField].length; j++){
+        for (var j = 0; j < obj[this.tagsField].length; j++) {
-            var membership = obj[this.tagsField][j];
+          var membership = obj[this.tagsField][j];
-            if (membership.title == tag){
+          if (membership.title == tag) {
-              result.push(this.objects[i]);
+            result.push(this.objects[i]);
-              break
+            break;
-            }
           }
+        }
       }
       return result;
-    }
+    },
-  }
+  },
 };
 </script>