added pagefind ui wip

assets/js/theme/design-system/search.js

+class Search {
+    constructor(button) {
+        this.button = button;
+        this.element = document.querySelector('.search__modal');
+        this.closeButton = this.element.querySelector('.search__close');
+
+        if (!this.element) {
+            return;
+        }
+        this.state = {
+            isOpened: false
+        };
+
+        this.listen();
+    }
+
+    listen() {
+        this.button.addEventListener('click', () => {
+            this.toggle(true);
+            this.searchInput = this.element.querySelector('.pagefind-ui__search-input');
+            this.searchInput.focus();
+        });
+        this.closeButton.addEventListener('click', () => {
+            this.toggle(false);
+        });
+
+        window.addEventListener('keydown', (event) => {
+            if (event.keyCode === 27 || event.key === 'Escape') {
+                this.toggle(false);
+                this.button.focus();
+            } else if (event.key === "Tab" && this.state.isOpened) {
+                this.innerFocus(event);
+                event.preventDefault();
+            }
+        });
+    }
+
+    innerFocus(event) {
+        const focusables = 'a, button, input, textarea, select, details, [tabindex], [contenteditable="true"]';
+        const elements = this.element.querySelectorAll(focusables);
+
+        const focusableInDialog = Array.from(elements).filter(element => element.tabIndex >= 0);
+        const firstFocusable = focusableInDialog[0];
+        const lastFocusable = focusableInDialog.at(-1);
+
+        if (!this.state.isOpened) {
+            return;
+        }
+        if (!this.element.contains(event.target) && event.shiftKey) {
+            lastFocusable.focus();
+        }
+        else if (!this.element.contains(event.target)) {
+            firstFocusable.focus();
+        }
+        firstFocusable.focus();
+    }
+
+    toggle(open = !this.state.isOpened) {
+        this.state.isOpened = open;
+        this.element.setAttribute('aria-hidden', !this.state.isOpened);
+        this.button.setAttribute('aria-expanded', this.state.isOpened);
+    }
+}
+
+// Selectors
+(function () {
+    const searchButton = document.querySelector(".pagefind-ui__toggle");
+    new Search(searchButton);
+})();

assets/js/theme/index.js

@@ -4,6 +4,7 @@ import './design-system/dropdowns';
 import './design-system/font';
 import './design-system/mainMenu';
 import './design-system/modal';
+import './design-system/search';
 import './design-system/toc';
 import './blocks/keyFigures';
 import './blocks/organizationChart';

assets/sass/_theme/design-system/search.sass

+
+.pagefind-ui__toggle
+    @include meta
+    cursor: pointer
+    padding: half($spacing0) $spacing0
+.search
+    &__close
+        @include button-reset
+        @include meta
+        @include icon-block(close, after)
+        position: absolute
+        right: $spacing3
 #search
-    top: $spacing1
-    right: $spacing1
-    position: absolute
-    z-index: 100
-    max-width: 400px
+    background: $color-background
+    height: 100vh
+    left: 0
+    padding: $spacing4 $spacing3 $spacing3
+    position: fixed
+    top: 0
+    width: 100vw
+    z-index: 80
+    &[aria-hidden=true]
+        display: none
     .pagefind-ui
         &__search-input
-        &__clear
+            border-left: 0
+            border-right: 0
+            border-radius: 0
+            border-top: 0
+            padding-right: $spacing1 !important
+            position: relative
+        &__form
+            position: relative
+        &__message
+            text-align: right
+            position: absolute
+            top: $spacing3
+        &__search-clear
+            @include button-reset
+            color: $color-accent
         &__drawer
             z-index: 99
         &__results-area
-            position: fixed
-            background: $color-background
-            left: 0
-            right: 0
-            top: 200px
-            bottom: 0
-            padding: $spacing3
-            z-index: 101
\ No newline at end of file
+            margin-top: $spacing3
+        &__result
+            list-style: none
+            position: relative
+            &-thumb
+                grid-column: 1/3
+                @include media-breakpoint-down(md)
+                    display: none
+            + li
+                margin-top: half($spacing3)
+            @include media-breakpoint-up(md)
+                @include grid
+                &-inner
+                    grid-column: 3/9
+        &__inner 
+            mark
+                background-color: $color-accent
+        &__result-title a
+            @include h4
+            @include stretched-link
+        @include media-breakpoint-up(md)
+            &__form
+                width: col(8)
+            &__search-input,
+            &__message
+                    width: col(8,8)

