Merge pull request #551 from hugo-fixit/google-cse

✨ Feat: add Google CSE support
hugo-fixit · Nov 28, 2024 · c06afab · c06afab
2 parents 4c06eef + ec9a544
commit c06afab
Show file tree

Hide file tree

Showing 11 changed files with 126 additions and 23 deletions.
diff --git a/archetypes/search.md b/archetypes/search.md
@@ -0,0 +1,5 @@
+---
+title: {{ T "assets.search" }}
+layout: search
+date: {{ .Date }}
+---
diff --git 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
@@ -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
diff --git a/assets/css/_page/_friends.scss → assets/css/_page/_special/_friends.scss b/assets/css/_page/_friends.scss → 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
@@ -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
@@ -0,0 +1,10 @@
+// Style of layout named 'search'
+// TODO Adapting to dark mode, maybe use css variables
+
+// Google CSE
+.gcse-searchbox:empty,
+.gcse-searchresults:empty {
+  display: none;
+}
+
+// Bing CSE (Unsupported)
diff --git 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
@@ -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
@@ -419,6 +419,19 @@ enableEmoji = true
       useExtendedSearch = false
       ignoreFieldNorm = false
 
+  # 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/
+    [params.cse.bing]
+
   # Header config
   [params.header]
     # FixIt 0.2.13 | CHANGED desktop header mode ["sticky", "normal", "auto"]

diff --git a/layouts/page/search.html b/layouts/page/search.html
@@ -0,0 +1,34 @@
+{{- 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.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>
+
+      {{- /* 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.google.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 -}}
+
+    {{- /* Bing CSE (Unsupported) */ -}}
+  </article>
+{{- end -}}
diff --git 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 -}}
-Original file line number
+Diff line change
@@ Expand Up / @@ -118,7 +118,7 @@ header { @@
       }
     }
-    .search {
+    .menu .search {
       position: relative;
       input {
@@ Expand Down @@