From 706f0b60f700e105c4481a5daf669aa068122b7e Mon Sep 17 00:00:00 2001
From: zhaohuabing <zhaohuabing@gmail.com>
Date: Mon, 10 Oct 2022 19:24:51 +0800
Subject: add static in-site search: pagefind

Signed-off-by: zhaohuabing <zhaohuabing@gmail.com>
---
 layouts/_default/archive.html         |   2 +-
 layouts/partials/nav.html             |   7 +--
 layouts/partials/pagination.html      |   2 +-
 layouts/partials/post_list.html       |   2 +
 layouts/partials/posts.html           |   2 +-
 layouts/partials/search-algolia.html  | 109 ++++++++++++++++++++++++++++++++++
 layouts/partials/search-pagefind.html |   8 +++
 layouts/partials/search.html          | 109 ----------------------------------
 layouts/search/list.html              |   6 +-
 9 files changed, 129 insertions(+), 118 deletions(-)
 create mode 100644 layouts/partials/search-algolia.html
 create mode 100644 layouts/partials/search-pagefind.html
 delete mode 100644 layouts/partials/search.html

diff --git a/layouts/_default/archive.html b/layouts/_default/archive.html
index 4a1bbf0..8e46cb5 100644
--- a/layouts/_default/archive.html
+++ b/layouts/_default/archive.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{ $pages := (where (where .Site.Pages "Type" "post") "IsPage" true) }}
 
-<div class="container">
+<div data-pagefind-ignore="all" class="container">
     <div class="row">
    	    <div class="
             col-lg-8 col-lg-offset-1
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index c63f30e..35cc7a2 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -39,12 +39,9 @@
 		    {{ range .Site.Params.addtional_menus }}
                         <li><a href="{{.href | relLangURL}}">{{.title}}</a></li>
                     {{ end }}
-
-                    {{ if .Site.Params.algolia_search }}
-		    <li>
+		            <li>
                         <a href="{{ "search" | relURL }}"><i class="fa fa-search"></i></a>
-		    </li>
-                    {{ end }}
+		           </li>
                 </ul>
             </div>
         </div>
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
index 26ff485..8906e97 100644
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@@ -1,7 +1,7 @@
 <!-- Pagination -->
 {{ $pag := $.Paginator }}
 {{ if gt $pag.TotalPages 1 }}
-<ul class="pager">
+<ul class="pager" data-pagefind-ignore="all">
     {{ if $pag.HasPrev }}
     <li class="previous">
         <a href="{{ $pag.Prev.URL }}">&larr; Newer Posts</a>
diff --git a/layouts/partials/post_list.html b/layouts/partials/post_list.html
index 4f6f305..60ba13c 100644
--- a/layouts/partials/post_list.html
+++ b/layouts/partials/post_list.html
@@ -1,4 +1,5 @@
 <!-- post list -->
+<div data-pagefind-ignore="all">
 {{ range $index, $element := $.Paginator.Pages }}
 <div class="post-preview">
     <a href="{{ .Permalink }}">
@@ -39,3 +40,4 @@
 </div>
 <hr>
 {{ end }}
+</div>
diff --git a/layouts/partials/posts.html b/layouts/partials/posts.html
index bc47dff..b400e7f 100644
--- a/layouts/partials/posts.html
+++ b/layouts/partials/posts.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div data-pagefind-ignore="all" class="container">
     <div class="row">
         <!-- USE SIDEBAR -->
         <!-- Post Container -->
