@patternfly/patternfly-doc-core 1.0.0

package/public/avatarImg.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F0F0F0;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D2D2D2;}
+	.st2{fill:#B8BBBE;}
+	.st3{fill:#D2D2D2;}
+</style>
+<rect class="st0" width="36" height="36"/>
+<path class="st1" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4S21.3,20.1,17.7,20.1z"/>
+<path class="st2" d="M13.3,36l0-6.7c-2,0.4-2.9,1.4-3.1,3.5L10.1,36H13.3z"/>
+<path class="st3" d="M10.1,36l0.1-3.2c0.2-2.1,1.1-3.1,3.1-3.5l0,6.7h9.4l0-6.7c2,0.4,2.9,1.4,3.1,3.5l0.1,3.2h4.7
+	c-0.4-3.9-1.3-9-2.9-11c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6s-6.1,0.7-6.1,0.7c-1.2,0.4-2.4,1.2-3.4,2.6
+	C6.7,27,5.8,32.2,5.4,36H10.1z"/>
+<path class="st2" d="M25.9,36l-0.1-3.2c-0.2-2.1-1.1-3.1-3.1-3.5l0,6.7H25.9z"/>
+</svg>

package/public/avatarImgDark.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#212427;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6A6E73;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#4F5255;}
+</style>
+<rect class="st0" width="36" height="36"/>
+<path class="st1" d="M30.5,36c-0.4-3.9-1.3-9-2.9-11c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6s-6.1,0.7-6.1,0.7
+	c-1.2,0.4-2.4,1.2-3.4,2.6C6.7,27,5.8,32.2,5.4,36H30.5z"/>
+<path class="st1" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4S21.3,20.1,17.7,20.1z"/>
+<path class="st2" d="M13.3,36l0-6.7c-2,0.4-2.9,1.4-3.1,3.5L10.1,36H13.3z"/>
+<path class="st2" d="M22.7,36l0-6.7c2,0.4,2.9,1.4,3.1,3.5l0.1,3.2H22.7z"/>
+</svg>

package/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

package/release.config.mjs

@@ -0,0 +1,16 @@
+/**
+ * @type {import('semantic-release').GlobalConfig}
+ */
+export default {
+  branches: ['main'],
+    analyzeCommits: {
+      preset: 'angular'
+    },
+    plugins: [
+      '@semantic-release/commit-analyzer',
+      '@semantic-release/release-notes-generator',
+      '@semantic-release/npm',
+      '@semantic-release/github',
+    ],
+    dryRun: false
+  };

package/src/__mocks__/styleMock.ts

@@ -0,0 +1,2 @@
+// We aren't actually using CSS modules, so we don't need to mock what `require('@patternfly/react-styles/css/whatever')` would do
+module.exports = {}

package/src/components/Breadcrumbs.astro

@@ -0,0 +1,10 @@
+---
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'
+---
+
+<Breadcrumb>
+  <BreadcrumbItem>Section home</BreadcrumbItem>
+  <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+  <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+  <BreadcrumbItem to="#" isActive> Section landing </BreadcrumbItem>
+</Breadcrumb>

package/src/components/KebabDropdownItems.astro

@@ -0,0 +1,14 @@
+---
+import { DropdownItem } from '@patternfly/react-core'
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'
+---
+
+<>
+  <DropdownItem>
+    <CogIcon /> Settings
+  </DropdownItem>
+  <DropdownItem>
+    <HelpIcon /> Help
+  </DropdownItem>
+</>

package/src/components/KebabDropdownItems.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { DropdownItem } from '@patternfly/react-core'
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'
+
+export const KebabDropdownItems: React.FunctionComponent = () => (
+  <>
+    <DropdownItem>
+      <CogIcon /> Settings
+    </DropdownItem>
+    <DropdownItem>
+      <HelpIcon /> Help
+    </DropdownItem>
+  </>
+)

package/src/components/Masthead.astro

@@ -0,0 +1,30 @@
+---
+import {
+  Brand,
+  Masthead as PFMasthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+} from '@patternfly/react-core'
+import pfLogo from '/PF-HorizontalLogo-Color.svg?url'
+import Toolbar from './Toolbar.astro'
+import { PageToggle } from './PageToggle'
+---
+
+<PFMasthead>
+  <MastheadMain>
+    <MastheadToggle>
+      <PageToggle client:idle />
+    </MastheadToggle>
+    <MastheadBrand>
+      <MastheadLogo component="a" href="/">
+        <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+      </MastheadLogo>
+    </MastheadBrand>
+  </MastheadMain>
+  <MastheadContent>
+    <Toolbar />
+  </MastheadContent>
+</PFMasthead>

package/src/components/NavEntry.tsx

@@ -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} id={`nav-entry-${id}`}>
+      {entryTitle}
+    </NavItem>
+  )
+}

