From 168f1babc3e74c7501730fa61e970f55f96813d1 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Wed, 27 Nov 2024 16:20:21 +0800
Subject: [PATCH 1/5] :sparkles: Feat: add page layout "search"

---
 hugo.toml                | 11 ++++++++++-
 layouts/page/search.html | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 layouts/page/search.html

diff --git a/hugo.toml b/hugo.toml
index 2268c36a..04554ccf 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -389,7 +389,7 @@ enableEmoji = true
   # Search config
   [params.search]
     enable = false
-    # type of search engine ["algolia", "fuse"]
+    # type of search engine ["algolia", "fuse", "cse"]
     type = "fuse"
     # max index length of the chunked content
     contentLength = 4000
@@ -418,6 +418,15 @@ enableEmoji = true
       ignoreLocation = false
       useExtendedSearch = false
       ignoreFieldNorm = false
+    # FixIt 0.3.16 | NEW Custom Search Engine (CSE)
+    [params.search.cse]
+      # support cse engine: ["google", "bing"]
+      engine = "google"
+      # Google: https://programmablesearchengine.google.com/
+      # Google Custom Search Engine Context
+      cx = ""
+      # Bing: https://www.customsearch.ai/
+      # TODO
 
   # Header config
   [params.header]
diff --git a/layouts/page/search.html b/layouts/page/search.html
new file mode 100644
index 00000000..04b97484
--- /dev/null
+++ b/layouts/page/search.html
@@ -0,0 +1,37 @@
+{{- /*
+  TODO Adapting to dark mode, maybe use css variables
+*/ -}}
+{{- define "title" -}}
+  {{- cond (.Param "capitalizeTitles") (title .Title) .Title -}}
+  {{- if .Site.Params.withSiteTitle }} {{ .Site.Params.titleDelimiter }} {{ .Site.Title }}{{- end -}}
+{{- end -}}
+
+{{- define "content" -}}
+  {{- $params := partial "function/params.html" -}}
+  {{- $cse := .Site.Params.search.cse -}}
+  <article class="page single special cse">
+    <div class="header">
+      {{- /* Title */ -}}
+      <h1 class="single-title animate__animated animate__pulse animate__faster">{{- cond (.Param "capitalizeTitles") (title .Title) .Title -}}</h1>
+
+      {{- /* Subtitle */ -}}
+      {{- with $params.subtitle -}}<p class="single-subtitle animate__animated animate__fadeIn">{{ . | $.RenderString }}</p>{{- end -}}
+    </div>
+
+    {{- /* Content */ -}}
+    <div class="content" id="content">
+      {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
+    </div>
+
+    {{- /* Google CSE */ -}}
+    {{- if eq $cse.engine "google" -}}
+      {{- with $cse.cx -}}
+        <script async defer src="https://cse.google.com/cse.js?cx={{ . }}"></script>
+        <div class="gcse-searchbox"></div>
+        <div class="gcse-searchresults"></div>
+      {{- end -}}
+    {{- end -}}
+
+    {{- /* TODO Bing CSE */ -}}
+  </article>
+{{- end -}}

From 4886c053958eb3613e40cf011abaab301d0da4f4 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Wed, 27 Nov 2024 17:02:06 +0800
Subject: [PATCH 2/5] :lipstick: Style: update search layout page style

---
 assets/css/_core/_header.scss                 |  2 +-
 assets/css/_page/_index.scss                  |  1 -
 assets/css/_page/_special.scss                |  6 ------
 assets/css/_page/{ => _special}/_friends.scss |  2 +-
 assets/css/_page/_special/_index.scss         | 14 ++++++++++++++
 assets/css/_page/_special/_search.scss        |  9 +++++++++
 hugo.toml                                     |  5 ++---
 layouts/page/search.html                      |  4 ++--
 8 files changed, 29 insertions(+), 14 deletions(-)
 delete mode 100644 assets/css/_page/_special.scss
 rename assets/css/_page/{ => _special}/_friends.scss (96%)
 create mode 100644 assets/css/_page/_special/_index.scss
 create mode 100644 assets/css/_page/_special/_search.scss

diff --git a/assets/css/_core/_header.scss b/assets/css/_core/_header.scss
index 80522e0f..a231c86f 100644
--- a/assets/css/_core/_header.scss
+++ b/assets/css/_core/_header.scss
@@ -118,7 +118,7 @@ header {
   }
 }
 
