From 2323e203448ff442481cc2886b56f5c5904a2fc9 Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <maks1ms@noreply.localhost>
Date: Thu, 19 May 2022 05:59:40 +0000
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=B5=D1=82=20?=
 =?UTF-8?q?=D0=B3=D0=BB=D0=B0=D0=B2=D0=BD=D1=83=D1=8E=20=D1=81=D1=82=D1=80?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20(#6)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- добавляет поиск на главную страницу
- добавляет alpine.js и fuse.js
- добавляет генерацию /search-index.json

Co-authored-by: Maxim Slipenko <maxim@slipenko.com>
Reviewed-on: https://git.slipenko.com/wiki/site/pulls/6
Fix: #1
---
 package-lock.json                  | 26 ++++++++++++++++
 package.json                       |  5 ++-
 src/js/index.js                    |  7 +++++
 src/pages/index.njk                | 50 +++++++++++++++++++++++++++++-
 src/pages/search-index.11tydata.js | 16 ++++++++++
 src/pages/search-index.njk         |  7 +++++
 6 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/search-index.11tydata.js
 create mode 100644 src/pages/search-index.njk

diff --git a/package-lock.json b/package-lock.json
index 7a8713f..3afb90c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -521,6 +521,19 @@
                 "@types/node": "*"
             }
         },
+        "@vue/reactivity": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+            "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+            "requires": {
+                "@vue/shared": "3.1.5"
+            }
+        },
+        "@vue/shared": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+            "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
+        },
         "a-sync-waterfall": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -584,6 +597,14 @@
                 "uri-js": "^4.2.2"
             }
         },
+        "alpinejs": {
+            "version": "3.10.2",
+            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.2.tgz",
+            "integrity": "sha512-P6DTX78J94FgsskS3eS23s26hfb0NWQZUidBnkUK7fId1x64/kLm5E79lL3HNItUmHDCKOHvfP8EAcuCVab89w==",
+            "requires": {
+                "@vue/reactivity": "~3.1.1"
+            }
+        },
         "ansi-regex": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
@@ -2882,6 +2903,11 @@
             "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
             "dev": true
         },
+        "fuse.js": {
+            "version": "6.6.2",
+            "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+            "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA=="
+        },
         "gauge": {
             "version": "2.7.4",
             "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
diff --git a/package.json b/package.json
index 411e271..6561859 100644
--- a/package.json
+++ b/package.json
@@ -35,5 +35,8 @@
         "stylelint-config-standard": "^25.0.0",
         "tailwindcss": "^3.0.24"
     },
-    "dependencies": {}
+    "dependencies": {
+        "alpinejs": "^3.10.2",
+        "fuse.js": "^6.6.2"
+    }
 }
diff --git a/src/js/index.js b/src/js/index.js
index e69de29..8563a40 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -0,0 +1,7 @@
+import Alpine from 'alpinejs'
+import Fuse from 'fuse.js'
+
+window.Fuse = Fuse
+window.Alpine = Alpine
+
+Alpine.start()
diff --git a/src/pages/index.njk b/src/pages/index.njk
index cc605c2..6034906 100644
--- a/src/pages/index.njk
+++ b/src/pages/index.njk
@@ -4,5 +4,53 @@
     </a>
 </header>
 <main>
-    <p>Привет мир!</p>
+    <div class="flex justify-center mx-6">
+        <div 
+            class="relative w-full md:w-[70vw] xl:w-[60vw]"
+            x-data="{
+                idx: null,
+                searchTerm: '',
+                focused: false,
+                async init() {
+                    const response = await fetch('/search-index.json');
+                    const data = await response.json();
+                    this.idx = new Fuse(data, { keys: ['title'] });
+                },
+                search() {
+                    console.log(this.idx.search('в'));
+                },
+                get filteredItems() {
+                    if (this.searchTerm.length === 0) {
+                        return [];
+                    }
+
+                    return this.idx?.search(this.searchTerm);
+                },
+                get open() {
+                    return this.focused && this.searchTerm.length !==  0;
+                }
+            }"
+            @click.outside="focused = false"
+        >
+            <input 
+                x-ref="input"
+                x-model="searchTerm"
+                x-on:focus="focused = true"
+                class="border-2 text-4xl px-6 py-2 rounded-3xl w-full focus:outline-none"
+                :class="{ 'rounded-b-none': open }"
+            >
+            <div x-show="open" class="absolute bg-white border-2 border-t-0 rounded-b-3xl py-2 text-2xl w-full">
+                <ul>
+                    <template x-for="item in filteredItems" :key="item.item.url">
+                        <li class="px-6 py-2 hover:bg-slate-100">
+                            <a x-text="item.item.title" x-bind:href="item.item.url" class="after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:content-[' ']" />
+                        </li>
+                    </template>
+                    <template x-if="filteredItems.length == 0">
+                        <p class="px-6 py-2">Ничего не найдено</p>
+                    </template>
+                </ul>
+            </div>
+        </div>
+    </div>
 </main>
\ No newline at end of file
diff --git a/src/pages/search-index.11tydata.js b/src/pages/search-index.11tydata.js
new file mode 100644
index 0000000..0f8f503
--- /dev/null
+++ b/src/pages/search-index.11tydata.js
@@ -0,0 +1,16 @@
+module.exports = {
+  permalink: '/search-index.json',
+
+  eleventyComputed: {
+    notes: function (data) {
+      return data.collections.notes.map((x) => {
+        const pathName = x.filePathStem.replace('index', '')
+
+        return {
+          title: x.data.title,
+          url: pathName
+        }
+      })
+    }
+  }
+}
diff --git a/src/pages/search-index.njk b/src/pages/search-index.njk
new file mode 100644
index 0000000..9abc3ee
--- /dev/null
+++ b/src/pages/search-index.njk
@@ -0,0 +1,7 @@
+[
+  {% for note in notes %} 
+  { 
+    "title":"{{ note.title }}",
+    "url":"{{ note.url | url }}" 
+  }{% if loop.last == false %},{% endif %} {% endfor %}
+]
\ No newline at end of file