feat: add search engine modules and result types

assets/hb/modules/theme-start/js/form.ts

@@ -3,26 +3,88 @@
   const input = document.querySelector<HTMLInputElement>('.hb-start-search-input')
   const engines = document.querySelectorAll<HTMLElement>('.hb-start-search-engine')
   const toggle = document.querySelector<HTMLElement>('.hb-start-search-engine-toggle')
+  const resultTypes = document.querySelectorAll<HTMLElement>('.hb-start-search-result-type')
 
   if (form === null || engines === null) {
     return
   }
 
+  // focus the input on page loaded.
   input?.focus()
 
   const activeEngine = (engine: HTMLElement): void => {
     engines.forEach((el) => {
       el.classList.remove('active')
     })
     engine.classList.add('active')
-    form.setAttribute('action', engine.getAttribute('data-url') ?? '')
-    input?.setAttribute('name', engine.getAttribute('data-input-name') ?? 'q')
     toggle.innerHTML = engine.querySelector('svg')?.outerHTML
+    const engineID = engine.getAttribute('data-id')
+    document.querySelectorAll('.hb-start-search-result-types').forEach((el) => {
+      if (el.getAttribute('data-engine') !== engineID) {
+        el.classList.add('d-none')
+      } else {
+        el.classList.remove('d-none')
+        // active the first result type.
+        activeResultType(el.querySelector('.hb-start-search-result-type'))
+      }
+    })
+  }
+
+  const hiddenInputs: Record<string, HTMLInputElement> = {}
+
+  const setHiddenInput = (key: string, item: HTMLElement): void => {
+    const prefix = `data-${key}hidden-input-`
+    const name = item.getAttribute(`${prefix}name`) ?? ''
+    const value = item.getAttribute(`${prefix}value`) ?? ''
+
+    let input: null | HTMLInputElement = null
+    if (key in hiddenInputs) {
+      input = hiddenInputs[key]
+    }
+    if (name === '') {
+      if (input !== null) {
+        input.remove()
+        /* eslint-disable */
+        delete (hiddenInputs[key])
+      }
+      return
+    }
+
+    if (input === null) {
+      input = document.createElement('input')
+      input.type = 'hidden'
+      hiddenInputs[key] = input
+      form.appendChild(input)
+    }
+    input.name = name
+    input.value = value
+  }
+
+  const setResultTypeInput = (item: HTMLElement): void => {
+    form.setAttribute('action', item.getAttribute('data-url') ?? '')
+    input.name = item.getAttribute('data-input-name')
+    setHiddenInput('', item)
+    setHiddenInput('extra-', item)
+  }
+
+  const activeResultType = (item: HTMLElement): void => {
+    const items = item.closest('.hb-start-search-result-types')?.querySelectorAll('.hb-start-search-result-type')
+    items?.forEach((el) => {
+      el.classList.remove('active')
+    })
+    item.classList.add('active')
+    setResultTypeInput(item)
   }
 
   engines.forEach((el) => {
     el.addEventListener('click', () => {
       activeEngine(el)
     })
   })
+
+  resultTypes.forEach((el) => {
+    el.addEventListener('click', () => {
+      activeResultType(el)
+    })
+  })
 })()

assets/hb/modules/theme-start/scss/_engine.scss

@@ -5,5 +5,5 @@
 }
 
 .hb-start-search-engine-icon {
-  vertical-align: -0.25em;
+  vertical-align: -0.35em;
 }

assets/hb/modules/theme-start/scss/_result-types.scss

@@ -0,0 +1,3 @@
+.hb-start-search-result-types {
+  --#{$prefix}nav-pills-link-active-bg: var(--#{$prefix}secondary);
+}

assets/hb/modules/theme-start/scss/index.scss

@@ -2,6 +2,7 @@
 
 @import 'main';
 @import 'engine';
+@import 'result-types';
 @import 'input';
 @import 'search-btn';
 @import 'apps';

engines/baidu/go.mod

@@ -0,0 +1,3 @@
+module github.com/hbstack/theme-start/engines/baidu
+
+go 1.21.1

engines/baidu/hugo.toml

