Fix(Nav): change nav link to use the frontmatter id (#76)

Author: wise-king-sullyman

src/components/NavEntry.tsx

@@ -1,5 +1,5 @@
 import { NavItem } from '@patternfly/react-core'
-import { kebabCase } from 'change-case'
+import { kebabCase } from '../utils/case'
 
 export interface TextContentEntry {
   id: string
@@ -17,20 +17,18 @@ interface NavEntryProps {
 }
 
 export const NavEntry = ({ entry, isActive }: NavEntryProps) => {
-  const { id } = entry
+  const { id: contentLocationId } = entry
   const { id: entryTitle, section } = entry.data
 
-  const _id =
-    section === 'components' || section === 'layouts'
-      ? kebabCase(entryTitle)
-      : id
+  const kebabTitle = kebabCase(entryTitle)
+  const kebabSection = kebabCase(section)
 
   return (
     <NavItem
-      itemId={_id}
-      to={`/${section}/${_id}`}
+      itemId={contentLocationId}
+      to={`/${kebabSection}/${kebabTitle}`}
       isActive={isActive}
-      id={`nav-entry-${_id}`}
+      id={`nav-entry-${contentLocationId}`}
     >
       {entryTitle}
     </NavItem>

src/components/NavSection.tsx

@@ -1,7 +1,6 @@
 import { NavExpandable } from '@patternfly/react-core'
-import { sentenceCase } from 'change-case'
+import { sentenceCase, kebabCase } from '../utils/case'
 import { NavEntry, type TextContentEntry } from './NavEntry'
-import { kebabCase } from 'change-case'
 
 interface NavSectionProps {
   entries: TextContentEntry[]

src/components/__tests__/NavEntry.test.tsx

@@ -3,18 +3,42 @@ import { NavEntry, TextContentEntry } from '../NavEntry'
 
 const mockEntry: TextContentEntry = {
   id: 'entry1',
-  data: { id: 'Entry1', section: 'section1' },
+  data: { id: 'Entry 1 Title', section: 'section1' },
 }
 
 describe('NavEntry', () => {
   it('renders without crashing', () => {
     render(<NavEntry entry={mockEntry} isActive={false} />)
-    expect(screen.getByText('Entry1')).toBeInTheDocument()
+    expect(screen.getByText('Entry 1 Title')).toBeInTheDocument()
   })
 
-  it('renders the correct link', () => {
+  it('renders the correct link with kebab-cased title', () => {
     render(<NavEntry entry={mockEntry} isActive={false} />)
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/section1/entry1')
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      '/section1/entry-1-title',
+    )
+  })
+
+  it('properly transforms PatternFly text in URLs', () => {
+    const patternflyEntry: TextContentEntry = {
+      id: 'pf1',
+      data: { id: 'PatternFly Components', section: 'PatternFly' },
+    }
+    render(<NavEntry entry={patternflyEntry} isActive={false} />)
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      '/patternfly/patternfly-components',
+    )
+  })
+
+  it('preserves PatternFly text in display', () => {
+    const patternflyEntry: TextContentEntry = {
+      id: 'pf1',
+      data: { id: 'PatternFly Components', section: 'PatternFly' },
+    }
+    render(<NavEntry entry={patternflyEntry} isActive={false} />)
+    expect(screen.getByText('PatternFly Components')).toBeInTheDocument()
   })
 
   it('marks the entry as active if isActive is true', () => {