Skip to content

Commit 07dd5aa

Browse files
committed
Fix and update styling for react-primer
1 parent 8f3e673 commit 07dd5aa

File tree

12 files changed

+384
-517
lines changed

12 files changed

+384
-517
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
# production
1212
/build
13+
/dist
1314

1415
# misc
1516
.DS_Store

AGENTS.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Copilot Instructions
2+
3+
## Build & Development
4+
5+
```bash
6+
npm install # Install dependencies
7+
npm run dev # Start dev server at http://localhost:1234
8+
npm run build # Production build
9+
npm run lint # Run ESLint
10+
```
11+
12+
## Architecture
13+
14+
This is a **Primer React prototyping app** using Vite and file-based routing via `@generouted/react-router`.
15+
16+
### Routing
17+
18+
Routes are auto-generated from the file structure in `src/pages/`:
19+
- `src/pages/index.jsx``/`
20+
- `src/pages/Overview.jsx``/Overview`
21+
- `src/pages/Issues.jsx``/Issues`
22+
23+
To create a new page, add a `.jsx` file to `src/pages/` and it will automatically be available at the corresponding URL path.
24+
25+
### Component Organization
26+
27+
- **`src/pages/`** - Route components (each file = one route)
28+
- **`src/components/`** - Reusable UI components (GlobalNavigation, SidebarNavigation, etc.)
29+
- **`src/templates/`** - Page layout templates (e.g., `Application` template with header + sidebar)
30+
31+
### Layout Pattern
32+
33+
Pages typically use the `Application` template which provides:
34+
- Global navigation header with customizable `topnav` items
35+
- Optional `sidenav` sidebar navigation
36+
- Main content area via `children`
37+
38+
```jsx
39+
<Application title="Primer" subtitle="React" topnav={topnav} sidenav={sidenav}>
40+
{/* Page content */}
41+
</Application>
42+
```
43+
44+
## Key Conventions
45+
46+
- Use **Primer React** components from `@primer/react` for all UI elements
47+
- Use **Primer Octicons** from `@primer/octicons-react` for icons
48+
- Use **CSS Modules** (`*.module.css`) for component-specific styles
49+
- Default theme is `night` mode with `dark_dimmed` scheme (configured in `src/index.jsx`)

0 commit comments

Comments
 (0)