Refactor default.js

7 files changed, 63 insertions, 53 deletions

diff --git a/content/frontend/archives/archives.js b/content/frontend/archives/archives.js
new file mode 100644
index 00000000..ec92efbb
--- /dev/null
+++ b/content/frontend/archives/archives.js
@@ -0,0 +1,14 @@
+/* global Vue */
+import ArchivesPage from './archives_page.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  return new Vue({
+    el: '.js-archives',
+    components: {
+      ArchivesPage,
+    },
+    render(createElement) {
+      return createElement(ArchivesPage);
+    },
+  });
+});
diff --git a/content/frontend/default/components/archives_page.vue b/content/frontend/archives/archives_page.vue
index 07df0f59..c47bf03d 100644
--- a/content/frontend/default/components/archives_page.vue
+++ b/content/frontend/archives/archives_page.vue
@@ -1,6 +1,6 @@
 <script>
-import { getVersions, getArchiveImages } from '../../services/fetch_versions';
-import HeaderPermalink from '../../shared/components/header_permalink.vue';
+import { getVersions, getArchiveImages } from '../services/fetch_versions';
+import HeaderPermalink from '../shared/components/header_permalink.vue';
 
 export default {
   components: {
diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js
index 1f140788..10a82fb7 100644
--- a/content/frontend/default/default.js
+++ b/content/frontend/default/default.js
@@ -5,7 +5,8 @@ import VersionBanner from './components/version_banner.vue';
 import { setupTableOfContents } from './setup_table_of_contents';
 import VersionsMenu from './components/versions_menu.vue';
 import TabsSection from './components/tabs_section.vue';
-import ArchivesPage from './components/archives_page.vue';
+
+window.Vue = Vue;
 
 function fixScrollPosition() {
   if (!window.location.hash || !document.querySelector(window.location.hash)) return;
@@ -21,37 +22,41 @@ function fixScrollPosition() {
   scrollPositionMutationObserver.observe(contentBody);
 }
 
+/* eslint-disable no-new */
 document.addEventListener('DOMContentLoaded', () => {
-  const versionBanner = document.querySelector('#js-version-banner');
-  if (!versionBanner) {
-    return;
-  }
-
-  const isOutdated = versionBanner.hasAttribute('data-is-outdated');
-  const { latestVersionUrl, archivesUrl } = versionBanner.dataset;
-
   fixScrollPosition();
+  setupTableOfContents();
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: versionBanner,
-    components: {
-      VersionBanner,
-    },
-    render(createElement) {
-      return createElement(VersionBanner, {
-        props: { isOutdated, latestVersionUrl, archivesUrl },
-        on: {
-          toggleVersionBanner(isVisible) {
-            const wrapper = document.querySelector('.wrapper');
-            wrapper.classList.toggle('show-banner', isVisible);
+  /**
+   * Banner components
+   */
+  const versionBanner = document.querySelector('#js-version-banner');
+  if (versionBanner) {
+    const isOutdated = versionBanner.hasAttribute('data-is-outdated');
+    const { latestVersionUrl, archivesUrl } = versionBanner.dataset;
+
+    new Vue({
+      el: versionBanner,
+      components: {
+        VersionBanner,
+      },
+      render(createElement) {
+        return createElement(VersionBanner, {
+          props: { isOutdated, latestVersionUrl, archivesUrl },
+          on: {
+            toggleVersionBanner(isVisible) {
+              const wrapper = document.querySelector('.wrapper');
+              wrapper.classList.toggle('show-banner', isVisible);
+            },
           },
-        },
-      });
-    },
-  });
+        });
+      },
+    });
+  }
 
-  // eslint-disable-next-line no-new
+  /**
+   * Navigation toggle component
+   */
   new Vue({
     el: '#js-nav-toggle',
     components: {
@@ -66,11 +71,10 @@ document.addEventListener('DOMContentLoaded', () => {
     },
   });
 
-  setupTableOfContents();
-});
-
-document.addEventListener('DOMContentLoaded', () => {
-  return new Vue({
+  /**
+   * Versions menu component
+   */
+  new Vue({
     el: '.js-versions-menu',
     components: {
       VersionsMenu,
@@ -79,9 +83,10 @@ document.addEventListener('DOMContentLoaded', () => {
       return createElement(VersionsMenu);
     },
   });
-});
 
-document.addEventListener('DOMContentLoaded', () => {
+  /**
+   * Tabs component
+   */
   const tabsetSelector = '.js-tabs';
   document.querySelectorAll(tabsetSelector).forEach((tabset) => {
     const tabTitles = [];
@@ -92,7 +97,7 @@ document.addEventListener('DOMContentLoaded', () => {
       tabContents.push(getNextUntil(tab, '.tab-title'));
     });
 
-    return new Vue({
+    new Vue({
       el: tabsetSelector,
       components: {
         TabsSection,
@@ -108,15 +113,3 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   });
 });
-
-document.addEventListener('DOMContentLoaded', () => {
-  return new Vue({
-    el: '.js-archives',
-    components: {
-      ArchivesPage,
-    },
-    render(createElement) {
-      return createElement(ArchivesPage);
-    },
-  });
-});
diff --git a/content/frontend/default/setup_table_of_contents.js b/content/frontend/default/setup_table_of_contents.js
index db7b376a..5f0c7d73 100644
--- a/content/frontend/default/setup_table_of_contents.js
+++ b/content/frontend/default/setup_table_of_contents.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+/* global Vue */
 import { parseTOC } from '../shared/toc/parse_toc';
 import TableOfContents from './components/table_of_contents.vue';
 import { StickToFooter } from './directives/stick_to_footer';
diff --git a/content/frontend/deprecations/deprecations.js b/content/frontend/deprecations/deprecations.js
index 3b2d8220..9388dfbe 100644
--- a/content/frontend/deprecations/deprecations.js
+++ b/content/frontend/deprecations/deprecations.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+/* global Vue */
 import { compareVersions } from 'compare-versions';
 import { getReleaseDates } from '../services/fetch_versions';
 import DeprecationFilters from './components/deprecation_filters.vue';
diff --git a/layouts/default.html b/layouts/default.html
index ce246af3..5a99862d 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -69,6 +69,7 @@
         </div>
       </div>
     </section>
+    <script src="<%= @items['/frontend/default/default.*'].path %>"></script>
     <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
     <% if @config[:search_backend] == "algolia" %>
     <script src="<%= @items['/frontend/search/docsearch.*'].path %>"></script>
@@ -91,9 +92,11 @@
     <% if @item.identifier.to_s == '/ee/update/deprecations.md' %>
       <script src="<%= @items['/frontend/deprecations/deprecations.*'].path %>"></script>
     <% end %>
+    <% if @item.identifier.to_s == '/archives/index.md' %>
+      <script src="<%= @items['/frontend/archives/archives.*'].path %>"></script>
+    <% end %>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
     <script src="<%= @items['/assets/javascripts/global-nav.*'].path %>"></script>
     <script src="<%= @items['/assets/javascripts/tables.*'].path %>"></script>
-    <script src="<%= @items['/frontend/default/default.*'].path %>"></script>
   </body>
 </html>
diff --git a/spec/frontend/default/components/archives_page_spec.js b/spec/frontend/default/components/archives_page_spec.js
index 6bc9ebe8..280ee6e5 100644
--- a/spec/frontend/default/components/archives_page_spec.js
+++ b/spec/frontend/default/components/archives_page_spec.js
@@ -3,7 +3,7 @@
  */
 
 import { shallowMount } from '@vue/test-utils';
-import ArchivesPage from '../../../../content/frontend/default/components/archives_page.vue';
+import ArchivesPage from '../../../../content/frontend/archives/archives_page.vue';
 import {
   getVersions,
   getArchiveImages,