Apply category

gridsome.server.js

@@ -102,7 +102,7 @@ module.exports = function(api) {
 
     api.createPages(async({ graphql, createPage }) => {
         const { data } = await graphql(`{
-          allProjectTag(filter: { title: {in: ["tech", "foundation"]}}) {
+          allProjectTag(filter: { title: {in: ["foundation"]}}) {
             edges {
           node {
             id

src/components/custom/TagFilterHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="top-16 left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
+  <div class="left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
     <header
       class="flex items-center flex-wrap container mx-auto pt-1 pb-0 sm:px-0 transition-all transition-500"
     >
@@ -9,14 +9,15 @@
             >filter:</span
           >
         </div>
-        <div class="sm:block md:hidden">
+        <!-- <div class="sm:block md:hidden">
           <ul class="list-none inline-flex justify-center md:justify-end">
             <li class="py-1 mx-5 cursor-pointer" @click="resetAll()">Reset</li>
           </ul>
-        </div>
+        </div> -->
       </div>
 
       <nav
+        :class="isOpen ? 'block' : 'hidden'"
         class="inline-flex md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent"
       >
         <ul
@@ -29,13 +30,13 @@
                 @click="setActive(0)"
                 class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
               >
-                <span class="capitalize">{{ selected }}</span>
+                <span class="capitalize">{{ selected.replace("_", " ") }}</span>
                 <svg
                   fill="currentColor"
                   viewBox="0 0 20 20"
                   :class="{
                     'rotate-180': active == 0,
-                    'rotate-0': !active == 0,
+                    'rotate-0': active == !0,
                   }"
                   class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
                 >
@@ -47,7 +48,7 @@
                 </svg>
               </button>
               <div
-                v-if="active == 0"
+                v-if="open"
                 x-show="open"
                 x-transition:enter="transition ease-out duration-100"
                 x-transition:enter-start="transform opacity-0 scale-95"
@@ -66,8 +67,8 @@
                     :key="tag.path"
                     class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
                     :href="$url(tag.path)"
-                    @click.self="open = false"
-                    >{{ tag.title }}</a
+                    @click="open = false"
+                    >{{ tag.title.replace("_", " ") }}</a
                   >
                 </div>
               </div>
@@ -75,11 +76,11 @@
           </li>
         </ul>
       </nav>
-      <div class="hidden md:ml-auto md:inline-block md:order-last">
+      <!-- <div class="hidden md:ml-auto md:inline-block md:order-last">
         <ul class="list-none inline-flex justify-center md:justify-end">
           <li class="py-1 mx-5 cursor-pointer" @click="resetAll()">Reset</li>
         </ul>
-      </div>
+      </div> -->
     </header>
   </div>
 </template>
@@ -104,21 +105,22 @@ export default {
       active: null,
     };
   },
-
   methods: {
     setActive(index) {
-      this.active = index;
+      this.active = !this.active;
       this.open = !this.open;
     },
     close(e) {
       if (!this.$el.contains(e.target)) {
         this.open = false;
+        this.active = !this.active;
       }
     },
     resetAll() {
       this.$emit("resetAll", true);
     },
   },
+
   mounted() {
     document.addEventListener("click", this.close);
   },

src/templates/Partners.vue

@@ -16,7 +16,7 @@
 
 <page-query>
 query ($private: Int){
-  entries: allProject (sortBy: "rank", order: DESC, filter: { private: { ne: $private }, tags: { id: {in: ["tech", "foundation"]}}}){
+  entries: allProject (sortBy: "rank", order: DESC, filter: { private: { ne: $private }, tags: { id: {in: ["blockchain", "experience", "technology", "farming", "community", "infrastructure", "impact"]}}}){
     totalCount
     edges {
       node {
@@ -39,7 +39,7 @@ query ($private: Int){
     }
   }
   
-  tags: allProjectTag (filter: { title: {in: ["tech", "foundation"]}}) {
+  tags: allProjectTag (filter: { title: {in: ["foundation"]}}) {
      edges{
       node{
         id
@@ -47,8 +47,7 @@ query ($private: Int){
         path
       }
     }
-}
-
+  }
 }
 </page-query>
 
@@ -70,8 +69,5 @@ export default {
       return res;
     },
   },
-  mounted(){
-    console.log(this.$page)
-  }
 };
 </script>

src/templates/People.vue

@@ -1,75 +0,0 @@
-<template>
-  <Layout>
-    <div
-      class="container sm:pxi-0 mx-auto overflow-x-hidden"
-      :style="{ 'min-height': contentHeight + 'px' }"
-    >
-      <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"
-        />
-      </div>
-    </div>
-  </Layout>
-</template>
-
-<page-query>
-query ($private: Int){
-  entries: allPerson (sortBy: "rank", order: DESC, filter: { private: { ne: $private }}){
-    totalCount
-    edges {
-      node {
-        path
-        content 
-        name
-        rank
-        bio
-        linkedin
-        websites
-        countries
-        cities
-        image(width:800)
-        private
-      }
-    }
-  }
-
-  memberships: allMembership{
-     edges{
-      node{
-        id
-        title
-        path
-      }
-    }
-  }
-}
-
-</page-query>
-
-<script>
-import Pagination from "~/components/Pagination.vue";
-import PostListItem from "~/components/PostListItem.vue";
-
-export default {
-  metaInfo: {
-    title: "People",
-  },
-  components: {
-    PostListItem,
-    Pagination,
-  },
-  computed: {
-    baseurl: function () {
-      return "/people/";
-    },
-    contentHeight() {
-      if (process.isClient) {
-        return window.innerHeight - 100;
-      }
-    },
-  },
-};
-</script>

src/templates/Projects.vue

@@ -1,80 +0,0 @@
-<template>
-  <Layout>
-    <div
-      class="container sm:pxi-0 mx-auto overflow-x-hidden"
-      :style="{ 'min-height': contentHeight + 'px' }"
-    >
-      <div class="flex flex-wrap with-large projects pt-8 pb-8 mx-4 sm:-mx-4">
-        <PostListItem
-          v-for="edge in $page.entries.edges"
-          :key="edge.node.id"
-          :record="edge.node"
-        />
-      </div>
-    </div>
-  </Layout>
-</template>
-
-<page-query>
-
-query ($private: Int){
-  entries: allProject (sortBy: "rank", order: DESC, filter: { private: { ne: $private }}, tags: { id: {in: ["tech", "foundation"]}}){
-    totalCount
-    edges {
-      node {
-        title
-        path
-        members {
-          id
-          name
-          image(width:64, height:64, fit:inside)
-          path
-        },
-        rank
-        linkedin
-        excerpt
-        image(width:800)
-        path
-        timeToRead
-        logo
-      }
-    }
-  }
-
-  memberships: allProjectTag{
-     edges{
-      node{
-        id
-        title
-        path
-      }
-    }
-  }
-}
-
-</page-query>
-
-<script>
-import PostListItem from "~/components/PostListItem.vue";
-import Pagination from "~/components/Pagination.vue";
-
-export default {
-  metaInfo: {
-    title: "Projects",
-  },
-  components: {
-    PostListItem,
-    Pagination,
-  },
-  computed: {
-    baseurl: function () {
-      return "/projects/";
-    },
-    contentHeight() {
-      if (process.isClient) {
-        return window.innerHeight - 100;
-      }
-    },
-  },
-};
-</script>