@@ -0,0 +1,30 @@
+[params.hb.theme_start.search_engines.baidu]
+weight = 3
+icon = "baidu"
+icon_color = "#2932e1"
+
+[params.hb.theme_start.search_engines.baidu.types.images]
+weight = 2
+input_name = "word"
+url = "https://image.baidu.com/search/index"
+hidden_input_name = "tn"
+hidden_input_value = "baiduimage"
+
+[params.hb.theme_start.search_engines.baidu.types.news]
+weight = 4
+input_name = "word"
+url = "https://www.baidu.com/s"
+hidden_input_name = "tn"
+hidden_input_value = "news"
+
+[params.hb.theme_start.search_engines.baidu.types.organic]
+weight = 1
+input_name = "wd"
+url = "https://www.baidu.com/s"
+
+[params.hb.theme_start.search_engines.baidu.types.videos]
+weight = 3
+input_name = "wd"
+url = "https://www.baidu.com/sf/vsearch"
+hidden_input_name = "pd"
+hidden_input_value = "video"

engines/bing/go.mod

@@ -0,0 +1,3 @@
+module github.com/hbstack/theme-start/engines/bing
+
+go 1.21.1

engines/bing/hugo.toml

@@ -0,0 +1,29 @@
+[params.hb.theme_start.search_engines.bing]
+weight = 2
+icon = "microsoftbing"
+icon_color = "#258ffa"
+
+[params.hb.theme_start.search_engines.bing.types.images]
+weight = 2
+input_name = "q"
+url = "https://www.bing.com/images"
+
+[params.hb.theme_start.search_engines.bing.types.maps]
+weight = 5
+input_name = "q"
+url = "https://www.bing.com/maps"
+
+[params.hb.theme_start.search_engines.bing.types.news]
+weight = 4
+input_name = "q"
+url = "https://www.bing.com/news"
+
+[params.hb.theme_start.search_engines.bing.types.organic]
+weight = 1
+input_name = "q"
+url = "https://www.bing.com/search"
+
+[params.hb.theme_start.search_engines.bing.types.videos]
+weight = 3
+input_name = "q"
+url = "https://www.bing.com/videos"

engines/duckduckgo/go.mod

@@ -0,0 +1,3 @@
+module github.com/hbstack/theme-start/engines/duckduckgo
+
+go 1.21.1

engines/duckduckgo/hugo.toml

@@ -0,0 +1,43 @@
+[params.hb.theme_start.search_engines.duckduckgo]
+weight = 4
+icon = "duckduckgo"
+icon_color = "#de5833"
+
+[params.hb.theme_start.search_engines.duckduckgo.types.images]
+weight = 2
+url = "https://duckduckgo.com/"
+input_name = "q"
+hidden_input_name = "ia"
+hidden_input_value = "images"
+extra_hidden_input_name = "iax"
+extra_hidden_input_value = "images"
+
+[params.hb.theme_start.search_engines.duckduckgo.types.maps]
+weight = 5
+url = "https://duckduckgo.com/"
+input_name = "q"
+hidden_input_name = "iaxm"
+hidden_input_value = "maps"
+
+[params.hb.theme_start.search_engines.duckduckgo.types.news]
+weight = 4
+url = "https://duckduckgo.com/"
+input_name = "q"
+hidden_input_name = "ia"
+hidden_input_value = "news"
+extra_hidden_input_name = "iar"
+extra_hidden_input_value = "news"
+
+[params.hb.theme_start.search_engines.duckduckgo.types.organic]
+weight = 1
+url = "https://duckduckgo.com/"
+input_name = "q"
+
+[params.hb.theme_start.search_engines.duckduckgo.types.videos]
+weight = 3
+url = "https://duckduckgo.com/"
+input_name = "q"
+hidden_input_name = "ia"
+hidden_input_value = "videos"
+extra_hidden_input_name = "iax"
+extra_hidden_input_value = "videos"

engines/google/go.mod

@@ -0,0 +1,3 @@
+module github.com/hbstack/theme-start/engines/google
+
+go 1.21.1

engines/google/hugo.toml

@@ -0,0 +1,36 @@
+[params.hb.theme_start.search_engines.google]
+weight = 1
+input_name = "q"
+icon = "google"
+icon_color = "#4285f4"
+
+[params.hb.theme_start.search_engines.google.types.images]
+weight = 2
+input_name = "q"
+hidden_input_name = "tbm"
+hidden_input_value = "isch"
+url = "https://www.google.com/search"
+
+[params.hb.theme_start.search_engines.google.types.maps]
+weight = 5
+input_name = "q"
+url = "https://www.google.com/maps"
+
+[params.hb.theme_start.search_engines.google.types.news]
+weight = 4
+input_name = "q"
+hidden_input_name = "tbm"
+hidden_input_value = "nws"
+url = "https://www.google.com/search"
+
+[params.hb.theme_start.search_engines.google.types.organic]
+weight = 1
+input_name = "q"
+url = "https://www.google.com/search"
+
+[params.hb.theme_start.search_engines.google.types.videos]
+weight = 3
+input_name = "q"
+hidden_input_name = "tbm"
+hidden_input_value = "vid"
+url = "https://www.google.com/search"

