🎉 Improvements + Article

Author: Daniele-rolli

.DS_Store

@@ -79,7 +79,7 @@
 
     <!-- BlueSky -->
     <a
-      href="https://bsky.app/profile/beavernotes.bsky.social"
+      href="https://bsky.app/profile/beavernotes.com"
       class="text-neutral-400 hover:text-blue-500"
     >
       <span class="sr-only">BlueSky</span>

_includes/footer.html

@@ -158,5 +158,13 @@
         console.error("Search container not found");
       }
     }
+
+    // Add event listener for keydown
+    document.addEventListener("keydown", (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault(); // Prevent default browser action
+        openSearch();
+      }
+    });
   </script>
 </nav>

_includes/nav.html

@@ -1,42 +1,35 @@
 <div
   id="search-container"
-  class="fixed inset-x-0 top-10 hidden flex items-center justify-center z-50 mx-10"
-  role="dialog"
-  aria-labelledby="search-dialog-title"
-  aria-hidden="true"
+  class="fixed inset-0 bg-slate-900/25 backdrop-blur transition-opacity w-screen h-screen hidden flex z-50"
 >
   <div
-    class="bg-white dark:bg-neutral-700 w-full max-w-xl rounded-lg shadow-xl relative"
+    role="dialog"
+    aria-labelledby="search-dialog-title"
+    aria-hidden="true"
+    class="fixed inset-0 z-50 flex items-start justify-center pt-16 sm:pt-24"
   >
     <div
-      class="p-2 border-b border-b-neutral-100 dark:border-b-neutral-700 outline-none relative flex items-center"
+      class="bg-white dark:bg-neutral-700 w-full max-w-xl rounded-lg shadow-xl relative"
     >
-      <!-- Search Icon -->
-      <i
-        class="fa-solid fa-magnifying-glass p-2 text-neutral-600 dark:text-neutral-100 hover:text-amber-400 text-lg pl-2"
-      ></i>
-
-      <!-- Search Input -->
-      <input
-        id="search-input"
-        type="text"
-        class="text-sm bg-transparent outline-none border-none placeholder-neutral-500 dark:placeholder-neutral-300 dark:text-neutral-300 focus:ring-0 pl-4 pr-10"
-        placeholder="Type to search..."
-        aria-label="Search input"
-      />
-
-      <!-- Close Button -->
-      <button
-        onclick="closeSearch()"
-        class="absolute right-0 top-1/2 transform -translate-y-1/2 text-neutral-400 hover:text-black focus:outline-none focus:ring-0"
-        aria-label="Close search dialog"
+      <div
+        class="p-3 border-b border-b-neutral-100 dark:border-b-neutral-700 outline-none relative flex items-center justify-between"
       >
+        <!-- Search Input -->
+        <input
+          id="search-input"
+          type="text"
+          class="flex-1 text-sm bg-transparent outline-none border-none placeholder-neutral-500 dark:placeholder-neutral-300 dark:text-neutral-300 focus:ring-0"
+          placeholder="Type to search..."
+          aria-label="Search input"
+        />
+
+        <!-- Search Icon -->
         <i
-          class="fa-solid fa-close p-2 text-neutral-600 dark:text-neutral-100 hover:text-amber-400 text-lg mr-3"
+          class="fa-solid fa-magnifying-glass p-2 text-neutral-600 dark:text-neutral-100 hover:text-amber-400 text-lg cursor-pointer"
         ></i>
-      </button>
+      </div>
+      <ul id="results-container" class="pb-2"></ul>
     </div>
-    <ul id="results-container" class="space-y-2 py-2"></ul>
   </div>
 </div>
 
@@ -49,13 +42,22 @@
       console.error("Search container not found");
     }
   }
+
   // Initialize SimpleJekyllSearch
   document.addEventListener("DOMContentLoaded", () => {
     const searchInput = document.getElementById("search-input");
     const resultsContainer = document.getElementById("results-container");
 
+    // Add ESC key listener
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault(); // Prevent default to avoid bubbling
+        closeSearch();
+      }
+    });
+
     // Inject site.baseurl from Jekyll into the JSON path
-    const jsonPath = "{{ site.baseurl }}/assets/search.json"; // Inject site.baseurl here
+    const jsonPath = "{{ site.baseurl }}/assets/search.json";
 
     if (!searchInput || !resultsContainer) {
       console.error("Search input or results container not found");
@@ -70,7 +72,7 @@
         <li>
           <a href="{url}" class="flex items-center p-2 dark:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-600">
             <div class="flex flex-row">
-              <img src="{{ site.baseurl }}/{image}" alt="{title}" class="w-auto h-12 rounded-lg" />
+              <img src="{{ site.baseurl }}/{image}" alt="{title}" class="w-auto h-12 rounded" />
               <div class="flex flex-col ml-2">
               <p class="text-sm font-bold">{title}</p>
               <p class="text-sm">{description}</p>

_includes/search.html

@@ -101,7 +101,14 @@ <h1 class="text-4xl dark:text-neutral-100 font-bold">
         </div>
 
         <div class="mt-8">
-          {% include welcomments/comments.html website_id = "XBbDsxrQFlUyIMrdCpsy9Cqvc" %}
+          <script
+            src="https://utteranc.es/client.js"
+            repo="Beaver-Notes/Beaver-Blog"
+            issue-term="pathname"
+            theme="preferred-color-scheme"
+            crossorigin="anonymous"
+            async
+          ></script>
         </div>
       </article>
 

_includes/welcomments/comment_form.html

@@ -30,7 +30,7 @@ This doesn't impact the user's life much, but it makes my life a bit easier, and
 
 # Thank You 💖
 
-Thanks to all our users, contributors, and donors for making Beaver possible, and thanks for being part of this amazing community. Hope you enjoyed the article. If you’d like to help build and improve the project don’t hesitate to [Get Involved](https://beaver-notes.github.io/Beaver-Docs/docs/dev-docs/Beaver%20Notes/How%20to%20contribure)
+Thanks to all our users, contributors, and donors for making Beaver possible, and thanks for being part of this amazing community. Hope you enjoyed the article. If you’d like to help build and improve the project don’t hesitate to [Get Involved](https://docs.beavernotes.com/beaver%20notes%20(dev)/2025/01/03/How-to-contribute.html)
 
 # Credits