From ac7b17c61370cf0b2982180b5907122e5a785817 Mon Sep 17 00:00:00 2001
From: Denys Konovalov <kontakt@denyskon.de>
Date: Sun, 5 Mar 2023 21:33:21 +0100
Subject: [PATCH] add search, fix #210

---
 .drone.dev.yml                         | 15 ++++++++++++
 .drone.yml                             | 30 +++++++++++++++++++++++
 layouts/_default/forms.html            |  2 +-
 layouts/_default/ganztagsangebote.html |  2 +-
 layouts/_default/post.html             |  2 +-
 layouts/_default/schulchronik.html     |  2 +-
 layouts/_default/wettbewerbe.html      |  2 +-
 layouts/partials/footer.html           |  2 +-
 layouts/partials/head.html             | 34 ++++++++++++++++++++++++++
 layouts/partials/header.html           | 14 +++++++----
 layouts/partials/opengraph.html        |  8 +++---
 layouts/partials/page-header.html      |  2 +-
 12 files changed, 99 insertions(+), 16 deletions(-)

diff --git a/.drone.dev.yml b/.drone.dev.yml
index 92224368..7e8a9b9d 100644
--- a/.drone.dev.yml
+++ b/.drone.dev.yml
@@ -32,6 +32,21 @@ steps:
         recursive: true
         delete: true
 
+    - name: search index
+      image: appleboy/drone-ssh
+      settings:
+        host:
+          - cantorgymnasium.de
+        username: web-push
+        key: 
+          from_secret: ssh_key
+        port:
+          from_secret: ssh_port
+        command_timeout: 1m
+        script:
+          - /opt/data/webdata/gcg-website-dev/
+          - pagefind --source=.
+
 trigger:
     branch:
         - master
diff --git a/.drone.yml b/.drone.yml
index 9afc768e..bcff1c5f 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -32,6 +32,21 @@ steps:
         recursive: true
         delete: true
 
+    - name: search index
+      image: appleboy/drone-ssh
+      settings:
+        host:
+          - cantorgymnasium.de
+        username: web-push
+        key: 
+          from_secret: ssh_key
+        port:
+          from_secret: ssh_port
+        command_timeout: 1m
+        script:
+          - /opt/data/webdata/gcg-website/
+          - pagefind --source=.
+
     - name: notification
       image: appleboy/drone-telegram
       settings:
@@ -90,6 +105,21 @@ steps:
         recursive: true
         delete: true
 
+    - name: search index
+      image: appleboy/drone-ssh
+      settings:
+        host:
+          - cantorgymnasium.de
+        username: web-push
+        key: 
+          from_secret: ssh_key
+        port:
+          from_secret: ssh_port
+        command_timeout: 1m
+        script:
+          - /opt/data/webdata/gcg-website-test/
+          - pagefind --source=.
+
 trigger:
     branch:
         - master
diff --git a/layouts/_default/forms.html b/layouts/_default/forms.html
index 7d26a993..ee1cec68 100644
--- a/layouts/_default/forms.html
+++ b/layouts/_default/forms.html
@@ -3,5 +3,5 @@
     <a href="{{ .Permalink }}" class="h4 mb-3 d-block">{{ .Title }}</a>
     <p class="mb-0">{{ .Summary | truncate 100 }}</p>
   </div>
-  <div class="d-md-table-cell text-right pr-0 pr-md-4"><a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "read_more"}}</a></div>
+  <div class="d-md-table-cell text-right pr-0 pr-md-4" data-pagefind-ignore><a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "read_more"}}</a></div>
 </li>
diff --git a/layouts/_default/ganztagsangebote.html b/layouts/_default/ganztagsangebote.html
index 4b6dca48..eded84ac 100644
--- a/layouts/_default/ganztagsangebote.html
+++ b/layouts/_default/ganztagsangebote.html
@@ -7,6 +7,6 @@
       <li class="list-inline-item"><p><i class="mdi mdi-crowd"></i> {{ .Params.Class }}</p></li>
     </ul>
     <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 20 }}</a></h4>
-    <a href="{{ .Permalink }}" class="btn btn-primary btn-sm">{{ i18n "show_more"}}</a>
+    <a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>{{ i18n "show_more"}}</a>
   </div>
 </div>
