Merge branch 'nested-cert-nav' of github.com:pantheon-systems/documen…

…tation into nested-cert-nav
pantheon-systems · Oct 11, 2024 · 51881ca · 51881ca
2 parents 3200365 + 095d692
commit 51881ca
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 130 deletions.
diff --git a/src/components/omniSidebarNav/allGuidesQuery.js b/src/components/omniSidebarNav/allGuidesQuery.js
@@ -5,33 +5,31 @@ import { useStaticQuery, graphql } from 'gatsby';
  * @returns {Object} The result of the GraphQL query containing all the guides.
  */
 const allGuides = () => {
-  const AllTheGuides = useStaticQuery(
-    graphql`
-      {
-        allGuides: allMdx(
-          filter: {
-            fileAbsolutePath: { ne: null }
-            fields: { guide_directory: { ne: null } }
-            frontmatter: { draft: { ne: true } }
-          }
-          sort: { fields: [fileAbsolutePath], order: ASC }
-        ) {
-          edges {
-            node {
-              fields {
-                slug
-                guide_directory
-              }
-              frontmatter {
-                title
-                subtitle
-              }
+  const AllTheGuides = useStaticQuery(graphql`
+    {
+      allGuides: allMdx(
+        filter: {
+          fileAbsolutePath: { ne: null }
+          fields: { guide_directory: { ne: null } }
+          frontmatter: { draft: { ne: true } }
+        }
+        sort: { fields: [fileAbsolutePath], order: ASC }
+      ) {
+        edges {
+          node {
+            fields {
+              slug
+              guide_directory
+            }
+            frontmatter {
+              title
+              subtitle
             }
           }
         }
       }
-    `,
-  );
+    }
+  `);
 
   return AllTheGuides;
 };

diff --git a/src/components/omniSidebarNav/helpers.js b/src/components/omniSidebarNav/helpers.js
@@ -1,7 +1,7 @@
 import allGuides from './allGuidesQuery';
 import React from 'react';
 import { Link } from 'gatsby';
- import { Icon } from '@pantheon-systems/pds-toolkit-react';
+import { Icon } from '@pantheon-systems/pds-toolkit-react';
 
 /**
  * Converts items into links recursively.
@@ -11,7 +11,6 @@ import { Link } from 'gatsby';
  * @returns {Object} - The converted item with link properties.
  */
 const turnItemsIntoLinks = (item, activePage) => {
-
   var linkText = item.title;
   // If the link is external, add an icon to indicate that.
   // Internal links will start with a slash.
@@ -20,8 +19,8 @@ const turnItemsIntoLinks = (item, activePage) => {
       React.Fragment,
       null,
       item.title,
-      " ",
-      React.createElement(Icon, { iconName: "externalLink", iconSize: "sm" }),
+      ' ',
+      React.createElement(Icon, { iconName: 'externalLink', iconSize: 'sm' }),
     );
   }
 

diff --git a/src/components/omniSidebarNav/index.js b/src/components/omniSidebarNav/index.js
@@ -7,11 +7,7 @@ import {
   getOmniSidebarActiveSection,
   turnItemsIntoLinks,
 } from './helpers.js';
-
-import "./style.css"
-
-
-// @todo, run prettier one more time on this directory before removing it from the PR.
+import './style.css';
 
 const OmniSidebarNav = ({
   activePage,
@@ -27,15 +23,17 @@ const OmniSidebarNav = ({
     const submenuItems = findSubMenuItemsToUse(submenuPathToUse, OmniItems);
     const submenuLinks = turnItemsIntoLinks(submenuItems, activePage);
     return (
-      <SideNavCompact className="sidenav-compact"
+      <SideNavCompact
+        className="sidenav-compact"
         headingText={submenuLinks.linkContent}
         menuItems={submenuLinks.links}
       />
     );
   } else if (menuItems) {
     const OmniLinks = turnItemsIntoLinks(menuItems, activePage);
     return (
-      <SideNavCompact className="sidenav-compact"
+      <SideNavCompact
+        className="sidenav-compact"
         headingText={OmniLinks.linkContent}
         menuItems={OmniLinks.links}
       />

diff --git a/src/templates/certificationpage.js b/src/templates/certificationpage.js
@@ -1,77 +1,78 @@
-import React from "react"
-import { graphql } from "gatsby"
-import { SidebarLayout } from "@pantheon-systems/pds-toolkit-react"
-import GuideLayout from "../layout/GuideLayout"
-import SEO from "../layout/seo"
-import SearchBar from "../layout/SearchBar"
-import HeaderBody from "../components/headerBody"
-import OmniSidebarNav from "../components/omniSidebarNav";
-import GetFeedback from "../components/getFeedback"
-import NavButtons from "../components/navButtons"
-import TOC from "../components/toc"
-import MdxWrapper from "../components/mdxWrapper"
+import React from 'react';
+import { graphql } from 'gatsby';
+import { SidebarLayout } from '@pantheon-systems/pds-toolkit-react';
+import GuideLayout from '../layout/GuideLayout';
+import SEO from '../layout/seo';
+import SearchBar from '../layout/SearchBar';
+import HeaderBody from '../components/headerBody';
+import OmniSidebarNav from '../components/omniSidebarNav';
+import GetFeedback from '../components/getFeedback';
+import NavButtons from '../components/navButtons';
+import TOC from '../components/toc';
+import MdxWrapper from '../components/mdxWrapper';
 
 class CertificationTemplate extends React.Component {
   componentDidMount() {
-    $("[data-toggle=popover]").popover({
-      trigger: "click",
-    })
+    $('[data-toggle=popover]').popover({
+      trigger: 'click',
+    });
 
-    $("body").on("click", function (e) {
+    $('body').on('click', function (e) {
       $('[data-toggle="popover"]').each(function () {
         if (
           !$(this).is(e.target) &&
           $(this).has(e.target).length === 0 &&
-          $(".popover").has(e.target).length === 0
+          $('.popover').has(e.target).length === 0
         ) {
-          $(this).popover("hide")
+          $(this).popover('hide');
         }
-      })
-    })
+      });
+    });
 
-    $("body").keyup(function (e) {
+    $('body').keyup(function (e) {
       $('[data-toggle="popover"]').each(function () {
         if (event.which === 27) {
-          $(this).popover("hide")
+          $(this).popover('hide');
         }
-      })
-    })
+      });
+    });
   }
 
   render() {
-    const node = this.props.data.mdx
-    const isoDate = this.props.data.date
+    const node = this.props.data.mdx;
+    const isoDate = this.props.data.date;
     const ifCommandsDate =
-      node.fields.slug == "/terminus/commands"
+      node.fields.slug == '/terminus/commands'
         ? this.props.data.terminusReleasesJson.published_at
-        : node.frontmatter.reviewed
+        : node.frontmatter.reviewed;
     const ifCommandsISO =
-      node.fields.slug == "/terminus/commands"
+      node.fields.slug == '/terminus/commands'
         ? this.props.data.jsonISO.published_at
-        : isoDate.frontmatter.reviewed
+        : isoDate.frontmatter.reviewed;
 
     // Preprocess content region layout if has TOC or not.
-    const hasTOC = node.frontmatter.showtoc
+    const hasTOC = node.frontmatter.showtoc;
     const ContainerDiv = ({ children }) => (
       <div className="content-wrapper">{children}</div>
-    )
-    const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv
+    );
+    const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv;
 
     return (
       <GuideLayout>
         <SEO
           slot="seo"
-          title={node.frontmatter.subtitle + " | " + node.frontmatter.title}
+          title={node.frontmatter.subtitle + ' | ' + node.frontmatter.title}
           description={node.frontmatter.description || node.excerpt}
           authors={node.frontmatter.contributors}
-          image={"/images/assets/terminus-thumbLarge.png"}
+          image={'/images/assets/terminus-thumbLarge.png'}
           reviewed={ifCommandsISO}
           type={node.frontmatter.type}
         />
-          <OmniSidebarNav
+        <OmniSidebarNav
           slot="guide-menu"
           activePage={node.fields.slug}
-          submenuPathToUse="/certification"/>
+          submenuPathToUse="/certification"
+        />
 
         <ContentLayoutType slot="guide-content">
           <SearchBar slot="content" page="default" />
@@ -105,13 +106,13 @@ class CertificationTemplate extends React.Component {
           {hasTOC && <TOC slot="sidebar" title="Contents" />}
         </ContentLayoutType>
 
-        <GetFeedback formId="tfYOGoE7" page={"/" + node.fields.slug} />
+        <GetFeedback formId="tfYOGoE7" page={'/' + node.fields.slug} />
       </GuideLayout>
-    )
+    );
   }
 }
 
-export default CertificationTemplate
+export default CertificationTemplate;
 
 export const pageQuery = graphql`
   query TerminusPageBySlug($slug: String!) {
@@ -151,4 +152,4 @@ export const pageQuery = graphql`
       published_at(formatString: "YYYY-MM-DD")
     }
   }
