-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for Lunr and Algolia search (#48)
* Add basic support for Lunr and Algolia search * Fix skip links * Fix URL paths * Add toggle for Algolia "powered by" badge * Improve placement of search toggle * Fix search icon fill color * Add search documentation * Update CHANGELOG * Enable search on demo site * Update TOC
- Loading branch information
Showing
42 changed files
with
826 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <div class="inner"> | ||
| {% if site.search %} | ||
| {%- assign search_provider = site.search_provider | default: "lunr" -%} | ||
| {%- case search_provider -%} | ||
| {%- when "lunr" -%} | ||
| <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.theme.t.menu.search_placeholder_text | default: 'Enter your search term...' }}" /> | ||
| <div id="results" class="results"></div> | ||
| {%- when "algolia" -%} | ||
| <div tabindex="-1" class="search-searchbar"></div> | ||
| <div class="search-hits"></div> | ||
| {%- endcase -%} | ||
| {% endif %} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <!-- Including InstantSearch.js library and styling --> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script> | ||
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css"> | ||
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/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 ` | ||
| <article class="entry"> | ||
| <h3 class="entry-title"><a href="{{ site.baseurl }}${url}">${title}</a></h3> | ||
| <div class="entry-excerpt">${content}</div> | ||
| </article> | ||
| `; | ||
| } | ||
|
|
||
| // 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.theme.t.menu.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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| {%- assign lang = site.lang | slice: 0, 2 | default: "en" -%} | ||
| {%- case lang -%} | ||
| {%- when "da" -%} | ||
| {%- assign lang = "da" -%} | ||
| {%- when "de" -%} | ||
| {%- assign lang = "de" -%} | ||
| {%- when "du" -%} | ||
| {%- assign lang = "du" -%} | ||
| {-% when "es" -%} | ||
| {%- assign lang = "es" -%} | ||
| {%- when "fi" -%} | ||
| {%- assign lang = "fi" -%} | ||
| {%- when "fr" -%} | ||
| {%- assign lang = "fr" -%} | ||
| {%- when "hu" -%} | ||
| {%- assign lang = "hu" -%} | ||
| {%- when "it" -%} | ||
| {%- assign lang = "it" -%} | ||
| {%- when "ja" -%} | ||
| {%- assign lang = "ja" -%} | ||
| {%- when "jp" -%} | ||
| {%- assign lang = "jp" -%} | ||
| {%- when "no" -%} | ||
| {%- assign lang = "no" -%} | ||
| {%- when "pt" -%} | ||
| {%- assign lang = "pt" -%} | ||
| {%- when "ro" -%} | ||
| {%- assign lang = "ro" -%} | ||
| {%- when "ru" -%} | ||
| {%- assign lang = "ru" -%} | ||
| {%- when "sv" -%} | ||
| {%- assign lang = "sv" -%} | ||
| {%- when "tr" -%} | ||
| {%- assign lang = "tr" -%} | ||
| {%- else -%} | ||
| {%- assign lang = "en" -%} | ||
| {%- endcase -%} | ||
| <script src="{{ '/assets/javascripts/lunr/lunr.min.js' | absolute_url }}"></script> | ||
| <script src="{{ '/assets/javascripts/search-data.json' | absolute_url }}"></script> | ||
| {%- unless lang == "en" -%} | ||
| <script src="{{ '/assets/javascripts/lunr/lunr.stemmer.support.min.js' | absolute_url }}"></script> | ||
| <script src="{{ '/assets/javascripts/lunr/lunr.' | append: lang | append: '.min.js' | absolute_url }}"></script> | ||
| {%- endunless %} | ||
| <script> | ||
| var idx = lunr(function () { | ||
| {% unless lang == "en" %} | ||
| // use the language | ||
| this.use(lunr.{{ lang }}); | ||
| {% endunless %} | ||
| // the, the normal lunr index initialization | ||
| this.field('title') | ||
| this.field('excerpt') | ||
| this.field('categories') | ||
| this.field('tags') | ||
| this.ref('id') | ||
|
|
||
| this.pipeline.remove(lunr.trimmer) | ||
|
|
||
| // add documents to index | ||
| for (var item in store) { | ||
| this.add({ | ||
| title: store[item].title, | ||
| excerpt: store[item].excerpt, | ||
| categories: store[item].categories, | ||
| tags: store[item].tags, | ||
| id: item | ||
| }) | ||
| } | ||
| }); | ||
|
|
||
| console.log(jQuery.type(idx)); | ||
|
|
||
| $(document).ready(function () { | ||
| $('input#search').on('keyup', function () { | ||
| var resultdiv = $('#results'); | ||
| var query = $(this).val().toLowerCase(); | ||
| var result = | ||
| idx.query(function (q) { | ||
| query.split(lunr.tokenizer.separator).forEach(function (term) { | ||
| q.term(term, { boost: 100 }) | ||
| if (query.lastIndexOf(" ") != query.length - 1) { | ||
| q.term(term, { usePipeline: false, wildcard: lunr.Query.wildcard.TRAILING, boost: 10 }) | ||
| } | ||
| if (term != "") { | ||
| q.term(term, { usePipeline: false, editDistance: 1, boost: 1 }) | ||
| } | ||
| }) | ||
| }); | ||
| resultdiv.empty(); | ||
| resultdiv.prepend('<p class="results-found">' + result.length + ' {{ site.data.theme.t.menu.results_found | default: "Result(s) found" }}</p>'); | ||
| for (var item in result) { | ||
| var ref = result[item].ref; | ||
| var searchitem = | ||
| '<article class="entry">' + | ||
| '<h3 class="entry-title">' + | ||
| '<a href="' + store[ref].url + '">' + store[ref].title + '</a>' + | ||
| '</h3>' + | ||
| '<div class="entry-excerpt">' + | ||
| '<p>' + store[ref].excerpt.split(" ").splice(0, 20).join(" ") + '...</p>' + | ||
| '</div>' + | ||
| '</article>'; | ||
| resultdiv.append(searchitem); | ||
| } | ||
| }); | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.