Update top nav links (#1675)

* Update top nav links

* Add admonition to homepage

Author: heitortsergent

gatsby-node.js

@@ -176,19 +176,11 @@ const getPageVersions = (
 const topLevelLinks = [
   {
     label: 'guides',
-    to: '/',
+    to: 'https://grafana.com/docs/k6/latest/',
   },
   {
     label: 'JAVASCRIPT API',
-    to: '/javascript-api/',
-    submenu: [
-      { label: 'k6 API', to: `/javascript-api/` },
-      {
-        label: 'xk6-disruptor',
-        to: `/javascript-api/xk6-disruptor/`,
-      },
-      { label: 'jslib', to: `/javascript-api/jslib/` },
-    ],
+    to: 'https://grafana.com/docs/k6/latest/javascript-api/',
   },
   {
     label: 'Cloud Docs',
@@ -203,15 +195,15 @@ const topLevelLinks = [
   },
   {
     label: 'Extensions',
-    to: '/extensions/',
+    to: 'https://grafana.com/docs/k6/latest/extensions/',
   },
   {
     label: 'Integrations',
-    to: '/integrations/',
+    to: 'https://grafana.com/docs/k6/latest/misc/integrations/',
   },
   {
     label: 'examples',
-    to: '/examples/',
+    to: 'https://grafana.com/docs/k6/latest/examples/',
   },
 ];
 

src/components/pages/doc-welcome/outdated-blockquote/index.js

@@ -0,0 +1 @@
+export { OutdatedBlockquote } from './outdated-blockquote.view';

src/components/pages/doc-welcome/outdated-blockquote/outdated-blockquote.view.js

@@ -0,0 +1,27 @@
+import Blockquote from 'components/shared/blockquote';
+import React from 'react';
+
+export const OutdatedBlockquote = () => (
+  <div>
+    <Blockquote mod="attention">
+      <p>
+        We&apos;ve migrated the k6 documentation to Grafana!{' '}
+        <a
+          className="link"
+          href="https://k6.io/docs/javascript-api/k6-experimental/grpc/"
+        >
+          Click here
+        </a>{' '}
+        to view the latest version of the k6 documentation.
+        <br />
+        <br />
+        This page is still available for users to be able to view the{' '}
+        <a className="link" href="https://k6.io/docs/cloud/">
+          k6 Cloud documentation
+        </a>
+        , and will be removed at a later date.
+      </p>
+    </Blockquote>
+    <br />
+  </div>
+);

src/components/pages/doc-welcome/use-cases/use-cases.view.js

@@ -1,14 +1,12 @@
 import { Heading } from 'components/shared/heading';
 import { useI18n } from 'contexts/i18n-provider';
-import { useLocale } from 'contexts/locale-provider';
 import { Link } from 'gatsby';
 import React from 'react';
 
 import styles from './use-cases.module.scss';
 
 export const UseCases = () => {
   const { t } = useI18n();
-  const { urlLocale } = useLocale();
   return (
     <section className={`container ${styles.container}`}>
       <Heading tag={'h2'} size={'lg'} className={styles.title}>
@@ -26,9 +24,7 @@ export const UseCases = () => {
             <Link
               className={'link'}
               to={
-                urlLocale === 'es'
-                  ? '/test-types/spike-testing/'
-                  : '/test-types/spike-testing/'
+                'https://grafana.com/docs/k6/latest/testing-guides/test-types/spike-testing/'
               }
             >
               spike
@@ -37,9 +33,7 @@ export const UseCases = () => {
             <Link
               className={'link'}
               to={
-                urlLocale === 'es'
-                  ? '/es/tipos-de-prueba/stress-testing/'
-                  : '/test-types/stress-testing/'
+                'https://grafana.com/docs/k6/latest/testing-guides/test-types/stress-testing/'
               }
             >
               stress
@@ -48,9 +42,7 @@ export const UseCases = () => {
             <Link
               className={'link'}
               to={
-                urlLocale === 'es'
-                  ? '/es/tipos-de-prueba/soak-testing/'
-                  : '/test-types/soak-testing/'
+                'https://grafana.com/docs/k6/latest/testing-guides/test-types/soak-testing/'
               }
             >
               soak tests
@@ -65,7 +57,10 @@ export const UseCases = () => {
           </Heading>
           <p>
             {t('welcome.use-cases.browser-testing.pre-description')}
-            <Link className={'link'} to={'/using-k6-browser/overview/'}>
+            <Link
+              className={'link'}
+              to={'https://grafana.com/docs/k6/latest/using-k6-browser/'}
+            >
               k6 browser
             </Link>
             {t('welcome.use-cases.browser-testing.description')}
@@ -76,8 +71,15 @@ export const UseCases = () => {
             {t('welcome.use-cases.chaos-testing.title')}
           </Heading>
           <p>
-            {t('welcome.use-cases.chaos-testing.description')}
-            <Link className={'link'} to={'/javascript-api/xk6-disruptor/'}>
+            You can use k6 to simulate traffic as part of your chaos
+            experiments, trigger them from your k6 tests or inject different
+            types of faults in Kubernetes with{' '}
+            <Link
+              className={'link'}
+              to={
+                'https://grafana.com/docs/k6/latest/testing-guides/injecting-faults-with-xk6-disruptor/'
+              }
+            >
               xk6-disruptor
             </Link>
             .
@@ -87,7 +89,22 @@ export const UseCases = () => {
           <Heading tag={'h3'} size={'md'} className={styles.title}>
             {t('welcome.use-cases.performance-monitoring.title')}
           </Heading>
-          <p>{t('welcome.use-cases.performance-monitoring.description')}</p>
+          <p>
+            With k6, you can automate and schedule to trigger tests very
+            frequently with a small load to continuously validate the
+            performance and availability of your production environment. You can
+            also use{' '}
+            <Link
+              className={'link'}
+              to={
+                'https://grafana.com/docs/grafana-cloud/testing/synthetic-monitoring/create-checks/checks/k6/'
+              }
+            >
+              Grafana Cloud Synthetic Monitoring
+            </Link>{' '}
+            for a managed solution built specifically for synthetic monitoring
+            that supports k6 test scripts.
+          </p>
         </li>
       </ul>
     </section>

src/templates/docs/guides.js

@@ -1,13 +1,8 @@
 import classNames from 'classnames';
 import { DocPageNavigation } from 'components/pages/doc-page/doc-page-navigation';
 import TableOfContents from 'components/pages/doc-page/table-of-contents';
-import {
-  Features,
-  Manifesto,
-  Quickstart,
-  WhatIs,
-} from 'components/pages/doc-welcome';
-import { K6DoesNot } from 'components/pages/doc-welcome/k6-does-not';
+import { Features, WhatIs } from 'components/pages/doc-welcome';
+import { OutdatedBlockquote } from 'components/pages/doc-welcome/outdated-blockquote';
 import { UseCases } from 'components/pages/doc-welcome/use-cases';
 import { PageInfo } from 'components/shared/page-info';
 import { SEO } from 'components/shared/seo';
@@ -23,8 +18,7 @@ import { flattenSidebarTree } from 'utils/utils';
 const pageInfo = {
   en: {
     title: 'Welcome to the k6 documentation',
-    description:
-      'This documentation will help you go from a total beginner to a seasoned k6 expert!',
+    description: '',
   },
   es: {
     title: 'Bienvenido a la documentación de k6',
@@ -66,12 +60,10 @@ const GuidesContent = ({
       <PageInfo {...pageInfo[locale]} />
       <div className={classNames(docPageContent.inner)}>
         <div ref={contentContainerRef} className={stickyContainerClasses}>
-          <Quickstart />
+          <OutdatedBlockquote />
           <WhatIs />
           <Features />
           <UseCases />
-          <Manifesto />
-          <K6DoesNot />
         </div>
         <DocPageNavigation
           prev={null}