Add searchbox & tag filter

src/components/custom/FilterDropdown.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="inline-flex ml-auto">
+    <header
+      class="
+        inline-flex
+        flex-wrap
+        container
+        px-4
+        py-1
+        sm:px-0
+        transition-all transition-500
+      "
+    >
+      <nav class="inline-flex md:order-2 sm:w-28 px-2 pt-2 pb-4 sm:flex sm:p-0">
+        <ul
+          class="
+            list-none
+            sm:flex
+            justify-left
+            capitalize
+            transition-all transition-500
+          "
+        >
+          <!-- Topics -->
+          <li class="py-1 mx-5">
+            <div class="relative" x-data="{ open: false }">
+              <button
+                @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">{{ topic.replace(/_/g, " ") }}</span>
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  :class="{
+                    'rotate-180': active == 0,
+                    'rotate-0': !active == 0,
+                  }"
+                  class="
+                    inline
+                    w-4
+                    h-4
+                    mt-1
+                    ml-1
+                    transition-transform
+                    duration-200
+                    transform
+                    md:-mt-1
+                  "
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+              </button>
+              <div
+                v-if="active == 0"
+                x-show="open"
+                x-transition:enter="transition ease-out duration-100"
+                x-transition:enter-start="transform opacity-0 scale-95"
+                x-transition:enter-end="transform opacity-100 scale-100"
+                x-transition:leave="transition ease-in duration-75"
+                x-transition:leave-start="transform opacity-100 scale-100"
+                x-transition:leave-end="transform opacity-0 scale-95"
+                class="
+                  absolute
+                  w-full
+                  mt-2
+                  origin-top-right
+                  rounded-md
+                  shadow-lg
+                  md:w-48
+                  z-30
+                "
+              >
+                <div
+                  v-if="open"
+                  class="
+                    w-64
+                    max-h-10
+                    px-2
+                    py-2
+                    bg-white
+                    rounded-md
+                    shadow
+                    dark:bg-gray-700
+                  "
+                >
+                  <a
+                    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
+                    "
+                    v-for="topic in topics"
+                    :key="topic"
+                    @click.self="
+                      setTopic(topic);
+                      open = false;
+                    "
+                    >{{ topic.replace(/_/g, " ") }}</a
+                  >
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  </div>
+</template>
+
+<script>
+/*
+ * I'm a lazy guy, so i used this script
+ * https://codepen.io/ninaregli/pen/OjeMLP
+ * to calculate the current scroll position
+ *
+ * Will be used to add/remove the additional
+ * css classes to show the sticky navbar
+ */
+
+export default {
+  props: ["topics"],
+  data: function () {
+    return {
+      isOpen: false,
+      open: false,
+      active: null,
+      listArchive: false,
+      topic: "Popular Topics",
+    };
+  },
+
+  methods: {
+    setActive(index) {
+      this.active = index;
+      this.open = !this.open;
+    },
+    setTopic(event) {
+      this.$emit("selectedTopic", event);
+      this.topic = event;
+    },
+    close(e) {
+      if (!this.$el.contains(e.target)) {
+        this.open = false;
+      }
+    },
+  },
+
+  mounted() {
+    document.addEventListener("click", this.close);
+  },
+  beforeDestroy() {
+    document.removeEventListener("click", this.close);
+  },
+};
+</script>

src/components/custom/SearchBox.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="inline-flex rounded-full border-grey-light test">
+    <button>
+      <span class="w-auto inline-flex justify-end items-center text-grey p-2">
+        <font-awesome :icon="['fas', 'search']" />
+      </span>
+    </button>
+    <input
+      class="rounded mr-4"
+      type="text"
+      placeholder="Search"
+      :value="value"
+      @input="$emit('input', $event.target.value)"
+    />
+  </div>
+</template>
+<script>
+export default {
+  props: ["value"],
+};
+</script>
+<style scoped>
+svg {
+  color: #9fa3b6;
+}
+
+.test {
+  border: 1px solid #9fa3b6;
+  /* width: 10%; */
+}
+
+input:focus {
+  outline: none;
+  border: none;
+}
+</style>

src/pages/Blog.vue

@@ -1,6 +1,6 @@
 <template>
   <Layout>
-    <NewsFilterHeader
+    <!-- <NewsFilterHeader
       @selectedTopic="setTopic"
       @selectedYear="setYear"
       @selectedMonth="setMonth"
@@ -8,20 +8,51 @@
       :topics="topics"
       :years="years"
       :months="months"