diff --git a/layouts/partials/search-algolia.html b/layouts/partials/search-algolia.html
new file mode 100644
index 0000000..0150a2c
--- /dev/null
+++ b/layouts/partials/search-algolia.html
@@ -0,0 +1,109 @@
+<!-- Including InstantSearch.js library and styling -->
+<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css">
+
+<div id="search-searchbar"></div>
+ <div class="post-list" id="search-hits">
+ </div>
+
+<script>
+const search = instantsearch({
+  appId: '{{ .Site.Params.algolia_appId }}',
+  indexName: '{{ .Site.Params.algolia_indexName }}',
+  apiKey: '{{ .Site.Params.algolia_apiKey }}'
+});
+
+const hitTemplate = function(hit) {
+/*  if (hit === null){
+      return;
+  }*/
+  let date = '';
+  if (hit.date) {
+    date = moment.unix(hit.date).format('MMM D, YYYY');
+  }
+  let url = `${hit.url}#${hit.anchor}`;
+  const title = hit._highlightResult.title.value;
+
+  let breadcrumbs = '';
+  if (hit._highlightResult.headings) {
+    breadcrumbs = hit._highlightResult.headings.map(match => {
+      return `<span class="post-breadcrumb">${match.value}</span>`
+    }).join(' > ')
+  }
+
+  let content = "" ; 
+  if (hit._highlightResult.content){
+      content = hit._highlightResult.content.value;
+  }
+  else{
+      content = hit.summary;
+  }
+
+
+  return `
+    <div class="post-item">
+      <span class="post-meta">${date}</span>
+      <h2><a class="post-link" href="${url}">${title}</a></h2>
+      <a href="${url}" class="post-breadcrumbs">${breadcrumbs}</a>
+      <div class="post-snippet">${content}</div>
+    </div>
+  `;
+}
+
+
+search.addWidget(
+  instantsearch.widgets.searchBox({
+    container: '#search-searchbar',
+    placeholder: 'Search into posts...',
+    poweredBy: true // This is required if you're on the free Community plan
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.hits({
+    container: '#search-hits',
+    templates: {
+      item: hitTemplate
+    }
+  })
+);
+
+search.start();
+</script>
+
+<style>
+.ais-search-box {
+  max-width: 100%;
+  margin-bottom: 15px;
+}
+.post-item {
+  margin-bottom: 30px;
+}
+.post-link .ais-Highlight {
+  color: #111;
+  font-style: normal;
+  text-decoration: underline;
+}
+.post-breadcrumbs {
+  color: #424242;
+  display: block;
+}
+.post-breadcrumb {
+  font-size: 18px;
+  color: #424242;
+}
+.post-breadcrumb .ais-Highlight {
+  font-weight: bold;
+  font-style: normal;
+}
+.post-snippet .ais-Highlight {
+  color: #2a7ae2;
+  font-style: normal;
+  font-weight: bold;
+}
+.post-snippet img {
+  display: none;
+}
+</style>
diff --git a/layouts/partials/search-pagefind.html b/layouts/partials/search-pagefind.html
new file mode 100644
index 0000000..89b0647
--- /dev/null
+++ b/layouts/partials/search-pagefind.html
@@ -0,0 +1,8 @@
+<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
+<script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
+<div id="search"></div>
+<script>
+    window.addEventListener('DOMContentLoaded', (event) => {
+        new PagefindUI({ element: "#search" });
+    });
+</script>
\ No newline at end of file
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
deleted file mode 100644
index 0150a2c..0000000
--- a/layouts/partials/search.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!-- Including InstantSearch.js library and styling -->
-<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment.min.js"></script>
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css">
-
-<div id="search-searchbar"></div>
- <div class="post-list" id="search-hits">
- </div>
-
-<script>
-const search = instantsearch({
-  appId: '{{ .Site.Params.algolia_appId }}',
-  indexName: '{{ .Site.Params.algolia_indexName }}',
-  apiKey: '{{ .Site.Params.algolia_apiKey }}'
-});
-
-const hitTemplate = function(hit) {
-/*  if (hit === null){
-      return;
-  }*/
-  let date = '';
-  if (hit.date) {
-    date = moment.unix(hit.date).format('MMM D, YYYY');
-  }
-  let url = `${hit.url}#${hit.anchor}`;
-  const title = hit._highlightResult.title.value;
-
-  let breadcrumbs = '';
-  if (hit._highlightResult.headings) {
-    breadcrumbs = hit._highlightResult.headings.map(match => {
-      return `<span class="post-breadcrumb">${match.value}</span>`
-    }).join(' > ')
-  }
-
-  let content = "" ; 
-  if (hit._highlightResult.content){
-      content = hit._highlightResult.content.value;
-  }
-  else{
-      content = hit.summary;
-  }
-
-
-  return `
-    <div class="post-item">
-      <span class="post-meta">${date}</span>
-      <h2><a class="post-link" href="${url}">${title}</a></h2>
-      <a href="${url}" class="post-breadcrumbs">${breadcrumbs}</a>
-      <div class="post-snippet">${content}</div>
-    </div>
-  `;
-}
-
-
-search.addWidget(
-  instantsearch.widgets.searchBox({
-    container: '#search-searchbar',
-    placeholder: 'Search into posts...',
-    poweredBy: true // This is required if you're on the free Community plan
-  })
-);
-
-search.addWidget(
-  instantsearch.widgets.hits({
-    container: '#search-hits',
-    templates: {
-      item: hitTemplate
-    }
-  })
-);
-
-search.start();
-</script>
-
-<style>
-.ais-search-box {
-  max-width: 100%;
-  margin-bottom: 15px;
-}
-.post-item {
-  margin-bottom: 30px;
-}
-.post-link .ais-Highlight {
-  color: #111;
-  font-style: normal;
-  text-decoration: underline;
-}
-.post-breadcrumbs {
-  color: #424242;
-  display: block;
-}
-.post-breadcrumb {
-  font-size: 18px;
-  color: #424242;
-}
-.post-breadcrumb .ais-Highlight {
-  font-weight: bold;
-  font-style: normal;
-}
-.post-snippet .ais-Highlight {
-  color: #2a7ae2;
-  font-style: normal;
-  font-weight: bold;
-}
-.post-snippet img {
-  display: none;
-}
-</style>
diff --git a/layouts/search/list.html b/layouts/search/list.html
index d177d48..35e37df 100644
--- a/layouts/search/list.html
+++ b/layouts/search/list.html
@@ -10,7 +10,11 @@
             col-xs-12
             post-container
         ">
-            {{ partial "search.html" . }}
+        {{ if .Site.Params.algolia_search }}
+            {{ partial "search-algolia.html" . }}
+        {{ else }}
+            {{ partial "search-pagefind.html" . }}
+        {{ end }}
        	</div>
         {{ partial "sidebar.html" . }}
 	</div>
-- 
cgit v1.2.3