package/src/components/NavSection.tsx

@@ -0,0 +1,38 @@
+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}
+      id={`nav-section-${sectionId}`}
+    >
+      {items}
+    </NavExpandable>
+  )
+}

package/src/components/Navigation.astro

@@ -0,0 +1,13 @@
+---
+import { getCollection } from 'astro:content'
+
+import { Navigation as ReactNav } from './Navigation.tsx'
+
+import { content } from "../content"
+
+const collections = await Promise.all(content.map(async (entry) => await getCollection(entry.name as 'textContent')))
+
+const navEntries = collections.flat();
+---
+
+<ReactNav client:only="react" navEntries={navEntries} transition:animate="fade" />

package/src/components/Navigation.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react'
+import {
+  Nav,
+  NavList,
+  PageSidebar,
+  PageSidebarBody,
+} from '@patternfly/react-core'
+import { useStore } from '@nanostores/react'
+import { isNavOpen } from '../stores/navStore'
+import { NavSection } from './NavSection'
+import { type TextContentEntry } from './NavEntry'
+
+interface NavigationProps {
+  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: { itemId: string | number },
+  ) => {
+    setActiveItem(selectedItem.itemId.toString())
+  }
+
+  const sections = new Set(navEntries.map((entry) => entry.data.section))
+
+  const navSections = Array.from(sections).map((section) => {
+    const entries = navEntries.filter((entry) => entry.data.section === section)
+
+    return (
+      <NavSection
+        key={section}
+        entries={entries}
+        sectionId={section}
+        activeItem={activeItem}
+      />
+    )
+  })
+
+  return (
+    <PageSidebar isSidebarOpen={$isNavOpen}>
+      <PageSidebarBody>
+        <Nav onSelect={onNavSelect}>
+          <NavList>{navSections}</NavList>
+        </Nav>
+      </PageSidebarBody>
+    </PageSidebar>
+  )
+}

package/src/components/Page.astro

@@ -0,0 +1,19 @@
+---
+import styles from '@patternfly/react-styles/css/components/Page/page'
+import { Content, PageSection } from '@patternfly/react-core'
+---
+
+<div class={styles.page}>
+  <slot name="skipToContent" />
+  <slot name="masthead" />
+  <slot name="sidebar" />
+  <div class={styles.pageMainContainer}>
+    <main class={styles.pageMain}>
+      <PageSection transition:animate="none">
+        <Content>
+          <slot />
+        </Content>
+      </PageSection>
+    </main>
+  </div>
+</div>

package/src/components/PageToggle.tsx