-.search {
+.menu .search {
   position: relative;
 
   input {
diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
index 6ac5e31c..4d326c03 100644
--- a/assets/css/_page/_index.scss
+++ b/assets/css/_page/_index.scss
@@ -17,4 +17,3 @@
 @import '_home';
 @import '_404';
 @import '_offline';
-@import '_friends';
diff --git a/assets/css/_page/_special.scss b/assets/css/_page/_special.scss
deleted file mode 100644
index 3a8f18d2..00000000
--- a/assets/css/_page/_special.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.special {
-  .single-title,
-  .single-subtitle {
-    text-align: right;
-  }
-}
diff --git a/assets/css/_page/_friends.scss b/assets/css/_page/_special/_friends.scss
similarity index 96%
rename from assets/css/_page/_friends.scss
rename to assets/css/_page/_special/_friends.scss
index 5d0dce1a..25738af9 100644
--- a/assets/css/_page/_friends.scss
+++ b/assets/css/_page/_special/_friends.scss
@@ -1,5 +1,5 @@
 /**
- * @Description: Style of layout named 'friends'.
+ * Style of layout named 'friends'.
  * @Author: Lruihao <https://lruihao.cn>
  * @Updated:  2022/3/11 21:36
  */
diff --git a/assets/css/_page/_special/_index.scss b/assets/css/_page/_special/_index.scss
new file mode 100644
index 00000000..090bcd81
--- /dev/null
+++ b/assets/css/_page/_special/_index.scss
@@ -0,0 +1,14 @@
+.special {
+  .single-title,
+  .single-subtitle {
+    text-align: right;
+  }
+
+  &.friends {
+    @import '_friends';
+  }
+
+  &.search {
+    @import '_search';
+  }
+}
diff --git a/assets/css/_page/_special/_search.scss b/assets/css/_page/_special/_search.scss
new file mode 100644
index 00000000..6ae55588
--- /dev/null
+++ b/assets/css/_page/_special/_search.scss
@@ -0,0 +1,9 @@
+// Style of layout named 'search'
+
+// Google CSE
+.gcse-searchbox:empty,
+.gcse-searchresults:empty {
+  display: none;
+}
+
+// Bing CSE (Unsupported)
diff --git a/hugo.toml b/hugo.toml
index 04554ccf..dab6f241 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -420,13 +420,12 @@ enableEmoji = true
       ignoreFieldNorm = false
     # FixIt 0.3.16 | NEW Custom Search Engine (CSE)
     [params.search.cse]
-      # support cse engine: ["google", "bing"]
+      # CSE engine: ["google", "bing"]
       engine = "google"
       # Google: https://programmablesearchengine.google.com/
       # Google Custom Search Engine Context
       cx = ""
-      # Bing: https://www.customsearch.ai/
-      # TODO
+      # Bing (Unsupported): https://www.customsearch.ai/
 
   # Header config
   [params.header]
diff --git a/layouts/page/search.html b/layouts/page/search.html
index 04b97484..9c741fd1 100644
--- a/layouts/page/search.html
+++ b/layouts/page/search.html
@@ -9,7 +9,7 @@
 {{- define "content" -}}
   {{- $params := partial "function/params.html" -}}
   {{- $cse := .Site.Params.search.cse -}}
-  <article class="page single special cse">
+  <article class="page single special search">
     <div class="header">
       {{- /* Title */ -}}
       <h1 class="single-title animate__animated animate__pulse animate__faster">{{- cond (.Param "capitalizeTitles") (title .Title) .Title -}}</h1>
@@ -32,6 +32,6 @@
       {{- end -}}
     {{- end -}}
 
-    {{- /* TODO Bing CSE */ -}}
+    {{- /* Bing CSE (Unsupported) */ -}}
   </article>
 {{- end -}}

From 6a04876258d968753a149173952cbe062bd406ca Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Wed, 27 Nov 2024 17:53:29 +0800
Subject: [PATCH 3/5] :memo: Docs: add search archetype

command: hugo new content search/index.md
---
 archetypes/search.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 archetypes/search.md

diff --git a/archetypes/search.md b/archetypes/search.md
new file mode 100644
index 00000000..3489fa5a
--- /dev/null
+++ b/archetypes/search.md
@@ -0,0 +1,5 @@
+---
+title: {{ T "assets.search" }}
+layout: search
+date: {{ .Date }}
+---

From 46edabd81a22ca4101b3bf7a963a4e75be5c99c2 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Wed, 27 Nov 2024 17:55:43 +0800
Subject: [PATCH 4/5] :memo: Chore: add todo comments

---
 assets/css/_page/_special/_search.scss | 1 +
 layouts/page/search.html               | 3 ---
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/assets/css/_page/_special/_search.scss b/assets/css/_page/_special/_search.scss
index 6ae55588..6b6c9e6f 100644
--- a/assets/css/_page/_special/_search.scss
+++ b/assets/css/_page/_special/_search.scss
@@ -1,4 +1,5 @@
 // Style of layout named 'search'
+// TODO Adapting to dark mode, maybe use css variables
 
 // Google CSE
 .gcse-searchbox:empty,
diff --git a/layouts/page/search.html b/layouts/page/search.html
index 9c741fd1..1eeb2ee0 100644
--- a/layouts/page/search.html
+++ b/layouts/page/search.html
@@ -1,6 +1,3 @@
-{{- /*
-  TODO Adapting to dark mode, maybe use css variables
-*/ -}}
 {{- define "title" -}}
   {{- cond (.Param "capitalizeTitles") (title .Title) .Title -}}
   {{- if .Site.Params.withSiteTitle }} {{ .Site.Params.titleDelimiter }} {{ .Site.Title }}{{- end -}}

From ec9a544f0490049188dc1d2722e36f5fecc978fa Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Thu, 28 Nov 2024 11:23:35 +0800
Subject: [PATCH 5/5] :sparkles: Feat: add Google CSE support

---
 assets/js/theme.js           | 50 ++++++++++++++++++++++++++----------
 hugo.toml                    | 19 +++++++++-----
 layouts/page/search.html     |  4 +--
 layouts/partials/assets.html | 10 ++++++++
 4 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/assets/js/theme.js b/assets/js/theme.js
index fecdb263..fb33748b 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -159,8 +159,10 @@ class FixIt {
         document.body.classList.add('blur');
         $header.classList.add('open');
         $searchInput.focus();
+        this.disableScrollEvent = true;
       }, false);
       $searchClear.addEventListener('click', () => {
+        this.disableScrollEvent = false;
         $searchClear.style.display = 'none';
         this._searchDesktop && this._searchDesktop.autocomplete.setVal('');
       }, false);
@@ -289,25 +291,47 @@ class FixIt {
                     finish([]);
                   });
               } else finish(search());
