add search, fix #210

2023-03-05 21:33:21 +01:00 · 2023-03-05 21:33:21 +01:00 · 836c1e9db8
commit 836c1e9db8
parent 44d96776e2
12 changed files with 99 additions and 16 deletions
--- 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
--- 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
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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">
--- 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>
--- 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. -->
--- 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 -}}
--- 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>