5 files changed, 102 insertions, 3 deletions
diff --git a/content/frontend/bundles/404.js b/content/frontend/bundles/404.js
new file mode 100644
index 00000000..6336f4b7
--- /dev/null
+++ b/content/frontend/bundles/404.js
@@ -0,0 +1,12 @@
+document.addEventListener(
+  'DOMContentLoaded',
+  () => {
+      const { environment, offlineVersions, archivesPath } = document.getElementById('offline-versions').dataset;
+      const location = window.location.href;
+      const isOffline = offlineVersions.split(',').find(version => location.includes(version));
+
+      if(environment === 'production' && isOffline) {
+         window.location.replace(archivesPath);
+      }
+  }
+);
diff --git a/content/frontend/bundles/archives.js b/content/frontend/bundles/archives.js
new file mode 100644
index 00000000..8b7ac218
--- /dev/null
+++ b/content/frontend/bundles/archives.js
@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import Banner from '../components/banner/banner.vue';
+
+document.addEventListener(
+  'DOMContentLoaded',
+  () => {
+    const urlParams = window.location.search;
+    const isOffline = urlParams.includes('?offline');
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: '#js-banner',
+      components: {
+        Banner,
+      },
+      render(createElement) {
+        return createElement(Banner, {
+          props: {
+            text: 'You attempted to view an older version of the documentation that is no longer available on this site. Please select a newer version from the menu above or access an archive listed below.',
+            show: isOffline,
+          },
+          on: {
+            toggle(isVisible) {
+              const wrapper = document.querySelector('.wrapper');
+              wrapper.classList.toggle('show-banner', isVisible);
+            }
+          },
+        });
+      },
+    });
+  }
+);
diff --git a/content/frontend/bundles/default.js b/content/frontend/bundles/default.js
index 6dc131a7..a13a18b6 100644
--- a/content/frontend/bundles/default.js
+++ b/content/frontend/bundles/default.js
@@ -17,7 +17,13 @@ document.addEventListener(
       },
       render(createElement) {
         return createElement(VersionBanner, {
-          props: { isOutdated, latestVersionUrl, archivesUrl }
+          props: { isOutdated, latestVersionUrl, archivesUrl },
+          on: {
+            toggleVersionBanner(isVisible) {
+              const wrapper = document.querySelector('.wrapper');
+              wrapper.classList.toggle('show-banner', isVisible);
+            }
+          },
         });
       },
     });
diff --git a/content/frontend/components/banner/banner.vue b/content/frontend/components/banner/banner.vue
new file mode 100644
index 00000000..530bc9f0
--- /dev/null
+++ b/content/frontend/components/banner/banner.vue
@@ -0,0 +1,39 @@
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    show: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      isVisible: this.show
+    }
+  },
+  mounted() {
+    this.toggleBanner(this.isVisible);
+  },
+  methods: {
+    toggleBanner(isVisible) {
+      this.$emit('toggle', isVisible);
+      this.isVisible = isVisible;
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="isVisible" class="banner position-fixed w-100 text-center">
+    <span v-if="text">{{ text }}</span>
+    <slot></slot>
+    <!-- TODO: Replace the 'x' below with a gl-icon component once gitlab-ui becomes available in the docs -->
+    <button class="btn btn-close pull-right" @click="toggleBanner(false)">x</button>
+  </div>
+</template>
diff --git a/content/frontend/components/version_banner/version_banner.vue b/content/frontend/components/version_banner/version_banner.vue
index 97edd59c..66d8fc40 100644
--- a/content/frontend/components/version_banner/version_banner.vue
+++ b/content/frontend/components/version_banner/version_banner.vue
@@ -1,5 +1,10 @@
 <script>
+import Banner from '../banner/banner.vue';
+
 export default {
+  components: {
+    Banner,
+  },
   props: {
     isOutdated: {
       type: Boolean,
@@ -14,11 +19,16 @@ export default {
       required: true,
     },
   },
+  methods: {
+    toggleVersionBanner(isVisible) {
+      this.$emit('toggleVersionBanner', isVisible);
+    }
+  },
 };
 </script>
 
 <template>
-  <div v-if="isOutdated" class="version-banner position-fixed w-100 text-center">
+  <banner :show="isOutdated" @toggle="toggleVersionBanner">
     This is <a :href="archivesUrl">archived documentation</a> for GitLab. Go to <a :href="latestVersionUrl">the latest</a>.
-  </div>
+  </banner>
 </template>