Merge branch 'web-search' into 'master'

[web] Refactored search

See merge request ogs/ogs!4804

scripts/ci/jobs/web-deploy.yml

@@ -25,7 +25,6 @@ deploy web site:
     - yarn
     - yarn build
     - netlify deploy --prod --dir=public --site=$OGS_NETLIFY_SITE_ID
-    - yarn upload-index
   cache:
     paths:
       - web/node_modules

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

@@ -220,56 +220,162 @@ img[src$='#two-third'] {
   align-items: center;
 }
 
-/* -------------------------------- Algolia---------------------------------- */
-.algolia-autocomplete .aa-input,
-.algolia-autocomplete .aa-hint {
-  width: 100%;
+/* ------------------------------- Jupyter --------------------------------- */
+.jupyter-input pre {
+  @apply border-l-4;
+  @apply border-blue-500;
 }
 
-.algolia-autocomplete .aa-hint {
-  color: #999;
+.jupyter-output pre {
+  @apply border-l-4;
+  @apply border-red-500;
 }
 
-.algolia-autocomplete .aa-dropdown-menu {
-  @apply bg-gray-100;
-  @apply border-2;
-  @apply border-t-0;
-  @apply p-1;
-  @apply text-sm;
-  right: 0px;
-  width: 100%;
-  margin-top: -1px;
+.jupyter-output img {
+  @apply border-l-4;
+  @apply border-red-500;
+  @apply rounded-md;
 }
 
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
-  @apply cursor-pointer;
-  @apply p-1;
+/* ------------------------------- Pagefind -------------------------------- */
+/**************************\
+  Basic Modal Styles
+\**************************/
+
+.modal {
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
 }
 
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
-  @apply bg-brand-200;
+.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;
 }
 
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
-  @apply font-bold;
-  @apply text-yellow-500;
+.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;
 }
 
-/* ------------------------------- Jupyter --------------------------------- */
-.jupyter-input pre {
-  @apply border-l-4;
-  @apply border-blue-500;
+.modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.jupyter-output pre {
-  @apply border-l-4;
-  @apply border-red-500;
+.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;
 }
 
-.jupyter-output img {
-  @apply border-l-4;
-  @apply border-red-500;
-  @apply rounded-md;
+.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;
 }
 
 /* ------------------------------------------------------------------------- */

web/assets/js/sitesearch.js

@@ -1,41 +1,31 @@
-// Roughly based on https://github.com/algolia/autocomplete.js#jquery
-// https://github.com/algolia/autocomplete.js/blob/master/LICENSE
+$(document).ready(function () {
+  MicroModal.init();
 
-var client = algoliasearch('4AHEU3QJQG', 'cda2754fe35733ffa31994a177725640')
-var index = client.initIndex('docs.opengeosys.org');
-$('#search-input').autocomplete({
-  autoselect: true,
-  hint: false,
-  keyboardShortcuts: ['s']
-}, [
-  {
-    source: $.fn.autocomplete.sources.hits(index, { hitsPerPage: 5 }),
-    displayKey: 'title',
-    debug: true,
-    templates: {
-      suggestion: function (suggestion) {
-        return suggestion._highlightResult.title.value;
-      }
-    }
-  }
-]).on('autocomplete:selected', function (event, suggestion, dataset) {
-  window.location = "/" + suggestion.uri.toLowerCase();
-});
+  $('#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();
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key == 'f') {
+
+      const modals = document.querySelectorAll('#modal-2');
+      modals.forEach(element => {
+        if (!element.classList.contains('is-open')) {
+          event.preventDefault();
+        }
+      });
 
-$('#search-input-mobile').autocomplete({
-  autoselect: true,
-  hint: false,
-  keyboardShortcuts: ['s']
-}, [
-  {
-    source: $.fn.autocomplete.sources.hits(index, { hitsPerPage: 5 }),
-    displayKey: 'title',
-    templates: {
-      suggestion: function (suggestion) {
-        return suggestion._highlightResult.title.value;
-      }
+      MicroModal.show('modal-2', {
+        onClose: function () { $('.nav-link-contact').blur(); },
+        disableFocus: false
+      });
     }
-  }
-]).on('autocomplete:selected', function (event, suggestion, dataset) {
-  window.location = "/" + suggestion.uri.toLowerCase();
+  }, false);
 });

web/content/docs/benchmarks/hydro-component/contracer/index.md

@@ -20,7 +20,7 @@ Hydraulic water influx was 0.768 $\textrm{m}^3~\textrm{d}^{-1}$ at the left side
 The tracer (40.26 g of $\textrm{Br}^-$) was diluted in 12 L of waste water and added as a single impulse event at $t=0$.
 Note, that only 89\% of the tracer was recovered at the outlet.
 
-![Top: Schematic representation of the experiment. Middle and bottom: Simulated domain and input parameters in 1D and 2D, respectively. Modified with permission from Boog et al. (2019).](ConTracer_domain.png)
+![Top: Schematic representation of the experiment. Middle and bottom: Simulated domain and input parameters in 1D and 2D, respectively. Modified with permission from Boog et al. (2019).](./ConTracer_domain.png)
 
 ## Problem description (1D)
 

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,20 +141,9 @@ 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
-ALGOLIA_WRITE_KEY=XXX node_modules/.bin/hugo-algolia --toml -s
-```
-
 ### Used components
 
 - [Hugo](https://gohugo.io) - Web site generator
 - [Tailwind](https://tailwindcss.com/docs/what-is-tailwind) - CSS framework
 - [FontAwesome](https://fontawesome.com) - Icons, see [icon search](https://fontawesome.com/icons?d=gallery)
 - [Slick Carousel](http://kenwheeler.github.io/slick/) & [FancyBox](https://fancyapps.com/fancybox/3/) for image galleries
-- [Algolia](https://github.com/algolia/algoliasearch-client-javascript) for site search

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/docs/gallery.html

@@ -6,20 +6,21 @@
 
   <div class="bg-white">
     {{ if isset .Params "coupling" }}
-    <img class="h-12 md:h-16 lg:h-20 float-right" src="/images/coupling-icons/{{.Params.coupling}}-tet.svg" alt="">
+    <img class="h-12 md:h-16 lg:h-20 float-right" data-pagefind-meta="image[src]"
+      src="/images/coupling-icons/{{.Params.coupling}}-tet.svg" alt="">
     {{ end }}
 
     {{ if .Page.Params.breadcrumbs }}
-      {{ partial "docs/breadcrumbs.html" . }}
+    {{ partial "docs/breadcrumbs.html" . }}
     {{ end }}
 
     <div class="mx-auto py-2 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-4">
       <div class="space-y-8">
         <div class="space-y-5 sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none">
 
-          <h2 class="text-3xl font-extrabold sm:text-4xl mb-8">
+          <h1 class="text-3xl font-extrabold sm:text-4xl mb-8">
             {{ .Title }}
-          </h2>
+          </h1>
           <div class="clear-both"></div>
           <div class="prose min-w-full">
             {{ .Content }}

web/layouts/docs/single.html

@@ -28,7 +28,7 @@
     {{ end }}
 
     <div class="mx-auto py-2 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-4">
-      <h2 class="text-3xl font-extrabold sm:text-4xl mb-8">{{ .Title }}</h2>
+      <h1 class="text-3xl font-extrabold sm:text-4xl mb-8">{{ .Title }}</h1>
       {{ if $baseSubsection.Params.os_selector }}
       <div class="flex justify-center">
         <div class="invisible mb-8 bg-gray-200 shadow rounded-lg px-2 py-1 w-auto" id="os-selector">