@@ -0,0 +1,47 @@
+import type React from 'react'
+import { PageToggleButton } from '@patternfly/react-core'
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'
+import { useStore } from '@nanostores/react'
+import { isNavOpen } from '../stores/navStore'
+import { useEffect } from 'react'
+
+export const PageToggle: React.FunctionComponent = () => {
+  const $isNavOpen = useStore(isNavOpen)
+
+  /** Applies sidebar styles to the island element astro creates as a wrapper for the sidebar.
+   * Without it the page content will not expand to fill the space left by the sidebar when it is collapsed.
+   */
+  function applySidebarStylesToIsland() {
+    const isClientSide = typeof window !== 'undefined'
+    const sideBarIsland = document.getElementById('page-sidebar')?.parentElement
+
+    if (!isClientSide || !sideBarIsland) {
+      return
+    }
+
+    if (!sideBarIsland.classList.contains('pf-v6-c-page__sidebar')) {
+      sideBarIsland.classList.add('pf-v6-c-page__sidebar', 'pf-m-expanded')
+    } else {
+      sideBarIsland.classList.toggle('pf-m-expanded')
+      sideBarIsland.classList.toggle('pf-m-collapsed')
+    }
+  }
+
+  function onToggle() {
+    isNavOpen.set(!$isNavOpen)
+  }
+
+  useEffect(() => {
+    applySidebarStylesToIsland()
+  }, [$isNavOpen])
+
+  return (
+    <PageToggleButton
+      variant="plain"
+      aria-label="Global navigation"
+      onSidebarToggle={onToggle}
+    >
+      <BarsIcon />
+    </PageToggleButton>
+  )
+}

package/src/components/Toolbar.astro

@@ -0,0 +1,5 @@
+---
+import { Toolbar as ReactToolbar } from './Toolbar.tsx'
+---
+
+<ReactToolbar client:idle />

package/src/components/Toolbar.tsx

@@ -0,0 +1,173 @@
+import * as React from 'react'
+import { useState } from 'react'
+import {
+  Avatar,
+  Button,
+  ButtonVariant,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownList,
+  MenuToggle,
+  type MenuToggleElement,
+  Toolbar as PFToolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core'
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'
+
+import imgAvatar from '/avatarImg.svg?url'
+
+import { KebabDropdownItems } from './KebabDropdownItems'
+import { UserDropdownItems } from './UserDropdownItems'
+
+export const Toolbar: React.FunctionComponent = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false)
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false)
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen)
+  }
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false)
+  }
+
+  const onKebabDropdownToggle = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen)
+  }
+
+  const onKebabDropdownSelect = () => {
+    setIsKebabDropdownOpen(false)
+  }
+
+  const onFullKebabDropdownToggle = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen)
+  }
+
+  const onFullKebabDropdownSelect = () => {
+    setIsFullKebabDropdownOpen(false)
+  }
+
+  return (
+    <PFToolbar id="toolbar" isStatic>
+      <ToolbarContent>
+        <ToolbarGroup
+          variant="action-group-plain"
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
+        >
+          <ToolbarItem>
+            <Button
+              aria-label="Notifications"
+              variant={ButtonVariant.plain}
+              icon={<BellIcon />}
+            />
+          </ToolbarItem>
+          <ToolbarGroup
+            variant="action-group-plain"
+            visibility={{ default: 'hidden', lg: 'visible' }}
+          >
+            <ToolbarItem>
+              <Button
+                aria-label="Settings"
+                variant={ButtonVariant.plain}
+                icon={<CogIcon />}
+              />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button
+                aria-label="Help"
+                variant={ButtonVariant.plain}
+                icon={<QuestionCircleIcon />}
+              />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem
+            visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}
+          >
+            <Dropdown
+              isOpen={isKebabDropdownOpen}
+              onSelect={onKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onKebabDropdownToggle}
+                  isExpanded={isKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Settings and help"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>
+                <KebabDropdownItems />
+              </DropdownList>
+            </Dropdown>
+          </ToolbarItem>
+          <ToolbarItem visibility={{ md: 'hidden' }}>
+            <Dropdown
+              isOpen={isFullKebabDropdownOpen}
+              onSelect={onFullKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) =>
+                setIsFullKebabDropdownOpen(isOpen)
+              }
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onFullKebabDropdownToggle}
+                  isExpanded={isFullKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Toolbar menu"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownGroup key="group 2" aria-label="User actions">
+                <DropdownList>
+                  <UserDropdownItems />
+                </DropdownList>
+              </DropdownGroup>
+              <Divider />
+              <DropdownList>
+                <KebabDropdownItems />
+              </DropdownList>
+            </Dropdown>
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+          <Dropdown
+            isOpen={isDropdownOpen}
+            onSelect={onDropdownSelect}
+            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+            popperProps={{ position: 'right' }}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onDropdownToggle}
+                isExpanded={isDropdownOpen}
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
+              >
+                Ned Username
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>
+              <UserDropdownItems />
+            </DropdownList>
+          </Dropdown>
+        </ToolbarItem>
+      </ToolbarContent>
+    </PFToolbar>
+  )
+}

