add search page

assets/css/src/search.css

@@ -0,0 +1,24 @@
+.search {
+  background-color: var(--color-pink-light);
+  width: 100vw;
+  height: 70vh;
+  padding-top: 20vh !important;
+}
+
+.search-form {
+  width: fit-content;
+  margin: auto;
+}
+
+.search-input {
+  border-bottom: var(--border);
+  width: 40vw;
+  margin-right: 2rem;
+  padding: 0.3rem 0.5rem;
+  font-size: var(--font-size-h2);
+}
+
+.search-submit {
+  width: 2rem;
+  height: 2rem;
+}

assets/css/style.css

@@ -16,5 +16,6 @@
 @import url("src/collapsable-section.css");
 @import url("src/program-filters.css");
 @import url("src/page-sectioned.css");
+@import url("src/search.css");
 @import url("src/footer.css");
 @import url("src/responsive.css");

site/config/config.php

@@ -38,6 +38,7 @@ return [
     require_once(__DIR__ . '/routes/update-mapado-event.php'),
     require_once(__DIR__ . '/routes/mapado-fetch.php'),
     require_once(__DIR__ . '/routes/brevo-create-contact.php'),
+    require_once(__DIR__ . '/routes/virtual-search.php')
   ],
   'hooks' => [
     'page.update:after' => require_once(__DIR__ . '/hooks/update-mapado-event.php')

site/config/routes/virtual-search.php

@@ -0,0 +1,16 @@
+<?php
+
+return [
+  'pattern' => '/recherche',
+  'action'  => function () {
+        return Page::factory([
+            'slug' => 'search',
+            'template' => 'search',
+            'model' => 'search',
+            'content' => [
+                'title' => 'Recherche',
+                'uuid'  => Kirby\Uuid\Uuid::generate(),
+            ]
+        ]);
+  }
+];

site/controllers/search.php

@@ -0,0 +1,14 @@
+<?php
+
+return function ($site) {
+
+  $query   = get('q');
+  $allEvents = page('programme')->children()->children();
+  $results = $allEvents->search($query, 'title|text');
+
+  return [
+    'query'   => $query,
+    'results' => $results,
+  ];
+
+};

site/snippets/nav.php

@@ -23,9 +23,9 @@
         <?php endforeach ?>
       </ul>
       <?php snippet('ticket', ['link' => option('ticketingUrl')]) ?>
-      <button class="main-nav__search">
+      <a href="/recherche" class="main-nav__search" title="Aller à la recherche">
         <?= svg('/assets/images/icons/search.svg') ?>
-      </button>
+      </a>
       <button class="burger-btn" aria-expanded="false" title="Ouvrir le menu">
         <span class="sr-only">Ouvrir le menu</span>
         <span class="burger-btn__line"></span>

site/templates/search.php

@@ -0,0 +1,27 @@
+<?php snippet('header') ?>
+
+<section>
+  <?php if ($query): ?>
+    <?php if ($results->count() === 0): ?>
+      <h1>Pas de résultats pour '<?= $query ?>'</h1>      
+    <?php else: ?>
+    <h1>Résultats pour '<?= $query ?>'</h1>  
+    <?php endif ?>
+  <?php else: ?>
+    <h1><?= $page->title() ?></h1>
+  <?php endif ?>
+</section>
+
+<?php if ($query): ?>
+  <?php snippet('events-grid', ['events' => $results, 'columns' => 3])  ?>
+<?php else: ?>
+
+  <section class="search">
+    <form class="search-form">
+      <input class="search-input" type="search" aria-label="Search" name="q" value="<?= html($query) ?>" autofocus>
+      <button class="search-submit" type="submit"><img src="/assets/images/icons/search.svg" alt=""></button>
+    </form>
+  </section>
+<?php endif ?>
+
+<?php snippet('footer') ?>