From 3ea332ca673005023353dc18c3b7dd3fd4d39fac Mon Sep 17 00:00:00 2001 From: George Cushen Date: Sun, 11 Nov 2018 16:06:24 +0000 Subject: [PATCH] refactor(js): shorten MathJax filename and minify + fingerprint assets Remove fingerprinting from MathJax config JS to shorten its generated filename. Reduces chance of JS filenames becoming too long for user's OS to handle due to long Sha512 asset fingerprinting. Minifies and fingerprints Academic's own JS for faster loading and to prevent old versions getting cached by web browser. Refactors Algolia search JS into its own file. Close #768 See #794 --- .../search.js => assets/js/academic-search.js | 41 ++++---- .../hugo-academic.js => assets/js/academic.js | 4 +- assets/js/algolia-search.js | 72 ++++++++++++++ layouts/partials/css/academic.css | 8 +- layouts/partials/footer.html | 94 +++++-------------- 5 files changed, 123 insertions(+), 96 deletions(-) rename static/js/search.js => assets/js/academic-search.js (85%) rename static/js/hugo-academic.js => assets/js/academic.js (99%) create mode 100644 assets/js/algolia-search.js diff --git a/static/js/search.js b/assets/js/academic-search.js similarity index 85% rename from static/js/search.js rename to assets/js/academic-search.js index 6b271726..8c52735b 100644 --- a/static/js/search.js +++ b/assets/js/academic-search.js @@ -1,6 +1,8 @@ /************************************************* - * Academic: the website framework for Hugo. + * Academic * https://github.com/gcushen/hugo-academic + * + * In-built Fuse based search algorithm. **************************************************/ /* --------------------------------------------------------------------------- @@ -149,25 +151,28 @@ function render(template, data) { * Initialize. * --------------------------------------------------------------------------- */ +// If Academic's in-built search is enabled and Fuse loaded, then initialize it. +if (typeof Fuse === 'function') { // Wait for Fuse to initialize. -$.getJSON( search_index_filename, function( search_index ) { - let fuse = new Fuse(search_index, fuseOptions); + $.getJSON(search_index_filename, function (search_index) { + let fuse = new Fuse(search_index, fuseOptions); - // On page load, check for search query in URL. - if (query = getSearchQuery('q')) { - $("#search-query").val(query); - initSearch(true, fuse); - } - - // On search box key up, process query. - $('#search-query').keyup(function (e) { - clearTimeout($.data(this, 'searchTimer')); // Ensure only one timer runs! - if (e.keyCode == 13) { + // On page load, check for search query in URL. + if (query = getSearchQuery('q')) { + $("#search-query").val(query); initSearch(true, fuse); - } else { - $(this).data('searchTimer', setTimeout(function () { - initSearch(false, fuse); - }, 250)); } + + // On search box key up, process query. + $('#search-query').keyup(function (e) { + clearTimeout($.data(this, 'searchTimer')); // Ensure only one timer runs! + if (e.keyCode == 13) { + initSearch(true, fuse); + } else { + $(this).data('searchTimer', setTimeout(function () { + initSearch(false, fuse); + }, 250)); + } + }); }); -}); +} diff --git a/static/js/hugo-academic.js b/assets/js/academic.js similarity index 99% rename from static/js/hugo-academic.js rename to assets/js/academic.js index c754d57c..050dc802 100644 --- a/static/js/hugo-academic.js +++ b/assets/js/academic.js @@ -1,6 +1,8 @@ /************************************************* - * Academic: the personal website framework for Hugo. + * Academic * https://github.com/gcushen/hugo-academic + * + * Core JS functions and initialization. **************************************************/ (function($){ diff --git a/assets/js/algolia-search.js b/assets/js/algolia-search.js new file mode 100644 index 00000000..aa1750ee --- /dev/null +++ b/assets/js/algolia-search.js @@ -0,0 +1,72 @@ +/************************************************* + * Academic + * https://github.com/gcushen/hugo-academic + * + * Algolia based search algorithm. + **************************************************/ + +if ((typeof instantsearch === 'function') && $('#search-box').length) { + function getTemplate(templateName) { + return document.querySelector(`#${templateName}-template`).innerHTML; + } + + const options = { + appId: algoliaConfig.appId, + apiKey: algoliaConfig.apiKey, + indexName: algoliaConfig.indexName, + routing: true, + searchParameters: { + hitsPerPage: 10 + }, + searchFunction: function (helper) { + let searchResults = document.querySelector('#search-hits') + if (helper.state.query === '') { + searchResults.style.display = 'none'; + return; + } + helper.search(); + searchResults.style.display = 'block'; + } + }; + + const search = instantsearch(options); + + // Initialize search box. + search.addWidget( + instantsearch.widgets.searchBox({ + container: '#search-box', + autofocus: false, + reset: true, + poweredBy: algoliaConfig.poweredBy, + placeholder: i18n.placeholder + }) + ); + + // Initialize search results. + search.addWidget( + instantsearch.widgets.infiniteHits({ + container: '#search-hits', + escapeHits: true, + templates: { + empty: '
' + i18n.no_results + '
', + item: getTemplate('search-hit-algolia') + }, + cssClasses: { + showmoreButton: 'btn btn-outline-primary' + } + }) + ); + + // On render search results, localize the content type metadata. + search.on('render', function () { + $('.search-hit-type').each(function (index) { + let content_key = $(this).text(); + if (content_key in content_type) { + $(this).text(content_type[content_key]); + } + }); + }); + + // Start search. + search.start(); +} diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css index c1ed1397..10674d6a 100644 --- a/layouts/partials/css/academic.css +++ b/layouts/partials/css/academic.css @@ -806,8 +806,8 @@ article .article-metadata { .article-style video { margin-left: auto; margin-right: auto; - margin-top: 60px; - margin-bottom: 60px; + margin-top: 2rem; + margin-bottom: 2rem; padding: 0; } @@ -818,8 +818,8 @@ article .article-metadata { } .article-style figure { - margin-top: 60px; - margin-bottom: 60px; + margin-top: 2rem; + margin-bottom: 2rem; } .article-style figure img { diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 3f42bc92..fce9d92b 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -3,8 +3,7 @@ {{/* Config LaTeX math rendering. */}} {{ if or .Params.math .Site.Params.math }} {{ $mathjax_config := resources.Get "js/mathjax-config.js" }} - {{ $secureJS := $mathjax_config | resources.Fingerprint "sha512" }} - + {{ end }} {{/* Attempt to load local vendor JS, otherwise load from CDN. */}} @@ -32,11 +31,6 @@ {{ end }} {{ end }} - - {{ range .Site.Params.custom_js }} - - {{ end }} - {{/* Maps JS. */}} {{ if eq .Site.Params.map 1 }} @@ -116,7 +110,6 @@ {{ if eq .Site.Params.search.engine 1 }} {{ printf "" (printf $js.fuse.url $js.fuse.version) $js.fuse.sri | safeHTML }} {{ printf "" (printf $js.mark.url $js.mark.version) $js.mark.sri | safeHTML }} - {{ end }} {{/* Algolia search engine. */}} @@ -125,73 +118,28 @@ {{ printf "" (printf $js.instantsearch.url $js.instantsearch.version) $js.instantsearch.sri | safeHTML }} {{ end }} {{ end }} + {{ $js_comment := printf "/* Source Themes Academic v%s | https://sourcethemes.com/academic/ */\n" .Site.Data.academic.version }} + {{ $js_bundle_head := $js_comment | resources.FromString "js/bundle-head.js" }} + {{ $js_academic := resources.Get "js/academic.js" }} + {{ $js_academic_search := resources.Get "js/academic-search.js" }} + {{ $js_algolia_search := resources.Get "js/algolia-search.js" }} + {{ $js_bundle := slice $js_academic $js_academic_search }} + {{ $js_bundle := $js_bundle | resources.Concat "js/academic-bundle-pre.js" | minify }} + {{ $js_bundle := slice $js_bundle_head $js_bundle | resources.Concat "js/academic.min.js" | fingerprint "md5" }} + + + {{ range .Site.Params.custom_js }} + + {{ end }} +