more cleanup, move tabs logic out a bit, update nav for layouts

Author: kmcfaul

src/components/NavEntry.tsx

@@ -20,7 +20,10 @@ export const NavEntry = ({ entry, isActive }: NavEntryProps) => {
   const { id } = entry
   const { id: entryTitle, section } = entry.data
 
-  const _id = section === 'components' ? kebabCase(entryTitle) : id
+  const _id =
+    section === 'components' || section === 'layouts'
+      ? kebabCase(entryTitle)
+      : id
   return (
     <NavItem
       itemId={_id}

src/components/NavSection.tsx

@@ -23,7 +23,7 @@ export const NavSection = ({
   const isActive = sortedNavEntries.some((entry) => entry.id === activeItem)
 
   let navItems = sortedNavEntries
-  if (sectionId === 'components') { 
+  if (sectionId === 'components' || sectionId === 'layouts') {
     // only display unique entry.data.id in the nav list if the section is components
     navItems = [
       ...sortedNavEntries

src/components/Navigation.astro

@@ -8,9 +8,6 @@ import { content } from "../content"
 const collections = await Promise.all(content.map(async (entry) => await getCollection(entry.name as 'textContent')))
 
 const navEntries = collections.flat();
-// filter out duplicate component entries - default to react path
-// use entry.data.id for links here instead of entry.id because of filepaths
-// note: filepaths may not be unique, may want to consider using package name as well
 ---
 
 <ReactNav client:only="react" navEntries={navEntries} transition:animate="fade" />

src/components/__tests__/NavSection.test.tsx

@@ -20,6 +20,24 @@ const mockEntries: TextContentEntry[] = [
   },
 ]
 
+const dupedEntries: TextContentEntry[] = [
+  {
+    id: 'entry1',
+    data: { id: 'Entry1', section: 'components' },
+    collection: 'react',
+  },
+  {
+    id: 'entry2',
+    data: { id: 'Entry1', section: 'components' },
+    collection: 'react',
+  },
+  {
+    id: 'entry3',
+    data: { id: 'Entry2', section: 'components' },
+    collection: 'react',
+  },
+]
+
 it('renders without crashing', () => {
   render(
     <NavSection
@@ -141,3 +159,45 @@ it('matches snapshot', () => {
   )
   expect(asFragment()).toMatchSnapshot()
 })
+
+it('dedupes and renders correct number of entries for components section', () => {
+  Object.defineProperty(window, 'location', {
+    value: {
+      pathname: '/foo/components',
+    },
+    writable: true,
+  })
+
+  render(
+    <NavSection
+      entries={dupedEntries}
+      sectionId="components"
+      activeItem="entry1"
+    />,
+  )
+
+  expect(screen.getAllByRole('listitem')).toHaveLength(3)
+  expect(screen.getByRole('link', { name: 'Entry1' })).toBeInTheDocument()
+  expect(screen.getByRole('link', { name: 'Entry2' })).toBeInTheDocument()
+})
+
+it('dedupes and renders correct number of entries for layouts section', () => {
+  Object.defineProperty(window, 'location', {
+    value: {
+      pathname: '/foo/layouts',
+    },
+    writable: true,
+  })
+
+  render(
+    <NavSection
+      entries={dupedEntries}
+      sectionId="layouts"
+      activeItem="entry1"
+    />,
+  )
+
+  expect(screen.getAllByRole('listitem')).toHaveLength(3)
+  expect(screen.getByRole('link', { name: 'Entry1' })).toBeInTheDocument()
+  expect(screen.getByRole('link', { name: 'Entry2' })).toBeInTheDocument()
+})

src/globals.ts

@@ -6,4 +6,46 @@ export const tabNames: any = {
   'react-deprecated': 'React deprecated',
   'html': 'HTML',
   'html-demos': 'HTML demos'
-};
+};
+
+export const buildTab = (entry: any, tab: string) => {
+  // if no dictionary entry exists, and tab data exists
+  if(componentTabs[entry.data.id] === undefined && tab) { 
+    componentTabs[entry.data.id] = [tab];
+  // if dictionary entry & tab data exists, and entry does not include tab
+  } else if (componentTabs[entry.data.id] && tab && !componentTabs[entry.data.id].includes(tab)) { 
+    componentTabs[entry.data.id] = [...componentTabs[entry.data.id], tab];
+  }
+}
+
+export const sortTabs = () => {
+  const defaultOrder = 50;
+  const sourceOrder: any = {
+    react: 1,
+    'react-next': 1.1,
+    'react-demos': 2,
+    'react-deprecated': 2.1,
+    html: 3,
+    'html-demos': 4,
+    'design-guidelines': 99,
+    'accessibility': 100,
+    'upgrade-guide': 101,
+    'release-notes': 102,
+  };
+  
+  const sortSources = (s1: string, s2: string) => {
+    const s1Index = sourceOrder[s1] || defaultOrder;
+    const s2Index = sourceOrder[s2] || defaultOrder;
+    if (s1Index === defaultOrder && s2Index === defaultOrder) {
+      return s1.localeCompare(s2);
+    }
+  
+    return s1Index > s2Index ? 1 : -1;
+  }
+  
+  // Sort tabs entries based on above sort order
+  // Ensures all tabs are displayed in a consistent order & which tab gets displayed for a component route without a tab 
+  Object.values(componentTabs).map((tabs: any) => {
+    tabs.sort(sortSources)
+  })
+}

src/pages/[section]/[...page].astro

@@ -34,6 +34,5 @@ if(section === 'components') { // if section is components, rewrite to first tab
       </Title>
     )
   }
-  AM I HERE?
   <Content />
 </MainLayout>

src/pages/[section]/[page]/[...tab].astro

@@ -4,66 +4,30 @@ import { Title, PageSection, Content as PFContent } from '@patternfly/react-core
 import MainLayout from '../../../layouts/Main.astro'
 import { content } from "../../../content"
 import { kebabCase } from 'change-case'
-import { componentTabs, tabNames } from '../../../globals';
+import { componentTabs, tabNames, buildTab, sortTabs } from '../../../globals';
 
 export async function getStaticPaths() {
   const collections = await Promise.all(content.map(async (entry) => await getCollection(entry.name as 'textContent')))
 
   const flatCol =  collections.flat().map((entry) => {
     // Build tabs dictionary
     let tab = entry.data.tab;
-    if(tab === 'react' || tab === 'html') { // if tab is default repo value, check for demos/deprecated
+    if(tab) { // check for demos/deprecated
       if(entry.id.includes('demos')) {
         tab = `${tab}-demos`;
       } else if (entry.id.includes('deprecated')) {
         tab = `${tab}-deprecated`;
       }
     }
-
-    // if no dictionary entry exists, and tab data exists
-    if(componentTabs[entry.data.id] === undefined && tab) { 
-      componentTabs[entry.data.id] = [tab];
-    // if dictionary entry & tab data exists, and entry does not include tab
-    } else if (componentTabs[entry.data.id] && tab && !componentTabs[entry.data.id].includes(tab)) { 
-      componentTabs[entry.data.id] = [...componentTabs[entry.data.id], tab];
-    }
+    buildTab(entry, tab);
 
     return {
       params: { page: kebabCase(entry.data.id), section: entry.data.section, tab },
-      props: { entry, title: entry.data.title, component: entry.data.id,  package: entry.data.package },
+      props: { entry, ...entry.data },
     }
   })
 
-  const defaultOrder = 50;
-  const sourceOrder: any = {
-    react: 1,
-    'react-next': 1.1,
-    'react-demos': 2,
-    'react-deprecated': 2.1,
-    html: 3,
-    'html-demos': 4,
-    'design-guidelines': 99,
-    'accessibility': 100,
-    'upgrade-guide': 101,
-    'release-notes': 102,
-  };
-
-  const sortSources = (s1: string, s2: string) => {
-    const s1Index = sourceOrder[s1] || defaultOrder;
-    const s2Index = sourceOrder[s2] || defaultOrder;
-    if (s1Index === defaultOrder && s2Index === defaultOrder) {
-      return s1.localeCompare(s2);
-    }
-
-    return s1Index > s2Index ? 1 : -1;
-  }
-
-  // Sort tabs entries based on above sort order
-  // Ensures all tabs are displayed in a consistent order & which tab gets displayed for a component route without a tab 
-  Object.values(componentTabs).map((tabs: any) => {
-    tabs.sort(sortSources)
-  })
-
+  sortTabs() 
   return flatCol;
 }