|
| 1 | +# Contributing to FixFX Links |
| 2 | + |
| 3 | +Thank you for your interest in contributing to FixFX Links! This document provides guidelines and instructions for contributing to the project. |
| 4 | + |
| 5 | +## Code of Conduct |
| 6 | + |
| 7 | +Please be respectful and constructive in all interactions. We're building a welcoming community for everyone. |
| 8 | + |
| 9 | +## Getting Started |
| 10 | + |
| 11 | +### Prerequisites |
| 12 | + |
| 13 | +- Node.js 18+ or Bun |
| 14 | +- Git |
| 15 | +- Basic knowledge of React, TypeScript, and Tailwind CSS |
| 16 | + |
| 17 | +### Local Development |
| 18 | + |
| 19 | +1. **Clone the repository:** |
| 20 | + ```bash |
| 21 | + git clone https://github.com/CodeMeAPixel/FixFX-LinkInBio.git |
| 22 | + cd links.fixfx.wiki |
| 23 | + ``` |
| 24 | + |
| 25 | +2. **Install dependencies:** |
| 26 | + ```bash |
| 27 | + bun install |
| 28 | + ``` |
| 29 | + |
| 30 | +3. **Start the development server:** |
| 31 | + ```bash |
| 32 | + bun run dev |
| 33 | + ``` |
| 34 | + The site will be available at `http://localhost:3000` |
| 35 | + |
| 36 | +4. **Create a new branch:** |
| 37 | + ```bash |
| 38 | + git checkout -b feature/your-feature-name |
| 39 | + ``` |
| 40 | + |
| 41 | +## Development Guidelines |
| 42 | + |
| 43 | +### Code Style |
| 44 | + |
| 45 | +- We use **Biome** for formatting and linting |
| 46 | +- Run `bun run lint` to check for issues |
| 47 | +- Run `bun run format` to auto-format code |
| 48 | + |
| 49 | +### TypeScript |
| 50 | + |
| 51 | +- All code should be properly typed |
| 52 | +- No `any` types unless absolutely necessary with a comment explaining why |
| 53 | +- Run `bun run build` to verify TypeScript compilation |
| 54 | + |
| 55 | +### Components |
| 56 | + |
| 57 | +- Keep components focused and single-responsibility |
| 58 | +- Use Lucide React for icons (don't add new icon libraries) |
| 59 | +- Use Tailwind CSS for styling (no inline styles) |
| 60 | +- Add proper TypeScript types for all props |
| 61 | + |
| 62 | +### Commits |
| 63 | + |
| 64 | +Follow the Conventional Commits format: |
| 65 | +- `feat:` - New features |
| 66 | +- `fix:` - Bug fixes |
| 67 | +- `docs:` - Documentation changes |
| 68 | +- `style:` - Code style changes (formatting, missing semicolons, etc.) |
| 69 | +- `refactor:` - Code refactoring without feature changes |
| 70 | +- `perf:` - Performance improvements |
| 71 | +- `test:` - Adding or updating tests |
| 72 | +- `chore:` - Build process, dependencies, etc. |
| 73 | + |
| 74 | +Example: |
| 75 | +``` |
| 76 | +feat(links): add support for custom link categories |
| 77 | +fix(ui): correct hover state color on link cards |
| 78 | +docs(readme): update installation instructions |
| 79 | +``` |
| 80 | + |
| 81 | +## Making Changes |
| 82 | + |
| 83 | +### Adding New Features |
| 84 | + |
| 85 | +1. Create a feature branch: `git checkout -b feature/your-feature` |
| 86 | +2. Make your changes |
| 87 | +3. Test thoroughly: `bun run dev` and `bun run build` |
| 88 | +4. Run linting: `bun run lint` and `bun run check` |
| 89 | +5. Commit with conventional format |
| 90 | +6. Push and create a pull request |
| 91 | + |
| 92 | +### Customizing Link Categories |
| 93 | + |
| 94 | +To add or modify link categories: |
| 95 | +1. Edit [src/data/categories.ts](src/data/categories.ts) |
| 96 | +2. Follow the existing structure for consistency |
| 97 | +3. Use available color options from the color map in [src/components/layouts/LinkHubContent.tsx](src/components/layouts/LinkHubContent.tsx) |
| 98 | + |
| 99 | +### Adding Colors |
| 100 | + |
| 101 | +To add new background colors: |
| 102 | +1. Add entries to `bgColorMap` and `glowColorMap` in [src/components/layouts/LinkHubContent.tsx](src/components/layouts/LinkHubContent.tsx) |
| 103 | +2. Use Tailwind CSS color classes |
| 104 | +3. Ensure the glow effect complements the background |
| 105 | + |
| 106 | +## Testing |
| 107 | + |
| 108 | +- Test your changes locally before submitting |
| 109 | +- Verify responsive design works on mobile, tablet, and desktop |
| 110 | +- Check that deep linking works: navigate using hashes like `#community` and `#community/github` |
| 111 | +- Test pagination when categories have more than 8 links |
| 112 | + |
| 113 | +## Deployment |
| 114 | + |
| 115 | +The project deploys automatically via Cloudflare Workers. To deploy manually: |
| 116 | + |
| 117 | +```bash |
| 118 | +# Authenticate with Cloudflare |
| 119 | +wrangler login |
| 120 | + |
| 121 | +# Deploy to staging |
| 122 | +bun run deploy -- -e staging |
| 123 | + |
| 124 | +# Deploy to production |
| 125 | +bun run deploy |
| 126 | +``` |
| 127 | + |
| 128 | +See [DEPLOYMENT.md](DEPLOYMENT.md) for detailed deployment instructions. |
| 129 | + |
| 130 | +## Reporting Issues |
| 131 | + |
| 132 | +Found a bug or have a feature request? Please: |
| 133 | +1. Check if the issue already exists on [GitHub Issues](https://github.com/CodeMeAPixel/FixFX-LinkInBio/issues) |
| 134 | +2. Provide clear description and steps to reproduce bugs |
| 135 | +3. Include your environment (OS, Node version, browser if applicable) |
| 136 | + |
| 137 | +## Project Structure |
| 138 | + |
| 139 | +``` |
| 140 | +src/ |
| 141 | +├── components/ |
| 142 | +│ ├── Header.tsx # Navigation header |
| 143 | +│ ├── icons/ # Custom icons |
| 144 | +│ └── layouts/ |
| 145 | +│ └── LinkHubContent.tsx # Main page component with pagination & deep linking |
| 146 | +├── routes/ |
| 147 | +│ ├── __root.tsx # Root layout with meta tags |
| 148 | +│ └── index.tsx # Home page |
| 149 | +├── data/ |
| 150 | +│ ├── categories.ts # Link data |
| 151 | +│ ├── profile.ts # User profile |
| 152 | +│ └── social-links.ts # Social media links |
| 153 | +├── types/ |
| 154 | +│ └── links.ts # TypeScript types |
| 155 | +└── styles.css # Global styles & theme |
| 156 | +``` |
| 157 | + |
| 158 | +## Questions? |
| 159 | + |
| 160 | +Feel free to reach out: |
| 161 | +- Email: [hey@codemeapixel.dev](mailto:hey@codemeapixel.dev) |
| 162 | +- GitHub: [CodeMeAPixel/FixFX-LinkInBio](https://github.com/CodeMeAPixel/FixFX-LinkInBio) |
| 163 | + |
| 164 | +## License |
| 165 | + |
| 166 | +By contributing to FixFX Links, you agree that your contributions will be licensed under the same license as the project (see [LICENSE](LICENSE)). |
| 167 | + |
| 168 | +Thank you for contributing! |
0 commit comments