@bridgeline-digital/hawksearch-handlebars-ui 6.0.0-beta.1 → 6.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/index.html +3 -3
- package/docs/modules/Components.html +2 -2
- package/package.json +1 -1
- package/readme.md +1 -1
package/docs/index.html
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<div class="col-content">
|
|
13
13
|
<div class="tsd-page-title">
|
|
14
14
|
<h2>@bridgeline-digital/hawksearch-handlebars-ui</h2></div>
|
|
15
|
-
<div class="tsd-panel tsd-typography"><a id="md:hawksearch-handlebars-ui-v600-
|
|
15
|
+
<div class="tsd-panel tsd-typography"><a id="md:hawksearch-handlebars-ui-v600-beta2" class="tsd-anchor"></a><h1><a href="#md:hawksearch-handlebars-ui-v600-beta2">HawkSearch Handlebars UI v6.0.0-beta.2</a></h1><p>The HawkSearch Handlebars UI package allows you to add a highly-customizable search results page to your website powered by <a href="https://www.hawksearch.com/">HawkSearch</a>.</p>
|
|
16
16
|
<a id="md:installation" class="tsd-anchor"></a><h2><a href="#md:installation">Installation</a></h2><a id="md:npm-package" class="tsd-anchor"></a><h3><a href="#md:npm-package">npm Package</a></h3><ol>
|
|
17
17
|
<li>If your website does not already have a package.json file in the root, run <code>npm init</code> to generate one.</li>
|
|
18
18
|
<li>Run <code>npm install --save @bridgeline-digital/hawksearch-handlebars-ui</code> to install the latest version.</li>
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
<p>To configure your website to use the CDN, simply update your HTML to import the script file, set your [Configuration)(models/Configuration.html), and add the appropriate elements to your page. Below is a basic sample implementation:</p>
|
|
25
25
|
<pre><code class="language-html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-2"> </span><span class="hl-3">lang</span><span class="hl-2">=</span><span class="hl-4">"en"</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"utf-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"module"</span><span class="hl-5"> </span><span class="hl-3">src</span><span class="hl-5">=</span><span class="hl-4">"//cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui/dist/hawksearch-handlebars-ui.min.js"</span><span class="hl-0">></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"text/javascript"</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-6">addEventListener</span><span class="hl-5">(</span><span class="hl-7">'hawksearch:loaded'</span><span class="hl-5">, () </span><span class="hl-8">=></span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">HawkSearch</span><span class="hl-5">.</span><span class="hl-6">init</span><span class="hl-5">({</span><br/><span class="hl-5"> </span><span class="hl-9">clientId:</span><span class="hl-5"> </span><span class="hl-7">'YOUR_CLIENTID_HERE'</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">h1</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">h1</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-landing-page</span><span class="hl-0">></</span><span class="hl-1">hawksearch-landing-page</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-recommendations</span><span class="hl-2"> </span><span class="hl-3">widget-id</span><span class="hl-2">=</span><span class="hl-4">"WIDGET_ID_HERE"</span><span class="hl-0">></</span><span class="hl-1">hawksearch-recommendations</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-0"></</span><span class="hl-1">html</span><span class="hl-0">></span>
|
|
26
26
|
</code><button>Copy</button></pre>
|
|
27
|
-
<p><em>Note: It is highly recommended to target a specific version, especially if there are customizations, to avoid potentially breaking changes in the future. For example, instead of including the script at <a href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui/dist/index.js">https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui/dist/index.js</a>, you can use <a href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui@6.0.0-beta.
|
|
27
|
+
<p><em>Note: It is highly recommended to target a specific version, especially if there are customizations, to avoid potentially breaking changes in the future. For example, instead of including the script at <a href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui/dist/index.js">https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui/dist/index.js</a>, you can use <a href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui@6.0.0-beta.2/dist/index.js">https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui@6.0.0-beta.2/dist/index.js</a>.</em></p>
|
|
28
28
|
<a id="md:custom-build" class="tsd-anchor"></a><h3><a href="#md:custom-build">Custom Build</a></h3><p>If you plan to make considerable customizations, it may be preferable to compile a custom script building on top of the HawkSearch Handlebars UI library. To do this, it is recommended to use <a href="https://vitejs.dev/">Vite</a> by performing the following steps:</p>
|
|
29
29
|
<ol>
|
|
30
30
|
<li>Run <code>npm create vite@latest</code> in your console<ol>
|
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
<ul>
|
|
122
122
|
<li>
|
|
123
123
|
<ul>
|
|
124
|
-
<li><a href="#md:hawksearch-handlebars-ui-v600-
|
|
124
|
+
<li><a href="#md:hawksearch-handlebars-ui-v600-beta2"><span>Hawk<wbr/>Search <wbr/>Handlebars UI v6.0.0-<wbr/>beta.2</span></a></li>
|
|
125
125
|
<li>
|
|
126
126
|
<ul>
|
|
127
127
|
<li><a href="#md:installation"><span>Installation</span></a></li>
|
|
@@ -24,10 +24,10 @@
|
|
|
24
24
|
</ul>
|
|
25
25
|
<p><em>Note: To avoid conflicts with BigCommerce and other systems that Handlebars for server-side rendering, this library also supports an alternate <code>[[value]]</code> syntax to work the same as the default Handlerbars <code>{{value}}</code> syntax.</em></p>
|
|
26
26
|
<a id="md:passing-an-html-string" class="tsd-anchor"></a><h3><a href="#md:passing-an-html-string">Passing an HTML string</a></h3><p>In your HTML file, define the template content directly in the configuration options:</p>
|
|
27
|
-
<pre><code class="language-html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"utf-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"module"</span><span class="hl-5"> </span><span class="hl-3">src</span><span class="hl-5">=</span><span class="hl-4">"node_modules/@bridgeline-digital/hawksearch-handlebars-ui/dist/hawksearch-handlebars-ui.min.js"</span><span class="hl-0">></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"text/javascript"</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-6">addEventListener</span><span class="hl-5">(</span><span class="hl-7">'hawksearch:loaded'</span><span class="hl-5">, () </span><span class="hl-8">=></span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">HawkSearch</span><span class="hl-5">.</span><span class="hl-6">init</span><span class="hl-5">({</span><br/><span class="hl-5"> </span><span class="hl-9">clientId:</span><span class="hl-5"> </span><span class="hl-7">"YOUR_CLIENTID_HERE"</span><span class="hl-5">,</span><br/><span class="hl-5"> </span><span class="hl-9">components:</span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9"
|
|
27
|
+
<pre><code class="language-html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"utf-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"module"</span><span class="hl-5"> </span><span class="hl-3">src</span><span class="hl-5">=</span><span class="hl-4">"node_modules/@bridgeline-digital/hawksearch-handlebars-ui/dist/hawksearch-handlebars-ui.min.js"</span><span class="hl-0">></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"text/javascript"</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-6">addEventListener</span><span class="hl-5">(</span><span class="hl-7">'hawksearch:loaded'</span><span class="hl-5">, () </span><span class="hl-8">=></span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">HawkSearch</span><span class="hl-5">.</span><span class="hl-6">init</span><span class="hl-5">({</span><br/><span class="hl-5"> </span><span class="hl-9">clientId:</span><span class="hl-5"> </span><span class="hl-7">"YOUR_CLIENTID_HERE"</span><span class="hl-5">,</span><br/><span class="hl-5"> </span><span class="hl-9">components:</span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-7">'page-size'</span><span class="hl-9">:</span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">template:</span><span class="hl-5"> </span><span class="hl-7">`</span><br/><span class="hl-7"> <div class='page-size'></span><br/><span class="hl-7"> <select hawksearch-page-size></span><br/><span class="hl-7"> {{#each options}}</span><br/><span class="hl-7"> <option value='{{pageSize}}' {{attribute 'selected' selected}}>{{title}}</option></span><br/><span class="hl-7"> {{/each}}</span><br/><span class="hl-7"> </select></span><br/><span class="hl-7"> </div>`</span><br/><span class="hl-5"> }</span><br/><span class="hl-5"> }</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">h1</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">h1</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-0"></</span><span class="hl-1">html</span><span class="hl-0">></span>
|
|
28
28
|
</code><button>Copy</button></pre>
|
|
29
29
|
<a id="md:creating-a-script-or-template-element" class="tsd-anchor"></a><h3><a href="#md:creating-a-script-or-template-element">Creating a script or template element</a></h3><p>In your HTML file, add the custom markup to either a <code>script</code> element with <code>type</code> attribute set to <code>text/x-handlebars-template</code> or a <code>template</code> element and pass the ID in the configuration options:</p>
|
|
30
|
-
<pre><code class="language-html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"utf-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"module"</span><span class="hl-5"> </span><span class="hl-3">src</span><span class="hl-5">=</span><span class="hl-4">"node_modules/@bridgeline-digital/hawksearch-handlebars-ui/dist/hawksearch-handlebars-ui.min.js"</span><span class="hl-0">></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"text/javascript"</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-6">addEventListener</span><span class="hl-5">(</span><span class="hl-7">'hawksearch:loaded'</span><span class="hl-5">, () </span><span class="hl-8">=></span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">HawkSearch</span><span class="hl-5">.</span><span class="hl-6">init</span><span class="hl-5">({</span><br/><span class="hl-5"> </span><span class="hl-9">clientId:</span><span class="hl-5"> </span><span class="hl-7">"YOUR_CLIENTID_HERE"</span><span class="hl-5">,</span><br/><span class="hl-5"> </span><span class="hl-9">components:</span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9"
|
|
30
|
+
<pre><code class="language-html"><span class="hl-0"><!</span><span class="hl-1">DOCTYPE</span><span class="hl-2"> </span><span class="hl-3">html</span><span class="hl-0">></span><br/><span class="hl-0"><</span><span class="hl-1">html</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">charset</span><span class="hl-2">=</span><span class="hl-4">"utf-8"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">title</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">title</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">meta</span><span class="hl-2"> </span><span class="hl-3">name</span><span class="hl-2">=</span><span class="hl-4">"viewport"</span><span class="hl-2"> </span><span class="hl-3">content</span><span class="hl-2">=</span><span class="hl-4">"width=device-width, initial-scale=1"</span><span class="hl-2"> </span><span class="hl-0">/></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"module"</span><span class="hl-5"> </span><span class="hl-3">src</span><span class="hl-5">=</span><span class="hl-4">"node_modules/@bridgeline-digital/hawksearch-handlebars-ui/dist/hawksearch-handlebars-ui.min.js"</span><span class="hl-0">></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"text/javascript"</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-6">addEventListener</span><span class="hl-5">(</span><span class="hl-7">'hawksearch:loaded'</span><span class="hl-5">, () </span><span class="hl-8">=></span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">HawkSearch</span><span class="hl-5">.</span><span class="hl-6">init</span><span class="hl-5">({</span><br/><span class="hl-5"> </span><span class="hl-9">clientId:</span><span class="hl-5"> </span><span class="hl-7">"YOUR_CLIENTID_HERE"</span><span class="hl-5">,</span><br/><span class="hl-5"> </span><span class="hl-9">components:</span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-7">'page-size'</span><span class="hl-9">:</span><span class="hl-5"> {</span><br/><span class="hl-5"> </span><span class="hl-9">template:</span><span class="hl-5"> </span><span class="hl-7">'page-size-template'</span><br/><span class="hl-5"> }</span><br/><span class="hl-5"> }</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> });</span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">head</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">h1</span><span class="hl-0">></span><span class="hl-2">HawkSearch Handlebars UI</span><span class="hl-0"></</span><span class="hl-1">h1</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-field</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></</span><span class="hl-1">hawksearch-search-results</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"><</span><span class="hl-1">script</span><span class="hl-5"> </span><span class="hl-3">id</span><span class="hl-5">=</span><span class="hl-4">"page-size-template"</span><span class="hl-5"> </span><span class="hl-3">type</span><span class="hl-5">=</span><span class="hl-4">"text/x-handlebars-template"</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-0"><</span><span class="hl-1">div</span><span class="hl-5"> </span><span class="hl-3">class</span><span class="hl-5">=</span><span class="hl-4">'page-size'</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-0"><</span><span class="hl-1">select</span><span class="hl-5"> </span><span class="hl-3">hawksearch-page-size</span><span class="hl-0">></span><br/><span class="hl-5"> {{#each options}}</span><br/><span class="hl-5"> </span><span class="hl-0"><</span><span class="hl-1">option</span><span class="hl-5"> </span><span class="hl-3">value</span><span class="hl-5">=</span><span class="hl-4">'{{pageSize}}'</span><span class="hl-5"> </span><span class="hl-3">{{attribute</span><span class="hl-5"> </span><span class="hl-12">'selected'</span><span class="hl-5"> </span><span class="hl-3">selected}}</span><span class="hl-0">></span><span class="hl-5">{{title}}</span><span class="hl-0"></</span><span class="hl-1">option</span><span class="hl-0">></span><br/><span class="hl-5"> {{/each}}</span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">select</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">div</span><span class="hl-0">></span><br/><span class="hl-5"> </span><span class="hl-0"></</span><span class="hl-1">script</span><span class="hl-0">></span><br/><span class="hl-2"> </span><span class="hl-0"></</span><span class="hl-1">body</span><span class="hl-0">></span><br/><span class="hl-0"></</span><span class="hl-1">html</span><span class="hl-0">></span>
|
|
31
31
|
</code><button>Copy</button></pre>
|
|
32
32
|
<p><em>Note: <code>script</code> elements are preferred over <code>template</code> elements as they prevent some browser parsing behavior which can conflict with Handlebars directives in some edge cases.</em></p>
|
|
33
33
|
<p><em>Note: This approach tends to be easier to manage than the previous option as it is more compatible with popular HTML editors and templates can potentially be loaded from separate files using Server-side Includes (SSI).</em></p>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bridgeline-digital/hawksearch-handlebars-ui",
|
|
3
|
-
"version": "6.0.0-beta.
|
|
3
|
+
"version": "6.0.0-beta.2",
|
|
4
4
|
"description": "The HawkSearch Handlebars UI package allows you to add a highly-customizable search results page to your website powered by HawkSearch.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"hawksearch"
|
package/readme.md
CHANGED
|
@@ -35,4 +35,4 @@ To display a landing page or recommendations instead of search results, simply r
|
|
|
35
35
|
|
|
36
36
|
## Documentation
|
|
37
37
|
|
|
38
|
-
Documentation is available at http://handlebars-ui.hawksearch.com/6.0.0-beta.
|
|
38
|
+
Documentation is available at http://handlebars-ui.hawksearch.com/6.0.0-beta.2/.
|