Separate Google and Lunr components

6 files changed, 49 insertions, 32 deletions

diff --git a/content/frontend/search/components/search_form.vue b/content/frontend/search/components/lunr_search_form.vue
index 44d25d1d..44d25d1d 100644
--- a/content/frontend/search/components/search_form.vue
+++ b/content/frontend/search/components/lunr_search_form.vue
diff --git a/content/frontend/search/google.js b/content/frontend/search/google.js
index bfb30a77..b6386359 100644
--- a/content/frontend/search/google.js
+++ b/content/frontend/search/google.js
@@ -1,36 +1,22 @@
-import Vue from 'vue';
-import GoogleResults from './components/google_results.vue';
+/* global Vue */
 import GoogleSearchForm from './components/google_search_form.vue';
-import SearchForm from './components/search_form.vue';
-
-const mountVue = (el, Component, Properties = {}) => {
-  return new Vue({
-    el,
-    components: { Component },
-    render(createElement) {
-      return createElement(Component, Properties);
-    },
-  });
-};
+import { activateKeyboardShortcut } from './search_helpers';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const isHomepage = ['/', '/index.html'].includes(window.location.pathname);
-
-  mountVue('.js-google-search', GoogleResults);
-  mountVue('.js-google-search-form', GoogleSearchForm, {
-    props: {
-      borderless: !isHomepage,
-    },
-  });
+  activateKeyboardShortcut();
 
-  // Lunr.js
-  mountVue('.js-search-form', SearchForm);
-});
+  const isHomepage = ['/', '/index.html'].includes(window.location.pathname);
 
-// Keyboard shortcut: forward slash focuses on search forms
-document.addEventListener('keyup', (e) => {
-  if (e.key !== '/' || e.ctrlKey || e.metaKey) return;
-  if (/^(?:input|textarea|select|button)$/i.test(e.target.tagName)) return;
-  e.preventDefault();
-  document.querySelector('input[type="search"]').focus();
+  (() =>
+    new Vue({
+      el: '.js-google-search-form',
+      components: { GoogleSearchForm },
+      render(createElement) {
+        return createElement(GoogleSearchForm, {
+          props: {
+            borderless: !isHomepage,
+          },
+        });
+      },
+    }))();
 });
diff --git a/content/frontend/search/google_results.js b/content/frontend/search/google_results.js
new file mode 100644
index 00000000..1a6f455f
--- /dev/null
+++ b/content/frontend/search/google_results.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import GoogleResults from './components/google_results.vue';
+import { activateKeyboardShortcut } from './search_helpers';
+
+document.addEventListener('DOMContentLoaded', () => {
+  activateKeyboardShortcut();
+
+  (() =>
+    new Vue({
+      el: '.js-google-search',
+      components: {
+        GoogleResults,
+      },
+      render(createElement) {
+        return createElement(GoogleResults);
+      },
+    }))();
+});
diff --git a/content/frontend/search/lunrsearch.js b/content/frontend/search/lunrsearch.js
index 8d4eaab9..542ae48f 100644
--- a/content/frontend/search/lunrsearch.js
+++ b/content/frontend/search/lunrsearch.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import LunrResults from './components/lunr_results.vue';
-import SearchForm from './components/search_form.vue';
+import SearchForm from './components/lunr_search_form.vue';
 
 // Search results page (/search)
 document.addEventListener('DOMContentLoaded', () => {
diff --git a/content/frontend/search/search_helpers.js b/content/frontend/search/search_helpers.js
index 45048fab..191f887b 100644
--- a/content/frontend/search/search_helpers.js
+++ b/content/frontend/search/search_helpers.js
@@ -20,3 +20,16 @@ export const getSearchQueryFromURL = () => {
 export const updateURLParams = (query) => {
   window.history.pushState(null, '', `${window.location.pathname}?q=${query}`);
 };
+
+/**
+ * Keyboard shortcuts.
+ */
+export const activateKeyboardShortcut = () => {
+  document.addEventListener('keyup', (e) => {
+    // Focus on search form with the forward slash key.
+    if (e.key !== '/' || e.ctrlKey || e.metaKey) return;
+    if (/^(?:input|textarea|select|button)$/i.test(e.target.tagName)) return;
+    e.preventDefault();
+    document.querySelector('input[type="search"]').focus();
+  });
+};
diff --git a/layouts/search.html b/layouts/search.html
index 142ca3d8..5360aac7 100644
--- a/layouts/search.html
+++ b/layouts/search.html
@@ -4,7 +4,7 @@
     <%= render '/head.*' %>
     <link rel="canonical" href="<%= @config[:base_url] %>/search/">
     <% if @config[:search_backend] == "google" %>
-    <script src="<%= @items['/frontend/search/google.*'].path %>"></script>
+    <script src="<%= @items['/frontend/search/google_results.*'].path %>"></script>
     <% else %>
     <script src="/assets/javascripts/lunr.min.js"></script>
     <script src="<%= @items['/frontend/search/lunrsearch.*'].path %>"></script>