Implemented search using pagefind

osuosl · Aug 28, 2024 · afae172 · afae172
1 parent f9cefe2
commit afae172
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+public/
+pagefind
diff --git a/themes/osuosl/assets/css/style.css b/themes/osuosl/assets/css/style.css
@@ -121,36 +121,67 @@ textarea {
     font-weight: bold;
 }
 
-.search-container {
-    margin: 1.4em;
+.search-modal {
+    display: none;
 }
 
-.search-form {
+.search-modal.show {
     display: flex;
-    margin: 0;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
 }
 
-.search {
-    border-radius: 12px 0 0 12px;
-    border: medium none;
-    padding: 6px;
-    margin: 0;
-    width: 100px;
+.search-modal.hide {
+    display: none;
 }
 
-.submit-search {
-   border-radius: 0 12px 12px 0;
-   border-style: none;
-   padding: 5px;
-   margin: 0;
-   height: 33px;
-   width: 40px;
-   cursor: pointer;
-   background: black;
+.search-headers {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.fa-search {
+.close-search {
+    height: fit-content;
+    border: none;
+    background: white;
+}
+
+.close-search i {
+    font-size: x-large;
+}
+
+.search-modal-container {
+    background: white;
+    width: 56rem;
+    height: 90vh;
+    overflow: scroll;
+    margin: 50px;
+    padding: 20px;
+}
+
+.open-search {
+    border-radius: 10px;
+    border-style: none;
+    padding: 5px;
+    margin: 1em;
+    height: 33px;
+    width: 40px;
+    cursor: pointer;
     color: white;
+    background: none;
+}
+
+.open-search:hover {
+    background: black;
 }
 
 /* 

diff --git a/themes/osuosl/layouts/_default/baseof.html b/themes/osuosl/layouts/_default/baseof.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+    {{ partial "search.html" . }}
     {{- partial "head.html" . -}}
     <body>
         {{- partial "header.html" . -}}

diff --git a/themes/osuosl/layouts/_default/list.html b/themes/osuosl/layouts/_default/list.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 <main class="main_content">
     {{- partial "menu.html" . -}}
-    <h1>{{ .Title }}</h1>
+    <h1 data-pagefind-meta="title">{{ .Title }}</h1>
     <div>
         {{ .Content }}
     </div>

diff --git a/themes/osuosl/layouts/_default/single.html b/themes/osuosl/layouts/_default/single.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 <main class="main_content">
     {{- partial "menu.html" . -}}
-    <h1>{{ .Title }}</h1>
+    <h1 data-pagefind-meta="title">{{ .Title }}</h1>
     <div>
         {{ .Content }}
     </div>

diff --git a/themes/osuosl/layouts/_default/summary.html b/themes/osuosl/layouts/_default/summary.html
@@ -1,7 +1,7 @@
 <article class="list__item post">
     {{ partial "post_thumbnail.html" (dict "class" "list" "page" .) }}
     <header class="list__header">
-        <h2 class="list__title post__title">
+        <h2 data-pagefind-meta="title" class="list__title post__title">
             <a href="{{ .RelPermalink }}" rel="bookmark">
                 {{ .Title }}
             </a>

diff --git a/themes/osuosl/layouts/partials/head.html b/themes/osuosl/layouts/partials/head.html
@@ -8,4 +8,5 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script type="text/javascript" src="/js/carousel.js"></script>
     <script type="text/javascript" src="/js/mobile-menu.js"></script>
+    <script type="text/javascript" src="/js/search-modal.js"></script>
 </head>
diff --git a/themes/osuosl/layouts/partials/header.html b/themes/osuosl/layouts/partials/header.html
@@ -6,10 +6,7 @@
             </a>
         </div>
         <div class="search-container">
-            <form class="search-form">
-                <input class="search" type="text" placeholder="Search this site">
-                <button type="submit" class="submit-search"><i class="fa-solid fa-search"></i></button>
-            </form>
+            <button class="open-search" id="open-search"><i class="fa-solid fa-search"></i></button>
         </div>
         <div class="mobile-menu-container">
             <a class="toggle-mobile-menu" id="toggle-mobile-menu"><i class="fa-solid fa-bars"></i></a>

diff --git a/themes/osuosl/layouts/partials/menu.html b/themes/osuosl/layouts/partials/menu.html
@@ -35,7 +35,6 @@
                                     <a class="menu__link thirdmenu__link" href="{{ .URL }}">
                                         {{ .Pre }}
                                         <span class="menu__text thirdmenu__text">{{ .Name }}</span>
-                                        <label></label>
                                         {{ .Post }}
                                     </a>
                                 </li>

diff --git a/themes/osuosl/layouts/partials/search.html b/themes/osuosl/layouts/partials/search.html
@@ -0,0 +1,26 @@
+<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+<script src="/pagefind/pagefind-ui.js"></script>
+
+<div class="search-modal">
+    <div class="search-modal-container">
+        <div class="search-headers">
+            <h1>Search</h1>
+            <button class="close-search" id="close-search"><i class="fa fa-times" aria-hidden="true"></i></button>
+        </div>
+        <div id="search"></div>
+    </div>
+</div>
+
+<script>
+    window.addEventListener('DOMContentLoaded', (event) => {
+        new PagefindUI({ 
+            element: "#search", 
+            showImages: false, 
+            showSubResults: true, 
+            processResult: function(result) {
+                result.title = result.metaTitle
+                return result;
+            }
+        });
+    });
+</script>
diff --git a/themes/osuosl/static/js/search-modal.js b/themes/osuosl/static/js/search-modal.js
@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var button = document.getElementById("open-search");
+    var menu = document.querySelector(".search-modal");
+    var close = document.getElementById("close-search")
+    button.addEventListener("click", function () {
+        menu.classList.add("show");
+        menu.classList.remove("hide");
+    });
+
+    close.addEventListener("click", function () {
+        menu.classList.add("hide");
+        menu.classList.remove("show");
+    });
+})