|
| 1 | +# DevSonket - Bengali Developer Cheatsheet Repository |
| 2 | + |
| 3 | +## Project Overview |
| 4 | +DevSonket is a Gatsby-based static site that generates a comprehensive Bengali developer cheatsheet collection. The architecture centers around JSON-driven content management where individual technology cheatsheets are stored as structured JSON files in the `data/` directory. |
| 5 | + |
| 6 | +## Core Architecture |
| 7 | + |
| 8 | +### Data-Driven Content System |
| 9 | +- **Primary Data Source**: `data/*.json` files contain cheatsheet content |
| 10 | +- **Three Supported Formats**: |
| 11 | + - `codendesc`: Items with both `code` and `definition` properties |
| 12 | + - `onlycode`: Items with only `code` property |
| 13 | + - `mix`: Sections can mix both formats within same cheatsheet |
| 14 | +- **Demo Files**: Reference `data/demo/` for format examples before creating new cheatsheets |
| 15 | + |
| 16 | +### JSON Structure Pattern |
| 17 | +```json |
| 18 | +{ |
| 19 | + "id": "unique-identifier", |
| 20 | + "title": "বাংলা Title", |
| 21 | + "slug": "url-slug", |
| 22 | + "description": "Brief description", |
| 23 | + "colorPref": "#hexcolor", |
| 24 | + "contents": [ |
| 25 | + { |
| 26 | + "title": "Section Title", |
| 27 | + "items": [ |
| 28 | + {"definition": "Description", "code": "command"} // or just {"code": "command"} |
| 29 | + ] |
| 30 | + } |
| 31 | + ] |
| 32 | +} |
| 33 | +``` |
| 34 | + |
| 35 | +### Build Process Integration |
| 36 | +- **Thumbnail Generation**: `npm run thumbnail` uses Puppeteer to generate social media images |
| 37 | +- **GitHub API Integration**: `gatsby-node.js` fetches contributor data for each cheatsheet via GitHub API |
| 38 | +- **Static Site Generation**: Gatsby creates individual pages at `/{data.id}/` and print pages at `/print/{data.id}/` |
| 39 | + |
| 40 | +## Development Workflows |
| 41 | + |
| 42 | +### Adding New Cheatsheets |
| 43 | +1. **Direct JSON**: Create properly formatted JSON in `data/` directory |
| 44 | +2. **Draft Workflow**: Add rough content to `data/draft/` for later JSON conversion |
| 45 | +3. **Required Properties**: Ensure unique `id`, meaningful `title`, and proper `colorPref` |
| 46 | +4. **Validation**: Check against demo files in `data/demo/` |
| 47 | + |
| 48 | +### Key Commands |
| 49 | +- `npm run develop` - Development server with hot reload |
| 50 | +- `npm run build` - Production build with thumbnail generation |
| 51 | +- `npm run thumbnail` - Generate social media thumbnails only |
| 52 | +- `postbuild.js` - Copies build files to static deployment structure |
| 53 | + |
| 54 | +### File Naming Conventions |
| 55 | +- JSON files use kebab-case matching the `id` field |
| 56 | +- Avoid spaces or special characters in filenames |
| 57 | +- Keep filenames descriptive but concise |
| 58 | + |
| 59 | +## Project-Specific Patterns |
| 60 | + |
| 61 | +### Contributor Attribution |
| 62 | +The `contributorMap.js` script processes GitHub commit history to attribute contributions. Each cheatsheet page displays contributor avatars based on commits to that specific JSON file. |
| 63 | + |
| 64 | +### Color Management |
| 65 | +- Each cheatsheet defines `colorPref` for theming |
| 66 | +- `isItDark()` utility determines text contrast automatically |
| 67 | +- Colors influence page headers and print layouts |
| 68 | + |
| 69 | +### Bilingual Support Structure |
| 70 | +Content primarily in Bengali with English fallbacks. README files demonstrate the bilingual documentation pattern used throughout. |
| 71 | + |
| 72 | +## Critical Dependencies |
| 73 | +- **Gatsby**: Static site generation and GraphQL data layer |
| 74 | +- **Puppeteer**: Automated thumbnail generation for social sharing |
| 75 | +- **Axios**: GitHub API integration for contributor data |
| 76 | +- **React**: Component-based UI with emotion styling |
| 77 | + |
| 78 | +## Integration Points |
| 79 | +- **GitHub API**: Real-time contributor data (requires `GATSBY_GITHUB_TOKEN`) |
| 80 | +- **Static Hosting**: Files copied to `static/` directory for deployment |
| 81 | +- **Social Media**: Generated thumbnails enable rich link previews |
| 82 | + |
| 83 | +## Quality Standards |
| 84 | +- Maintain JSON format consistency across all cheatsheets |
| 85 | +- Include Bengali descriptions for accessibility |
| 86 | +- Test thumbnail generation after adding new content |
| 87 | +- Verify unique IDs to prevent routing conflicts |
0 commit comments