fix: Reorganizes and renames nav items for new design. (#4861)

* docs: Reorganizes and renames nav items for new design.

* Smoothing out issues and adding missing changes

* Fix frontmatter in tokens page

* Add original PatternFly-AI/about-generative-ui.md to resolve GitHub merge conflict

This is a temporary workaround to satisfy GitHub's conflict detection.
The file will be removed in a follow-up PR after the merge is complete.

* Update alert message

* Adds training section and removes contribute page for followup pr

* Updates link

* fix some docs

* lots of fixes plus adding screenshots

---------

Co-authored-by: nicolethoen <nthoen@redhat.com>

Author: edonehoo

package.json

@@ -36,10 +36,10 @@
   },
   "devDependencies": {
     "@octokit/rest": "^19.0.7",
-    "@patternfly/patternfly": "^6.5.0-prerelease.23",
-    "@patternfly/react-code-editor": "^6.5.0-prerelease.11",
-    "@patternfly/react-core": "^6.5.0-prerelease.11",
-    "@patternfly/react-table": "^6.5.0-prerelease.11",
+    "@patternfly/patternfly": "^6.5.0-prerelease.27",
+    "@patternfly/react-code-editor": "^6.5.0-prerelease.13",
+    "@patternfly/react-core": "^6.5.0-prerelease.13",
+    "@patternfly/react-table": "^6.5.0-prerelease.13",
     "@rspack/cli": "^1.5.6",
     "@rspack/core": "^1.5.6",
     "@rspack/dev-server": "^1.1.4",
@@ -65,8 +65,9 @@
     "ip": ">=2.0.0",
     "http-cache-semantics": ">=4.1.1",
     "nanoid": "3.3.8",
-    "@patternfly/react-code-editor": "^6.5.0-prerelease.11",
-    "@patternfly/react-core": "^6.5.0-prerelease.11",
-    "@patternfly/react-table": "^6.5.0-prerelease.11"
+    "@patternfly/react-code-editor": "^6.5.0-prerelease.13",
+    "@patternfly/react-core": "^6.5.0-prerelease.13",
+    "@patternfly/react-table": "^6.5.0-prerelease.13",
+    "monaco-editor": "0.54.0"
   }
 }

packages/documentation-framework/components/example/exampleToolbar.jsx

