steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Lazy-load InstantSearch scripts and stylesheets (#3691)

Browse Source 
* Lazy-load InstantSearch scripts and stylesheets

* Replace outdated script parts
This commit is contained in:
iBug 2024-04-22 23:25:09 +08:00 committed by GitHub
parent 7aee05ce0c
commit 75841313de
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 70 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
_includes/search/algolia-search-scripts.html
View File

@ -1,61 +1,81 @@
<!-- 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> <script>
// Instanciating InstantSearch.js with Algolia credentials // Including InstantSearch.js library and styling
const search = instantsearch({ const loadSearch = function() {
appId: '{{ site.algolia.application_id }}', const loadCSS = function(src) {
apiKey: '{{ site.algolia.search_only_api_key }}', var link = document.createElement('link');
indexName: '{{ site.algolia.index_name }}', link.rel = 'stylesheet';
searchParameters: { link.type = 'text/css';
restrictSearchableAttributes: [ link.href = src;
'title', link.media = 'all';
'content' document.head.appendChild(link);
] };
}
});
const hitTemplate = function(hit) { var script = document.createElement('script');
const url = hit.url; script.setAttribute("type", "text/javascript");
const hightlight = hit._highlightResult; script.setAttribute("src", "https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js");
const title = hightlight.title && hightlight.title.value || ""; script.addEventListener("load", function() {
const content = hightlight.html && hightlight.html.value || ""; // Instantiating 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']
}
});
return ` const hitTemplate = function(hit) {
<div class="list__item"> const url = hit.url;
<article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork"> const hightlight = hit._highlightResult;
<h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}${url}">${title}</a></h2> const title = hightlight.title && hightlight.title.value || "";
<div class="archive__item-excerpt" itemprop="description">${content}</div> const content = hightlight.html && hightlight.html.value || "";
</article>
</div>
`;
}
// Adding searchbar and results widgets return `
search.addWidget( <div class="list__item">
instantsearch.widgets.searchBox({ <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
container: '.search-searchbar', <h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}${url}">${title}</a></h2>
{% unless site.algolia.powered_by == false %}poweredBy: true,{% endunless %} <div class="archive__item-excerpt" itemprop="description">${content}</div>
placeholder: '{{ site.data.ui-text[site.locale].search_placeholder_text | default: "Enter your search term..." }}' </article>
}) </div>
); `;
search.addWidget(
instantsearch.widgets.hits({
container: '.search-hits',
templates: {
item: hitTemplate,
empty: '{{ site.data.ui-text[site.locale].search_algolia_no_results | default: "No results" }}',
} }
})
); // 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,
empty: '{{ site.data.ui-text[site.locale].search_algolia_no_results | default: "No results" }}',
}
})
);
if (!search.started) {
search.start();
}
});
document.body.appendChild(script);
loadCSS("https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css");
loadCSS("https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css");
};
// Starting the search only when toggle is clicked // Starting the search only when toggle is clicked
$(document).ready(function () { $(document).ready(function() {
var scriptLoaded = false;
$(".search__toggle").on("click", function() { $(".search__toggle").on("click", function() {
if(!search.started) { if (!scriptLoaded) {
search.start(); loadSearch();
scriptLoaded = true;
} }
}); });
}); });