-            }            
+            } else if (searchConfig.type === 'cse') {
+              const cseConfig = this.config.cse;
+              if (cseConfig.engine === 'google' && cseConfig.cx) {
+                finish([{
+                  uri: `${cseConfig.resultsPage}#gsc.tab=0&gsc.q=${encodeURIComponent(query)}`,
+                  title: cseConfig.searchIn,
+                  date: '<i class="fa-brands fa-searchengin fa-xl" aria-hidden="true"></i>',
+                  context: cseConfig.gotoResultsPage
+                }]);
+              }
+            }
           },
           templates: {
             suggestion: ({ title, date, context }) =>
               `<div><span class="suggestion-title">${title}</span><span class="suggestion-date">${date}</span></div><div class="suggestion-context">${context}</div>`,
             empty: ({ query }) => `<div class="search-empty">${searchConfig.noResultsFound}: <span class="search-query">"${query}"</span></div>`,
             footer: ({}) => {
-              const { searchType, icon, href } =
-                searchConfig.type === 'algolia'
-                  ? {
-                      searchType: 'algolia',
-                      icon: '<i class="fa-brands fa-algolia fa-fw" aria-hidden="true"></i>',
-                      href: 'https://www.algolia.com/'
-                    }
-                  : {
-                      searchType: 'Fuse.js',
-                      icon: '',
-                      href: 'https://fusejs.io/'
-                    }
+              let searchType, icon, href;
+              switch (searchConfig.type) {
+                case 'algolia':
+                  searchType = 'algolia';
+                  icon = '<i class="fa-brands fa-algolia fa-fw" aria-hidden="true"></i>';
+                  href = 'https://www.algolia.com/';
+                  break;
+                case 'fuse':
+                  searchType = 'Fuse.js';
+                  icon = '';
+                  href = 'https://fusejs.io/';
+                  break;
+                case 'cse':
+                  if (this.config.cse.engine === 'google') {
+                    searchType = 'Google CSE';
+                    icon = '<i class="fa-brands fa-google fa-fw" aria-hidden="true"></i>';
+                    href = 'https://programmablesearchengine.google.com/';
+                  }
+                  break;
+                default:
+                  searchType = '';
+                  icon = '';
+                  href = '';
+              }
               return `<div class="search-footer">Search by <a href="${href}" rel="noopener noreferrer" target="_blank">${icon} ${searchType}</a></div>`;
             }
           }
