feat: Search

Jazee6 · Jul 30, 2024 · 6670fe9 · 6670fe9
1 parent cff60c9
commit 6670fe9
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 28 deletions.
diff --git a/README.en.md b/README.en.md
@@ -39,14 +39,15 @@ pnpm new
 
 - [x] status badge
 - [x] twikoo_visitors
+- [x] Search
 - [ ] View Transition
-- [ ] Search
 - [ ] Tags
 - [ ] Next/Prev
 - [ ] hero image
 - [ ] AI summary
 - [ ] Top
 - [ ] lazy load image and CLS
+- [ ] touch optimize
 - [ ] ...
 
 ## Who is using Astro Blur?

diff --git a/README.md b/README.md
@@ -39,14 +39,15 @@ pnpm new
 
 - [x] status badge
 - [x] twikoo_visitors
+- [x] 搜索
 - [ ] View Transition
-- [ ] 搜索
 - [ ] 标签
 - [ ] Next/Prev
 - [ ] hero image
 - [ ] AI摘要
 - [ ] 置顶
 - [ ] lazy load image and CLS
+- [ ] touch optimize
 - [ ] ...
 
 ## 谁在使用 Astro Blur?

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -50,6 +50,20 @@ import {Icon} from 'astro-icon/components'
         searchContainer.classList.toggle("hidden")
         searchContainer.querySelector("input").focus()
     })
+
+    document.documentElement.addEventListener("keydown", (e) => {
+        if (e.key === "/" && document.activeElement.tagName !== "INPUT") {
+            const searchContainer = document.querySelector("#search-container")
+            searchContainer.classList.remove("hidden")
+            setTimeout(() => {
+                searchContainer.querySelector("input").focus()
+            })
+        }
+        if (e.key === "Escape") {
+            const searchContainer = document.querySelector("#search-container")
+            searchContainer.classList.add("hidden")
+        }
+    })
 </script>
 
 <script is:inline>

diff --git a/src/components/Search.astro b/src/components/Search.astro
@@ -2,27 +2,50 @@
 
 ---
 <div id="search-container" class="fixed hidden inset-0 z-10 backdrop-blur animate-in fade-in">
-    <div class="absolute top-16 left-1/2 -translate-x-1/2 container-global w-full">
+    <div class="absolute top-16 left-1/2 -translate-x-1/2 container-global w-full h-full">
         <form class="w-3/4 mx-auto max-md:w-full animate-in slide-in-from-top">
             <label>
-                <input name="search" placeholder="Search...(developing...)"
+                <input name="search" autocomplete="off" placeholder="Search..."
                        class="w-full outline-0 bg-base transition-all rounded-xl h-16 p-4 shadow-xl text-xl"/>
             </label>
         </form>
-        <div>
+        <div id="search-results" class="w-3/4 mx-auto max-md:w-full h-full overflow-y-auto rounded-xl mt-1">
 
         </div>
     </div>
 </div>
 
 <script is:inline>
     const searchContainer = document.querySelector("#search-container");
-    searchContainer.addEventListener("click", (e) => {
-        if (e.target === searchContainer) {
+    const searchInput = searchContainer?.querySelector("input")
+    searchContainer?.addEventListener("click", (e) => {
+        if (e.target !== searchInput) {
             searchContainer.classList.add("hidden")
         }
     })
-    searchContainer.querySelector("form").addEventListener("submit", (e) => {
+    searchContainer?.querySelector("form")?.addEventListener("submit", (e) => {
         e.preventDefault()
     })
+    searchInput.addEventListener("input", async e => {
+        if (e.target.dataset.loaded !== 'true') {
+            e.target.dataset.loaded = 'true'
+            window.pagefind = await import("/pagefind/pagefind.js");
+        }
+
+        const input = e.target.value.trim()
+        if (input.length) {
+            const search = await window.pagefind.search(input)
+            const searchResults = document.querySelector("#search-results")
+            searchResults.innerHTML = ""
+            for (const result of search.results) {
+                const data = await result.data()
+                searchResults.innerHTML += `
+                    <a href="${data.url}" class="block px-4 py-2 rounded-xl bg-base/80 blur-global animate-in fade-in mt-1 first:mt-0 hover:bg-base transition-all">
+                        <h2 class="text-xl font-bold line-clamp-1">${data.meta.title}</h2>
+                        <p class="line-clamp-3">${data.excerpt}</p>
+                    </a>
+                `
+            }
+        }
+    })
 </script>
diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro
@@ -28,9 +28,9 @@ const {page} = Astro.props
                                 <h2 class="text-xl font-bold line-clamp-1">
                                     {post.data.title}
                                 </h2>
-                                <div class="line-clamp-2">
+                                <p class="line-clamp-2">
                                     {post.data.description}
-                                </div>
+                                </p>
                                 <div class="mt-auto flex">
                                     <time class="ml-auto" datetime={post.data.pubDate.toISOString()}>
                                         {

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -16,21 +16,21 @@
     }
 
     .light {
-        --color-base: theme('colors.white');
-        --color-back: theme('colors.neutral.100');
-        --color-primary: theme('colors.neutral.950');
-        --color-secondary: theme('colors.neutral.500');
-        --color-hover: theme('colors.neutral.200');
-        --color-active: theme('colors.neutral.300');
+        --color-base: 255 255 255;
+        --color-back: 245 245 245;
+        --color-primary: 10 10 10;
+        --color-secondary: 115 115 115;
+        --color-hover: 229 229 229;
+        --color-active: 212 212 212;
     }
 
     .dark {
-        --color-base: theme('colors.neutral.800');
-        --color-back: theme('colors.neutral.900');
-        --color-primary: theme('colors.neutral.50');
-        --color-secondary: theme('colors.neutral.500');
-        --color-hover: theme('colors.neutral.600');
-        --color-active: theme('colors.neutral.700');
+        --color-base: 38 38 38;
+        --color-back: 23 23 23;
+        --color-primary: 250 250 250;
+        --color-secondary: 115 115 115;
+        --color-hover: 82 82 82;
+        --color-active: 64 64 64;
     }
 }
 

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -5,12 +5,12 @@ export default {
     theme: {
         extend: {
             colors: {
-                base: 'var(--color-base)',
-                back: 'var(--color-back)',
-                primary: 'var(--color-primary)',
-                secondary: 'var(--color-secondary)',
-                hover: 'var(--color-hover)',
-                active: 'var(--color-active)',
+                base: 'rgb(var(--color-base))',
+                back: 'rgb(var(--color-back))',
+                primary: 'rgb(var(--color-primary))',
+                secondary: 'rgb(var(--color-secondary))',
+                hover: 'rgb(var(--color-hover))',
+                active: 'rgb(var(--color-active))',
             },
         },
     },