-    />
+    /> -->
     <div
       class="container sm:pxi-0 mx-auto mt-8"
       :style="{ 'min-height': contentHeight + 'px' }"
     >
-      <div class="flex flex-wrap news pt-12 mt-8 pb-8 mx-4 sm:-mx-4">
+      <div class="flex">
+        <FilterDropdown
+          class="xs:w-1/2"
+          @selectedTopic="setTopic"
+          :topics="topics"
+        />
+        <SearchBox class="xs:w-1/2" v-model="search" />
+      </div>
+
+      <div v-if="search !== ''">
+        <div v-if="searchResults.length > 0">
+          <div class="flex flex-wrap news pt-12 pb-8 mt-8 mx-4 sm:-mx-4">
+            <PostListItem
+              v-for="post in searchResults"
+              :key="post.node.id"
+              :record="post.node"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="flex flex-wrap news pt-12 pb-8 mt-8 mx-4 sm:-mx-4">
         <PostListItem
           v-for="post in blogs.edges"
           :key="post.node.id"
           :record="post.node"
         />
       </div>
-      <div class="text-center" v-if="blogs.edges.length == 0">
+
-        <h2 class="inlibe-flex mx-auto text-gray-700 w-3/4">No results</h2>
+      <div
+        class="text-center"
+        v-if="
+          blogs.edges.length == 0 ||
+          searchResults.length == 0 ||
+          searchResults == ''
+        "
+      >
+        <h2 class="inlibe-flex mx-auto text-gray-700 w-3/4">
+          Your search didn't return any results. Please try again.
+        </h2>
       </div>
       <div class="pagination flex justify-center mb-8">
         <Pagination
@@ -29,7 +60,7 @@
           :currentPage="blogs.pageInfo.currentPage"
           :totalPages="blogs.pageInfo.totalPages"
           :maxVisibleButtons="5"
-          v-if="blogs.pageInfo.totalPages > 1 && blogs.edges.length > 0"
+          v-if="searchResults.length > 7 && blogs.edges.length > 7"
         />
       </div>
     </div>
