From 69aa3ceb8986b21ced39a85193c4ab02088cf8b1 Mon Sep 17 00:00:00 2001 From: Lars Bilke Date: Thu, 16 Nov 2023 08:25:19 +0100 Subject: [PATCH 1/5] [web] Removed algolia-based search. --- scripts/ci/jobs/web-deploy.yml | 1 - web/assets/css/main.css | 35 ---------------- web/assets/js/sitesearch.js | 40 ------------------- web/config.yaml | 7 ---- .../devguide/documentation/web-docs/index.md | 3 +- web/layouts/partials/footer.html | 6 +-- web/package.json | 4 +- 7 files changed, 4 insertions(+), 92 deletions(-) delete mode 100644 web/config.yaml diff --git a/scripts/ci/jobs/web-deploy.yml b/scripts/ci/jobs/web-deploy.yml index d39ffd1c860..eed44f4257e 100644 --- a/scripts/ci/jobs/web-deploy.yml +++ b/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 diff --git a/web/assets/css/main.css b/web/assets/css/main.css index a1957730901..4261a41f8b7 100644 --- a/web/assets/css/main.css +++ b/web/assets/css/main.css @@ -220,41 +220,6 @@ img[src$='#two-third'] { align-items: center; } -/* -------------------------------- Algolia---------------------------------- */ -.algolia-autocomplete .aa-input, -.algolia-autocomplete .aa-hint { - width: 100%; -} - -.algolia-autocomplete .aa-hint { - color: #999; -} - -.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; -} - -.algolia-autocomplete .aa-dropdown-menu .aa-suggestion { - @apply cursor-pointer; - @apply p-1; -} - -.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor { - @apply bg-brand-200; -} - -.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em { - @apply font-bold; - @apply text-yellow-500; -} - /* ------------------------------- Jupyter --------------------------------- */ .jupyter-input pre { @apply border-l-4; diff --git a/web/assets/js/sitesearch.js b/web/assets/js/sitesearch.js index 03ff46e34a4..8b137891791 100644 --- a/web/assets/js/sitesearch.js +++ b/web/assets/js/sitesearch.js @@ -1,41 +1 @@ -// Roughly based on https://github.com/algolia/autocomplete.js#jquery -// https://github.com/algolia/autocomplete.js/blob/master/LICENSE -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(); -}); - -$('#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; - } - } - } -]).on('autocomplete:selected', function (event, suggestion, dataset) { - window.location = "/" + suggestion.uri.toLowerCase(); -}); diff --git a/web/config.yaml b/web/config.yaml deleted file mode 100644 index 54a8266ccff..00000000000 --- a/web/config.yaml +++ /dev/null @@ -1,7 +0,0 @@ ---- -# This file should not be necessary. -# Workaround for https://github.com/10Dimensional/hugo-algolia/issues/7 -algolia: - index: "docs.opengeosys.org" - # key supplied via $ALGOLIA_WRITE_KEY - appID: "4AHEU3QJQG" diff --git a/web/content/docs/devguide/documentation/web-docs/index.md b/web/content/docs/devguide/documentation/web-docs/index.md index 9e5be0166b7..fa280931522 100644 --- a/web/content/docs/devguide/documentation/web-docs/index.md +++ b/web/content/docs/devguide/documentation/web-docs/index.md @@ -147,7 +147,7 @@ This yaml-file is then used by the shortcode. ### Update search index ```bash -ALGOLIA_WRITE_KEY=XXX node_modules/.bin/hugo-algolia --toml -s +TODO: ``` ### Used components @@ -156,4 +156,3 @@ ALGOLIA_WRITE_KEY=XXX node_modules/.bin/hugo-algolia --toml -s - [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 diff --git a/web/layouts/partials/footer.html b/web/layouts/partials/footer.html index 2eeed324183..a26c349f795 100644 --- a/web/layouts/partials/footer.html +++ b/web/layouts/partials/footer.html @@ -1,7 +1,5 @@ - - - + diff --git a/web/package.json b/web/package.json index b15691e5de5..16cf606ed55 100644 --- a/web/package.json +++ b/web/package.json @@ -4,14 +4,12 @@ "build": "npx tailwindcss -o static/css/all.css -i assets/css/main.css -m && hugo", "watch": "npx tailwindcss -o static/css/all.css -i assets/css/main.css -m --watch", "server": "hugo server", - "index": "hugo-algolia -toml", - "upload-index": "hugo-algolia --toml -s" + "index": "TODO:" }, "devDependencies": { "@tailwindcss/aspect-ratio": "^0.4.0", "@tailwindcss/line-clamp": "=0.3.1", "@tailwindcss/typography": "=0.5.2", - "hugo-algolia": "=1.2.14", "tailwindcss": "=3.1.6" } } From 73b6b69acf63b5ebf945d4faab9e079a289be1ac Mon Sep 17 00:00:00 2001 From: Lars Bilke Date: Thu, 16 Nov 2023 11:51:00 +0100 Subject: [PATCH 2/5] [web] Added pagefind search. Is shown via micromodal. --- web/.gitignore | 3 + web/assets/css/main.css | 141 ++++++++++++++++++ web/assets/js/sitesearch.js | 14 ++ .../devguide/documentation/web-docs/index.md | 11 +- web/layouts/_default/baseof.html | 24 ++- web/layouts/partials/header.html | 9 ++ web/layouts/partials/nav-bar.html | 35 +---- web/package.json | 7 +- 8 files changed, 202 insertions(+), 42 deletions(-) diff --git a/web/.gitignore b/web/.gitignore index 96a23300b6c..ef51599771a 100644 --- a/web/.gitignore +++ b/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 diff --git a/web/assets/css/main.css b/web/assets/css/main.css index 4261a41f8b7..ce2cf95c51a 100644 --- a/web/assets/css/main.css +++ b/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; diff --git a/web/assets/js/sitesearch.js b/web/assets/js/sitesearch.js index 8b137891791..bccf397511e 100644 --- a/web/assets/js/sitesearch.js +++ b/web/assets/js/sitesearch.js @@ -1 +1,15 @@ +$(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(); + }); + +}); diff --git a/web/content/docs/devguide/documentation/web-docs/index.md b/web/content/docs/devguide/documentation/web-docs/index.md index fa280931522..06cbdbeee50 100644 --- a/web/content/docs/devguide/documentation/web-docs/index.md +++ b/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 diff --git a/web/layouts/_default/baseof.html b/web/layouts/_default/baseof.html index daf7149f9cc..9c295ce78c3 100644 --- a/web/layouts/_default/baseof.html +++ b/web/layouts/_default/baseof.html @@ -10,8 +10,8 @@
- {{ block "main" . }} - {{ end }} + {{ block "main" . }} + {{ end }}
@@ -21,6 +21,26 @@ {{ partial "global-footer-nav.html" . }} {{ partial "footer.html" . }} + + + diff --git a/web/layouts/partials/header.html b/web/layouts/partials/header.html index 255834056d8..9d8d8cc6f72 100644 --- a/web/layouts/partials/header.html +++ b/web/layouts/partials/header.html @@ -13,6 +13,15 @@ + + + + + From 0de97461d01f51c5887f133d4f21072cbaa5f57c Mon Sep 17 00:00:00 2001 From: Lars Bilke Date: Thu, 16 Nov 2023 14:23:43 +0100 Subject: [PATCH 5/5] [web] Better search results. --- .../hydro-component/contracer/index.md | 2 +- web/layouts/docs/gallery.html | 9 +++++---- web/layouts/docs/single.html | 2 +- web/layouts/partials/footer-nav.html | 4 ++-- web/layouts/partials/global-footer-nav.html | 9 +++++---- web/layouts/partials/page-info.html | 2 +- web/layouts/releases/single.html | 2 +- web/static/images/OGS-Logo.png | Bin 0 -> 25910 bytes 8 files changed, 16 insertions(+), 14 deletions(-) create mode 100644 web/static/images/OGS-Logo.png diff --git a/web/content/docs/benchmarks/hydro-component/contracer/index.md b/web/content/docs/benchmarks/hydro-component/contracer/index.md index 6c175213010..6ede4066649 100644 --- a/web/content/docs/benchmarks/hydro-component/contracer/index.md +++ b/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) diff --git a/web/layouts/docs/gallery.html b/web/layouts/docs/gallery.html index f070adb5574..daaad31db49 100644 --- a/web/layouts/docs/gallery.html +++ b/web/layouts/docs/gallery.html @@ -6,20 +6,21 @@
{{ if isset .Params "coupling" }} - + {{ end }} {{ if .Page.Params.breadcrumbs }} - {{ partial "docs/breadcrumbs.html" . }} + {{ partial "docs/breadcrumbs.html" . }} {{ end }}
-

+

{{ .Title }} -

+
{{ .Content }} diff --git a/web/layouts/docs/single.html b/web/layouts/docs/single.html index 8112e65e26c..9a033327190 100644 --- a/web/layouts/docs/single.html +++ b/web/layouts/docs/single.html @@ -28,7 +28,7 @@ {{ end }}
-

{{ .Title }}

+

{{ .Title }}

{{ if $baseSubsection.Params.os_selector }}