Display the outdated docs banner (#1629)

ppcano · web-flow · commit 26ee96a64923 · 2024-06-25T10:35:55.000-05:00
* Always display the outdated docs banner

* Disable announcement banner
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',
     },

Original file line number	Diff line number	Diff line change
`@@ -1,17 +1,20 @@`
`1`	`1`	`.container {`
`2`	`2`	`margin-bottom: 20px;`
`3`		`- margin-top: 115px;`
	`3`	`+ //margin-top: 115px;`
	`4`	`+ margin-top: 165px;`
`4`	`5`
`5`	`6`	`@include xl-down {`
`6`	`7`	`margin-top: 160px;`
`7`	`8`	`}`
`8`	`9`
`9`	`10`	`@include lg-down {`
	`11`	`+ margin-top: 205px;`
`10`	`12`	`margin-bottom: 20px;`
`11`	`13`	`}`
`12`	`14`
`13`	`15`	`@include sm-down {`
`14`		`- margin-top: 230px;`
	`16`	`+ //margin-top: 230px;`
	`17`	`+ margin-top: 240px;`
`15`	`18`	`}`
`16`	`19`
`17`	`20`	`&.wide {`
Original file line number	Diff line number	Diff line change
`@@ -77,6 +77,7 @@ const DocPage = (props) => {`
`77`	`77`	`pageVersions={pageVersions}`
`78`	`78`	`path={path}`
`79`	`79`	`sectionName={sectionName}`
	`80`	`+ canonicalUrl={frontmatter.canonicalUrl}`
`80`	`81`	`>`
`81`	`82`	`<div`
`82`	`83`	`className={classNames(`
Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,7 @@ const BundleBuilderPage = ({ pageContext: { sidebarTree, navLinks } }) => {`
`59`	`59`	`sidebarTree={sidebarTree}`
`60`	`60`	`navLinks={navLinks}`
`61`	`61`	`sectionName="Extensions"`
	`62`	`+ canonicalUrl={SeoMetaData['bundle-builder'].data.canonicalUrl}`
`62`	`63`	`>`
`63`	`64`	`<ExtensionsTitleGroup`
`64`	`65`	`title={'Bundle'}`
Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,7 @@ const Cloud = ({ pageContext: { sidebarTree, navLinks } }) => {`
`33`	`33`	`sidebarTree={sidebarTree}`
`34`	`34`	`navLinks={navLinks}`
`35`	`35`	`sectionName="Cloud"`
	`36`	`+ canonicalUrl={SeoMetaData.cloud.data.canonicalUrl}`
`36`	`37`	`>`
`37`	`38`	`<PageInfo title={'k6 Cloud documentation'} />`
`38`	`39`	<div className={`${docPageContent.inner}`}>
Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,7 @@ const Examples = ({ pageContext: { sidebarTree, navLinks } }) => {`
`46`	`46`	`sidebarTree={sidebarTree}`
`47`	`47`	`navLinks={navLinks}`
`48`	`48`	`sectionName="Examples"`
	`49`	`+ canonicalUrl={SeoMetaData.examples.data.canonicalUrl}`
`49`	`50`	`>`
`50`	`51`	`<PageInfo`
`51`	`52`	`title={'Examples & Tutorials'}`