Display version banner for outdated docs

Added the ability to display a version banner for outdated docs

6 files changed, 90 insertions, 6 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 759ebabe..76b29eaa 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -22,6 +22,10 @@ $h-margin-bottom: 10px;
 // Padding
 $nav-item-padding: 7px;
 
+// Heights
+$page-header-height: 53px;
+$version-banner-height: 31px;
+
 // GitLab colors
 // Tanuki
 $color-tanuki-dark: rgb(226, 67, 41);
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 1279b3d7..b333f195 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 65
+version: 66
 ---
 
 @import "variables";
@@ -289,9 +289,14 @@ li {
   float: left;
 }
 
+// main content
+.wrapper.show-version-banner .main {
+  padding-top: calc(#{$page-header-height} + #{$version-banner-height});
+}
+
 .main {
   margin: auto 15%;
-  padding: 55px 40px 0;
+  padding: $page-header-height 40px 0;
   position: relative;
   width: auto;
   max-width: 900px;
@@ -444,11 +449,15 @@ li {
 }
 
 //global nav
+.wrapper.show-version-banner .nav-wrapper {
+  padding-top: calc(#{$page-header-height} + #{$version-banner-height});
+}
+
 .nav-wrapper {
   display: flex;
   flex-direction: column;
   position: fixed;
-  padding-top: 56px;
+  padding-top: $page-header-height;
   max-width: 220px;
   width: 50px;
   height: 100vh;
@@ -895,6 +904,7 @@ a.global-nav-link {
   background: $main-background-color;
   position: fixed;
   width: 100%;
+  height: $page-header-height;
   padding: 6px 24px;
   border-bottom: 1px solid $border-color;
   text-align: left;
@@ -1231,7 +1241,7 @@ a.global-nav-link {
     z-index: 1000;
     position: fixed;
     width: 100%;
-    height: 57px;
+    height: $page-header-height;
     padding: 4px 24px;
     text-align: left;
     display: flex;
@@ -1791,3 +1801,12 @@ li {
 // scss-lint:enable ImportantRule
 
 //end of in-page styles
+
+.version-banner {
+  z-index: 5;
+  line-height: 2;
+  top: $page-header-height;
+  height: $version-banner-height;
+  background: $gds-gray-50;
+  border-bottom: 1px solid $gds-gray-200;
+}
diff --git a/content/frontend/bundles/default.js b/content/frontend/bundles/default.js
index 878f513e..fa5e6e50 100644
--- a/content/frontend/bundles/default.js
+++ b/content/frontend/bundles/default.js
@@ -1,9 +1,26 @@
 import Vue from 'vue';
 import NavigationToggle from '../components/navigation_toggle/navigation_toggle.vue';
+import VersionBanner from '../components/version_banner/version_banner.vue';
 
 document.addEventListener(
   'DOMContentLoaded',
   () => {
+    const versionBanner = document.querySelector('#js-version-banner');
+    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 }
+        });
+      },
+    });
+
     new Vue({
       el: '#js-nav-toggle',
       components: {
@@ -16,6 +33,6 @@ document.addEventListener(
           }
         });
       },
-    })
+    });
   }
 );
diff --git a/content/frontend/components/version_banner/version_banner.vue b/content/frontend/components/version_banner/version_banner.vue
new file mode 100644
index 00000000..97edd59c
--- /dev/null
+++ b/content/frontend/components/version_banner/version_banner.vue
@@ -0,0 +1,24 @@
+<script>
+export default {
+  props: {
+    isOutdated: {
+      type: Boolean,
+      required: true,
+    },
+    latestVersionUrl: {
+      type: String,
+      required: true,
+    },
+    archivesUrl: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="isOutdated" class="version-banner position-fixed w-100 text-center">
+    This is <a :href="archivesUrl">archived documentation</a> for GitLab. Go to <a :href="latestVersionUrl">the latest</a>.
+  </div>
+</template>
diff --git a/layouts/default.html b/layouts/default.html
index ce379cc1..f76195a1 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -7,7 +7,9 @@
 <body itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90">
   <%= render '/gtm.*' %>
   <%= render '/header.*' %>
-  <div class="wrapper">
+  <div id="js-version-banner" <%= 'data-is-outdated' if show_version_banner? %> data-latest-version-url="<%= @item.identifier.without_ext + '.html' %>" data-archives-url="/archives/"></div>
+
+  <div class="wrapper <%= 'show-version-banner' if show_version_banner? %>">
     <div class="nav-wrapper active">
       <aside id="global-nav" class="global-nav">
       <% if ENV['CI_PROJECT_NAME'] == 'gitlab-docs' or ENV['CI_PROJECT_NAME'].nil? %>
diff --git a/lib/helpers/versions.rb b/lib/helpers/versions.rb
index 52764735..5f5c3287 100644
--- a/lib/helpers/versions.rb
+++ b/lib/helpers/versions.rb
@@ -18,6 +18,24 @@ module Nanoc::Helpers
     end
 
     #
+    # Determines whether or not to display the version banner on the frontend.
+    #
+    # Note: We only want the banner to display on production.
+    # Production is the only environment where we serve multiple versions.
+    #
+    def show_version_banner?
+      ENV['NANOC_ENV'] == 'production' && !latest?
+    end
+
+    #
+    # Check if the current version is the latest.
+    #
+    def latest?
+      latest_version = @items['/_data/versions.yaml'][:online][0]
+      ENV['CI_COMMIT_REF_NAME'] == 'master' || ENV['CI_COMMIT_REF_NAME'] == latest_version
+    end
+
+    #
     # Check if we are on the /archives page
     #
     def archives?