-`
+`;
diff --git a/src/templates/guide.js b/src/templates/guide.js
@@ -1,81 +1,79 @@
-import React from "react"
-import { graphql } from "gatsby"
-import GuideLayout from "../layout/GuideLayout"
-import SEO from "../layout/seo"
-import SearchBar from "../layout/SearchBar"
-import HeaderBody from "../components/headerBody"
-import OmniSidebarNav from "../components/omniSidebarNav";
-import { SidebarLayout } from "@pantheon-systems/pds-toolkit-react"
-import NavButtons from "../components/navButtons"
-import TOC from "../components/toc"
-import MdxWrapper from "../components/mdxWrapper"
-
-
+import React from 'react';
+import { graphql } from 'gatsby';
+import GuideLayout from '../layout/GuideLayout';
+import SEO from '../layout/seo';
+import SearchBar from '../layout/SearchBar';
+import HeaderBody from '../components/headerBody';
+import OmniSidebarNav from '../components/omniSidebarNav';
+import { SidebarLayout } from '@pantheon-systems/pds-toolkit-react';
+import NavButtons from '../components/navButtons';
+import TOC from '../components/toc';
+import MdxWrapper from '../components/mdxWrapper';
 
 class GuideTemplate extends React.Component {
   componentDidMount() {
-    $("[data-toggle=popover]").popover({
-      trigger: "click",
-    })
+    $('[data-toggle=popover]').popover({
+      trigger: 'click',
+    });
 
-    $("body").on("click", function (e) {
+    $('body').on('click', function (e) {
       $('[data-toggle="popover"]').each(function () {
         if (
           !$(this).is(e.target) &&
           $(this).has(e.target).length === 0 &&
-          $(".popover").has(e.target).length === 0
+          $('.popover').has(e.target).length === 0
         ) {
-          $(this).popover("hide")
+          $(this).popover('hide');
         }
-      })
-    })
+      });
+    });
 
