выносит поиск в отдельный блок

.eleventy.js

@@ -41,6 +41,7 @@ module.exports = (eleventyConfig) => {
       input: 'src',
       output: 'dist',
       layouts: 'layouts',
+      includes: 'includes',
       data: 'data'
     }
   }

.stylelintrc.json

@@ -1,3 +1,6 @@
 {
-    "extends": "stylelint-config-standard"
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "selector-class-pattern": null
+    }
 }

src/css/components/index.css

@@ -1 +1,2 @@
 @import "article-content.css";
+@import "search.css";

src/css/components/search.css

@@ -0,0 +1,29 @@
+.search {
+  @apply relative w-full md:w-[70vw] xl:w-[60vw];
+}
+
+.search__input {
+  @apply w-full px-6 py-2 text-4xl border-2 rounded-3xl focus:outline-none;
+}
+
+.search__input_opened {
+  @apply rounded-b-none;
+}
+
+.search__sugestions-list {
+  @apply absolute w-full py-2 text-2xl bg-white border-2 border-t-0 rounded-b-3xl;
+}
+
+.search__sugestion-item {
+  @apply relative px-6 py-2 hover:bg-slate-100;
+}
+
+.search__sugestion-item-link::after {
+  @apply absolute top-0 bottom-0 left-0 right-0;
+
+  content: "";
+}
+
+.search__sugestion-empty {
+  @apply px-6 py-2;
+}

src/includes/blocks/search.njk

@@ -0,0 +1,43 @@
+<div 
+    class="search"
+    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'] });
+        },
+        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="search__input"
+        :class="{ 'search__input_opened': open }"
+    >
+    <div x-show="open" class="search__sugestions-list">
+        <ul>
+            <template x-for="item in filteredItems" :key="item.item.url">
+                <li class="search__sugestion-item">
+                    <a x-text="item.item.title" x-bind:href="item.item.url" class="search__sugestion-item-link"/>
+                </li>
+            </template>
+            <template x-if="filteredItems.length == 0">
+                <p class="search__sugestion-empty">Ничего не найдено</p>
+            </template>
+        </ul>
+    </div>
+</div>

src/pages/index.njk

@@ -1,56 +1,10 @@
 <header class="flex justify-center w-full px-10 py-4">
-    <a href="/" class="block rounded-xl p-1">
+    <a href="/" class="block p-1 rounded-xl">
         {{ '/src/images/logo.svg' | svgContents("max-h-24 block w-[50vw]") | safe }}
     </a>
 </header>
 <main>
     <div class="flex justify-center mx-6">
-        <div 
+        {% include "blocks/search.njk" %}
-            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>