package/src/components/UserDropdownItems.astro

@@ -0,0 +1,9 @@
+---
+import { DropdownItem } from '@patternfly/react-core'
+---
+
+<>
+  <DropdownItem key="group 2 profile">My profile</DropdownItem>
+  <DropdownItem key="group 2 user">User management</DropdownItem>
+  <DropdownItem key="group 2 logout">Logout</DropdownItem>
+</>

package/src/components/UserDropdownItems.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { DropdownItem } from '@patternfly/react-core'
+
+export const UserDropdownItems: React.FunctionComponent = () => (
+  <>
+    <DropdownItem key="group 2 profile">My profile</DropdownItem>
+    <DropdownItem key="group 2 user">User management</DropdownItem>
+    <DropdownItem key="group 2 logout">Logout</DropdownItem>
+  </>
+)

package/src/content.config.ts

@@ -0,0 +1,36 @@
+import { defineCollection, z } from 'astro:content'
+import { glob } from 'astro/loaders'
+
+import { content } from './content'
+import type { CollectionDefinition } from '../cli/getConfig'
+
+function defineContent(contentObj: CollectionDefinition) {
+  const { base, packageName, pattern, name } = contentObj
+  const dir = `${process.cwd()}/${base || `node_modules/${packageName}`}`
+
+  if (!base && !packageName) {
+    // eslint-disable-next-line no-console
+    console.error('Either a base or packageName must be defined for ', name)
+    return
+  }
+
+  return defineCollection({
+    loader: glob({ base: dir, pattern }),
+    schema: z.object({
+      id: z.string(),
+      section: z.string(),
+      title: z.string().optional(),
+    }),
+  })
+}
+
+export const collections = content.reduce(
+  (acc, contentObj) => {
+    const def = defineContent(contentObj)
+    if (def) {
+      acc[contentObj.name] = def
+    }
+    return acc
+  },
+  {} as Record<string, ReturnType<typeof defineContent>>,
+)

package/src/content.ts

@@ -0,0 +1 @@
+export const content = [{ base: 'textContent', pattern: '*.md', name: "textContent" }, { base: 'dir', pattern: '*.md', name: "dir" }]

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />

package/src/layouts/Main.astro

@@ -0,0 +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'
+---
+
+<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>

package/src/pages/[section]/[...id].astro

@@ -0,0 +1,31 @@
+---
+import { getCollection, render } from 'astro:content'
+import { Title } from '@patternfly/react-core'
+import MainLayout from '../../layouts/Main.astro'
+import { content } from "../../content"
+
+export async function getStaticPaths() {
+  const collections = await Promise.all(content.map(async (entry) => await getCollection(entry.name as 'textContent')))
+
+  return collections.flat().map((entry) => ({
+      params: { id: entry.id, section: entry.data.section },
+      props: { entry, title: entry.data.title },
+    })
+  )
+}
+
+const { entry } = Astro.props
+const { title } = entry.data
+const { Content } = await render(entry)
+---
+
+<MainLayout>
+  {
+    title && (
+      <Title headingLevel="h1" size="4xl">
+        {title}
+      </Title>
+    )
+  }
+  <Content />
+</MainLayout>