From 26ee96a64923f07b54fc9a4ed30e40e41bfe82ba Mon Sep 17 00:00:00 2001
From: Pepe Cano <825430+ppcano@users.noreply.github.com>
Date: Tue, 25 Jun 2024 17:35:55 +0200
Subject: [PATCH] Display the outdated docs banner (#1629)

* Always display the outdated docs banner

* Disable announcement banner
---
 gatsby-config.js                              |  2 +-
 .../shared/page-info/page-info.module.scss    |  7 ++++--
 .../shared/version-banner/version-banner.js   | 24 ++++++-------------
 .../version-banner/version-banner.module.scss |  3 ++-
 .../templates/doc-page/doc-page.module.scss   |  6 +++--
 src/layouts/doc-layout/doc-layout.view.js     | 11 +++++++--
 src/templates/doc-page.js                     |  1 +
 src/templates/docs/bundle-builder.js          |  1 +
 src/templates/docs/cloud.js                   |  1 +
 src/templates/docs/examples.js                |  1 +
 src/templates/docs/explore-extensions.js      |  1 +
 src/templates/docs/extensions.js              |  1 +
 src/templates/docs/guides.js                  |  1 +
 src/templates/docs/integrations.js            |  1 +
 src/templates/docs/javascript-api.js          |  1 +
 .../docs/versioned-javascript-api.js          |  1 +
 src/utils/seo-metadata.js                     |  2 ++
 17 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 4ca2f4b555..81bf1d61c9 100644
--- a/gatsby-config.js
+++ b/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',
diff --git a/src/components/shared/page-info/page-info.module.scss b/src/components/shared/page-info/page-info.module.scss
index 1068ebd5e9..f661f41202 100644
--- a/src/components/shared/page-info/page-info.module.scss
+++ b/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 {
diff --git a/src/components/shared/version-banner/version-banner.js b/src/components/shared/version-banner/version-banner.js
index acd58cfc2a..1aee1c5ab3 100644
--- a/src/components/shared/version-banner/version-banner.js
+++ b/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>
diff --git a/src/components/shared/version-banner/version-banner.module.scss b/src/components/shared/version-banner/version-banner.module.scss
index 890d0fb961..93d6d02aa8 100644
--- a/src/components/shared/version-banner/version-banner.module.scss
+++ b/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;
diff --git a/src/components/templates/doc-page/doc-page.module.scss b/src/components/templates/doc-page/doc-page.module.scss
index 1744e166c3..389614c031 100644
--- a/src/components/templates/doc-page/doc-page.module.scss
+++ b/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;
diff --git a/src/layouts/doc-layout/doc-layout.view.js b/src/layouts/doc-layout/doc-layout.view.js
index 06aeb08ee9..60e4a887ec 100644
--- a/src/layouts/doc-layout/doc-layout.view.js
+++ b/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
diff --git a/src/templates/doc-page.js b/src/templates/doc-page.js
index f7aaa5616c..027e65d7bb 100644
--- a/src/templates/doc-page.js
+++ b/src/templates/doc-page.js
@@ -77,6 +77,7 @@ const DocPage = (props) => {
         pageVersions={pageVersions}
         path={path}
         sectionName={sectionName}
+        canonicalUrl={frontmatter.canonicalUrl}
       >
         <div
           className={classNames(
diff --git a/src/templates/docs/bundle-builder.js b/src/templates/docs/bundle-builder.js
index 66205d885e..1832e06e6b 100644
--- a/src/templates/docs/bundle-builder.js
+++ b/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'}
diff --git a/src/templates/docs/cloud.js b/src/templates/docs/cloud.js
index 71f7f98392..9cae48c450 100644
--- a/src/templates/docs/cloud.js
+++ b/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}`}>
diff --git a/src/templates/docs/examples.js b/src/templates/docs/examples.js
index 226eb78542..d126f6a2dd 100644
--- a/src/templates/docs/examples.js
+++ b/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'}
diff --git a/src/templates/docs/explore-extensions.js b/src/templates/docs/explore-extensions.js
index 113cb75aeb..b6efe5087b 100644
--- a/src/templates/docs/explore-extensions.js
+++ b/src/templates/docs/explore-extensions.js
@@ -65,6 +65,7 @@ const ExploreExtensionsPage = ({
         sidebarTree={sidebarTree}
         navLinks={navLinks}
         sectionName="Extensions"
+        canonicalUrl={SeoMetaData['explore-extensions'].data.canonicalUrl}
       >
         <ExtensionsTitleGroup
           title={'Explore'}
diff --git a/src/templates/docs/extensions.js b/src/templates/docs/extensions.js
index 87665f390d..c7bed5cd01 100644
--- a/src/templates/docs/extensions.js
+++ b/src/templates/docs/extensions.js
@@ -31,6 +31,7 @@ const Extensions = ({ pageContext: { sidebarTree, navLinks } }) => {
         sidebarTree={sidebarTree}
         navLinks={navLinks}
         sectionName="Extensions"
+        canonicalUrl={SeoMetaData.extensions.data.canonicalUrl}
       >
         <PageInfo
           title={'k6 Extensions'}
diff --git a/src/templates/docs/guides.js b/src/templates/docs/guides.js
index 4dc1673842..bd41628542 100644
--- a/src/templates/docs/guides.js
+++ b/src/templates/docs/guides.js
@@ -61,6 +61,7 @@ const GuidesContent = ({
       locale={locale}
       pageTranslations={guidesTranslations}
       sectionName="Guides"
+      canonicalUrl={SeoMetaData.guides.data.canonicalUrl}
     >
       <PageInfo {...pageInfo[locale]} />
       <div className={classNames(docPageContent.inner)}>
diff --git a/src/templates/docs/integrations.js b/src/templates/docs/integrations.js
index 413679b65f..510c116433 100644
--- a/src/templates/docs/integrations.js
+++ b/src/templates/docs/integrations.js
@@ -399,6 +399,7 @@ const Integrations = ({ pageContext: { sidebarTree, navLinks } }) => {
         sidebarTree={sidebarTree}
         navLinks={navLinks}
         sectionName="Integrations"
+        canonicalUrl={SeoMetaData.integrations.data.canonicalUrl}
       >
         <PageInfo title={'Integrations & Tools'} description={''} />
         <div className={`${docPageContent.inner} `}>
diff --git a/src/templates/docs/javascript-api.js b/src/templates/docs/javascript-api.js
index d1d55119a6..e658d34821 100644
--- a/src/templates/docs/javascript-api.js
+++ b/src/templates/docs/javascript-api.js
@@ -117,6 +117,7 @@ const JavascriptAPI = ({
         path="/javascript-api/"
         pageVersions={pageVersions}
         sectionName="k6 API"
+        canonicalUrl={SeoMetaData['javascript-api'].data.canonicalUrl}
       >
         <PageInfo
           title={'k6 API'}
diff --git a/src/templates/docs/versioned-javascript-api.js b/src/templates/docs/versioned-javascript-api.js
index 3e854fe029..5c8fdcc8f1 100644
--- a/src/templates/docs/versioned-javascript-api.js
+++ b/src/templates/docs/versioned-javascript-api.js
@@ -126,6 +126,7 @@ const VersionedJavascriptAPI = ({
         path="/javascript-api/"
         pageVersions={pageVersions}
         sectionName="Javascript API"
+        canonicalUrl={SeoMetaData['javascript-api'].data.canonicalUrl}
       >
         <PageInfo
           title={'JavaScript API'}
diff --git a/src/utils/seo-metadata.js b/src/utils/seo-metadata.js
index 415f447ad6..e47edf3590 100644
--- a/src/utils/seo-metadata.js
+++ b/src/utils/seo-metadata.js
@@ -37,6 +37,7 @@ export default {
   'bundle-builder': {
     data: {
       title: 'k6 Bundle Builder',
+      canonicalUrl: 'https://grafana.com/docs/k6/latest/extensions/explore/',
       description:
         'Easily create your own bespoke k6 binary with all the extensions you want to run using the bundle builder and xk6.',
     },
@@ -69,6 +70,7 @@ export default {
     data: {
       title:
         'Documentación de k6 - Herramienta Open Source de Pruebas de Carga',
+      canonicalUrl: 'https://grafana.com/docs/k6/latest/',
       description:
         'La documentación de k6 le ayudará a ejecutar sus pruebas de rendimiento correctamente. Aprenda y comience rápidamente a efectuar sus tests de carga y rendimiento',
     },