Display the outdated docs banner (#1629)

* Always display the outdated docs banner

* Disable announcement banner

Author: ppcano

gatsby-config.js

@@ -7,7 +7,7 @@ require('dotenv').config({
   path: `.env.${process.env.NODE_ENV}`,
 });
 
-const shouldAnnouncementBannerBeShown = true;
+const shouldAnnouncementBannerBeShown = false;
 
 const plugins = [
   'gatsby-transformer-sharp',

src/components/shared/page-info/page-info.module.scss

@@ -1,17 +1,20 @@
 .container {
   margin-bottom: 20px;
-  margin-top: 115px;
+  //margin-top: 115px;
+  margin-top: 165px;
 
   @include xl-down {
     margin-top: 160px;
   }
 
   @include lg-down {
+    margin-top: 205px;
     margin-bottom: 20px;
   }
 
   @include sm-down {
-    margin-top: 230px;
+    //margin-top: 230px;
+    margin-top: 240px;
   }
 
   &.wide {

src/components/shared/version-banner/version-banner.js

@@ -1,28 +1,18 @@
 import React from 'react';
-import { LATEST_VERSION } from 'utils/versioning';
+// import { LATEST_VERSION } from 'utils/versioning';
 
 import styles from './version-banner.module.scss';
 
-export const VersionBanner = ({ version, versions }) => (
+export const VersionBanner = ({ canonicalUrl }) => (
   <div className={styles.wrapper}>
     <div className={'container'}>
       <div className={styles.inner}>
         <span className={styles.message}>
-          ⚠️ This is the archived documentation for k6 <b>{version}</b>.
-          {typeof versions[LATEST_VERSION] !== 'undefined' && (
-            <span>
-              {' '}
-              Go to the{' '}
-              <a
-                href="https://grafana.com/docs/k6/latest/"
-                target="_blank"
-                rel="noreferrer"
-              >
-                latest version
-              </a>
-              .
-            </span>
-          )}
+          ⚠️ This documentation is outdated. Please visit grafana.com for the{' '}
+          <a href={canonicalUrl || 'https://grafana.com/docs/k6/latest/'}>
+            latest k6 documentation
+          </a>
+          .📚
         </span>
       </div>
     </div>

src/components/shared/version-banner/version-banner.module.scss

@@ -1,5 +1,6 @@
 .wrapper {
-  margin: 140px 0 -145px 0;
+  //margin: 140px 0 -145px 0;
+  margin: 100px 0 -145px 0;
 
   @include sm-down {
     display: flex;

src/components/templates/doc-page/doc-page.module.scss

@@ -1,11 +1,13 @@
 .container {
-  margin-top: 100px;
+  //margin-top: 100px;
+  margin-top: 165px;
   position: relative;
   @include xl-down {
     margin-top: 185px;
   }
   @include sm-down {
-    margin-top: 250px;
+    //margin-top: 250px;
+    margin-top: 240px;
     width: 540px;
     margin-left: auto;
     margin-right: auto;

src/layouts/doc-layout/doc-layout.view.js

@@ -252,6 +252,7 @@ export const DocLayout = ({
   sidebarTree,
   navLinks: links,
   children,
+  canonicalUrl,
   pageVersions = {},
   sectionName = null,
   path,
@@ -308,7 +309,9 @@ export const DocLayout = ({
 
     if (sidebarRef && sidebarRef.current && sidebarScrollValue) {
       setTimeout(() => {
-        sidebarRef.current.scrollTop = parseInt(sidebarScrollValue, 10);
+        if (sidebarRef && sidebarRef.current && sidebarScrollValue) {
+          sidebarRef.current.scrollTop = parseInt(sidebarScrollValue, 10);
+        }
       }, 0);
     }
   }, [sidebarRef]);
@@ -419,7 +422,11 @@ export const DocLayout = ({
             </div>
           </div>
         </Header>
-        {version && <VersionBanner version={version} versions={pageVersions} />}
+        <VersionBanner
+          canonicalUrl={canonicalUrl}
+          version={version}
+          versions={pageVersions}
+        />
 
         {children}
         <MobileNav

src/templates/doc-page.js

@@ -77,6 +77,7 @@ const DocPage = (props) => {
         pageVersions={pageVersions}
         path={path}
         sectionName={sectionName}
+        canonicalUrl={frontmatter.canonicalUrl}
       >
         <div
           className={classNames(

src/templates/docs/bundle-builder.js

@@ -59,6 +59,7 @@ const BundleBuilderPage = ({ pageContext: { sidebarTree, navLinks } }) => {
         sidebarTree={sidebarTree}
         navLinks={navLinks}
         sectionName="Extensions"
+        canonicalUrl={SeoMetaData['bundle-builder'].data.canonicalUrl}
       >
         <ExtensionsTitleGroup
           title={'Bundle'}

src/templates/docs/cloud.js

@@ -33,6 +33,7 @@ const Cloud = ({ pageContext: { sidebarTree, navLinks } }) => {
         sidebarTree={sidebarTree}
         navLinks={navLinks}
         sectionName="Cloud"
+        canonicalUrl={SeoMetaData.cloud.data.canonicalUrl}
       >
         <PageInfo title={'k6 Cloud documentation'} />
         <div className={`${docPageContent.inner}`}>

src/templates/docs/examples.js

@@ -46,6 +46,7 @@ const Examples = ({ pageContext: { sidebarTree, navLinks } }) => {
         sidebarTree={sidebarTree}
         navLinks={navLinks}
         sectionName="Examples"
+        canonicalUrl={SeoMetaData.examples.data.canonicalUrl}
       >
         <PageInfo
           title={'Examples & Tutorials'}