Hugo: add searchTerm option to search shortcode

* Add searchTerm to example page
* Pass searchTerm from search shortcode,
through search partial, to filter partial
* Set initial searchItem with search filter

To test:
* Navigate to /examples/shortcodes/search and verify that the search results are accurate.

Fixes cue-lang/cue#3566

Signed-off-by: juan Stelling <juan.stelling@usmedia.nl>

Author: JuanUsMedia

content/examples/shortcodes/search/en.md

@@ -8,10 +8,10 @@ With this shortcode you can embed a search results widget on the page.
 ## Example
 
 ```
-{{</* search contentType="How-to Guides" showContentTypes=false tags="encodings,commented cue" */>}}
+{{</* search contentType="How-to Guides" showContentTypes=false tags="encodings,commented cue" searchTerm="json" */>}}
 ```
 
-{{< search contentType="How-to Guides" showContentTypes=false tags="encodings,commented cue" >}}
+{{< search contentType="How-to Guides" showContentTypes=false tags="encodings,commented cue" searchTerm="json" >}}
 
 
 ## Attributes
@@ -24,3 +24,6 @@ showContentTypes
 
 tags
 : optional - Adds preselected tags
+
+searchTerm
+ : optional - Prefills the search bar

hugo/assets/ts/widgets/search-filter.ts

@@ -173,6 +173,11 @@ export class SearchFilter extends BaseWidget {
         this.selectedItems = selectedItems;
 
         if (urlParamsChanged) {
+            const initialSearchTerm = this.element.dataset.initialSearchTerm;
+            if (initialSearchTerm) {
+                this.parsedQuery.cleanQuery = initialSearchTerm;
+            }
+
             this.updateUrl(false);
         }
     }

hugo/content/en/examples/shortcodes/search/index.md

@@ -8,10 +8,10 @@ With this shortcode you can embed a search results widget on the page.
 ## Example
 
 ```
-{{</* search contentType="How-to Guides" showContentTypes=false tags="encodings,commented cue" */>}}
+{{</* search contentType="How-to Guides" showContentTypes=false tags="encodings,commented cue" searchTerm="json" */>}}
 ```
 
-{{< search contentType="How-to Guides" showContentTypes=false tags="encodings,commented cue" >}}
+{{< search contentType="How-to Guides" showContentTypes=false tags="encodings,commented cue" searchTerm="json" >}}
 
 
 ## Attributes
@@ -24,3 +24,6 @@ showContentTypes
 
 tags
 : optional - Adds preselected tags
+
+searchTerm
+ : optional - Prefills the search bar

hugo/layouts/partials/filter.html

@@ -8,11 +8,13 @@
 {{ $inputLabel := printf "search_%s_input" $translationKey }}
 {{ $noResults := printf "search_%s_no-results" $translationKey }}
 {{ $preselectedItems := .preselectedItems }}
+{{ $searchTerm := .searchTerm }}
 
 <details class="filter{{ if $cssClass }} {{ $cssClass }}{{ end }} is-loading"
          data-dropdown data-filter="{{ $name }}"
          data-filter-items="{{ $filters | jsonify }}"
          {{ if $preselectedItems }} data-preselected-items="{{ $preselectedItems }}"{{ end }}
+         {{ if $searchTerm }} data-initial-search-term="{{ $searchTerm }}"{{ end }}
          {{ if $open }} open{{ end }}
 >
     <summary class="filter__title button button--small button--white">

hugo/layouts/partials/search.html

@@ -3,6 +3,7 @@
 {{ $contentTypes := slice }}
 {{ $contentType := .contentType | default "" }}
 {{ $preselectedTags := .preselectedTags | default "" }}
+{{ $searchTerm := .searchTerm | default "" }}
 {{ $type := .type | default "full" }}
 {{ $placeholder := (T "search_placeholder" ) }}
 
@@ -48,6 +49,7 @@
                     "name" "tags"
                     "filters" .Site.Params.tags
                     "preselectedItems" $preselectedTags
+                    "searchTerm" $searchTerm
                 ) -}}
 
                 {{ if $showContentTypes }}

hugo/layouts/shortcodes/search.html

@@ -1,11 +1,13 @@
 {{- $contentType := .Get "contentType" | default "" -}}
 {{- $showContentTypes := .Get "showContentTypes" | default true -}}
 {{- $preselectedTags := .Get "tags" | default "" -}}
+{{- $searchTerm := .Get "searchTerm" | default "" -}}
 
 {{- partial "search"  (dict
     "type" "widget"
     "contentType" $contentType
     "showContentTypes" $showContentTypes
     "preselectedTags" $preselectedTags
+    "searchTerm" $searchTerm
     "context" .
 ) -}}