feat(structure): Add groundwork for routing and navigation of content

Author: wise-king-sullyman

package-lock.json

@@ -42,7 +42,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sass": "^1.81.0",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "change-case": "5.4.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.16.0",

package.json

@@ -0,0 +1,26 @@
+import { NavItem } from '@patternfly/react-core'
+
+export interface TextContentEntry {
+  id: string
+  data: {
+    id: string
+    section: string
+  }
+  collection: string
+}
+
+interface NavEntryProps {
+  entry: TextContentEntry
+  isActive: boolean
+}
+
+export const NavEntry = ({ entry, isActive }: NavEntryProps) => {
+  const { id } = entry
+  const { id: entryTitle, section } = entry.data
+
+  return (
+    <NavItem itemId={id} to={`/${section}/${id}`} isActive={isActive}>
+      {entryTitle}
+    </NavItem>
+  )
+}

public/content/typography/line-height.png

@@ -0,0 +1,37 @@
+import { NavExpandable } from '@patternfly/react-core'
+import { sentenceCase } from 'change-case'
+import { NavEntry, type TextContentEntry } from './NavEntry'
+
+interface NavSectionProps {
+  entries: TextContentEntry[]
+  sectionId: string
+  activeItem: string
+}
+
+export const NavSection = ({
+  entries,
+  sectionId,
+  activeItem,
+}: NavSectionProps) => {
+  const isExpanded = window.location.pathname.includes(sectionId)
+
+  const sortedNavEntries = entries.sort((a, b) =>
+    a.data.id.localeCompare(b.data.id),
+  )
+
+  const isActive = sortedNavEntries.some((entry) => entry.id === activeItem)
+
+  const items = sortedNavEntries.map((entry) => (
+    <NavEntry key={entry.id} entry={entry} isActive={activeItem === entry.id} />
+  ))
+
+  return (
+    <NavExpandable
+      title={sentenceCase(sectionId)}
+      isActive={isActive}
+      isExpanded={isExpanded}
+    >
+      {items}
+    </NavExpandable>
+  )
+}

src/components/NavEntry.tsx

@@ -3,7 +3,7 @@ import { getCollection } from 'astro:content'
 
 import { Navigation as ReactNav } from './Navigation.tsx'
 
-const navEntries = await getCollection('test')
+const navEntries = await getCollection('textContent')
 ---
 
-<ReactNav client:idle navEntries={navEntries} />
+<ReactNav client:only navEntries={navEntries} transition:animate="fade" />

src/components/NavSection.tsx

@@ -1,68 +1,56 @@
-import React, { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   Nav,
   NavList,
-  NavItem,
   PageSidebar,
   PageSidebarBody,
 } from '@patternfly/react-core'
 import { useStore } from '@nanostores/react'
 import { isNavOpen } from '../stores/navStore'
-
-interface NavOnSelectProps {
-  groupId: number | string
-  itemId: number | string
-  to: string
-}
-
-interface NavEntry {
-  id: string
-  data: {
-    title: string
-  }
-  collection: string
-}
+import { NavSection } from './NavSection'
+import { type TextContentEntry } from './NavEntry'
 
 interface NavigationProps {
-  navEntries: NavEntry[]
+  navEntries: TextContentEntry[]
 }
 
 export const Navigation: React.FunctionComponent<NavigationProps> = ({
   navEntries,
 }: NavigationProps) => {
+  const $isNavOpen = useStore(isNavOpen)
   const [activeItem, setActiveItem] = useState('')
 
+  useEffect(() => {
+    setActiveItem(window.location.pathname.split('/').reverse()[0])
+  }, [])
+
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
-    selectedItem: NavOnSelectProps,
+    selectedItem: { itemId: string | number },
   ) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    typeof selectedItem.itemId === 'string' &&
-      setActiveItem(selectedItem.itemId)
+    setActiveItem(selectedItem.itemId.toString())
   }
 
-  const $isNavOpen = useStore(isNavOpen)
+  const sections = new Set(navEntries.map((entry) => entry.data.section))
 
-  const sortedNavEntries = navEntries.sort((a, b) =>
-    a.data.title.localeCompare(b.data.title),
-  )
+  const navSections = Array.from(sections).map((section) => {
+    const entries = navEntries.filter((entry) => entry.data.section === section)
 
-  const navItems = sortedNavEntries.map((entry) => (
-    <NavItem
-      key={entry.id}
-      itemId={entry.id}
-      isActive={activeItem === entry.id}
-      to={`/${entry.collection}/${entry.id}`}
-    >
-      {entry.data.title}
-    </NavItem>
-  ))
+    return (
+      <NavSection
+        key={section}
+        entries={entries}
+        sectionId={section}
+        activeItem={activeItem}
+      />
+    )
+  })
 
   return (
     <PageSidebar isSidebarOpen={$isNavOpen}>
       <PageSidebarBody>
         <Nav onSelect={onNavSelect}>
-          <NavList>{navItems}</NavList>
+          <NavList>{navSections}</NavList>
         </Nav>
       </PageSidebarBody>
     </PageSidebar>

src/components/Navigation.astro

@@ -9,7 +9,7 @@ import { Content, PageSection } from '@patternfly/react-core'
   <slot name="sidebar" />
   <div class={styles.pageMainContainer}>
     <main class={styles.pageMain}>
-      <PageSection>
+      <PageSection transition:animate="none">
         <Content>
           <slot />
         </Content>

src/components/Navigation.tsx

@@ -1,11 +1,15 @@
 import { defineCollection, z } from 'astro:content'
 import { glob } from 'astro/loaders'
 
-const testCollection = defineCollection({
-  loader: glob({ pattern: '*.md', base: 'test' }),
-  schema: z.object({ title: z.string() }),
+const textContent = defineCollection({
+  loader: glob({ pattern: '*.md', base: 'textContent' }),
+  schema: z.object({
+    id: z.string(),
+    section: z.string(),
+    title: z.string().optional(),
+  }),
 })
 
 export const collections = {
-  test: testCollection,
+  textContent,
 }

src/components/Page.astro

@@ -1,13 +1,26 @@
 ---
 import '@patternfly/patternfly/patternfly.css'
+import { ClientRouter } from 'astro:transitions'
 
 import Page from '../components/Page.astro'
 import Masthead from '../components/Masthead.astro'
 import Navigation from '../components/Navigation.astro'
 ---
 
-<Page>
-  <Masthead slot="masthead" />
-  <Navigation slot="sidebar" />
-  <slot />
-</Page>
+<html lang="en" transition:animate="none">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Astro</title>
+    <ClientRouter />
+  </head>
+  <body>
+    <Page>
+      <Masthead slot="masthead" />
+      <Navigation slot="sidebar" />
+      <slot />
+    </Page>
+  </body>
+</html>