Add robots option to frontmatter and edit the markdown of the "category" guides (#1203)

* Create category page to detect the error

* feat: add robots to guides frontmatter and upd guides category props

* Update Test Types index page

* Create `Testing Guides` index page

* fix: generation guides pages props

* feat: extends guides category props and update style

* Rewrite test types

* fix: pass frontmatter robots to guides template

---------

Co-authored-by: Raman Yasel <[email protected]>

Author: ppcano

gatsby-node.js

@@ -311,6 +311,7 @@ const getExtensionsPageSidebar = (sidebarTree) => {
 };
 
 function getSupplementaryPagesProps({
+  nodesGuides,
   reporter,
   topLevelNames,
   getSidebar,
@@ -378,6 +379,13 @@ function getSupplementaryPagesProps({
 
   const stubGuidesPagesProps = SUPPORTED_LOCALES.flatMap((locale) =>
     childrenToList(getGuidesSidebar(locale).children).map(({ name, meta }) => {
+      const remarkNode = nodesGuides.find(
+        (node) =>
+          node.name.toLowerCase().includes(meta.title.toLowerCase()) &&
+          node.relativeDirectory === 'markdown/translated-guides/en',
+      );
+      let extendedRemarkNode = null;
+
       const path = `${locale}/${meta.title}`;
       const breadcrumbs = compose(
         buildBreadcrumbs,
@@ -398,6 +406,20 @@ function getSupplementaryPagesProps({
         }
       });
 
+      if (remarkNode) {
+        const { relativeDirectory } = remarkNode;
+
+        extendedRemarkNode = {
+          ...remarkNode.children[0],
+          frontmatter: {
+            ...remarkNode.children[0].frontmatter,
+            fileOrigin: encodeURI(
+              `https://github.com/grafana/k6-docs/blob/main/src/data/${relativeDirectory}/${name}.md`,
+            ),
+          },
+        };
+      }
+
       return {
         path: compose(
           removeEnPrefix,
@@ -414,6 +436,7 @@ function getSupplementaryPagesProps({
           ),
           title: meta.title,
           navLinks: topLevelLinks,
+          remarkNode: extendedRemarkNode,
           directChildren: getGuidesSidebar(locale).children[name].children,
           locale,
           translations: pageTranslations,
@@ -1036,7 +1059,7 @@ async function fetchGuidesPagesData(graphql) {
                   slug
                   head_title
                   excerpt
-
+                  robots
                   redirect
                   redirectTarget
                   hideFromSidebar
@@ -1153,6 +1176,7 @@ async function createDocPages({
         pathCollisionDetectorInstance,
       }),
       getSupplementaryPagesProps({
+        nodesGuides,
         topLevelNames,
         getSidebar,
         getGuidesSidebar,

src/components/shared/seo/seo.view.js

@@ -14,7 +14,7 @@ const getPageHref = (host, slug) => {
 };
 
 export const SEO = ({
-  data: { title, description, image, slug, canonicalUrl } = {},
+  data: { title, description, image, slug, canonicalUrl, robots } = {},
   facebook,
   pageTranslations = null,
   pageVersions = null,
@@ -81,6 +81,10 @@ export const SEO = ({
     }
   }, []);
 
+  if (robots) {
+    currentRobotsContent.current = robots;
+  }
+
   if (pageTranslations) {
     if (pageTranslations.es) {
       let esPathname = pageTranslations.es.path;

src/data/markdown/translated-guides/en/06 Test Types.md

@@ -0,0 +1,7 @@
+---
+title: 'Test types'
+excerpt: 'A series of conceptual articles explaining the different types of load tests. Learn about planning, running, and interpreting different tests for different performance goals.'
+robots: NOINDEX, FOLLOW
+---
+
+A series of articles explaining the different [load test types](/test-types/load-test-types/).

src/data/markdown/translated-guides/en/07 Testing Guides.md

@@ -0,0 +1,12 @@
+---
+title: 'Testing guides'
+excerpt: 'A series of guides to help you defining your load testing strategies.'
+---
+
+
+This section provides a list of frequently-asked guides to help you set your testing strategy for common cases:
+
+- [API load testing](/testing-guides/api-load-testing/)
+- [Automated performance testing](/testing-guides/automated-performance-testing/)
+- [Load testing websites](/testing-guides/load-testing-websites/)
+- [Running large tests](/testing-guides/running-large-tests/)

src/layouts/doc-layout/doc-layout.module.scss

@@ -163,6 +163,16 @@ h2.sidebar-section-title {
   }
 }
 
+.sidebarSectionInvisibleLink {
+  @extend .sidebar-section-title-link;
+  cursor: default;
+  color: #9c97b5;
+  &:hover {
+    color: #9c97b5;
+    border-color: transparent;
+  }
+}
+
 .sidebar-node {
   position: relative;
 }

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

@@ -340,7 +340,11 @@ export const DocLayout = ({
                       tag={'h2'}
                     >
                       <Link
-                        className={styles.sidebarSectionTitleLink}
+                        className={
+                          sectionName === 'Guides'
+                            ? styles.sidebarSectionInvisibleLink
+                            : styles.sidebarSectionTitleLink
+                        }
                         to={sectionNode.meta.path}
                       >
                         {sectionNode.meta.title || sectionNode.name}

src/templates/doc-page.js

@@ -121,6 +121,7 @@ export const Head = ({
       description: frontmatter.excerpt,
       slug: frontmatter.slug ? frontmatter.slug : location.pathname.slice(1),
       canonicalUrl: frontmatter.canonicalUrl,
+      robots: frontmatter.robots,
     },
   };
 

src/templates/docs/breadcrumb-stub.js

@@ -1,6 +1,9 @@
+import { DocPageTitleGroup } from 'components/pages/doc-page/doc-page-title-group';
+import { styles as codeStyles } from 'components/shared/code';
 import { Heading } from 'components/shared/heading';
 import { SEO } from 'components/shared/seo';
 import { Breadcrumbs } from 'components/templates/doc-page/breadcrumbs';
+import { DocPageContent } from 'components/templates/doc-page/doc-page-content';
 import styles from 'components/templates/doc-page/doc-page.module.scss';
 import LocaleProvider from 'contexts/locale-provider';
 import { Link } from 'gatsby';
@@ -17,6 +20,7 @@ const BreadcrumbsStubPage = (props) => {
       breadcrumbs,
       navLinks,
       title,
+      remarkNode,
       directChildren,
       locale,
       translations = null,
@@ -40,34 +44,53 @@ const BreadcrumbsStubPage = (props) => {
       >
         <div className={`${styles.container}`}>
           <Breadcrumbs items={breadcrumbs} label={styles.breadcrumbsStub} />
-          <Heading className={styles.title}>{title}</Heading>
-          <ul className={styles.sectionList}>
-            {childrenToList(directChildren).map(
-              ({ meta, name }, i) =>
-                !meta.hideFromSidebar && (
-                  <li key={`bcl-${i}`}>
-                    {meta.redirect ? (
-                      <a
-                        href={meta.redirect}
-                        className={'link'}
-                        target={
-                          meta.redirectTarget ? meta.redirectTarget : '_self'
-                        }
-                      >
-                        {meta.title ? meta.title : name}
-                      </a>
-                    ) : (
-                      <Link
-                        to={`${meta.path || slugify(`/${name}`)}`}
-                        className={'link'}
-                      >
-                        {meta.title ? meta.title : name}
-                      </Link>
-                    )}
-                  </li>
-                ),
-            )}
-          </ul>
+          {remarkNode ? (
+            <>
+              <DocPageTitleGroup
+                title={remarkNode.frontmatter.title}
+                articleSrc={remarkNode.frontmatter.fileOrigin}
+                heading={remarkNode.frontmatter.heading}
+              />
+              <DocPageContent
+                label={codeStyles.codeContainer}
+                content={remarkNode.body}
+                version={version}
+              />
+            </>
+          ) : (
+            <>
+              <Heading className={styles.title}>{title}</Heading>
+              <ul className={styles.sectionList}>
+                {childrenToList(directChildren).map(
+                  ({ meta, name }, i) =>
+                    !meta.hideFromSidebar && (
+                      <li key={`bcl-${i}`}>
+                        {meta.redirect ? (
+                          <a
+                            href={meta.redirect}
+                            className={'link'}
+                            target={
+                              meta.redirectTarget
+                                ? meta.redirectTarget
+                                : '_self'
+                            }
+                          >
+                            {meta.title ? meta.title : name}
+                          </a>
+                        ) : (
+                          <Link
+                            to={`${meta.path || slugify(`/${name}`)}`}
+                            className={'link'}
+                          >
+                            {meta.title ? meta.title : name}
+                          </Link>
+                        )}
+                      </li>
+                    ),
+                )}
+              </ul>
+            </>
+          )}
         </div>
       </DocLayout>
     </LocaleProvider>
@@ -76,11 +99,12 @@ const BreadcrumbsStubPage = (props) => {
 
 export default BreadcrumbsStubPage;
 
-export const Head = ({ pageContext: { title, version } }) => {
+export const Head = ({ pageContext: { title, version, remarkNode } }) => {
   const pageMetaData = {
     data: {
       title,
       description: ' ',
+      robots: remarkNode?.frontmatter.robots,
     },
   };