@@ -195,6 +195,16 @@ export const ExampleToolbar = ({
   // TODO: check if worth adding react, patternfly, and example types
   // https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.languageservicedefaults.html#addextralib
   const onEditorDidMount = (_editor, monaco) => {
+    // Configure Monaco environment for web workers (required for Monaco 0.54+)
+    if (typeof window !== 'undefined' && !window.MonacoEnvironment) {
+      window.MonacoEnvironment = {
+        getWorker() {
+          // Return empty worker since we disable all diagnostics below anyway
+          return new Worker(URL.createObjectURL(new Blob([''], { type: 'application/javascript' })));
+        }
+      };
+    }
+
     monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
       jsx: true,
       ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions()

packages/documentation-framework/components/footer/footer.js

@@ -30,68 +30,12 @@ export const Footer = ({ isDarkTheme }) => (
           <Grid className="pf-v6-u-py-xl">
             <GridItem
               sm={6}
-              md={4}
+              md={6}
               className="pf-v6-u-ml-md pf-v6-u-ml-0-on-md pf-v6-u-mb-xl pf-v6-u-mb-0-on-md"
-            >
-              <p className="ws-org-pfsite-footer-menu-list-title">What's new</p>
-              <nav aria-label="Quick Links">
-                <List isPlain className="ws-org-pfsite-footer-menu-list">
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/get-started/upgrade"
-                      aria-label="Latest PatternFly upgrade guide"
-                    >
-                      Upgrade
-                    </Link>
-                  </ListItem>
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/get-started/release-highlights/"
-                      aria-label="PatternFly release highlights"
-                    >
-                      Releases
-                    </Link>
-                  </ListItem>
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/patternfly-ai/about-ai"
-                      aria-label="PatternFly's new AI resources"
-                    >
-                      PatternFly AI
-                    </Link>
-                  </ListItem>
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/tokens/about-tokens"
-                      aria-label="PatternFly's new token system"
-                    >
-                      Tokens
-                    </Link>
-                  </ListItem>
-                </List>
-              </nav>
-            </GridItem>
-            <GridItem
-              sm={6}
-              md={4}
-              className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-sm pf-v6-u-ml-md pf-v6-u-ml-0-on-md pf-v6-u-mb-xl pf-v6-u-mb-0-on-md"
             >
               <p className="ws-org-pfsite-footer-menu-list-title">Contribute</p>
               <nav aria-label="Contribute">
                 <List isPlain className="ws-org-pfsite-footer-menu-list">
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/get-started/about-patternfly"
-                      aria-label="Learn about PatternFly"
-                    >
-                      About PatternFly
-                    </Link>
-                  </ListItem>
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
@@ -101,22 +45,13 @@ export const Footer = ({ isDarkTheme }) => (
                       Code of conduct
                     </Link>
                   </ListItem>
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/get-started/contribute"
-                      aria-label="Learn how to contribute to PatternFly"
-                    >
-                      Contribute
-                    </Link>
-                  </ListItem>
                 </List>
               </nav>
             </GridItem>
             <GridItem
               sm={6}
-              md={4}
-              className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-md pf-v6-u-ml-md pf-v6-u-ml-0-on-md"
+              md={6}
+              className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-sm pf-v6-u-ml-md pf-v6-u-ml-0-on-md"
             >
               <p className="ws-org-pfsite-footer-menu-list-title">Community</p>
               <nav aria-label="Stay in touch">
@@ -138,7 +73,7 @@ export const Footer = ({ isDarkTheme }) => (
                       target="top"
                       aria-label="Read the PatternFly blog"
                     >
-                      Blog
+                      Medium
                     </Link>
                   </ListItem>
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
@@ -167,7 +102,7 @@ export const Footer = ({ isDarkTheme }) => (
                       target="top"
                       aria-label="Visit the PatternFly discussion forum"
                     >
-                      Discussions
+                      GitHub Discussions
                     </Link>
                   </ListItem>
                 </List>

packages/documentation-framework/components/index.js

@@ -5,6 +5,7 @@ export * from './example/example';
 export * from './footer/footer';
 export * from './gdprBanner/gdprBanner';
 export * from './propsTable/propsTable';
+export * from './navAnnouncementBanner/navAnnouncementBanner';
 export * from './sideNav/sideNav';
 export * from './topNav/topNav';
 export * from './link/link';

packages/documentation-framework/components/navAnnouncementBanner/navAnnouncementBanner.css

@@ -0,0 +1,20 @@
+.ws-nav-announcement-banner-container {
+    position: fixed;
+    top: 20px;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 300;
+    display: flex;
+    justify-content: center;
+    padding: 0 var(--pf-t--global--spacer--xl);
+    pointer-events: none;
+  }
+  
+  .ws-nav-announcement-banner {
+    max-width: 85vw;
+    width: 100%;
+    box-shadow: var(--pf-t--global--box-shadow--md);
+    pointer-events: auto;
+  }
+  

packages/documentation-framework/components/navAnnouncementBanner/navAnnouncementBanner.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import './navAnnouncementBanner.css';
+
+export const NavAnnouncementBanner = () => {
+  const initialBannerOpen = typeof window !== 'undefined' && window.localStorage && !localStorage.getItem('nav-announcement-banner-closed');
+  const [ isBannerOpen, setBannerOpen ] = React.useState(initialBannerOpen);
+
+  const closeBanner = () => {
+    localStorage.setItem('nav-announcement-banner-closed', 'true');
+    setBannerOpen(false);
+  }
+
+  return !isBannerOpen ? null : (
+    <div className="ws-nav-announcement-banner-container">
+      <Alert
+        variant="info"
+        isInline
+        actionClose={<AlertActionCloseButton onClose={closeBanner} />}
+        className="ws-nav-announcement-banner"
+        title={<>We've redesigned our website's navigation menu to make it easier to find the information you need. Learn more about the changes on <a href="https://medium.com/patternfly" target="_blank" rel="noopener noreferrer">Medium</a> and share any thoughts in our <a href="https://www.feedback.redhat.com/jfe/form/SV_9MKBjq8H7muINMy" target="_blank" rel="noopener noreferrer">user feedback survey</a>.</>}
+      />
+    </div>
+  );
+}

packages/documentation-framework/components/sideNav/sideNav.js

@@ -16,8 +16,8 @@ import { css } from '@patternfly/react-styles';
 import { Location } from '@reach/router';
 
 const DIVIDER_STYLES = {
-  marginTop: 'var(--pf-t--global--spacer--md)',
-  marginBottom: 'var(--pf-t--global--spacer--md)'
+  marginTop: 'var(--pf-t--global--spacer--xs)',
+  marginBottom: 'var(--pf-t--global--spacer--xs)'
 };
 import { makeSlug } from '../../helpers';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';

packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js

@@ -27,7 +27,7 @@ import {
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
-import { SideNav, TopNav, GdprBanner, ThemeSelector } from '../../components';
+import { SideNav, TopNav, GdprBanner, NavAnnouncementBanner, ThemeSelector } from '../../components';
 import staticVersions from '../../versions.json';
 import { Footer } from '@patternfly/documentation-framework/components';
 import { useTheme, THEME_TYPES } from '../../hooks/useTheme';
@@ -363,7 +363,10 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
           {children}
           {process.env.hasFooter && <Footer isDarkTheme={isDarkTheme} />}
         </Page>
-        <div id="ws-page-banners">{hasGdprBanner && <GdprBanner />}</div>
+        <div id="ws-page-banners">
+          <NavAnnouncementBanner />
+          {hasGdprBanner && <GdprBanner />}
+        </div>
       </RtlContext.Provider>
     </React.Fragment>
   );

packages/documentation-framework/package.json

@@ -66,10 +66,10 @@
     "webpack-merge": "5.8.0"
   },
   "peerDependencies": {
-    "@patternfly/patternfly": "^6.5.0-prerelease.23",
-    "@patternfly/react-code-editor": "^6.5.0-prerelease.11",
-    "@patternfly/react-core": "^6.5.0-prerelease.11",
-    "@patternfly/react-table": "^6.5.0-prerelease.11",
+    "@patternfly/patternfly": "^6.5.0-prerelease.27",
+    "@patternfly/react-code-editor": "^6.5.0-prerelease.13",
+    "@patternfly/react-core": "^6.5.0-prerelease.13",
+    "@patternfly/react-table": "^6.5.0-prerelease.13",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },

packages/documentation-framework/pages/404/index.js

@@ -77,7 +77,7 @@ const Page404 = () => {
           body="Learn about designing and developing with PatternFly."
           link={{
             text: 'View getting started resources',
-            to: '/get-started/about-patternfly',
+            to: '/about-us',
           }}
         />
         <Card404