perf: separate styles from main HB bundle

feat: add the hb.search.modal parameter to enable/disable modal, default to true

feat: add the form partial

style: tweak the search layout

assets/hb/modules/search/scss/index.scss → assets/hb/modules/search/index.scss

@@ -1,5 +1,5 @@
-/*! purgecss start ignore */
-@import "../../../../search/scss/index";
+@import "hugo:vars";
+@import "../../../search/scss/index";
 
 :root {
     --search-primary: var(--#{$prefix}primary);
@@ -21,5 +21,3 @@
         padding: 0;
     }
 }
-
-/*! purgecss start end */

hugo.toml

@@ -6,3 +6,13 @@ path = "github.com/hbstack/hb"
 
 [params.hugopress.modules.search.hooks.head-end]
 disabled = true
+
+[params.hugopress.modules.search.hooks.body-end]
+disabled = true
+
+[params.hugopress.modules.hb-search.hooks.head-end]
+
+[params.hugopress.modules.hb-search.hooks.body-end]
+
+[params.hb.search]
+modal = true

layouts/index.search.html

@@ -0,0 +1,11 @@
+{{- define "title" }}
+  {{- printf "%s - %s" (i18n "search") .Site.Title -}}
+{{- end }}
+
+{{- define "main" }}
+  {{ partial "hb/modules/search/assets/css" . }}
+  <div class="hb-module">
+    {{ partial "search/index" . }}
+  </div>
+  {{ partial "search/assets/js" . }}
+{{- end -}}

layouts/partials/hb/modules/search/assets/css.html

@@ -0,0 +1,13 @@
+{{- $rtl := eq .Language.LanguageDirection "rtl" }}
+{{- $opts := dict
+  "targetPath" (cond $rtl "css/search.rtl.css" "css/search.css")
+  "outputStyle" (cond hugo.IsProduction "compressed" "")
+  "vars" (dict
+    "prefix" (default "hb" site.Params.hb.styles.prefix)
+  )
+}}
+{{- $css := resources.Get "hb/modules/search/index.scss" | toCSS $opts }}
+{{- if hugo.IsProduction }}
+  {{- $css = $css | fingerprint }}
+{{- end }}
+<link rel="stylesheet" href="{{ $css.RelPermalink }}" />

layouts/partials/hb/modules/search/form.html

@@ -0,0 +1,10 @@
+{{- $url := partial "search/functions/search-url" . }}
+<form class="hb-module hb-search-form position-relative" action="{{ $url }}">
+  <input name="q" class="form-control form-control-lg pe-5" placeholder="{{ i18n `search` }}">
+  <button
+    type="submit"
+    class="position-absolute end-0 top-0 mt-4 me-4 p-0 border-0 bg-transparent"
+    title="{{ i18n `search` }}">
+    {{ partial "icons/icon" (dict "vendor" "bs" "name" "search" "width" "1.5rem" "height" "1.5rem") }}
+  </button>
+</form>

layouts/partials/hugopress/modules/hb-search/hooks/body-end.html

@@ -0,0 +1,3 @@
+{{- if default true site.Params.hb.search.modal }}
+  {{ partial "search/assets/js" .Page }}
+{{- end }}

layouts/partials/hugopress/modules/hb-search/hooks/head-end.html

@@ -0,0 +1,3 @@
+{{- if default true site.Params.hb.search.modal }}
+  {{ partial "hb/modules/search/assets/css" .Page }}
+{{- end }}