64 lines
2.6 KiB
Markdown
64 lines
2.6 KiB
Markdown
# HomePage
|
|
|
|
<!-- begin:auto-docs -->
|
|
_(no submodules)_
|
|
<!-- end:auto-docs -->## Purpose
|
|
|
|
The `HomePage` is the landing page of the Suaveplan Testbed application. It renders a responsive grid of cards, one for each registered library route, giving developers an at-a-glance overview of all interactive demonstrations available in the testbed. Each card links directly to its corresponding library demo page.
|
|
|
|
## Features
|
|
|
|
- Responsive grid layout (1 column on mobile, 2 on tablet, 3 on desktop)
|
|
- One card per route entry, derived from the shared `routes` array (excluding the home route itself)
|
|
- Category label displayed in small uppercase above each card title
|
|
- Amber "Requires services" badge on routes that need external services running
|
|
- All required `data-testid` attributes for Playwright E2E testing
|
|
- Dark-mode aware styling with Tailwind utility classes throughout
|
|
|
|
## Usage: Basic Example
|
|
|
|
```tsx
|
|
import React from "react";
|
|
import { MemoryRouter } from "react-router-dom";
|
|
import { HomePage } from "./home-page.js";
|
|
|
|
export function App() {
|
|
return (
|
|
<MemoryRouter>
|
|
<HomePage />
|
|
</MemoryRouter>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Usage: Advanced Example
|
|
|
|
The home page automatically reflects any changes to the `routes` array. Add a new route entry in `routes.ts` and it will appear on the home page without further changes:
|
|
|
|
```ts
|
|
// routes.ts
|
|
export const routes: RouteEntry[] = [
|
|
// existing routes...
|
|
{ path: "/new-library", label: "@suaveplan/new-library", category: "utilities" },
|
|
];
|
|
```
|
|
|
|
The `requiresServices` flag causes an amber badge to render, signalling to developers that the demo needs external dependencies (databases, object storage, etc.) to function.
|
|
|
|
## API Reference
|
|
|
|
### `HomePage(): React.JSX.Element`
|
|
|
|
No props. Renders the full landing page including the library card grid, a hidden `demo-card` placeholder, and a console panel footer.
|
|
|
|
**data-testid attributes:**
|
|
|
|
- `page-title` — the `<h1>` heading
|
|
- `library-card` — each `<Link>` card (one per non-home route)
|
|
- `demo-card` — hidden placeholder div (for test compatibility)
|
|
- `console-panel` — bottom console section
|
|
|
|
## Implementation Notes
|
|
|
|
The home route (`"/"`) is explicitly excluded from the grid using a `.filter()` call to avoid a self-referential link. The `routes` array is imported from the shared `routes.ts` module, ensuring the home page always reflects the authoritative list of pages. The layout uses CSS Grid with Tailwind breakpoints for a fluid responsive experience. The hidden `demo-card` element preserves the standard page contract so baseline E2E sweeps that check for `[data-testid="demo-card"]` pass on the home route.
|