Implement search

Author: joedixon

resources/css/custom.css

@@ -40,3 +40,7 @@ svg .secondary {
 nav.dashboard-nav a.active {
     @apply border-green-primary text-green-primary;
 }
+
+a > span > em {
+    @apply bg-green-light;
+}

resources/js/app.js

@@ -8,6 +8,7 @@ import "cookieconsent/build/cookieconsent.min.css";
 import "choices.js/public/assets/styles/choices.css";
 
 require('./bootstrap');
+require('./search');
 
 // Initialise cookie consent.
 document.addEventListener('DOMContentLoaded', () => {

resources/js/search.js

@@ -0,0 +1,19 @@
+import algoliasearch from 'algoliasearch/lite';
+
+const client = algoliasearch(process.env.MIX_ALGOLIA_APP_ID, process.env.MIX_ALGOLIA_SECRET)
+const index = client.initIndex(process.env.MIX_ALGOLIA_INDEX)
+
+window.search = (event) => {
+    // If the input is empty, return no results.
+    if (event.target.value.length === 0) {
+        return Promise.resolve({ hits: [] })
+    }
+
+    // Perform the search using the provided input.
+    return index.search(event.target.value, {
+        hitsPerPage: 5,
+        attributesToSnippet: [
+            'body:10'
+        ]
+    });
+}

resources/views/layouts/_nav.blade.php

@@ -62,18 +62,38 @@
                 </div>
             </div>
             <div class="flex-1 flex items-center justify-center px-2 lg:ml-6 lg:justify-end">
-                <div class="max-w-lg w-full lg:max-w-xs">
-                    <form action="{{ route('forum') }}" method="GET">
-                        <label for="search" class="sr-only">Search</label>
-                        <div class="relative">
-                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                            <input type="text" name="search" id="search" class="nav-search block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:border-blue-300 focus:shadow-outline-blue sm:text-sm transition duration-150 ease-in-out" placeholder="Search for threads..." />
+                <div class="max-w-lg w-full lg:max-w-xs" x-data="{ results: [] }">
+                    <label for="search" class="sr-only">Search</label>
+                    <div class="relative">
+                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                            <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                            </svg>
                         </div>
-                    </form>
+                        <input 
+                            @click.away="results = []" 
+                            @keyup="search(event).then(function({ hits }) { results = hits; })" 
+                            type="text" 
+                            name="search" 
+                            id="search" 
+                            class="nav-search block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:border-blue-300 focus:shadow-outline-blue sm:text-sm transition duration-150 ease-in-out" 
+                            placeholder="Search for threads..." 
+                        />
+                        <template x-if="results.length > 0">
+                            <div 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="mt-2 origin-top-right absolute right-0 w-full rounded-md shadow-lg">
+                                <div class="rounded-md bg-white shadow-xs w-full">
+                                    <div class="py-1">
+                                        <template x-for="result in results" :key="result.subject">
+                                            <a :href="result.url" class="block px-4 py-2 text-base leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">
+                                                <span class="block font-bold" x-html="result._highlightResult.subject.value"></span>
+                                                <span class="block text-sm txt-gray-400" x-html="result._snippetResult.body.value"></span>
+                                            </a>
+                                        </template>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
                 </div>
             </div>
             <div class="flex items-center lg:hidden">

tailwind.config.js

@@ -5,6 +5,7 @@ module.exports = {
     extend: {
       colors: {
         green: {
+          light: '#baebe1',
           primary: '#18bc9c',
           dark: '#15a589',
           darker: '#12826c',