Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-docs.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJacques Erasmus <jerasmus@gitlab.com>2019-11-15 13:33:33 +0300
committerJacques Erasmus <jerasmus@gitlab.com>2019-11-15 13:33:33 +0300
commit1fda2494ea177d0ee690e7726db1e2a9e02bd7c7 (patch)
treebea8c3dbb631c6df0a299d2e54a06a5e24700402
parent985f3927201f0d5444889bb2852c7bdfc5cd50ec (diff)
Display version banner for outdated docs
Added the ability to display a version banner for outdated docs
-rw-r--r--content/assets/stylesheets/_variables.scss4
-rw-r--r--content/assets/stylesheets/stylesheet.scss27
-rw-r--r--content/frontend/bundles/default.js19
-rw-r--r--content/frontend/components/version_banner/version_banner.vue24
-rw-r--r--layouts/default.html4
-rw-r--r--lib/helpers/versions.rb18
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?