[web] Added pagefind search.

Is shown via micromodal.

web/.gitignore

@@ -20,3 +20,6 @@ static/css/all.css
 # Generated by nbconvert
 content/docs/benchmarks/notebooks
 static/docs/benchmarks/notebooks
+
+# Generated by pagefind
+static/pagefind

web/assets/css/main.css

@@ -237,5 +237,146 @@ img[src$='#two-third'] {
   @apply rounded-md;
 }
 
+/* ------------------------------- Pagefind -------------------------------- */
+/**************************\
+  Basic Modal Styles
+\**************************/
+
+.modal {
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
+}
+
+.modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: top;
+}
+
+.modal__container {
+  @apply my-8;
+  @apply p-8;
+  @apply w-5/6;
+  @apply lg:w-2/3;
+  background-color: #fff;
+  max-height: 100vh;
+  @apply rounded-lg;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal__title {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.25;
+  color: #00449e;
+  box-sizing: border-box;
+}
+
+.modal__close {
+  background: transparent;
+  border: 0;
+}
+
+.modal__header .modal__close:before {
+  content: "\2715";
+}
+
+.modal__content {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, .8);
+}
+
+.modal__btn {
+  font-size: .875rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+  background-color: #e6e6e6;
+  color: rgba(0, 0, 0, .8);
+  border-radius: .25rem;
+  border-style: none;
+  border-width: 0;
+  cursor: pointer;
+  -webkit-appearance: button;
+  text-transform: none;
+  overflow: visible;
+  line-height: 1.15;
+  margin: 0;
+  will-change: transform;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+.modal__btn-primary {
+  background-color: #00449e;
+  color: #fff;
+}
+
+
+
+/**************************\
+  Animation Style
+\**************************/
+@keyframes mmfadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes mmfadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.micromodal-slide {
+  display: none;
+}
+
+.micromodal-slide.is-open {
+  display: block;
+}
+
+.micromodal-slide[aria-hidden="false"] .modal__overlay {
+  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+
+.micromodal-slide[aria-hidden="true"] .modal__overlay {
+  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+
+.micromodal-slide .modal__container,
+.micromodal-slide .modal__overlay {
+  will-change: transform;
+}
+
 /* ------------------------------------------------------------------------- */
 @tailwind utilities;

web/assets/js/sitesearch.js

+$(document).ready(function () {
+  MicroModal.init();
 
+  $('#nav-link-search').click(function (ev) {
+    ev.preventDefault();
+
+    MicroModal.show('modal-2', {
+      onClose: function () { $('.nav-link-contact').blur(); },
+      disableFocus: true
+    });
+
+    document.querySelector('.pagefind-ui__search-input').focus();
+  });
+
+});

web/content/docs/devguide/documentation/web-docs/index.md

@@ -29,6 +29,7 @@ Benchmark documentation can also be given in form of Jupyter Notebooks, see [Jup
 
 - Inside the source-directory `ogs/web`:
   - Run `yarn` **and** `yarn build` once (this will install required CSS and JavaScript packages)
+  - Optionally run `yarn index` (for creating the search index) once
   - Run `hugo server`
   - Open [http://localhost:1313](http://localhost:1313)
 
@@ -140,16 +141,6 @@ pipx run --spec pybtex pybtex-convert Documentation/bibliography/other.bib web/d
 
 This yaml-file is then used by the shortcode.
 
----
-
-## Advanced topics
-
-### Update search index
-
-```bash
-TODO:
-```
-
 ### Used components
 
 - [Hugo](https://gohugo.io) - Web site generator

web/layouts/_default/baseof.html

@@ -10,8 +10,8 @@
 
   <div class="xl:container xl:mx-auto px-2">
 
-      {{ block "main" . }}
-      {{ end }}
+    {{ block "main" . }}
+    {{ end }}
 
   </div>
 
@@ -21,6 +21,26 @@
   {{ partial "global-footer-nav.html" . }}
 
   {{ partial "footer.html" . }}
+
+  <div class="modal micromodal-slide" id="modal-2" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-2-title">
+        <header class="modal__header">
+          <h2 class="modal__title" id="modal-2-title">
+            Search
+          </h2>
+        </header>
+        <main class="modal__content" id="modal-2-content">
+          <div id="search"></div>
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn modal__btn-primary" data-micromodal-close=""
+            aria-label="Close this dialog window">Close</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
 </body>
 
 </html>

web/layouts/partials/header.html

@@ -13,6 +13,15 @@
 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css">
 
+<script src="https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js"></script>
+<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+<script src="/pagefind/pagefind-ui.js"></script>
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    new PagefindUI({ element: "#search", showSubResults: true });
+  });
+</script>
+
 <script>
   MathJax = {
     tex: {

web/layouts/partials/nav-bar.html

@@ -30,20 +30,14 @@
           {{ end }}
 
         </nav>
-        <div class="hidden md:flex items-center justify-end space-x-8 md:flex-1 lg:w-0">
-          <label for="search-input" class="hidden text-sm font-medium leading-5 text-gray-700">Search</label>
-          <div class="relative">
-            <div class="z-10 absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd"
-                  d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                  clip-rule="evenodd"></path>
-              </svg>
-            </div>
-            <input id="search-input"
-              class="form-input w-full p-1 text-center rounded-md border-2 border-brand-200 sm:text-sm sm:leading-5"
-              placeholder="Search this site">
-          </div>
+        <div class="md:flex items-center justify-end space-x-8 md:flex-1 lg:w-0">
+          <a href="#" id="nav-link-search">
+            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                clip-rule="evenodd"></path>
+            </svg>
+          </a>
         </div>
       </div>
     </div>
@@ -92,19 +86,6 @@
                 {{ end }}
                 {{ end }}
                 {{ end }}
-                <label for="search-input-mobile"
-                  class="hidden text-sm font-medium leading-5 text-gray-700">Search</label>
-                <div class="mt-1 relative rounded-md shadow-sm">
-                  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
-                      <path fill-rule="evenodd"
-                        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                        clip-rule="evenodd"></path>
-                    </svg>
-                  </div>
-                  <input id="search-input-mobile" class="form-input block w-full pl-10 sm:text-sm sm:leading-5"
-                    placeholder="Search this site">
-                </div>
               </nav>
             </div>
           </div>

web/package.json

 {
   "private": true,
   "scripts": {
-    "build": "npx tailwindcss -o static/css/all.css -i assets/css/main.css -m && hugo",
+    "build": "npx tailwindcss -o static/css/all.css -i assets/css/main.css -m && hugo && npm_config_yes=true npx pagefind --site 'public'",
     "watch": "npx tailwindcss -o static/css/all.css -i assets/css/main.css -m --watch",
     "server": "hugo server",
-    "index": "TODO:"
+    "index": "hugo && npm_config_yes=true npx pagefind --site 'public' --output-subdir ../static/pagefind"
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/line-clamp": "=0.3.1",
     "@tailwindcss/typography": "=0.5.2",
     "tailwindcss": "=3.1.6"
-  }
+  },
+  "dependencies": {}
 }