add search, fix #210

.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

.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

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>

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>

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>

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>

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>

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">

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>

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. -->

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 -}}

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>