-    $("body").keyup(function (e) {
+    $('body').keyup(function (e) {
       $('[data-toggle="popover"]').each(function () {
         if (event.which === 27) {
-          $(this).popover("hide")
+          $(this).popover('hide');
         }
-      })
-    })
+      });
+    });
   }
 
   render() {
-    const node = this.props.data.mdx
-    const isoDate = this.props.data.date
+    const node = this.props.data.mdx;
+    const isoDate = this.props.data.date;
     const items = this.props.data.allMdx.edges.map((item) => {
       return {
         id: item.node.id,
         link: item.node.fields.slug,
         title: item.node.frontmatter.subtitle,
-      }
-    })
+      };
+    });
 
     // Preprocess content region layout if has TOC or not.
-    const hasTOC = node.frontmatter.showtoc
+    const hasTOC = node.frontmatter.showtoc;
     const ContainerDiv = ({ children }) => (
       <div className="content-wrapper">{children}</div>
-    )
-    const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv
+    );
+    const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv;
 
     return (
       <GuideLayout>
         <SEO
           slot="seo"
-          title={node.frontmatter.subtitle + " | " + node.frontmatter.title}
+          title={node.frontmatter.subtitle + ' | ' + node.frontmatter.title}
           description={node.frontmatter.description || node.excerpt}
           keywords={node.frontmatter.tags}
           authors={node.frontmatter.contributors}
-          image={"/images/assets/terminus-thumbLarge.png"}
+          image={'/images/assets/terminus-thumbLarge.png'}
           reviewed={isoDate.frontmatter.reviewed}
           type={node.frontmatter.type}
         />
 
-          <OmniSidebarNav
-            slot="guide-menu"
-            activePage={node.fields.slug}
-            fallbackTitle={node.frontmatter.title}
-            fallbackItems={items}
-          />
+        <OmniSidebarNav
+          slot="guide-menu"
+          activePage={node.fields.slug}
+          fallbackTitle={node.frontmatter.title}
+          fallbackItems={items}
+        />
 
         <ContentLayoutType slot="guide-content">
           <SearchBar slot="content" page="default" />
@@ -103,11 +101,11 @@ class GuideTemplate extends React.Component {
           {hasTOC && <TOC slot="sidebar" title="Contents" />}
         </ContentLayoutType>
       </GuideLayout>
-    )
+    );
   }
 }
 
-export default GuideTemplate
+export default GuideTemplate;
 
 export const pageQuery = graphql`
   query GuidePageBySlug($slug: String!, $guide_directory: String!) {
@@ -167,4 +165,4 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;