added search functionality

2022-11-27 21:39:55 +05:30
parent 5a872cf17a
commit 80e9a7971b
7 changed files with 154 additions and 23 deletions
@@ -90,6 +90,7 @@ params:
  #   align: mx-auto # Left: ms-auto | center: mx-auto | right: me-auto | Default: ms-auto
  #   brandLogo: "/logo.png" # Logo for the brand | default is the favicon variable
  #   brandName: "Profile" # Brand name for the brand | default is the title variable
+  #   disableSearch: true

  #   menus:
  #     disableAbout: true
@@ -26,6 +26,11 @@
  {{- end -}}

  {{- partial "scripts.html" . -}}
+
+  <!-- for search -->
+  <section id="search-content" class="py-2">
+    <div class="container" id="search-results"></div>
+  </section>
 </body>

 </html>
@@ -0,0 +1,5 @@
+{{- $.Scratch.Add "index" slice -}}
+{{- range .Site.RegularPages -}}
+    {{- $.Scratch.Add "index" (dict "title" .Title "description" .Params.description "content" .Content "image" .Params.image "permalink" .Permalink) -}}
+{{- end -}}
+{{- $.Scratch.Get "index" | jsonify -}}
@@ -61,4 +61,8 @@
            document.getElementById("loading-icons").style.display = "block";
        } catch(err) {}
    }
-</script>
+</script>
+
+{{ if not (.Site.Params.navbar.disableSearch | default false) }}
+    <script src="/js/search.js"></script>
+{{ end }}
@@ -37,6 +37,13 @@
                {{ end }}
            </a>

+            {{ if not (.Site.Params.navbar.disableSearch | default false) }}
+                <div>
+                    <input id="search" autocomplete="off" class="form-control mr-sm-2 d-none d-md-block" type="search" placeholder="Search ..."
+                        aria-label="Search" oninput="searchOnChange(event)">
+                </div>
+            {{ end }}
+
            <!-- navbar toggler -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
                aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -48,6 +55,14 @@
            <!-- navbar content -->
            <div class="collapse navbar-collapse text-wrap primary-font" id="navbarContent">
                <ul class="navbar-nav {{ .Site.Params.navbar.align | default "ms-auto"}} text-center">
+                    {{ if not (.Site.Params.navbar.disableSearch | default false) }}
+                        <li class="nav-item navbar-text d-block d-md-none">
+                            <div class="nav-link">
+                                <input id="search" autocomplete="off" class="form-control mr-sm-2" type="search" placeholder="Search ..." aria-label="Search" oninput="searchOnChange(event)">
+                            </div>
+                        </li>
+                    {{ end }}
+
                    {{ if and (.Site.Params.about.enable | default false) (not (.Site.Params.navbar.menus.disableAbout | default false)) }}
                    <li class="nav-item navbar-text">
                        <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#about" aria-label="about">About</a>
@@ -117,30 +132,33 @@
                    </li>
                    {{end}}
                    {{end}}
+
+                    <li class="nav-item navbar-text">
+                        <!-- darkmode mode toggle -->
+                        {{ if (not .Site.Params.theme.disableThemeToggle) }}
+                        <div class="text-center">
+                            <button id="theme-toggle">
+                                <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                                </svg>
+                                <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <circle cx="12" cy="12" r="5"></circle>
+                                    <line x1="12" y1="1" x2="12" y2="3"></line>
+                                    <line x1="12" y1="21" x2="12" y2="23"></line>
+                                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                                    <line x1="1" y1="12" x2="3" y2="12"></line>
+                                    <line x1="21" y1="12" x2="23" y2="12"></line>
+                                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                                </svg>
+                            </button>
+                        </div>
+                        {{ end }}
+                    </li>
+
                </ul>

-                <!-- darkmode mode toggle -->
-                {{ if (not .Site.Params.theme.disableThemeToggle) }}
-                <div class="text-center">
-                    <button id="theme-toggle">
-                        <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                        </svg>
-                        <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="12" r="5"></circle>
-                            <line x1="12" y1="1" x2="12" y2="3"></line>
-                            <line x1="12" y1="21" x2="12" y2="23"></line>
-                            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-                            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-                            <line x1="1" y1="12" x2="3" y2="12"></line>
-                            <line x1="21" y1="12" x2="23" y2="12"></line>
-                            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-                            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-                        </svg>
-                    </button>
-                </div>
-            
-                {{ end }}
            </div>
        </div>
    </nav>
@@ -56,4 +56,50 @@ li > .dropdown-toggle:focus{

 .dropdown-item:focus, .dropdown-item:active {
    background-color: var(--secondary-color) !important;
+}
+
+#search {
+    border-radius: 1rem !important;
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+    border-color: var(--background-color) !important;
+    transition: none;
+}
+
+#search:focus {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+#search-content {
+    display: none;
+    border-radius: 1rem;
+    box-shadow: 0 0 10px rgba(0,0,0,0.2);
+    z-index: 9999;
+    width: 10%;
+    max-height: 350px;
+    background-color: var(--secondary-color) !important;
+    position: absolute;
+    overflow: scroll;
+}
+
+#search-results > .card {
+    background-color: transparent !important;
+    border: none;
+    margin-bottom: 10px;
+}
+
+#search-results > .card :hover {
+    border-radius: 1rem !important;
+    background-color: var(--background-color) !important;
+    transition: .2s;
+}
+
+#search-results .card a {
+    opacity: 0.9;
+    display: inline-block;
+    text-decoration: none;
+    color: var(--text-color) !important;
+}
+
+#search-results .card a:hover {
+    color: var(--primary-color) !important;
 }
@@ -0,0 +1,52 @@
+async function searchOnChange(evt) {
+  let searchQuery = evt.target.value;
+
+  if (searchQuery !== "") {
+    const searchButtonEle = document.querySelectorAll("#search");
+    let searchButtonPosition;
+    if (window.innerWidth > 768) {
+      searchButtonPosition = searchButtonEle[0].getBoundingClientRect();
+      document.getElementById("search-content").style.width = "500px";
+    } else {
+      searchButtonPosition = searchButtonEle[1].getBoundingClientRect();
+      document.getElementById("search-content").style.width = "430px";
+    }
+    console.log(searchButtonPosition);
+
+    document.getElementById("search-content").style.display = "block";
+    document.getElementById("search-content").style.top =
+      searchButtonPosition.top + 50 + "px";
+    document.getElementById("search-content").style.left =
+      searchButtonPosition.left + "px";
+
+    let searchJson = await fetch("/index.json").then((res) => res.json());
+    let searchResults = searchJson.filter((item) => {
+      return (
+        item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        item.content.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    });
+    if (searchResults.length > 0) {
+      let searchResultsHtml = "";
+      searchResults.map((item) => {
+        searchResultsHtml += `<div class="card">
+                        <a href="${item.permalink}">
+                            <div class="p-3">
+                                <h5>${item.title}</h5>
+                                <div>${item.description}</div>
+                            </div>
+                       </a>
+                    </div>`;
+      });
+      document.getElementById("search-results").innerHTML = searchResultsHtml;
+    } else {
+      let searchResultsHtml = `<p class="text-center py-3">No results found for "${searchQuery}"</p>`;
+      document.getElementById("search-results").innerHTML = searchResultsHtml;
+    }
+    console.log(searchResults);
+  } else {
+    document.getElementById("search-content").style.display = "none";
+    document.getElementById("search-results").innerHTML = "";
+  }
+}