From 2c8099c6aa661db603b695e60eaa36b7797a38dd Mon Sep 17 00:00:00 2001
From: hamdy <hamdy.a.farag@gmail.com>
Date: Sun, 15 Nov 2020 17:19:23 +0200
Subject: [PATCH] search init

---
 gridsome.config.js   | 28 ++++++++++++++++++++++++++-
 package.json         |  4 +++-
 src/pages/Search.vue | 45 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Search.vue

diff --git a/gridsome.config.js b/gridsome.config.js
index 9d02e6d7d..007a1340d 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -8,7 +8,33 @@ module.exports = {
     siteName: 'ACI',
     siteDescription: 'ThreeFold Partners',
     siteUrl: 'http://localhost:8080',
-    plugins: [{
+    plugins: [
+      {
+        use: 'gridsome-plugin-flexsearch',
+        options: {
+          searchFields: ['name', 'title','excerpt', 'author', 'content'],
+          collections: [
+            {
+              typeName: 'Blog',
+              indexName: 'Blog',
+              fields: ['name', 'title', 'rank', 'excerpt', 'image', 'path', 'datetime', 'author', 'pageInfo']
+            },
+  
+            {
+              typeName: 'Project',
+              indexName: 'Project',
+              fields: ['title', 'rank', 'excerpt', 'image', 'path', 'datetime', 'author', 'pageInfo']
+            },
+            
+            {
+              typeName: 'Person',
+              indexName: 'Person',
+              fields: ['name', 'rank', 'excerpt', 'image', 'path', 'bio', 'pageInfo']
+            },
+          ]
+        }
+      },
+      {
             use: 'gridsome-plugin-tailwindcss',
             options: {
                 tailwindConfig: './tailwind.config.js',
diff --git a/package.json b/package.json
index d7eb20b44..f716901fd 100644
--- a/package.json
+++ b/package.json
@@ -8,12 +8,14 @@
   },
   "dependencies": {
     "@gridsome/source-filesystem": "^0.6.2",
+    "@gridsome/source-graphql": "^0.1.0",
     "@gridsome/transformer-remark": "^0.6.2",
     "@noxify/gridsome-remark-classes": "^1.0.0",
     "@noxify/gridsome-remark-table-align": "^1.0.0",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "gridsome": "^0.7.20",
+    "gridsome": "^0.7.3",
+    "gridsome-plugin-flexsearch": "^1.0.5",
     "gridsome-plugin-tailwindcss": "^3.0.1",
     "gridsome-source-static-meta": "github:noxify/gridsome-source-static-meta#master",
     "lodash": "^4.17.20",
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
new file mode 100644
index 000000000..bf16c7f33
--- /dev/null
+++ b/src/pages/Search.vue
@@ -0,0 +1,45 @@
+<template>
+  <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 searchResults" :key="edge.node.id" :record="edge.node" />
+      </div>
+    </div>
+     <!-- <div class="pagination flex justify-center mb-8">
+        <Pagination
+          :baseUrl="baseurl"
+          :currentPage="searchResults.pageInfo.currentPage"
+          :totalPages="searchResults.pageInfo.totalPages"
+          :maxVisibleButtons="5"
+          v-if="searchResults.pageInfo.totalPages > 1"
+        />
+      </div> -->
+      {{searchResults}}
+  </Layout>
+</template>
+
+<script>
+import PostListItem from '~/components/PostListItem.vue';
+import Pagination from "~/components/Pagination.vue";
+
+export default {
+  metaInfo: {
+    title: "Search"
+  },
+  data: () => ({
+    q: 'the'
+  }),
+  computed: {
+    searchResults () {
+      const searchTerm = this.q
+      if (searchTerm.length < 3) return []
+      return this.$search.search({ query: searchTerm, limit: 5 })
+    }
+  },
+  components: {
+    PostListItem,
+    Pagination
+  },
+
+}
+</script>