Extract top_nav.html script into a .js file

_includes/base/top_nav.html

@@ -16,60 +16,12 @@
       <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
       <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
       <script>
-        var client = algoliasearch('{{ site.algolia.application_id }}', '{{ site.algolia.search_only_api_key }}');
-        var index = client.initIndex('{{ site.algolia.index_name }}');
-
-        autocomplete('#search-input', { hint: false }, [
-          {
-            source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
-            displayKey: 'title',
-            templates: {
-              suggestion: function(suggestion) {
-                var resultHeading = '';
-
-                if (suggestion._highlightResult && suggestion._highlightResult.title) {
-                  resultHeading = suggestion._highlightResult.title.value;
-                } else if (suggestion.title) {
-                  resultHeading = suggestion.title;
-                } else {
-                  if (suggestion.tag_name[0] !== 'h') {
-                    // If the suggestion did not match a heading, then we can use the heading
-                    // from the hierarchy
-                    if (suggestion.hierarchy) {
-                      for (var i = 6; i >= 0; --i) {
-                        var hierarchyValue = suggestion.hierarchy['lvl' + i.toString()];
-                        if (hierarchyValue) {
-                          resultHeading = hierarchyValue;
-                          break;
-                        }
-                      }
-                    }
-                  }
-                }
-
-                if (!resultHeading) {
-                  resultHeading = suggestion.slug || suggestion.url || '(Untitled)';
-                }
-
-                let result = '<b>' + resultHeading + '</b>';
-
-                if (suggestion._snippetResult && suggestion._snippetResult.content) {
-                    result += '<br />' + suggestion._snippetResult.content.value;
-                } else if (suggestion._highlightResult && suggestion._highlightResult.content) {
-                  result += '<br />' + suggestion._highlightResult.content.value;
-                } else if (suggestion.content) {
-                  result += '<br />' + suggestion.content;
-                }
-
-                return '<p>' + result + '</p>';
-              }
-            }
-          }
-        ]).on('autocomplete:selected', function(event, suggestion, dataset) {
-          console.log(suggestion.url);
-          window.location.href = suggestion.url;
-        });
+        // Configure top_nav.js
+        var searchClient = algoliasearch('{{ site.algolia.application_id }}', '{{ site.algolia.search_only_api_key }}');
+        window.searchIndex = searchClient.initIndex('{{ site.algolia.index_name }}');
       </script>
+      <script src="/scripts/top_nav.js"></script>
+
       <!-- SEARCH BOX - END -->
 
       {% for link in site.data.navigation.top_nav %}

scripts/top_nav.js

@@ -0,0 +1,50 @@
+var searchIndex = window.searchIndex;
+autocomplete('#search-input', { hint: false }, [
+    {
+        source: autocomplete.sources.hits(searchIndex, { hitsPerPage: 5 }),
+        displayKey: 'title',
+        templates: {
+            suggestion: function (suggestion) {
+                var resultHeading = '';
+                if (suggestion._highlightResult && suggestion._highlightResult.title) {
+                    resultHeading = suggestion._highlightResult.title.value;
+                }
+                else if (suggestion.title) {
+                    resultHeading = suggestion.title;
+                }
+                else {
+                    if (suggestion.tag_name[0] !== 'h') {
+                        // If the suggestion did not match a heading, then we can use the heading
+                        // from the hierarchy
+                        if (suggestion.hierarchy) {
+                            for (var i = 6; i >= 0; --i) {
+                                var hierarchyValue = suggestion.hierarchy['lvl' + i.toString()];
+                                if (hierarchyValue) {
+                                    resultHeading = hierarchyValue;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+                if (!resultHeading) {
+                    resultHeading = suggestion.slug || suggestion.url || '(Untitled)';
+                }
+                var result = '<b>' + resultHeading + '</b>';
+                if (suggestion._snippetResult && suggestion._snippetResult.content) {
+                    result += '<br />' + suggestion._snippetResult.content.value;
+                }
+                else if (suggestion._highlightResult && suggestion._highlightResult.content) {
+                    result += '<br />' + suggestion._highlightResult.content.value;
+                }
+                else if (suggestion.content) {
+                    result += '<br />' + suggestion.content;
+                }
+                return '<p>' + result + '</p>';
+            }
+        }
+    }
+]).on('autocomplete:selected', function (event, suggestion, dataset) {
+    console.log(suggestion.url);
+    window.location.href = suggestion.url;
+});

scripts/top_nav.ts

@@ -0,0 +1,60 @@
+// From https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js
+declare const autocomplete;
+
+interface Window {
+  // Assigned by top_nav.html
+  searchIndex: any;
+}
+
+const searchIndex = window.searchIndex;
+
+autocomplete('#search-input', { hint: false }, [
+  {
+    source: autocomplete.sources.hits(searchIndex, { hitsPerPage: 5 }),
+    displayKey: 'title',
+    templates: {
+      suggestion: function(suggestion) {
+        let resultHeading = '';
+
+        if (suggestion._highlightResult && suggestion._highlightResult.title) {
+          resultHeading = suggestion._highlightResult.title.value;
+        } else if (suggestion.title) {
+          resultHeading = suggestion.title;
+        } else {
+          if (suggestion.tag_name[0] !== 'h') {
+            // If the suggestion did not match a heading, then we can use the heading
+            // from the hierarchy
+            if (suggestion.hierarchy) {
+              for (let i = 6; i >= 0; --i) {
+                let hierarchyValue = suggestion.hierarchy['lvl' + i.toString()];
+                if (hierarchyValue) {
+                  resultHeading = hierarchyValue;
+                  break;
+                }
+              }
+            }
+          }
+        }
+
+        if (!resultHeading) {
+          resultHeading = suggestion.slug || suggestion.url || '(Untitled)';
+        }
+
+        let result = '<b>' + resultHeading + '</b>';
+
+        if (suggestion._snippetResult && suggestion._snippetResult.content) {
+            result += '<br />' + suggestion._snippetResult.content.value;
+        } else if (suggestion._highlightResult && suggestion._highlightResult.content) {
+          result += '<br />' + suggestion._highlightResult.content.value;
+        } else if (suggestion.content) {
+          result += '<br />' + suggestion.content;
+        }
+
+        return '<p>' + result + '</p>';
+      }
+    }
+  }
+]).on('autocomplete:selected', function(event, suggestion, dataset) {
+  console.log(suggestion.url);
+  window.location.href = suggestion.url;
+});