Создает главную страницу (#6)

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

Co-authored-by: Maxim Slipenko <maxim@slipenko.com>
Reviewed-on: #6
Fix: #1

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",

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"
+    }
 }

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()

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>

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
+        }
+      })
+    }
+  }
+}

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 %}
+]