feat: implement algolia docsearch (#15)

* feat: implement algolia docsearch

* feat: update docsearch primary color

package.json

@@ -14,6 +14,7 @@
         "vite": "^5.0"
     },
     "dependencies": {
+        "@docsearch/js": "^3.6.0",
         "@tailwindcss/typography": "^0.5.12",
         "shiki": "^1.2.3"
     }

resources/css/app.css

@@ -1,3 +1,5 @@
+@import "docsearch.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

resources/css/docsearch.css

@@ -0,0 +1,41 @@
+:root {
+    --docsearch-primary-color: #65a30d !important;
+}
+
+.DocSearch.DocSearch-Button {
+    @apply inline-flex w-auto lg:w-[16rem] items-center ml-0 px-3 p-5 lg:py-[1.3rem] transition bg-amber-400 hover:bg-amber-400 ring-1 hover:ring-1 ring-amber-300 hover:ring-amber-200 rounded-full font-semibold
+}
+
+.DocSearch-Search-Icon {
+    @apply stroke-2 w-[17px] h-[17px] !important
+}
+
+.DocSearch-Button-Placeholder {
+    @apply hidden lg:block text-black p-0 font-medium !important
+}
+
+.DocSearch-Button-Container {
+    @apply inline-flex gap-2
+}
+
+.DocSearch-Button-Keys {
+    all: unset !important;
+    @apply hidden lg:block !important
+}
+
+.DocSearch-Button-Key {
+    all: unset !important;
+    @apply text-black font-exception font-medium text-lg !important
+}
+
+.DocSearch-Button-Key--pressed {
+    @apply translate-x-0 !important
+}
+
+.DocSearch-Form {
+    @apply ring-2 ring-lime-600 !important
+}
+
+.DocSearch-MagnifierLabel, .DocSearch-Reset {
+    @apply text-lime-600 !important
+}

resources/js/app.js

@@ -1 +1,2 @@
 import './bootstrap';
+import './docsearch';

resources/js/docsearch.js

@@ -0,0 +1,11 @@
+import docsearch from '@docsearch/js';
+
+import '@docsearch/css';
+
+docsearch({
+    container: '#search',
+    appId: 'ZZSBJRTP9N',
+    indexName: 'laravel-errors',
+    apiKey: 'afe4b786abd24d3123d50c7ff21e544d',
+    placeholder: 'Search'
+});

resources/views/components/layouts/navigation.blade.php

@@ -2,21 +2,8 @@
     <div class="max-w-7xl mx-auto p-5">
         <div class="flex items-center justify-between">
             <x-logo />
-            <div class="inline-flex gap-5">
-                <button class="border border-amber-300 rounded-full px-5 py-2 font-semibold hidden sm:inline-flex items-center gap-16 hover:border-amber-200 transition-colors">
-                    <div class="inline-flex items-center gap-1">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" class="text-black" >
-                            <path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
-                        </svg>
-                        <span>Search a solution</span>
-                    </div>
-                    <div class="hidden lg:inline-flex items-center">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-black">
-                            <path d="M6 14c-2.206 0-4 1.794-4 4s1.794 4 4 4a4.003 4.003 0 0 0 3.998-3.98H10V16h4v2.039h.004A4.002 4.002 0 0 0 18 22c2.206 0 4-1.794 4-4s-1.794-4-4-4h-2v-4h2c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4v2h-4V5.98h-.002A4.003 4.003 0 0 0 6 2C3.794 2 2 3.794 2 6s1.794 4 4 4h2v4H6zm2 4c0 1.122-.879 2-2 2s-2-.878-2-2 .879-2 2-2h2v2zm10-2c1.121 0 2 .878 2 2s-.879 2-2 2-2-.878-2-2v-2h2zM16 6c0-1.122.879-2 2-2s2 .878 2 2-.879 2-2 2h-2V6zM6 8c-1.121 0-2-.878-2-2s.879-2 2-2 2 .878 2 2v2H6zm4 2h4v4h-4v-4z"></path>
-                        </svg>
-                        <span>K</span>
-                    </div>
-                </button>
+            <div class="inline-flex items-center gap-5">
+                <div id="search"></div>
                 <div class="inline-flex items-center gap-3">
                     <a href="https://github.com/dasundev/laravel-errors" target="_blank">
                         <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" fill="currentColor" class="text-black hover:text-gray-800 transition-colors">