engines/sogou/go.mod

@@ -0,0 +1,3 @@
+module github.com/hbstack/theme-start/engines/sogou
+
+go 1.21.1

engines/sogou/hugo.toml

@@ -0,0 +1,18 @@
+[params.hb.theme_start.search_engines.sogou]
+icon = "sogou"
+icon_color = "#fb6022"
+
+[params.hb.theme_start.search_engines.sogou.types.images]
+weight = 2
+input_name = "query"
+url = "https://pic.sogou.com/pics"
+
+[params.hb.theme_start.search_engines.sogou.types.organic]
+weight = 1
+input_name = "query"
+url = "https://www.sogou.com/web"
+
+[params.hb.theme_start.search_engines.sogou.types.videos]
+weight = 3
+input_name = "query"
+url = "https://v.sogou.com/v"

engines/wikipedia/go.mod

@@ -0,0 +1,3 @@
+module github.com/hbstack/theme-start/engines/wikipedia
+
+go 1.21.1

engines/wikipedia/hugo.toml

@@ -0,0 +1,8 @@
+[params.hb.theme_start.search_engines.wikipedia]
+icon = "wikipedia"
+icon_color = "#000000"
+
+[params.hb.theme_start.search_engines.wikipedia.types.organic]
+weight = 1
+input_name = "search"
+url = "https://en.wikipedia.org/w/index.php"

engines/yahoo/go.mod

@@ -0,0 +1,3 @@
+module github.com/hbstack/theme-start/engines/yahoo
+
+go 1.21.1

engines/yahoo/hugo.toml

@@ -0,0 +1,23 @@
+[params.hb.theme_start.search_engines.yahoo]
+icon = "yahoo"
+icon_color = "#6001d2"
+
+[params.hb.theme_start.search_engines.yahoo.types.images]
+weight = 2
+url = "https://images.search.yahoo.com/search/images"
+input_name = "p"
+
+[params.hb.theme_start.search_engines.yahoo.types.news]
+weight = 4
+url = "https://news.search.yahoo.com/search"
+input_name = "p"
+
+[params.hb.theme_start.search_engines.yahoo.types.organic]
+weight = 1
+url = "https://search.yahoo.com/search"
+input_name = "p"
+
+[params.hb.theme_start.search_engines.yahoo.types.videos]
+weight = 3
+url = "https://video.search.yahoo.com/search/video"
+input_name = "p"

engines/yandex/go.mod

@@ -0,0 +1,3 @@
+module github.com/hbstack/theme-start/engines/yandex
+
+go 1.21.1

engines/yandex/hugo.toml

@@ -0,0 +1,19 @@
+[params.hb.theme_start.search_engines.yandex]
+icon = "yandex"
+icon_vendor = "fab"
+icon_color = "#fc3f1d"
+
+[params.hb.theme_start.search_engines.yandex.types.images]
+weight = 2
+url = "https://yandex.com/images/search"
+input_name = "text"
+
+[params.hb.theme_start.search_engines.yandex.types.organic]
+weight = 1
+url = "https://yandex.com/search"
+input_name = "text"
+
+[params.hb.theme_start.search_engines.yandex.types.videos]
+weight = 3
+url = "https://yandex.com/video/search"
+input_name = "text"

exampleSite/config/_default/module.yaml

@@ -1,2 +1,10 @@
 imports:
   - path: github.com/hbstack/theme-start
+  - path: github.com/hbstack/theme-start/engines/baidu
+  - path: github.com/hbstack/theme-start/engines/bing
+  - path: github.com/hbstack/theme-start/engines/duckduckgo
+  - path: github.com/hbstack/theme-start/engines/google
+  - path: github.com/hbstack/theme-start/engines/sogou
+  - path: github.com/hbstack/theme-start/engines/wikipedia
+  - path: github.com/hbstack/theme-start/engines/yahoo
+  - path: github.com/hbstack/theme-start/engines/yandex