diff --git a/src/components/omniSidebarNav/allGuidesQuery.js b/src/components/omniSidebarNav/allGuidesQuery.js index 463d1ceb9a..f702e0e4a3 100644 --- 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 index 7c13c796dd..e937d48125 100644 --- 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 index 01b3b149d6..6b7811091c 100644 --- 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,7 +23,8 @@ const OmniSidebarNav = ({ const submenuItems = findSubMenuItemsToUse(submenuPathToUse, OmniItems); const submenuLinks = turnItemsIntoLinks(submenuItems, activePage); return ( - @@ -35,7 +32,8 @@ const OmniSidebarNav = ({ } else if (menuItems) { const OmniLinks = turnItemsIntoLinks(menuItems, activePage); return ( - diff --git a/src/templates/certificationpage.js b/src/templates/certificationpage.js index 5ea01f6bd9..71f9e1b30b 100644 --- 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 }) => (
{children}
- ) - const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv + ); + const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv; return ( - + submenuPathToUse="/certification" + /> @@ -105,13 +106,13 @@ class CertificationTemplate extends React.Component { {hasTOC && } - + - ) + ); } } -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 index 1518243428..109b207318 100644 --- 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 }) => (
{children}
- ) - const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv + ); + const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv; return ( - + @@ -103,11 +101,11 @@ class GuideTemplate extends React.Component { {hasTOC && } - ) + ); } } -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` } } } -` +`; diff --git a/tests/playwright-tests/visuals.spec.ts b/tests/playwright-tests/visuals.spec.ts index e0fa4a3d1b..ad283f5843 100644 --- a/tests/playwright-tests/visuals.spec.ts +++ b/tests/playwright-tests/visuals.spec.ts @@ -6,43 +6,51 @@ test('home page', async ({ page }) => { await expect(page).toHaveScreenshot('homepage.png', { fullPage: true }); }); - test('Get Started - Landing Page', async ({ page }) => { await page.goto('/get-started/'); await page.getByText('Accept Cookies').click(); await expect(page).toHaveScreenshot('get-started.png', { fullPage: true }); }); - test('Release Notes - Category Listing', async ({ page }) => { await page.goto('/release-notes/1/?category=policy'); await page.getByText('Accept Cookies').click(); await page.waitForLoadState('networkidle'); - await expect(page).toHaveScreenshot('release-notes--category.png', { fullPage: true }); + await expect(page).toHaveScreenshot('release-notes--category.png', { + fullPage: true, + }); }); test('Release Notes - Single Entry', async ({ page }) => { await page.goto('/release-notes/2024/05/new-relic-agent-update-released'); await page.getByText('Accept Cookies').click(); - await expect(page).toHaveScreenshot('release-notes--single-entry.png', { fullPage: true }); + await expect(page).toHaveScreenshot('release-notes--single-entry.png', { + fullPage: true, + }); }); test('Terminus Manual - Single Page', async ({ page }) => { await page.goto('/terminus/install'); await page.getByText('Accept Cookies').click(); - await expect(page).toHaveScreenshot('terminus-install.png', { fullPage: true }); + await expect(page).toHaveScreenshot('terminus-install.png', { + fullPage: true, + }); }); test('Terminus Manual - Single Command', async ({ page }) => { await page.goto('/terminus/commands/completion'); await page.getByText('Accept Cookies').click(); - await expect(page).toHaveScreenshot('terminus-single-command.png', { fullPage: true }); + await expect(page).toHaveScreenshot('terminus-single-command.png', { + fullPage: true, + }); }); test('Certification Landing Page', async ({ page }) => { await page.goto('/certification'); await page.getByText('Accept Cookies').click(); - await expect(page).toHaveScreenshot('certification-landing-page.png', { fullPage: true }); + await expect(page).toHaveScreenshot('certification-landing-page.png', { + fullPage: true, + }); }); test('Glossary', async ({ page }) => { @@ -51,19 +59,23 @@ test('Glossary', async ({ page }) => { await expect(page).toHaveScreenshot('glossary.png', { fullPage: true }); }); - test('certification---study-guide', async ({ page }) => { await page.goto('/certification/study-guide'); await page.getByText('Accept Cookies').click(); await expect(page.locator('#toc')).toBeVisible(); - await expect(page).toHaveScreenshot('certification---study-guide.png', { fullPage: true } ); + await expect(page).toHaveScreenshot('certification---study-guide.png', { + fullPage: true, + }); }); test('certification---study-guide--webops', async ({ page }) => { await page.goto('/certification/study-guide/webops'); await page.getByText('Accept Cookies').click(); await expect(page.locator('#toc')).toBeVisible(); - await expect(page).toHaveScreenshot('certification---study-guide--webops.png', { fullPage: true }); + await expect(page).toHaveScreenshot( + 'certification---study-guide--webops.png', + { fullPage: true }, + ); }); // This page is one of the first to use the nest sidebar nav. @@ -71,7 +83,9 @@ test('wp-nextjs--create', async ({ page }) => { await page.goto('/guides/decoupled/wp-nextjs-frontend-starters/create/'); await page.getByText('Accept Cookies').click(); await expect(page.locator('#toc')).toBeVisible(); - await expect(page).toHaveScreenshot('wp-nextjs--create.png', { fullPage: true }); + await expect(page).toHaveScreenshot('wp-nextjs--create.png', { + fullPage: true, + }); }); // As the nested nav is implemented, check that the non-nested nav is still working. diff --git a/vite.config.ts b/vite.config.ts index 7b08050e61..79580748c0 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,7 +9,7 @@ export default defineConfig({ // Unknown file extension ".css" for /Users/xxxxxxxxxxx/Sites/documentation/node_modules/@pantheon-systems/pds-toolkit-react/_dist/index.css //similar to: // https://github.com/vitest-dev/vitest/issues/5283 - inline: [/@pantheon-systems\/.*/,], + inline: [/@pantheon-systems\/.*/], }, }, },