config.yaml

@@ -216,4 +216,7 @@ params:
         item:
           mobile:   327x388
           tablet:   208x247
-          desktop:  300x356
\ No newline at end of file
+          desktop:  300x356
+  search: 
+    active: false
+    position: menu
\ No newline at end of file

i18n/en.yml

@@ -54,6 +54,9 @@ commons:
     search: Go to search
     shortcut_navigation: Navigation d'accès rapide
     transcription: Transcription
+  search:
+    title: Search
+    close: Close search
   backtotop: Back to top
   biography: Biography
   breadcrumb: Breadcrumb

i18n/fr.yml

@@ -54,6 +54,9 @@ commons:
     search: Accéder à la recherche
     shortcut_navigation: Navigation d'accès rapide
     transcription: Transcription
+  search: 
+    title: Rechercher
+    close: Fermer la recherche
   backtotop: Haut de page
   biography: Biographie
   breadcrumb: Fil d’ariane

layouts/_default/baseof.html

@@ -13,7 +13,6 @@
   </head>
   <body class="{{ partial "GetBodyclass" . }}">
     {{- partial "header/accessibility.html" -}}
-    {{- partial "header/search.html" . -}}
     {{- partial "header/header.html" . -}}
     <main{{ if .Params.contents }} class="page-with-blocks"{{ end }} id="main" tabindex="-1">
       {{- block "main" . }}{{- end }}

layouts/partials/commons/menu.html

@@ -62,7 +62,12 @@
     </li>
     {{- end -}}
   {{ end -}}
-
+  {{ if and (eq $kind "primary") (site.Params.search.active)}}
+    <li class="pagefind-ui__toggle" role="button" aria-expanded="false">
+      {{ i18n (printf "commons.search.title") }}
+    </li>
+    {{- partial "header/search.html" . -}}
+  {{ end }}
   {{ if and (eq $kind "primary") (site.Params.menu.i18n.display) }}
     {{ partial "header/i18n.html" . }}
   {{ end }}

layouts/partials/head/csp.html

 {{- with site.Data.website.external_domains -}}
 <meta
   http-equiv="-Content-Security-Policy"
-  content="default-src 'self' {{ delimit . " " }} {{ if not hugo.IsProduction }}'unsafe-inline'{{ end }}" />
+  content="default-src 'self' {{ delimit . " " }} {{ if not hugo.IsProduction }}'unsafe-inline'{{ end }};{{ if site.Params.search.active }} img-src * 'self' data: https:;{{ end }}"/>
 {{- end -}}
\ No newline at end of file

layouts/partials/header/search.html

-{{ if site.Params.search.pagefind }}
-  <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
-  <script src="/pagefind/pagefind-ui.js"></script>
-  <div id="search"></div>
+<script src="/pagefind/pagefind-ui.js"></script>
+  <div id="search" class="search__modal" aria-hidden="true" aria-modal="true" role="dialog">
+    <button class="search__close" aria-label="{{ i18n "commons.search.close" }}">{{ i18n "commons.search.close" }}</button>
+  </div>
   <script>
-      window.addEventListener('DOMContentLoaded', (event) => {
-          new PagefindUI({ element: "#search", showSubResults: true });
-      });
-  </script>
-{{ end }}
\ No newline at end of file
+    window.addEventListener('DOMContentLoaded', (event) => {
+        new PagefindUI({ element: "#search", showSubResults: true });
+    });
+</script>
\ No newline at end of file

pagefind.yml

+exclude_selectors:
+  - ".pages__section, .block-pages"
+  - ".posts__section, .block-posts"
+  - ".block-partners"
+  - ".persons__section, .block-organization_chart"
+  - ".programs__section"
+  - ".events__section, .block-agenda"
+  - ".diplomas__taxonomy"
\ No newline at end of file