Add static path navigation configuration and scaffolding

Author: wise-king-sullyman

src/components/Masthead.astro

@@ -19,7 +19,7 @@ import { PageToggle } from "./PageToggle";
       <PageToggle client:idle/>
     </MastheadToggle>
     <MastheadBrand>
-      <MastheadLogo>
+      <MastheadLogo component="a" href="/">
         <Brand src={pfLogo} alt="PatternFly" heights={{ default: "36px" }} />
       </MastheadLogo>
     </MastheadBrand>

src/components/Navigation.astro

@@ -1,5 +1,9 @@
 ---
+import { getCollection } from "astro:content";
+
 import { Navigation as ReactNav } from "./Navigation.tsx";
+
+const navEntries = await getCollection("test");
 ---
 
-<ReactNav client:idle />
+<ReactNav client:idle navEntries={navEntries} />

src/components/Navigation.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import {
   Nav,
   NavList,
@@ -15,40 +15,50 @@ interface NavOnSelectProps {
   to: string;
 }
 
-export const Navigation: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = useState(1);
+interface NavEntry {
+  id: string;
+  slug: string;
+  data: {
+    title: string;
+  };
+  collection: string;
+}
+
+interface NavigationProps {
+  navEntries: NavEntry[];
+}
+
+export const Navigation: React.FunctionComponent<NavigationProps> = ({
+  navEntries,
+}: NavigationProps) => {
+  const [activeItem, setActiveItem] = useState("");
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
     selectedItem: NavOnSelectProps
   ) => {
-    typeof selectedItem.itemId === "number" &&
+    typeof selectedItem.itemId === "string" &&
       setActiveItem(selectedItem.itemId);
   };
 
   const $isNavOpen = useStore(isNavOpen);
 
+  const navItems = navEntries.map((entry) => (
+    <NavItem
+      key={entry.id}
+      itemId={entry.id}
+      isActive={activeItem === entry.id}
+      to={`/${entry.collection}/${entry.slug}`}
+    >
+      {entry.data.title}
+    </NavItem>
+  ));
+
   return (
     <PageSidebar isSidebarOpen={$isNavOpen}>
       <PageSidebarBody>
         <Nav onSelect={onNavSelect}>
-          <NavList>
-            <NavItem itemId={0} isActive={activeItem === 0} to="test">
-              Test
-            </NavItem>
-            <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
-              Policy
-            </NavItem>
-            <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
-              Authentication
-            </NavItem>
-            <NavItem itemId={3} isActive={activeItem === 3} to="#network">
-              Network services
-            </NavItem>
-            <NavItem itemId={4} isActive={activeItem === 4} to="#server">
-              Server
-            </NavItem>
-          </NavList>
+          <NavList>{navItems}</NavList>
         </Nav>
       </PageSidebarBody>
     </PageSidebar>

src/content/config.ts

@@ -0,0 +1,10 @@
+import { defineCollection, z } from "astro:content";
+
+const testCollection = defineCollection({
+  type: "content",
+  schema: z.object({ title: z.string() }),
+});
+
+export const collections = {
+  test: testCollection,
+};

src/content/pages/test.md

@@ -0,0 +1,18 @@
+---
+layout: '../../layouts/Main.astro'
+title: 'Test title 1' 
+---
+
+# Title 1
+
+## Section
+
+### Subsection
+
+Text content
+
+## Another section
+
+### Another subsection
+
+More text content

src/content/test/test-1.md

@@ -0,0 +1,18 @@
+---
+layout: '../../layouts/Main.astro'
+title: 'Test title 2'
+---
+
+# Title 2
+
+## Section
+
+### Subsection
+
+Text content
+
+## Another section
+
+### Another subsection
+
+More text content

src/content/test/test-2.md

@@ -1,4 +1,6 @@
 ---
+import '@patternfly/patternfly/patternfly.css';
+
 import Page from "../components/Page.astro";
 import Masthead from "../components/Masthead.astro";
 import Navigation from "../components/Navigation.astro";

src/layouts/Main.astro

@@ -0,0 +1,16 @@
+---
+import { getCollection } from "astro:content";
+
+export async function getStaticPaths() {
+  const testEntries = await getCollection("test");
+  return testEntries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+
+<Content />

src/pages/test/[...slug].astro

@@ -1 +1 @@
-@import "@patternfly/patternfly/patternfly-base.css";
+// custom global scss would go here