diff --git a/layouts/_default/post.html b/layouts/_default/post.html
index 09417c1b..36bad2d1 100644
--- a/layouts/_default/post.html
+++ b/layouts/_default/post.html
@@ -8,6 +8,6 @@
     </ul>
       <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 20 }}</a></h4>
     <p class="card-text">{{ .Summary | truncate 100 }}</p>
-    <a href="{{ .Permalink }}" class="btn btn-primary btn-sm">{{ i18n "read_more" }}</a>
+    <a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>{{ i18n "read_more" }}</a>
   </div>
 </article>
diff --git a/layouts/_default/schulchronik.html b/layouts/_default/schulchronik.html
index 6811b0ff..b0014542 100644
--- a/layouts/_default/schulchronik.html
+++ b/layouts/_default/schulchronik.html
@@ -1,6 +1,6 @@
 <div class="card border-primary rounded-0 hover-shadow">
   <div class="card-body">
     <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
-    <a href="{{ .Permalink }}" class="btn btn-primary btn-sm">{{ i18n "show_more"}}</a>
+    <a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>{{ i18n "show_more"}}</a>
   </div>
 </div>
diff --git a/layouts/_default/wettbewerbe.html b/layouts/_default/wettbewerbe.html
index 7e618132..b3039898 100644
--- a/layouts/_default/wettbewerbe.html
+++ b/layouts/_default/wettbewerbe.html
@@ -5,6 +5,6 @@
       <li class="list-inline-item"><p><i class="mdi mdi-bookmark-outline"></i> {{ .Params.Category }}</p></li>
     </ul>
     <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 20 }}</a></h4>
-    <a href="{{ .Permalink }}" class="btn btn-primary btn-sm text-uppercase">{{ i18n "read_more"}}</a>
+    <a href="{{ .Permalink }}" class="btn btn-primary btn-sm text-uppercase" data-pagefind-ignore>{{ i18n "read_more"}}</a>
   </div>
 </div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 5cf02bb7..a3ce7697 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-<footer>
+<footer data-pagefind-ignore>
   <div class="footer bg-footer section border-bottom">
     <div class="container">
       <div class="row">
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index dab53580..ccff5580 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -18,6 +18,22 @@
   <link rel="icon" href="{{ `media/favicon.png` | absURL }}" type="image/x-icon">
 
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tilt+Warp">
+
+  <link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
+  <script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
+
+  <script>
+    window.addEventListener('DOMContentLoaded', (event) => {
+        new PagefindUI({ element: "#search",
+        translations: {
+          placeholder: "Suchen...",
+          zero_results: "Leider konnten keine Ergebnisse zu [SEARCH_TERM] gefunden werden",
+          clear_search: "Löschen"
+        }
+      });
+    });
+  </script>
+
   
   {{ range .Site.Params.plugins.head_js }}
     <script src="{{ . | absURL }}"></script>
@@ -46,3 +62,21 @@
   {{ partial "twitter" . }}
 
 </head>
+
+<div id="pagefind-search" class="modal" data-pagefind-ignore>
+  <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3 class="modal-title">Suche</h3>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="content">
+          <div id="search"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 0df24cb5..90fd085e 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,4 +1,4 @@
-<header class="fixed-top header">
+<header class="fixed-top header" data-pagefind-ignore>
   {{ if .Site.Params.top_header }}
   <div class="top-header py-2 bg-white">
     <div class="container">
@@ -30,6 +30,7 @@
   <div class="navigation w-100 {{ if .Site.Params.top_header }} top-hider {{ end }}">
     <div class="container">
       <nav class="navbar navbar-expand-lg navbar-dark p-0">
+        
         <a class="navbar-brand" href="{{ .Site.BaseURL | relLangURL }}"><img height="60"
             src="{{ .Site.Params.logo | absURL }}" class="py-2" alt="{{ .Site.Title }}"></a>
         <button class="navbar-toggler rounded-0" type="button" data-toggle="collapse" data-target="#navigation"
@@ -63,6 +64,9 @@
             </li>
             {{ end }}
             {{ end }}
+            <li class="nav-item">
+              <div class="nav-link" onclick="$('#pagefind-search').modal('show');"><i class="mdi mdi-magnify"></i> Suche</button>
+            </li>
           </ul>
 
           {{ if .IsTranslated }}
@@ -102,7 +106,7 @@
   {{ if and $top_banner.enable }}
   {{ if or (not $top_banner.temporarily.enable) (and $top_banner.temporarily.enable (and (le ($top_banner.temporarily.start_date | time.AsTime).Unix now.Unix ) (ge ($top_banner.temporarily.end_date | time.AsTime).Unix now.Unix))) }}
   {{ with $top_banner }}
