Display the outdated docs banner (#1629)

* Always display the outdated docs banner * Disable announcement banner
grafana · Jun 25, 2024 · 26ee96a · 26ee96a
1 parent b46c060
commit 26ee96a
Show file tree

Hide file tree

Showing 17 changed files with 40 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',
     },