@@ -90,7 +121,8 @@ query($page: Int){
 import PostListItem from "~/components/custom/Cards/PostListItem.vue";
 import Pagination from "~/components/custom/Pagination.vue";
 import NewsFilterHeader from "~/components/custom/NewsFilterHeader.vue";
-
+import SearchBox from "~/components/custom/SearchBox.vue";
+import FilterDropdown from "~/components/custom/FilterDropdown.vue";
 export default {
   data() {
     const allMonths = [
@@ -114,13 +146,14 @@ export default {
     r.forEach((year) => years.push(String(year)));
 
     return {
-      selectedTopic: "All Topics",
+      selectedTopic: "Popular Topics",
       selectedYear: "All Years",
       selectedMonth: "All Months",
       months: allMonths,
       years: years,
       listArchive: false,
       archiveButtonText: "Archive",
+      search: "",
     };
   },
 
@@ -174,6 +207,8 @@ export default {
     PostListItem,
     Pagination,
     NewsFilterHeader,
+    SearchBox,
+    FilterDropdown,
   },
   methods: {
     setTopic: function (topic) {
@@ -186,7 +221,7 @@ export default {
       this.selectedMonth = month;
     },
     resetAll() {
-      this.selectedTopic = "All Topics";
+      this.selectedTopic = "Popular Topics";
       this.selectedYear = "All Years";
       this.selectedMonth = "All Months";
     },
@@ -237,7 +272,7 @@ export default {
   },
   computed: {
     topics: function () {
-      var res = ["All Topics"];
+      var res = ["Popular Topics"];
       this.$page.topics.edges.forEach((edge) => res.push(edge.node.title));
       return res;
     },
@@ -265,7 +300,7 @@ export default {
         var node = old.edges[i].node;
 
         // Now check topic
-        var topics = ["All Topics"];
+        var topics = ["Popular Topics"];
         node.tags.forEach((tag) => topics.push(tag.title));
 
         var nodeDate = new Date(node.datetime);
@@ -286,6 +321,13 @@ export default {
     baseurl() {
       return "/blog/";
     },
+    searchResults() {
+      return this.$page.entries.edges.filter((blog) => {
+        return blog.node.title
+          .toLowerCase()
+          .includes(this.search.toLowerCase().trim());
+      });
+    },
   },
 };
 </script>

src/pages/News.vue

@@ -1,6 +1,6 @@
 <template>
   <Layout>
-    <NewsFilterHeader
+    <!-- <NewsFilterHeader
       @selectedTopic="setTopic"
       @selectedYear="setYear"
       @selectedMonth="setMonth"
@@ -8,21 +8,43 @@
       :topics="topics"
       :years="years"
       :months="months"
-    />
+    /> -->
 
     <div
       class="container sm:pxi-0 mx-auto overflow-hidden"
       :style="{ 'min-height': contentHeight + 'px' }"
     >
-      <div class="flex flex-wrap news pt-12 mt-8 pb-8 mx-4 sm:-mx-4">
+      <div class="flex ml-auto my-5">
+        <FilterDropdown @selectedTopic="setTopic" :topics="topics" />
+        <SearchBox v-model="search" />
+      </div>
+
+      <div v-if="search !== ''">
+        <div v-if="searchResults.length > 0">
+          <div class="flex flex-wrap news pt-12 pb-8 mt-8 mx-4 sm:-mx-4">
+            <PostListItem
+              v-for="post in searchResults"
+              :key="post.node.id"
+              :record="post.node"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="flex flex-wrap news pt-12 mt-8 pb-8 mx-4 sm:-mx-4">
         <PostListItem
           v-for="edge in news.edges"
           :key="edge.node.id"
           :record="edge.node"
         />
       </div>
-      <div class="text-center" v-if="news.edges.length == 0">
+      <div
-        <h2 class="inlibe-flex mx-auto text-gray-700 w-3/4">No results</h2>
+        class="text-center"
+        v-if="news.edges.length == 0 || searchResults.length == 0"
+      >
+        <h2 class="inlibe-flex mx-auto text-gray-700 w-3/4">
+          Your search didn't return any results. Please try again.
+        </h2>
       </div>
     </div>
     <div class="pagination flex justify-center mb-8">
@@ -31,7 +53,7 @@
         :currentPage="$page.entries.pageInfo.currentPage"
         :totalPages="$page.entries.pageInfo.totalPages"
         :maxVisibleButtons="5"
-        v-if="$page.entries.pageInfo.totalPages > 1 && news.edges.length > 0"
+        v-if="searchResults.length > 7 && news.edges.length > 7"
       />
     </div>
   </Layout>
@@ -85,7 +107,8 @@ query($page: Int){
 import NewsFilterHeader from "~/components/custom/NewsFilterHeader.vue";
 import PostListItem from "~/components/custom/Cards/PostListItem.vue";
 import Pagination from "~/components/custom/Pagination.vue";
-
+import SearchBox from "~/components/custom/SearchBox.vue";
+import FilterDropdown from "~/components/custom/FilterDropdown.vue";
 export default {
   data() {
     const allMonths = [
@@ -109,13 +132,14 @@ export default {
     r.forEach((year) => years.push(String(year)));
 
     return {
-      selectedTopic: "All Topics",
+      selectedTopic: "Popular Topics",
       selectedYear: "All Years",
       selectedMonth: "All Months",
       months: allMonths,
       years: years,
       listArchive: false,
       archiveButtonText: "Archive",
+      search: "",
     };
   },
 
@@ -166,6 +190,8 @@ export default {
     PostListItem,
     Pagination,
     NewsFilterHeader,
+    SearchBox,
+    FilterDropdown,
   },
   methods: {
     setTopic: function (topic) {
@@ -178,7 +204,7 @@ export default {
       this.selectedMonth = month;
     },
     resetAll() {
-      this.selectedTopic = "All Topics";
+      this.selectedTopic = "Popular Topics";
       this.selectedYear = "All Years";
       this.selectedMonth = "All Months";
     },
@@ -245,7 +271,7 @@ export default {
   },
   computed: {
     topics: function () {
-      var res = ["All Topics"];
+      var res = ["Popular Topics"];
       this.$page.topics.edges.forEach((edge) => res.push(edge.node.title));
       return res;
     },
@@ -277,7 +303,7 @@ export default {
         // if (!selected) continue;
 
         // Now check topic
-        var topics = ["All Topics"];
+        var topics = ["Popular Topics"];
         node.tags.forEach((tag) => topics.push(tag.title));
 
         if (!topics.includes(this.selectedTopic)) continue;
@@ -306,6 +332,13 @@ export default {
       }
       return img;
     },
+    searchResults() {
+      return this.$page.entries.edges.filter((post) => {
+        return post.node.excerpt
+          .toLowerCase()
+          .includes(this.search.toLowerCase().trim());
+      });
+    },
   },
 };
 </script>