|
| 1 | +# AGENTS.md - OpenZeppelin Docs Codebase Guide |
| 2 | + |
| 3 | +## Build/Lint/Test Commands |
| 4 | +- `pnpm run build` - Build the Next.js application |
| 5 | +- `pnpm run dev` - Start development server with turbo |
| 6 | +- `pnpm run start` - Start production server |
| 7 | +- `pnpm run postinstall` - Process MDX files with fumadocs-mdx |
| 8 | +- `pnpm run lint` - Lint code with Biome |
| 9 | +- `pnpm run lint:fix` - Lint and auto-fix issues with Biome |
| 10 | +- `pnpm run format` - Check code formatting with Biome |
| 11 | +- `pnpm run format:fix` - Format code with Biome |
| 12 | +- `pnpm run check` - Run both linting and formatting checks |
| 13 | +- `pnpm run check:fix` - Run both linting and formatting with auto-fix |
| 14 | +- No test commands configured - this is a documentation site |
| 15 | + |
| 16 | +## Navigation Management |
| 17 | +The site uses a **modular JSON navigation system** instead of fumadocs meta.json files: |
| 18 | + |
| 19 | +### Navigation Structure |
| 20 | +- `src/navigation/` - Modular navigation configuration |
| 21 | + - `types.ts` - TypeScript interfaces for navigation |
| 22 | + - `contracts.json` - All contract-related navigation |
| 23 | + - `tools.json` - Tools section navigation |
| 24 | + - `ecosystems.json` - Ecosystem-specific sections |
| 25 | + - `index.ts` - Combines all sections into navigationTree |
| 26 | + |
| 27 | +### Editing Navigation |
| 28 | +- **Add new pages**: Edit the relevant JSON file (contracts/tools/ecosystems) |
| 29 | +- **Reorder sections**: Modify array order in respective JSON files |
| 30 | +- **Add new sections**: Create new JSON file and import in `index.ts` |
| 31 | +- **Do NOT use meta.json files** - they have been removed and are not supported |
| 32 | + |
| 33 | +## Code Style Guidelines |
| 34 | + |
| 35 | +### TypeScript/JavaScript |
| 36 | +- Use TypeScript strict mode (enabled in tsconfig.json) |
| 37 | +- Prefer named imports: `import { RootProvider } from 'fumadocs-ui/provider'` |
| 38 | +- Use path aliases: `@/*` for src/, `@/.source` for .source/ |
| 39 | +- Function components with explicit return types when needed |
| 40 | +- Use React 19+ features and patterns |
| 41 | + |
| 42 | +### File Structure |
| 43 | +- Source files in `src/` directory |
| 44 | +- Documentation content in `content/` with nested version folders (v2.x, v3.x, etc.) |
| 45 | +- Examples in `examples/` directory organized by feature |
| 46 | +- Public assets in `public/` directory |
| 47 | +- Navigation config in `src/navigation/` directory |
| 48 | + |
| 49 | +### Naming Conventions |
| 50 | +- PascalCase for React components and interfaces |
| 51 | +- camelCase for variables and functions |
| 52 | +- kebab-case for file names in content directories |
| 53 | + |
| 54 | +## Markdown Link Cleanup Strategy |
| 55 | + |
| 56 | +### Problem |
| 57 | +Legacy markdown files often contain complex, unreadable link syntax that creates URL-encoded URLs like: |
| 58 | +``` |
| 59 | +http://localhost:3000/api/access#has_role(role:-felt252,-account:-contractaddress)-%E2%86%92-bool-external |
| 60 | +``` |
| 61 | + |
| 62 | +### Solution Approach |
| 63 | +When cleaning up markdown files with complex link syntax, follow this systematic approach: |
| 64 | + |
| 65 | +#### 1. Identify Complex Link Patterns |
| 66 | +Look for these problematic patterns: |
| 67 | +- **Function list links**: `[`+function_name+`](#`[.contract-item-name]#`function_name`#`(params)``-[.item-kind]#external#)` |
| 68 | +- **Event list links**: `[`+EventName+`](#`[.contract-item-name]#`eventname`#`(params)``-[.item-kind]#event#)` |
| 69 | +- **Function headings**: `#### `[.contract-item-name]#`function_name`#`(params)`` [.item-kind]#external#` |
| 70 | + |
| 71 | +#### 2. Create Clean Link Strategy |
| 72 | +Replace with simple, readable format: |
| 73 | +- **Clean list links**: `[`function_name`](#prefix-function_name)` |
| 74 | +- **Clean headings with anchors**: |
| 75 | + ```markdown |
| 76 | + <a id="prefix-function_name"></a> |
| 77 | + #### `function_name(params) → return_type` |
| 78 | + ``` |
| 79 | + |
| 80 | +#### 3. Anchor ID Naming Convention |
| 81 | +Use descriptive prefixes to avoid conflicts: |
| 82 | +- `iaccesscontrol-` for interface functions/events |
| 83 | +- `component-` for component functions/events |
| 84 | +- `extension-` for extension functions/events |
| 85 | + |
| 86 | +#### 4. Implementation Process |
| 87 | +1. **Use Task agent** for systematic fixes across large files |
| 88 | +2. **Fix by section** - group related functions/events together |
| 89 | +3. **Update both links and targets** - ensure table of contents links point to correct anchors |
| 90 | +4. **Verify no complex patterns remain** - search for `[.contract-item-name]#` and `[.item-kind]#` |
| 91 | + |
| 92 | +#### 5. Benefits |
| 93 | +- ✅ Clean, readable URLs |
| 94 | +- ✅ Better SEO and user experience |
| 95 | +- ✅ Easier maintenance and debugging |
| 96 | +- ✅ Consistent markdown formatting |
| 97 | + |
| 98 | +### Example Before/After |
| 99 | + |
| 100 | +**Before (Complex):** |
| 101 | +```markdown |
| 102 | +* [`+has_role(role, account)+`](#`[.contract-item-name]#`has_role`#`(role:-felt252,-account:-contractaddress)-→-bool``-[.item-kind]#external#) |
| 103 | + |
| 104 | +#### `[.contract-item-name]#`has_role`#`(role: felt252, account: ContractAddress) → bool`` [.item-kind]#external# |
| 105 | +``` |
| 106 | + |
| 107 | +**After (Clean):** |
| 108 | +```markdown |
| 109 | +* [`has_role(role, account)`](#iaccesscontrol-has_role) |
| 110 | + |
| 111 | +<a id="iaccesscontrol-has_role"></a> |
| 112 | +#### `has_role(role: felt252, account: ContractAddress) → bool` |
| 113 | +``` |
| 114 | + |
| 115 | +### Framework Compatibility Notes |
| 116 | +- **DO NOT use `{#anchor}` syntax** - breaks the framework parser |
| 117 | +- **USE HTML anchor tags** - `<a id="anchor-name"></a>` format is safe |
| 118 | +- **Test locally** to ensure links work properly after changes |
0 commit comments