feat(#197): add search to docs site (#507)

* docs: added full text search component FullTextSearch.vue and search field in default.vue (#197)

* docs: code formatting(#197)

* Revert "docs: code formatting(#197)"

This reverts commit 0c60fad.

* Revert "docs: added full text search component FullTextSearch.vue and search field in default.vue (#197)"

This reverts commit 3146c18.

* chore(#197): remove home from horizontal menu

* feat(#197): add search component to sidebar

* chore(#197): add .nvmrc

* chore(#197): add deep search

* chore(#197): fixed modules search link

* chore(#197): update search

Co-authored-by: Dave Connerth <captaindav@gmail.com>

docs/.nvmrc

@@ -0,0 +1 @@
+v16.14.2

docs/components/app/Header.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="w-full navbar bg-white">
     <div class="flex-none" :class="{ 'lg:hidden': $route.path !== '/' }">
+      <!-- Sidebar menu -->
       <label for="sidebar" class="btn btn-square btn-ghost">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -17,12 +18,16 @@
         </svg>
       </label>
     </div>
+
+    <!-- Logo / home link -->
     <NuxtLink class="flex-1 px-2 mx-2 flex" tag="div" to="/">
       <AppLogo class="mr-1 w-10" />
       <span class="block text-2xl mt-2.5">{{ title }}</span>
     </NuxtLink>
+
+    <!-- Main menu -->
     <div class="flex-none hidden lg:block">
-      <AppMenu class="horizontal" />
+      <AppMenu class="horizontal" :home="false" />
     </div>
   </div>
 </template>

docs/components/app/Menu.vue

@@ -1,7 +1,7 @@
 <template>
   <ul class="menu">
     <slot name="title" />
-    <li v-for="(item, key) of $store.state.menu" :key="key">
+    <li v-for="(item, key) of items" :key="key">
       <component :is="item.component" class="rounded-btn" v-bind="item.props">
         <component
           :is="`app-icon-${item.icon}`"
@@ -35,6 +35,17 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    home: {
+      type: Boolean,
+      default: true
+    }
   },
+
+  computed: {
+    items: ({ $store, home }) => home
+      ? $store.state.menu
+      : $store.state.menu.filter((o) => o.icon !== 'home')
+  }
 };
 </script>

docs/components/app/Search.vue

@@ -0,0 +1,86 @@
+<template>
+  <ul class="mb-5 menu">
+    <li slot="title" class="menu-title">
+      <span>Search</span>
+    </li>
+    <li>
+      <div class="form-control">
+        <input
+          v-model="model"
+          type="text"
+          placeholder=""
+          class="input input-bordered"
+        >
+      </div>
+    </li>
+
+    <!-- Results -->
+    <template v-if="isResults">
+      <template v-for="type of Object.keys(results)">
+        <template v-if="results[type].length">
+          <li :key="type" />
+          <li
+            v-for="item of results[type]"
+            :key="item.id"
+          >
+            <NuxtLink
+              class="rounded-btn"
+              :to="item.path"
+            >
+              <component
+                :is="`app-icon-${type}`"
+                class="inline-block w-5 h-5 mr-2 stroke-current text-gray-400"
+              />
+              {{ item.title }}
+            </NuxtLink>
+          </li>
+        </template>
+      </template>
+    </template>
+
+    <!-- No results -->
+    <li v-else-if="model && !isResults">
+      <span class="rounded-btn">No results</span>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    model: '',
+    results: {
+      api: [],
+      guide: [],
+      modules: [],
+    },
+  }),
+
+  computed: {
+    isResults: ({ results }) => results.api.length || results.guide.length || results.modules.length
+  },
+
+  watch: {
+    async model() {
+      // Empty results if model is empty.
+      if (!this.model) {
+        this.results = {
+          api: [],
+          guide: [],
+          modules: [],
+        }
+        return
+      }
+
+      // Search all available data.
+      for (const type of ['api', 'guide', 'modules']) {
+        const results = await this.$content(type, { deep: true })
+          .search(this.model)
+          .limit(3)
+          .fetch()
+        this.results[type] = results
+      }
+    }
+  }
+}
+</script>

docs/components/app/Sidebar.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="px-1 pt-20 overflow-y-auto w-80 bg-base-100">
+    <!-- Search -->
+    <AppSearch class="mb-5" />
+
     <!-- Recent documents -->
     <ul v-if="$store.state.recent.length" class="mb-5 menu">
       <li slot="title" class="menu-title">