diff options
| author | Andrew Lee <alee14498@gmail.com> | 2019-10-27 09:57:37 -0400 |
|---|---|---|
| committer | Andrew Lee <alee14498@gmail.com> | 2019-10-27 09:57:37 -0400 |
| commit | e62e7bb6b14555c9bbe5d40d217103984f4f80e6 (patch) | |
| tree | 21887d847dccacb47644eb6f74ce31326172303c /_includes/search | |
| parent | 716ea6ed2b64c921a799d872a07bfbd53b2a3e58 (diff) | |
| download | pokeworld-website-e62e7bb6b14555c9bbe5d40d217103984f4f80e6.tar.gz pokeworld-website-e62e7bb6b14555c9bbe5d40d217103984f4f80e6.tar.bz2 pokeworld-website-e62e7bb6b14555c9bbe5d40d217103984f4f80e6.zip | |
Rewrite progress
Diffstat (limited to '_includes/search')
| -rw-r--r-- | _includes/search/algolia-search-scripts.html | 54 | ||||
| -rw-r--r-- | _includes/search/google-search-scripts.html | 30 | ||||
| -rw-r--r-- | _includes/search/lunr-search-scripts.html | 10 | ||||
| -rw-r--r-- | _includes/search/search_form.html | 26 |
4 files changed, 120 insertions, 0 deletions
diff --git a/_includes/search/algolia-search-scripts.html b/_includes/search/algolia-search-scripts.html new file mode 100644 index 0000000..a6bc9d2 --- /dev/null +++ b/_includes/search/algolia-search-scripts.html @@ -0,0 +1,54 @@ +<!-- Including InstantSearch.js library and styling --> +<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js"></script> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css"> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css"> + +<script> +// Instanciating InstantSearch.js with Algolia credentials +const search = instantsearch({ + appId: '{{ site.algolia.application_id }}', + apiKey: '{{ site.algolia.search_only_api_key }}', + indexName: '{{ site.algolia.index_name }}', + searchParameters: { + restrictSearchableAttributes: [ + 'title', + 'content' + ] + } +}); + +const hitTemplate = function(hit) { + const url = hit.url; + const title = hit._highlightResult.title.value; + const content = hit._highlightResult.html.value; + + return ` + <div class="list__item"> + <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork"> + <h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}${url}">${title}</a></h2> + <div class="archive__item-excerpt" itemprop="description">${content}</div> + </article> + </div> + `; +} + +// Adding searchbar and results widgets +search.addWidget( + instantsearch.widgets.searchBox({ + container: '.search-searchbar', + {% unless site.algolia.powered_by == false %}poweredBy: true,{% endunless %} + placeholder: '{{ site.data.ui-text[site.locale].search_placeholder_text | default: "Enter your search term..." }}' + }) +); +search.addWidget( + instantsearch.widgets.hits({ + container: '.search-hits', + templates: { + item: hitTemplate + } + }) +); + +// Starting the search +search.start(); +</script> diff --git a/_includes/search/google-search-scripts.html b/_includes/search/google-search-scripts.html new file mode 100644 index 0000000..4af7423 --- /dev/null +++ b/_includes/search/google-search-scripts.html @@ -0,0 +1,30 @@ +<script> + (function () { + var cx = '{{ site.google.search_engine_id }}'; + var gcse = document.createElement('script'); + gcse.type = 'text/javascript'; + gcse.async = true; + gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; + var s = document.getElementsByTagName('script')[0]; + s.parentNode.insertBefore(gcse, s); + })(); + + function googleCustomSearchExecute() { + var input = document.getElementById('cse-search-input-box-id'); + var element = google.search.cse.element.getElement('searchresults-only0'); + if (input.value == '') { + element.clearAllResults(); + } else { + element.execute(input.value); + } + return false; + } + + {% if site.google.instant_search %} + $(document).ready(function () { + $('input#cse-search-input-box-id').on('keyup', function () { + googleCustomSearchExecute(); + }); + }); + {% endif %} +</script>
\ No newline at end of file diff --git a/_includes/search/lunr-search-scripts.html b/_includes/search/lunr-search-scripts.html new file mode 100644 index 0000000..574c390 --- /dev/null +++ b/_includes/search/lunr-search-scripts.html @@ -0,0 +1,10 @@ +{% assign lang = site.locale | slice: 0,2 | default: "en" %} +{% case lang %} +{% when "gr" %} + {% assign lang = "gr" %} +{% else %} + {% assign lang = "en" %} +{% endcase %} +<script src="{{ '/assets/js/lunr/lunr.min.js' | relative_url }}"></script> +<script src="{{ '/assets/js/lunr/lunr-store.js' | relative_url }}"></script> +<script src="{{ '/assets/js/lunr/lunr-' | append: lang | append: '.js' | relative_url }}"></script>
\ No newline at end of file diff --git a/_includes/search/search_form.html b/_includes/search/search_form.html new file mode 100644 index 0000000..c346379 --- /dev/null +++ b/_includes/search/search_form.html @@ -0,0 +1,26 @@ +<div class="search-content__inner-wrap"> + {%- assign search_provider = site.search_provider | default: "lunr" -%} + {%- case search_provider -%} + {%- when "lunr" -%} + <form class="search-content__form" onkeydown="return event.key != 'Enter';"> + <label class="sr-only" for="search"> + {{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }} + </label> + <input type="search" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" /> + </form> + <div id="results" class="results"></div> + {%- when "google" -%} + <form onsubmit="return googleCustomSearchExecute();" id="cse-search-box-form-id"> + <label class="sr-only" for="cse-search-input-box-id"> + {{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }} + </label> + <input type="search" id="cse-search-input-box-id" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" /> + </form> + <div id="results" class="results"> + <gcse:searchresults-only></gcse:searchresults-only> + </div> + {%- when "algolia" -%} + <div class="search-searchbar"></div> + <div class="search-hits"></div> + {%- endcase -%} +</div> |
