fix: Resolves broken links. (#4869)

* fix: Resolves broken links.

* Update packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/bullseye.md

* Update packages/site/src/content/get-started/release-highlights.mdx

* Undo mdx file changes

* Fixes more links and reverts previous landing page directory for now

* Remove unnecessary code change cursor made

* A few final fixes

* Fix training docs

Author: edonehoo

packages/documentation-framework/components/sectionGallery/sectionGalleryWrapper.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useLocation } from '@reach/router';
 import { groupedRoutes } from '../../routes';
 
 export const SectionGalleryWrapper = ({
@@ -13,8 +14,16 @@ export const SectionGalleryWrapper = ({
   children,
 }) => {
   let sectionRoutes = subsection
-    ? groupedRoutes[section][subsection]
+    ? groupedRoutes[section]?.[subsection]
     : groupedRoutes[section];
+  // Safety check: if sectionRoutes is undefined/null, return empty array to prevent errors
+  if (!sectionRoutes) {
+    return (
+      <div className={`ws-section-gallery${isFullWidth ? ' ws-section-gallery-full-width' : ''}`}>
+        {children([], '', () => {}, initialLayout, () => {})}
+      </div>
+    );
+  }
   if (!includeSubsections || parseSubsections) {
     const sectionRoutesArr = Object.entries(sectionRoutes);
     // loop through galleryItems object and build new object to handle subsections
@@ -40,6 +49,7 @@ export const SectionGalleryWrapper = ({
     }, {});
   }
 
+  const location = useLocation();
   const [searchTerm, setSearchTerm] = React.useState('');
   const [layoutView, setLayoutView] = React.useState(initialLayout);
   const filteredItems = Object.entries(sectionRoutes).filter(

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

@@ -73,31 +73,31 @@ const Page404 = () => {
         <Card404
           img={PatternFlyIcon}
           alt="PatternFly icon"
-          title="Getting started"
-          body="Learn about designing and developing with PatternFly."
+          title="About us"
+          body="Learn about the PatternFly design system."
           link={{
-            text: 'View getting started resources',
+            text: 'Learn about PatternFly',
             to: '/about-us',
           }}
         />
         <Card404
           img={GuidelinesIcon}
           alt="Guidelines icon"
-          title="Guidelines"
-          body="Check out PatternFly's design approach to icons, colors, and more."
+          title="Foundations and styles"
+          body="Check out our approach to foundational elements and styles, like icons, colors, and more."
           link={{
-            text: 'View guidelines',
-            to: '/design-foundations/colors',
+            text: 'View foundations and styles',
+            to: '/foundations-and-styles/overview',
           }}
         />
         <Card404
           img={ComponentsIcon}
           alt="Components icon"
           title="Components"
-          body="Start creating your applications with components -- the building blocks of user interfaces."
+          body="Start creating your applications with components, our UI building blocks."
           link={{
-            text: 'View components',
-            to: '/components/about-modal',
+            text: 'View all components',
+            to: '/components/all-components',
           }}
         />
         <Card404
@@ -107,7 +107,7 @@ const Page404 = () => {
           body="Visualize your facts and figures by designing the right charts for your data."
           link={{
             text: 'View charts',
-            to: '/charts/about-charts',
+            to: '/components/charts/overview',
           }}
         />
       </Grid>

packages/documentation-framework/routes.js

@@ -154,7 +154,7 @@ function getAsyncComponent(url) {
   if (allRoutes[url]) {
     res = allRoutes[url].Component;
   }
-  else if (routes[url]) {
+  else if (routes[url] && routes[url].sources && routes[url].sources.length > 0) {
     res = routes[url].sources[0].Component;
   }
 

packages/documentation-framework/templates/mdx.js

@@ -96,7 +96,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
             </React.Fragment>
           )}{' '}
           To learn more about deprecated components, visit{' '}
-          <Link to="/get-started/about-patternfly#deprecated-components">about PatternFly.</Link>
+          <Link to="/about-us#deprecated-components">about PatternFly.</Link>
         </InlineAlert>
       )}
       {(template || source === 'react-template') && (

packages/documentation-site/patternfly-docs/content/AI/Compass/Compass.md

@@ -47,8 +47,8 @@ To facilitate building a compass layout, there are several useful variants and p
 - `isNav` on [Tabs](/components/tabs#tabs-used-for-site-navigation). This flag enables a new styling of `Tabs` to be used as a top site navigation.
 - `isCircle` on [Button](/components/button#circle-buttons) and [MenuToggle](/components/menus/menu-toggle#plain-circle-toggle). This flag sets a border radius on the `Button` and `MenuToggle`, allowing buttons and plain icon menu toggles to be circular and typical menu toggles to be a pill shape.
 - `isPill` on [Drawer](/components/drawer#pill). This flag sets a border radius and inset on the `Drawer`, giving it a more floating look.
-- `isThinking` or `pf-v6-m-thinking` on `CompassPanel` and [MessageBar](/AI/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pulsing color animation around the component.
-- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/AI/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to enable a gradient border around the component.
+- `isThinking` or `pf-v6-m-thinking` on `CompassPanel` and [MessageBar](/extensions/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pulsing color animation around the component.
+- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/extensions/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to enable a gradient border around the component.
 
 ### Card and data view layout
 

packages/documentation-site/patternfly-docs/content/AI/about-generative-ui.md

@@ -25,10 +25,10 @@ We are creating an [AI-enabled seed app](https://github.com/patternfly/patternfl
 ### What does Compass include?
 
 To explore Compass and its features, take a look at a number of our full page demos:
-- [Full page demo with card view and table layouts](/patternfly-ai/generative-uis/compass#card-and-data-view-layout)
-- [Full page demo with dashboard layout](/patternfly-ai/generative-uis/compass/org-demos#dashboard-layout)
-- [Static, full page HTML demo with multiple content sections](/patternfly-ai/generative-uis/compass/html-demos#multiple-sections)
-- [Static, full page HTML demo with drawer](/patternfly-ai/generative-uis/compass/html-demos#with-drawer)
+- [Full page demo with card view and table layouts](/ai/generative-uis/compass#card-and-data-view-layout)
+- [Full page demo with dashboard layout](/ai/generative-uis/compass/org-demos#dashboard-layout)
+- [Static, full page HTML demo with multiple content sections](/ai/generative-uis/compass/html-demos#multiple-sections)
+- [Static, full page HTML demo with drawer](/ai/generative-uis/compass/html-demos#with-drawer)
 
 To support the different ways you might use Compass, we've introduced several new capabilities to PatternFly:
 
@@ -37,7 +37,7 @@ To support the different ways you might use Compass, we've introduced several ne
   - Background and border gradients
   - Additional smooth animations
   - Background image explorations
-- [**Compass layout component**](/components/compass): A new layout component designed specifically for generative UI patterns
+- [**Compass layout component**](/ai/generative-uis/compass): A new layout component designed specifically for generative UI patterns
 - **Additional components and component variants**:
   - Transparency & Effects:
     - `isPlain` makes cards, data lists, and tables transparent to allow background effects (like a glass look) to show through.
@@ -57,7 +57,7 @@ Accessibility has been a major focus throughout the Compass exploration. As gene
 
 ### Integration with react-flow
 
-Some stakeholdres have been experimenting with Generative UI use cases using React Flow. The React Flow package `@xyflow/react` is compatible with PatternFly through customization of its [theme](https://reactflow.dev/learn/customization/theming) and [rendered nodes](https://reactflow.dev/learn/customization/custom-nodes). A custom override stylesheet can assign PatternFly's global tokens to React Flow's own tokens to ensure a consistent styling. We have created some [documentation and a demo](/patternfly-ai/generative-uis/react-flow) for integrations with PatternFly as a POC for these use cases.
+Some stakeholdres have been experimenting with Generative UI use cases using React Flow. The React Flow package `@xyflow/react` is compatible with PatternFly through customization of its [theme](https://reactflow.dev/learn/customization/theming) and [rendered nodes](https://reactflow.dev/learn/customization/custom-nodes). A custom override stylesheet can assign PatternFly's global tokens to React Flow's own tokens to ensure a consistent styling. We have created some [documentation and a demo](/ai/generative-uis/react-flow) for integrations with PatternFly as a POC for these use cases.
 
 ### Current status
 

packages/documentation-site/patternfly-docs/content/AI/conversation-design/conversation-design.md

@@ -13,7 +13,7 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 
 Good conversation design combines content strategy, writing, and design to ensure that the development and use of chatbots is centered on real user needs. This includes making sure that all text related to the conversational UI supports easy engagement with chatbots, while staying aligned with brand standards.
 
-When designing AI conversations alongside PatternFly-based projects, it is important to align with our established [brand voice and tone](/content-design/brand-voice-and-tone), as well as our [ethical guidelines for AI.](/AI/ai-guidelines)
+When designing AI conversations alongside PatternFly-based projects, it is important to align with our established [brand voice and tone](/content-design/brand-voice-and-tone), as well as our [ethical guidelines for AI.](/ai/overview)
 
 ## Best practices 
 
@@ -29,11 +29,11 @@ Following these best practices to help ensure that your users can complete their
 
 When chatbots are designed to meet the needs of your users, they can improve the overall UX of your product. They are convenient, efficient, and persistent. 
 
-[Our chatbot extension](/AI/chatbot/about-chatbot) utilizes PatternFly components to create a foundation for an AI-based chatbot, with additional customization options.
+[Our chatbot extension](/extensions/chatbot/overview) utilizes PatternFly components to create a foundation for an AI-based chatbot, with additional customization options.
 
 <Flex>
 <FlexItem>
-<Button component="a" href="/AI/chatbot/about-chatbot" target="_blank" variant="primary" size="lg">Use the chatbot extension <ArrowRightIcon /></Button>
+<Button component="a" href="/extensions/chatbot/overview" target="_blank" variant="primary" size="lg">Use the chatbot extension <ArrowRightIcon /></Button>
 </FlexItem>
 </Flex>
 

packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/enhancing-existing-projects.md

@@ -9,9 +9,9 @@ sortValue: 2
 
 This guide provides instructions for integrating AI-assisted PatternFly development tools into your existing codebase.
 
-Before you get started, review [best practices for AI-assisted prototyping](/AI/rapid-prototyping/rapid-prototyping#best-practices-for-ai-assisted-prototyping) and learn about [vibe coding principles](/AI/rapid-prototyping/rapid-prototyping#what-is-vibe-coding) for effective AI-assisted development.
+Before you get started, review [best practices for AI-assisted prototyping](/ai/rapid-prototyping/#best-practices-for-ai-assisted-prototyping) and learn about [vibe coding principles](/ai/rapid-prototyping/#what-is-vibe-coding) for effective AI-assisted development.
 
-If you need to start a new project, follow our guidelines for [starting a new prototype](/AI/rapid-prototyping/new-prototypes).
+If you need to start a new project, follow our guidelines for [starting a new prototype](/ai/rapid-prototyping/new-prototypes).
 
 ## Why enhance existing projects?
 

packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/migrating-to-patternfly.md

@@ -56,7 +56,7 @@ For example, you could use AI to migrate a simple Angular feature like this tabl
 
 ![Before migration - Angular Products page](./img/products-before.png)
 
-During the development phase, you could take a couple of different approaches to migrate code. You might be able to simply change the code within the same file or you might want to start fresh, using the patternfly-react-seed and following [our rapid prototyping guide.](https://www.patternfly.org/AI/rapid-prototyping/new-prototypes)
+During the development phase, you could take a couple of different approaches to migrate code. You might be able to simply change the code within the same file or you might want to start fresh, using the patternfly-react-seed and following [our rapid prototyping guide.](https://www.patternfly.org/ai/rapid-prototyping/new-prototypes)
 
 In this example, we created a placeholder page (PF6placeholder.js) and asked AI to replicate the Angular component on the new page, using PatternFly. 
 

packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/new-prototypes.md

@@ -9,9 +9,9 @@ sortValue: 2
 
 This guide provides instructions for setting up new PatternFly prototypes using AI-assisted development tools.
 
-Before you get started, review [best practices for AI-assisted prototyping](/AI/rapid-prototyping/rapid-prototyping#best-practices-for-ai-assisted-prototyping).
+Before you get started, review [best practices for AI-assisted prototyping](/ai/rapid-prototyping/#best-practices-for-ai-assisted-prototyping).
 
-If you need to add AI tools to existing codebases instead, follow our guidelines for [enhancing existing projects](/AI/rapid-prototyping/enhancing-existing-projects).
+If you need to add AI tools to existing codebases instead, follow our guidelines for [enhancing existing projects](/ai/rapid-prototyping/enhancing-existing-projects).
 
 ## Project setup
 
@@ -35,7 +35,7 @@ The patternfly-react-seed ai_enabled branch comes pre-configured with:
 
 Once you've installed and set up the patternfly-react-seed ai_enabled branch, with the [patternfly-ai-coding tool](https://github.com/patternfly/patternfly-ai-coding), follow these steps to begin prototyping: 
 
-1. **Define your scope**: Clearly articulate what you want to build using [vibe coding principles](/AI/rapid-prototyping/rapid-prototyping#effective-prompting-with-vibe-coding). Describe the experience, not the technical implementation.
+1. **Define your scope**: Clearly articulate what you want to build using [vibe coding principles](/ai/rapid-prototyping/#effective-prompting-with-vibe-coding). Describe the experience, not the technical implementation.
 2. **Leverage AI assistance**: Use AI tools to generate PatternFly components based on your requirements, communicating through natural language descriptions of user needs and design intent.
 3. **Iterate and refine**: Review generated code and make adjustments as needed, continuing to use vibe coding to guide refinements.
 4. **Test and validate**: Ensure your prototype meets design and functional requirements.