-  <div id="top-banner" class="p-3 top-banner" style="background:{{ .color }}">
+  <div id="top-banner" class="p-3 top-banner" style="background:{{ .color }}" data-pagefind-ignore>
     <div class="container">
       <div class="no-gutters align-items-center">
         <div style="color:{{ .font_color }}"><b><i class="{{ .icon }}"></i> {{ .text | markdownify }}</b></div>
@@ -134,12 +138,12 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
 
 <!-- Root element of PhotoSwipe. Must have class pswp. -->
-<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" data-pagefind-ignore>
 <!-- Background of PhotoSwipe.
      It's a separate element, as animating opacity is faster than rgba(). -->
-<div class="pswp__bg"></div>
+<div class="pswp__bg" data-pagefind-ignore></div>
 <!-- Slides wrapper with overflow:hidden. -->
-<div class="pswp__scroll-wrap">
+<div class="pswp__scroll-wrap" data-pagefind-ignore>
     <!-- Container that holds slides.
       PhotoSwipe keeps only 3 of them in DOM to save memory.
       Don't modify these 3 pswp__item elements, data is added later on. -->
diff --git a/layouts/partials/opengraph.html b/layouts/partials/opengraph.html
index 7192a966..1b562917 100644
--- a/layouts/partials/opengraph.html
+++ b/layouts/partials/opengraph.html
@@ -4,18 +4,18 @@
 <meta property="og:url" content="{{ .Permalink }}" />
 
 {{- with $.Params.images -}}
-{{- range first 6 . }}<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
+{{- range first 6 . }}<meta property="og:image" data-pagefind-meta="image[content]" content="{{ . | absURL }}" />{{ end -}}
 {{- else -}}
 {{- $images := $.Resources.ByType "image" -}}
 {{- $featured := $images.GetMatch "*feature*" -}}
 {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
 {{- with $featured -}}
-<meta property="og:image" content="{{ $featured.Permalink }}"/>
+<meta property="og:image" data-pagefind-meta="image[content]" content="{{ $featured.Permalink }}"/>
 {{- else -}}
 {{- with $.Params.image -}}
-<meta property="og:image" content="{{ . | absURL }}"/>
+<meta property="og:image" data-pagefind-meta="image[content]" content="{{ . | absURL }}"/>
 {{- else -}}
-{{- with $.Site.Params.images }}<meta property="og:image" content="{{ index . 0 | absURL }}"/>{{ end -}}
+{{- with $.Site.Params.images }}<meta property="og:image" data-pagefind-meta="image[content]" content="{{ index . 0 | absURL }}"/>{{ end -}}
 {{- end -}}
 {{- end -}}
 {{- end -}}
diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html
index 30803200..99c4a033 100644
--- a/layouts/partials/page-header.html
+++ b/layouts/partials/page-header.html
@@ -3,7 +3,7 @@
     <div class="row">
       <div class="col-md-8">
         <ul class="list-inline">
-          <li class="list-inline-item h2"><a class="text-primary font-secondary" href="{{ if .Params.Previous.Enable }}{{ .Params.Previous.Link }}{{ else if .Parent.Page }}{{ .Parent.Page.Permalink }}{{ else }}{{ .Site.BaseURL | absLangURL }}{{end}}">{{ if .Params.Previous.Enable }}{{ .Params.Previous.Title }}{{ else }}{{ with .Parent.Params.title }}{{.}}{{ else }}{{ .Site.Params.home }}{{end}}{{ end }}</a></li>
+          <li class="list-inline-item h2" data-pagefind-ignore><a class="text-primary font-secondary" href="{{ if .Params.Previous.Enable }}{{ .Params.Previous.Link }}{{ else if .Parent.Page }}{{ .Parent.Page.Permalink }}{{ else }}{{ .Site.BaseURL | absLangURL }}{{end}}">{{ if .Params.Previous.Enable }}{{ .Params.Previous.Title }}{{ else }}{{ with .Parent.Params.title }}{{.}}{{ else }}{{ .Site.Params.home }}{{end}}{{ end }}</a></li>
           <li class="list-inline-item h2"><i class="mdi mdi-chevron-double-right text-white"></i></li>
           <li class="list-inline-item text-white h2 font-secondary">{{ .Title }}</li>
         </ul>