Skip to content

Commit a956dbe

Browse files
weiCopilot
andauthored
📝 Improve API error handling, SVG rendering init, next.js patch, and documentation (#760)
* 📝 Improve API error handling, SVG rendering init, and documentation updates * Update common/apiErrorHandler.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * 🐛 Fix invalid runtime export with Client Components Convert pages to Server Components and move 'use client' to actual client components (Repo and MainRenderer). The runtime export only applies to Server Components per Next.js 15 docs. Also improved AGENTS.md to make CONTRIBUTING.md requirements more prominent. * Upgrade next.js * Update AGENTS.md * 📝 Improve cache control headers and error logging in API routes --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 783a421 commit a956dbe

19 files changed

Lines changed: 388 additions & 216 deletions

File tree

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"socialify": patch
3+
---
4+
5+
Fix invalid runtime export with Client Components by converting pages to Server Components

.changeset/opus-cleanup.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"socialify": patch
3+
---
4+
5+
Improve API error handling, SVG rendering init, and documentation updates.

AGENTS.md

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# AGENTS.md
2+
3+
This file provides context for AI agents working with the Socialify codebase.
4+
5+
## ⚠️ CRITICAL: Read CONTRIBUTING.md First
6+
7+
**BEFORE making ANY code changes**, you MUST read [CONTRIBUTING.md](./CONTRIBUTING.md) to understand:
8+
- Documentation requirements (all changes must update relevant docs)
9+
- Required commit message format (gitmoji-style)
10+
- Changeset requirements (every PR needs one)
11+
- Testing requirements (`pnpm verify` before committing)
12+
- Code style (Biome linter/formatter)
13+
14+
**Failure to follow CONTRIBUTING.md will result in rejected PRs.**
15+
16+
## Project Overview
17+
18+
**Socialify** is an open-source service that generates beautiful social preview images for GitHub repositories. It allows users to create customized images with options for logos, descriptions, badges, fonts, and background patterns.
19+
20+
- **Live Site**: https://socialify.git.ci
21+
- **Tech Stack**: Next.js 15, React 19, TypeScript, Tailwind CSS, daisyUI
22+
- **Image Generation**: Satori (SVG) + resvg-wasm (PNG/JPEG/WebP)
23+
- **Package Manager**: pnpm
24+
- **Node Version**: 22 (see `.nvmrc`)
25+
26+
## Project Structure
27+
28+
```
29+
socialify/
30+
├── app/ # Next.js App Router pages and API routes
31+
│ ├── [_owner]/ # Dynamic routes for /:owner/:repo
32+
│ ├── api/ # API endpoints for image generation
33+
│ └── layout.tsx # Root layout with providers
34+
├── src/
35+
│ ├── components/ # React UI components
36+
│ ├── contexts/ # React context providers
37+
│ ├── hooks/ # Custom React hooks
38+
│ └── typings/ # TypeScript type definitions
39+
├── common/ # Shared utilities and business logic
40+
│ ├── github/ # GitHub API integration
41+
│ ├── icons/ # Language/tech icons for images
42+
│ ├── types/ # Shared TypeScript types
43+
│ ├── renderCard.ts # Card rendering logic
44+
│ ├── renderSVG.tsx # SVG generation with Satori
45+
│ └── renderPNG.tsx # PNG conversion with resvg-wasm
46+
├── public/ # Static assets (wasm files copied here)
47+
├── .devcontainer/ # VS Code Dev Container configuration
48+
├── .github/workflows/ # CI/CD workflows (build, test, release, docker)
49+
└── .changeset/ # Changeset files for versioning
50+
```
51+
52+
## Development Workflow
53+
54+
**Before making changes:**
55+
1. ✅ Read [CONTRIBUTING.md](./CONTRIBUTING.md) (if not already done)
56+
2. ✅ Understand the requirements and conventions
57+
3. ✅ Make your changes following code style guidelines
58+
59+
**Before committing:**
60+
1. ✅ Run `pnpm verify` (runs lint, tests, and build)
61+
2. ✅ Create a changeset: `pnpm changeset`
62+
3. ✅ Use gitmoji-style commit messages (e.g., `✨ Add feature`, `🐛 Fix bug`, `📝 Update docs`)
63+
4. ✅ Commit both your changes AND the changeset file
64+
65+
## Contributing
66+
67+
See [CONTRIBUTING.md](./CONTRIBUTING.md) for full details.
68+
69+
## Key Commands
70+
71+
```bash
72+
pnpm install # Install dependencies
73+
pnpm dev # Start development server (Turbopack)
74+
pnpm build # Production build
75+
pnpm lint # Run Biome linter
76+
pnpm lint:fix # Auto-fix lint issues
77+
pnpm test:unit # Run Jest unit tests
78+
pnpm test:e2e # Run Playwright e2e tests
79+
pnpm changeset # Create a changeset for PR
80+
pnpm verify # Run all checks (lint, tests, build)
81+
```
82+
83+
## Environment Variables
84+
85+
Copy `.env.example` to `.env` and configure:
86+
87+
- `GITHUB_TOKEN` - GitHub PAT with public repo read access (required)
88+
- `PROJECT_URL` - Base URL (default: http://localhost:3000)
89+
- `GTM_ID` - Google Tag Manager ID (optional)
90+
91+
## Development Guidelines
92+
93+
### Code Style
94+
- **Linter/Formatter**: Biome (not ESLint/Prettier)
95+
- **Import Aliases**: Use `@/` for imports (e.g., `@/components/...`)
96+
- **Styling**: Tailwind CSS with daisyUI components
97+
98+
### Testing
99+
- **Unit Tests**: Jest with React Testing Library
100+
- **E2E Tests**: Playwright (Chromium)
101+
- Update snapshots: `pnpm test:unit:update-snapshots` / `pnpm test:e2e:update-snapshots`
102+
103+
### Pull Requests
104+
- Every PR requires a changeset file (run `pnpm changeset`)
105+
- CI runs lint, unit tests, and build checks
106+
- E2E tests run on PR merges
107+
108+
### Documentation
109+
- **IMPORTANT**: All work must include updates to relevant documentation (README, AGENTS.md, code comments, etc.) to ensure docs stay current.
110+
111+
## API Routes
112+
113+
- `GET /:owner/:repo/image` - Returns generated social image (SVG/PNG/JPEG/WebP)
114+
- `GET /api/stats.svg` - Returns usage statistics badge
115+
116+
### Image URL Parameters
117+
118+
Common query parameters for image customization:
119+
- `theme` - Light/Dark/Auto
120+
- `font` - Font family selection
121+
- `pattern` - Background pattern
122+
- `logo` - Custom logo URL (SVG data URI)
123+
- `description` - Toggle description visibility
124+
- `language` - Toggle language badge
125+
- `stargazers`, `forks`, `issues`, `pulls` - Toggle badges
126+
- `owner` - Toggle owner visibility
127+
128+
## Related Documentation
129+
130+
- [README.md](./README.md) - User documentation and usage guide
131+
- [CONTRIBUTING.md](./CONTRIBUTING.md) - Contribution guidelines and development setup
132+
- [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) - Community code of conduct
133+
- [CHANGELOG.md](./CHANGELOG.md) - Version history and release notes

CONTRIBUTING.md

Lines changed: 119 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,138 @@
1-
# Contributor Covenant Code of Conduct
1+
# Contributing to Socialify
22

3-
## Our Pledge
3+
Thank you for your interest in contributing to Socialify! We welcome contributions from the community.
44

5-
In the interest of fostering an open and welcoming environment, we as
6-
contributors and maintainers pledge to make participation in our project and
7-
our community a harassment-free experience for everyone, regardless of age, body
8-
size, disability, ethnicity, sex characteristics, gender identity and expression,
9-
level of experience, education, socio-economic status, nationality, personal
10-
appearance, race, religion, or sexual identity and orientation.
5+
Please read and agree to our [Code of Conduct](./CODE_OF_CONDUCT.md) before contributing.
116

12-
## Our Standards
7+
## Development Setup
138

14-
Examples of behavior that contributes to creating a positive environment
15-
include:
9+
### Prerequisites
1610

17-
- Using welcoming and inclusive language
18-
- Being respectful of differing viewpoints and experiences
19-
- Gracefully accepting constructive criticism
20-
- Focusing on what is best for the community
21-
- Showing empathy towards other community members
11+
- Node.js 22 (see `.nvmrc`)
12+
- pnpm package manager
2213

23-
Examples of unacceptable behavior by participants include:
14+
### Getting Started
2415

25-
- The use of sexualized language or imagery and unwelcome sexual attention or
26-
advances
27-
- Trolling, insulting/derogatory comments, and personal or political attacks
28-
- Public or private harassment
29-
- Publishing others' private information, such as a physical or electronic
30-
address, without explicit permission
31-
- Other conduct which could reasonably be considered inappropriate in a
32-
professional setting
16+
```bash
17+
# Clone the repository (or your fork)
18+
git clone https://github.com/wei/socialify.git && cd socialify
3319

34-
## Our Responsibilities
20+
# Set environment variables
21+
cp .env.example .env
22+
# Edit .env and add your GITHUB_TOKEN
3523

36-
Project maintainers are responsible for clarifying the standards of acceptable
37-
behavior and are expected to take appropriate and fair corrective action in
38-
response to any instances of unacceptable behavior.
24+
# Install dependencies
25+
pnpm install
3926

40-
Project maintainers have the right and responsibility to remove, edit, or
41-
reject comments, commits, code, wiki edits, issues, and other contributions
42-
that are not aligned to this Code of Conduct, or to ban temporarily or
43-
permanently any contributor for other behaviors that they deem inappropriate,
44-
threatening, offensive, or harmful.
27+
# Start development server
28+
pnpm dev
29+
```
4530

46-
## Scope
31+
Open http://localhost:3000 to view the app.
4732

48-
This Code of Conduct applies within all project spaces, and it also applies when
49-
an individual is representing the project or its community in public spaces.
50-
Examples of representing a project or community include using an official
51-
project e-mail address, posting via an official social media account, or acting
52-
as an appointed representative at an online or offline event. Representation of
53-
a project may be further defined and clarified by project maintainers.
33+
### Environment Variables
5434

55-
## Enforcement
35+
| Variable | Required | Description |
36+
|----------|----------|-------------|
37+
| `GITHUB_TOKEN` | Yes | GitHub PAT with public repo read access. [Create one here](https://github.com/settings/personal-access-tokens/new) |
38+
| `PROJECT_URL` | No | Base URL (default: http://localhost:3000) |
39+
| `GTM_ID` | No | Google Tag Manager ID |
5640

57-
Instances of abusive, harassing, or otherwise unacceptable behavior may be
58-
reported by contacting the project team at github@weispot.com. All
59-
complaints will be reviewed and investigated and will result in a response that
60-
is deemed necessary and appropriate to the circumstances. The project team is
61-
obligated to maintain confidentiality with regard to the reporter of an incident.
62-
Further details of specific enforcement policies may be posted separately.
41+
### Dev Container
6342

64-
Project maintainers who do not follow or enforce the Code of Conduct in good
65-
faith may face temporary or permanent repercussions as determined by other
66-
members of the project's leadership.
43+
[![Open in Dev Container](https://img.shields.io/static/v1?label=Dev%20Containers&message=Click%20to%20Launch&color=blue)](https://open.vscode.dev/wei/socialify)
6744

68-
## Attribution
45+
If you have VS Code and Docker installed, you can [open in Dev Container](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/wei/socialify) for a pre-configured development environment.
6946

70-
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71-
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
47+
## Code Style
7248

73-
[homepage]: https://www.contributor-covenant.org
49+
Socialify uses [Biome](https://biomejs.dev/) for linting and formatting.
7450

75-
For answers to common questions about this code of conduct, see
76-
https://www.contributor-covenant.org/faq
51+
```bash
52+
# Check for lint errors
53+
pnpm lint
54+
55+
# Auto-fix lint errors
56+
pnpm lint:fix
57+
```
58+
59+
## Testing
60+
61+
### Unit Tests (Jest)
62+
63+
```bash
64+
pnpm test:unit # Run tests
65+
pnpm test:unit:watch # Run in watch mode
66+
pnpm test:unit:update-snapshots # Update snapshots
67+
```
68+
69+
### End-to-End Tests (Playwright)
70+
71+
```bash
72+
# First-time setup
73+
pnpm playwright:install
74+
75+
# Run tests
76+
pnpm test:e2e
77+
78+
# Update snapshots
79+
pnpm test:e2e:update-snapshots
80+
81+
# View test report
82+
pnpm test:e2e:show-report
83+
```
84+
85+
## Submitting Changes
86+
87+
### Before Submitting
88+
89+
1. Run linting: `pnpm lint`
90+
2. Run unit tests: `pnpm test:unit`
91+
3. Build the project: `pnpm build`
92+
93+
Or run all checks at once: `pnpm verify`
94+
95+
### Commit Messages
96+
97+
Use gitmoji-style commit messages. Prefix the summary with an emoji and a short, present-tense description.
98+
99+
Examples:
100+
101+
- `✨ Add themed background options`
102+
- `🐛 Fix cache header for SVG responses`
103+
- `📝 Update contributing guide`
104+
105+
### Changesets
106+
107+
Every PR requires **one** changeset file describing the change:
108+
109+
1. Run `pnpm changeset`
110+
2. Select the semantic version type (major, minor, patch)
111+
3. Enter a concise description of your change
112+
4. Commit the generated `.changeset/*.md` file with your PR
113+
114+
Example changeset content:
115+
```markdown
116+
---
117+
"socialify": minor
118+
---
119+
120+
Added new background pattern option
121+
```
122+
123+
### Pull Request Guidelines
124+
125+
- Keep changes focused and minimal
126+
- Include tests for new features
127+
- Update all relevant documentation
128+
- Let maintainers know if snapshot updates are required
129+
130+
## Project Structure
131+
132+
See [AGENTS.md](./AGENTS.md) for detailed project structure and architecture information.
133+
134+
## Questions?
135+
136+
Open an issue or discussion if you have questions about contributing.
137+
138+
Thank you for helping make Socialify better! :heart:

0 commit comments

Comments
 (0)