Fix highlight style not loaded and fix console error when no search box

Close #614

data/assets.toml

@@ -82,3 +82,7 @@
   version = "2.9.0"
   sri = "sha256-0vcZrdMQksHcHrY60tPnVK71jnB3wX/JpMcah5BffjA="
   url = "https://cdnjs.cloudflare.com/ajax/libs/instantsearch.js/%s/instantsearch-theme-algolia.min.css"
+[css.highlight]
+  version = "9.12.0"
+  sri = ""  # No SRI as highlight style is determined at run time.
+  url = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/%s/styles/%s.min.css"

layouts/partials/footer.html

@@ -69,72 +69,74 @@
     {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.instantsearch.url $js.instantsearch.version) $js.instantsearch.sri | safeHTML }}
     {{ end }}
     <script>
-      const content_type = {
-        'post': {{ i18n "posts" }},
-        'project': {{ i18n "projects" }},
-        'publication' : {{ i18n "publications" }},
-        'talk' : {{ i18n "talks" }}
-      };
-
-      function getTemplate(templateName) {
-        return document.querySelector(`#${templateName}-template`).innerHTML;
-      }
-
-      const options = {
-        appId: {{ .Site.Params.search.algolia.app_id }},
-        apiKey: {{ .Site.Params.search.algolia.api_key }},
-        indexName: {{ .Site.Params.search.algolia.index_name }},
-        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';
+      if ( $('#search-box').length ) {
+        const content_type = {
+          'post': {{ i18n "posts" }},
+          'project': {{ i18n "projects" }},
+          'publication' : {{ i18n "publications" }},
+          'talk' : {{ i18n "talks" }}
+        };
+
+        function getTemplate(templateName) {
+          return document.querySelector(`#${templateName}-template`).innerHTML;
         }
-      };
-
-      const search = instantsearch(options);
-
-      // Initialize search box.
-      search.addWidget(
-        instantsearch.widgets.searchBox({
-          container: '#search-box',
-          placeholder: {{ i18n "search_placeholder" }}
-        })
-      );
-
-      // Initialize search results.
-      search.addWidget(
-        instantsearch.widgets.infiniteHits({
-          container: '#search-hits',
-          templates: {
-            empty: '<div class="search-no-results">' + {{ i18n "search_no_results" }} + '</div>',
-            item: getTemplate('search-hit')
+
+        const options = {
+          appId: {{ .Site.Params.search.algolia.app_id }},
+          apiKey: {{ .Site.Params.search.algolia.api_key }},
+          indexName: {{ .Site.Params.search.algolia.index_name }},
+          routing: true,
+          searchParameters: {
+            hitsPerPage: 10
           },
-          cssClasses: {
-            showmoreButton: 'btn btn-primary btn-outline'
-          }
-        })
-      );
-
-      // 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]);
+          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',
+            placeholder: {{ i18n "search_placeholder" }}
+          })
+        );
+
+        // Initialize search results.
+        search.addWidget(
+          instantsearch.widgets.infiniteHits({
+            container: '#search-hits',
+            templates: {
+              empty: '<div class="search-no-results">' + {{ i18n "search_no_results" }} + '</div>',
+              item: getTemplate('search-hit')
+            },
+            cssClasses: {
+              showmoreButton: 'btn btn-primary btn-outline'
+            }
+          })
+        );
+
+        // 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();
+        // Start search.
+        search.start();
+      }
     </script>
     {{ end }}
 

layouts/partials/header.html

@@ -56,15 +56,15 @@
     {{ else if isset .Site.Params "highlight" }}
       {{ $scr.Set "highlight_enabled" .Site.Params.highlight }}
     {{ end }}
-    {{ if $scr.Get "highlight_enabled" }}
+    {{ if ($scr.Get "highlight_enabled") }}
       {{ $v := $css.highlight.version }}
       {{ with .Site.Params.highlight_style }}
-      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ $v }}/styles/{{ . }}.min.css">
+        {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\">" (printf $css.highlight.url $css.highlight.version .) | safeHTML }}
       {{ else }}
         {{ if eq ($scr.Get "light") true }}
-          <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ $v }}/styles/github.min.css">
+          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\">" (printf $css.highlight.url $css.highlight.version "github") | safeHTML }}
         {{ else }}
-          <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ $v }}/styles/dracula.min.css">
+          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\">" (printf $css.highlight.url $css.highlight.version "dracula") | safeHTML }}
         {{ end }}
       {{ end }}
     {{ end }}