diff --git a/hugo.toml b/hugo.toml
index dab6f241..ef0b7e22 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -418,14 +418,19 @@ enableEmoji = true
       ignoreLocation = false
       useExtendedSearch = false
       ignoreFieldNorm = false
-    # FixIt 0.3.16 | NEW Custom Search Engine (CSE)
-    [params.search.cse]
-      # CSE engine: ["google", "bing"]
-      engine = "google"
-      # Google: https://programmablesearchengine.google.com/
-      # Google Custom Search Engine Context
+
+  # FixIt 0.3.16 | NEW Custom Search Engine (CSE)
+  [params.cse]
+    # Search Engine: ["google", "bing"]
+    engine = ""
+    # Search results page URL (layout: search)
+    resultsPage = "/search/"
+    # Google: https://programmablesearchengine.google.com/
+    # Google Custom Search Engine Context
+    [params.cse.google]
       cx = ""
-      # Bing (Unsupported): https://www.customsearch.ai/
+    # Bing (Unsupported): https://www.customsearch.ai/
+    [params.cse.bing]
 
   # Header config
   [params.header]
diff --git a/layouts/page/search.html b/layouts/page/search.html
index 1eeb2ee0..148fc177 100644
--- a/layouts/page/search.html
+++ b/layouts/page/search.html
@@ -5,7 +5,7 @@
 
 {{- define "content" -}}
   {{- $params := partial "function/params.html" -}}
-  {{- $cse := .Site.Params.search.cse -}}
+  {{- $cse := .Site.Params.cse -}}
   <article class="page single special search">
     <div class="header">
       {{- /* Title */ -}}
@@ -22,7 +22,7 @@
 
     {{- /* Google CSE */ -}}
     {{- if eq $cse.engine "google" -}}
-      {{- with $cse.cx -}}
+      {{- with $cse.google.cx -}}
         <script async defer src="https://cse.google.com/cse.js?cx={{ . }}"></script>
         <div class="gcse-searchbox"></div>
         <div class="gcse-searchresults"></div>
diff --git a/layouts/partials/assets.html b/layouts/partials/assets.html
index cfebaffb..03df5c2c 100644
--- a/layouts/partials/assets.html
+++ b/layouts/partials/assets.html
@@ -22,6 +22,16 @@
     {{- $source := $cdn.fuseJS | default "lib/fuse/fuse.min.js" -}}
     {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
     {{- $config = dict "isCaseSensitive" $search.fuse.isCaseSensitive "minMatchCharLength" $search.fuse.minMatchCharLength "findAllMatches" $search.fuse.findAllMatches "location" $search.fuse.location "threshold" $search.fuse.threshold "distance" $search.fuse.distance "ignoreLocation" $search.fuse.ignoreLocation "useExtendedSearch" $search.fuse.useExtendedSearch "ignoreFieldNorm" $search.fuse.ignoreFieldNorm | dict "search" | merge $config -}}
+  {{- else if eq $search.type "cse"  -}}
+    {{- $config = dict "type" "cse" | dict "search" | merge $config -}}
+    {{- $cse := .Site.Params.cse -}}
+    {{- $config = dict "resultsPage" $cse.resultsPage "gotoResultsPage" (T "assets.gotoResultsPage") | dict "cse" | merge $config -}}
+    {{- if (eq $cse.engine "google") | and $cse.google.cx  -}}
+      {{- $config = dict "engine" "google" "cx" $cse.google.cx "searchIn" (T "assets.searchIn" "Google") | dict "cse" | merge $config -}}
+    {{- end -}}
+    {{- if eq $cse.engine "bing" -}}
+      {{- /* Unsupported */ -}}
+    {{- end -}}
   {{- end -}}
 {{- end -}}