fix: Resolves broken links.

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.

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

@@ -26,8 +26,8 @@ Rapid prototyping with PatternFly code offers several key benefits:
 
 Choose your path based on your current situation:
 
-- **[Starting a new prototype](/AI/rapid-prototyping/new-prototypes):** Use the [patternfly-react-seed (ai_enabled branch)](https://github.com/patternfly/patternfly-react-seed/tree/ai_enabled) application for optimal setup.
-- **[Enhancing existing projects](/AI/rapid-prototyping/enhancing-existing-projects):** Integrate AI tools into your current codebase.
+- **[Starting a new prototype](/ai/rapid-prototyping/new-prototypes):** Use the [patternfly-react-seed (ai_enabled branch)](https://github.com/patternfly/patternfly-react-seed/tree/ai_enabled) application for optimal setup.
+- **[Enhancing existing projects](/ai/rapid-prototyping/enhancing-existing-projects):** Integrate AI tools into your current codebase.
 
 ## Best practices for AI-assisted prototyping
 

packages/documentation-site/patternfly-docs/content/accessibility/accessibility-design.md

@@ -6,7 +6,7 @@ section: accessibility
 
 import { Card, CardBody, Grid, GridItem } from '@patternfly/react-core';
 
-As described in our [accessibility guidelines](/accessibility/overview), users may interact with your product through a variety of assistive technologies. In addition to [developing for accessibility](/accessibility/develop-for-accessibility), you must also incorporate it into your product's visual design. 
+As described in our [accessibility guidelines](/accessibility/overview), users may interact with your product through a variety of assistive technologies. In addition to [developing for accessibility](/accessibility/develop), you must also incorporate it into your product's visual design. 
 
 ## Color and contrast
 

packages/documentation-site/patternfly-docs/content/accessibility/accessibility-development.md

@@ -102,7 +102,7 @@ For keyboard-only users who use the tab key to navigate the interface, trapped f
 
 For screen reader users, the other contents on the page should be hidden from the screen reader.
 
-Based on the [screen reader / browser combinations](/accessibility/testing-your-accessibility) we use for testing, we recommend applying `aria-hidden="true"` to the parent wrapping element of the page contents. The modal element of the component must not be a descendent of this element, and should be included as a sibling to this element.
+Based on the [screen reader / browser combinations](/accessibility/test-your-product) we use for testing, we recommend applying `aria-hidden="true"` to the parent wrapping element of the page contents. The modal element of the component must not be a descendent of this element, and should be included as a sibling to this element.
 
 #### Scrollable elements
 

packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.md

@@ -10,7 +10,7 @@ To support the proper assessment of accessibility measures, we've created a scor
 
 Scoring your accessibility shouldn't be a one-time thing. It's something that you should do routinely to assess your product as it evolves.
 
-An accessibility scorecard offers a higher-level overview of the current state of your product's accessibility, but it is **not intended to replace a full accessibility audit**, as described by our [accessibility testing guide](/accessibility/testing-your-accessibility). An accessibility audit is a vital part of creating your accessibility scorecard. 
+An accessibility scorecard offers a higher-level overview of the current state of your product's accessibility, but it is **not intended to replace a full accessibility audit**, as described by our [accessibility testing guide](/accessibility/test-your-product). An accessibility audit is a vital part of creating your accessibility scorecard. 
 
 ## PatternFly.org accessibility scorecard
 

packages/documentation-site/patternfly-docs/content/components/accessibility/modal/modal.md

@@ -20,7 +20,7 @@ At a minimum, a modal should meet the following criteria:
 
 <List isPlain>
   <ListItem>
-    <Checkbox id="modal-a11y-checkbox-1" label="Any content that is on the page, but outside of the modal, cannot be interacted with or navigated to while the modal is open." description={<span>Learn more about trapping focus in our <Link href="/accessibility/develop-for-accessibility/#trapping-focus">accessibility development guide</Link> for accessibility.</span>} />
+    <Checkbox id="modal-a11y-checkbox-1" label="Any content that is on the page, but outside of the modal, cannot be interacted with or navigated to while the modal is open." description={<span>Learn more about trapping focus in our <Link href="/accessibility/develop/#trapping-focus">accessibility development guide</Link> for accessibility.</span>} />
   </ListItem>
   <ListItem>
     <Checkbox id="modal-a11y-checkbox-2" label="Standard keyboard navigation can be used to navigate between the contents of a modal." description={<span><kbd>Tab</kbd> navigates to the next focusable element inside a modal, and <kbd>Shift</kbd> + <kbd>Tab</kbd> navigates to the previous focusable element.</span>} />