docs: add GuidePage documentation (refs #203)

- Create CLAUDE.md for GuidePage directory with architecture docs
- Create CLAUDE.md index for pages/ directory

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-02-15 17:19:45 -06:00
parent 197aeda2ef
commit b047199bc5
2 changed files with 54 additions and 0 deletions

View File

@@ -0,0 +1,34 @@
# frontend/src/pages/GuidePage/
Public-facing user guide page at `/guide`. Renders `docs/USER-GUIDE.md` content as styled React components with screenshots.
## Files
| File | What | When to read |
| ---- | ---- | ------------ |
| `GuidePage.tsx` | Main page component with layout, nav bar, and section rendering | Modifying page structure or navigation |
| `GuideTableOfContents.tsx` | Sticky sidebar TOC (desktop) / collapsible accordion TOC (mobile) | Modifying TOC behavior or styling |
| `guideTypes.ts` | Section metadata (id, title, subSections) used by TOC and anchors | Adding/renaming sections |
## Subdirectories
| Directory | What | When to read |
| --------- | ---- | ------------ |
| `components/` | Shared components (GuideScreenshot, GuideTable) | Modifying screenshot or table rendering |
| `sections/` | 10 content section components (one per guide chapter) | Updating guide content |
## Architecture
- Static JSX components (no react-markdown dependency); content changes require editing section files directly
- Each section is 150-250 lines of JSX; individual files prevent a 2000+ line monolith
- GuideScreenshot provides consistent lazy loading (`loading="lazy"`), responsive sizing, and WebP support across all sections
- GuideTable renders MUI Table from `headers[]` and `rows[][]` arrays, preventing verbose MUI Table boilerplate in each section
- The page has its own public nav bar (matching HomePage style) because it is accessible without authentication
- `/guide` route is detected in App.tsx and rendered outside the authenticated `/garage/*` shell
## Key Patterns
- Section anchor IDs must match `guideTypes.ts` section IDs for TOC smooth scroll to work
- Screenshots stored in `frontend/public/guide/` as static assets with `loading="lazy"`
- TOC uses `window.innerWidth < 768` breakpoint: sidebar on desktop, MUI Accordion on mobile
- Guide link in HamburgerDrawer uses `window.location.href` (not Zustand navigation) because `/guide` is outside the `/garage/*` shell