410 lines
13 KiB
Markdown
410 lines
13 KiB
Markdown
# Руководство по контрибьюции
|
||
|
||
Спасибо за интерес к проекту Phantom Protocol Landing! 🎉
|
||
|
||
Мы рады любому вкладу — от исправления опечаток до новых функций.
|
||
|
||
## 📋 Содержание
|
||
|
||
- [Кодекс поведения](#кодекс-поведения)
|
||
- [Как я могу помочь?](#как-я-могу-помочь)
|
||
- [Процесс разработки](#процесс-разработки)
|
||
- [Стандарты кода](#стандарты-кода)
|
||
- [Коммиты](#коммиты)
|
||
- [Pull Requests](#pull-requests)
|
||
- [Сообщения об ошибках](#сообщения-об-ошибках)
|
||
- [Предложения функций](#предложения-функций)
|
||
|
||
## 🤝 Кодекс поведения
|
||
|
||
Этот проект придерживается [Contributor Covenant Code of Conduct](https://www.contributor-covenant.org/). Участвуя, вы соглашаетесь соблюдать этот кодекс.
|
||
|
||
## 💡 Как я могу помочь?
|
||
|
||
### Типы контрибьюций
|
||
|
||
- 🐛 **Исправление багов** - Найдите открытые issues с меткой `bug`
|
||
- ✨ **Новые функции** - Issues с меткой `enhancement`
|
||
- 📝 **Документация** - Улучшение README, комментариев, гайдов
|
||
- 🎨 **Дизайн** - Улучшение UI/UX, анимации, стили
|
||
- ♿ **Доступность** - ARIA метки, keyboard navigation
|
||
- 🌍 **Переводы** - Добавление новых языков
|
||
- ⚡ **Производительность** - Оптимизация загрузки, анимаций
|
||
- 🧪 **Тестирование** - Cross-browser тестирование
|
||
|
||
### Хорошие первые задачи
|
||
|
||
Ищите issues с метками:
|
||
- `good first issue` - Легкие задачи для новичков
|
||
- `help wanted` - Задачи, где нужна помощь
|
||
- `documentation` - Улучшение документации
|
||
|
||
## 🔧 Процесс разработки
|
||
|
||
### 1. Fork репозитория
|
||
|
||
Нажмите кнопку "Fork" в правом верхнем углу GitHub.
|
||
|
||
### 2. Клонируйте свой fork
|
||
|
||
```bash
|
||
git clone https://github.com/YOUR_USERNAME/phantom-protocol-landing.git
|
||
cd phantom-protocol-landing
|
||
```
|
||
|
||
### 3. Создайте ветку
|
||
|
||
```bash
|
||
git checkout -b feature/your-feature-name
|
||
# или
|
||
git checkout -b fix/bug-description
|
||
```
|
||
|
||
**Соглашение об именовании веток:**
|
||
- `feature/` - новые функции
|
||
- `fix/` - исправления багов
|
||
- `docs/` - документация
|
||
- `style/` - стили, форматирование
|
||
- `refactor/` - рефакторинг кода
|
||
- `test/` - добавление тестов
|
||
- `perf/` - улучшение производительности
|
||
|
||
### 4. Внесите изменения
|
||
|
||
- Следуйте [стандартам кода](#стандарты-кода)
|
||
- Добавьте комментарии для сложной логики
|
||
- Обновите документацию при необходимости
|
||
- Тестируйте в разных браузерах
|
||
|
||
### 5. Закоммитьте изменения
|
||
|
||
```bash
|
||
git add .
|
||
git commit -m "feat: добавить новую функцию X"
|
||
```
|
||
|
||
См. [соглашение о коммитах](#коммиты).
|
||
|
||
### 6. Push в свой fork
|
||
|
||
```bash
|
||
git push origin feature/your-feature-name
|
||
```
|
||
|
||
### 7. Создайте Pull Request
|
||
|
||
Откройте Pull Request на GitHub с подробным описанием изменений.
|
||
|
||
## 📐 Стандарты кода
|
||
|
||
### HTML
|
||
|
||
```html
|
||
<!-- Хорошо: семантический, с комментариями -->
|
||
<!-- Hero Section -->
|
||
<section id="hero" class="hero-section">
|
||
<div class="container">
|
||
<h1 class="hero-title">Title</h1>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Плохо: div-суп без семантики -->
|
||
<div class="section1">
|
||
<div class="title">Title</div>
|
||
</div>
|
||
```
|
||
|
||
**Правила:**
|
||
- ✅ Используйте семантические теги (`<section>`, `<article>`, `<nav>`)
|
||
- ✅ Добавляйте комментарии для секций
|
||
- ✅ Используйте значащие ID и классы
|
||
- ✅ Закрывайте все теги
|
||
- ✅ Отступы: 4 пробела
|
||
|
||
### CSS
|
||
|
||
```css
|
||
/* Хорошо: организованный, с комментариями */
|
||
/* === Hero Section === */
|
||
.hero-section {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: clamp(2rem, 5vw, 4rem);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Плохо: без структуры */
|
||
.hero{min-height:100vh;display:flex;}
|
||
```
|
||
|
||
**Правила:**
|
||
- ✅ Используйте CSS переменные для цветов и размеров
|
||
- ✅ Группируйте связанные стили
|
||
- ✅ Комментируйте секции
|
||
- ✅ Mobile-first подход
|
||
- ✅ Используйте `clamp()` для fluid typography
|
||
- ✅ Отступы: 4 пробела
|
||
- ✅ Один селектор на строку
|
||
|
||
### JavaScript
|
||
|
||
```javascript
|
||
// Хорошо: понятное, с комментариями
|
||
/**
|
||
* Инициализация системы тем
|
||
* Загружает сохраненную тему из localStorage
|
||
*/
|
||
function initTheme() {
|
||
const savedTheme = localStorage.getItem('phantom-theme') || 'dark';
|
||
setTheme(savedTheme);
|
||
}
|
||
|
||
// Плохо: непонятное, без комментариев
|
||
function init(){let t=localStorage.getItem('t')||'d';set(t);}
|
||
```
|
||
|
||
**Правила:**
|
||
- ✅ Используйте `'use strict'`
|
||
- ✅ Документируйте функции JSDoc комментариями
|
||
- ✅ Используйте `const` и `let`, избегайте `var`
|
||
- ✅ Значащие имена переменных
|
||
- ✅ Обрабатывайте ошибки (`try/catch`)
|
||
- ✅ Отступы: 4 пробела
|
||
- ✅ Точка с запятой обязательна
|
||
|
||
### Адаптивность
|
||
|
||
Тестируйте на всех breakpoints:
|
||
- ✅ Mobile: 320px - 575px
|
||
- ✅ Tablet: 576px - 991px
|
||
- ✅ Desktop: 992px+
|
||
- ✅ Large Desktop: 1400px+
|
||
|
||
### Производительность
|
||
|
||
- ✅ Оптимизируйте изображения (WebP, srcset)
|
||
- ✅ Минифицируйте CSS/JS для production
|
||
- ✅ Используйте `defer` для скриптов
|
||
- ✅ Lazy loading для изображений
|
||
- ✅ Избегайте layout thrashing
|
||
- ✅ Используйте `requestAnimationFrame` для анимаций
|
||
|
||
### Доступность
|
||
|
||
- ✅ Добавляйте `alt` для изображений
|
||
- ✅ Используйте ARIA метки
|
||
- ✅ Keyboard navigation (Tab, Enter, Esc)
|
||
- ✅ Контрастность WCAG AA (минимум)
|
||
- ✅ Поддержка `prefers-reduced-motion`
|
||
- ✅ Focus states для интерактивных элементов
|
||
|
||
## 📝 Коммиты
|
||
|
||
Используем [Conventional Commits](https://www.conventionalcommits.org/ru/):
|
||
|
||
```
|
||
<type>(<scope>): <subject>
|
||
|
||
<body>
|
||
|
||
<footer>
|
||
```
|
||
|
||
### Типы коммитов
|
||
|
||
- `feat:` - Новая функция
|
||
- `fix:` - Исправление бага
|
||
- `docs:` - Документация
|
||
- `style:` - Форматирование, пробелы (не CSS!)
|
||
- `refactor:` - Рефакторинг кода
|
||
- `perf:` - Улучшение производительности
|
||
- `test:` - Добавление тестов
|
||
- `chore:` - Обновление зависимостей, конфигурации
|
||
|
||
### Примеры
|
||
|
||
```bash
|
||
# Хорошо
|
||
feat(demo): добавить паузу в демо-анимацию
|
||
fix(navbar): исправить прозрачность на мобильных
|
||
docs(readme): обновить инструкцию по установке
|
||
style(css): форматирование файла style.css
|
||
refactor(js): упростить логику копирования
|
||
|
||
# Плохо
|
||
update
|
||
fixed stuff
|
||
changes
|
||
```
|
||
|
||
### Breaking Changes
|
||
|
||
Для breaking changes добавьте `!`:
|
||
|
||
```bash
|
||
feat!: изменить структуру CSS переменных
|
||
|
||
BREAKING CHANGE: Переименованы CSS переменные для тем
|
||
```
|
||
|
||
## 🔍 Pull Requests
|
||
|
||
### Чеклист перед созданием PR
|
||
|
||
- [ ] Код соответствует [стандартам](#стандарты-кода)
|
||
- [ ] Добавлены комментарии для сложной логики
|
||
- [ ] Обновлена документация (если нужно)
|
||
- [ ] Протестировано в Chrome, Firefox, Safari
|
||
- [ ] Протестировано на мобильных устройствах
|
||
- [ ] Нет console.log в production коде
|
||
- [ ] Lighthouse Score не ухудшился
|
||
- [ ] Работает в Dark и Light темах
|
||
|
||
### Шаблон Pull Request
|
||
|
||
```markdown
|
||
## Описание
|
||
Краткое описание изменений
|
||
|
||
## Тип изменений
|
||
- [ ] Новая функция (feat)
|
||
- [ ] Исправление бага (fix)
|
||
- [ ] Документация (docs)
|
||
- [ ] Рефакторинг (refactor)
|
||
- [ ] Другое: _____
|
||
|
||
## Мотивация и контекст
|
||
Почему это изменение необходимо? Какую проблему оно решает?
|
||
Ссылка на issue: #123
|
||
|
||
## Скриншоты (если применимо)
|
||
До | После
|
||
----|-----
|
||
 | 
|
||
|
||
## Как протестировано?
|
||
- [ ] Desktop Chrome
|
||
- [ ] Desktop Firefox
|
||
- [ ] Desktop Safari
|
||
- [ ] Mobile Chrome
|
||
- [ ] Mobile Safari
|
||
- [ ] Dark theme
|
||
- [ ] Light theme
|
||
|
||
## Checklist
|
||
- [ ] Код соответствует стандартам проекта
|
||
- [ ] Документация обновлена
|
||
- [ ] Lighthouse Score: Performance ≥ 90
|
||
```
|
||
|
||
## 🐛 Сообщения об ошибках
|
||
|
||
### Перед созданием issue
|
||
|
||
1. Проверьте, нет ли уже похожего issue
|
||
2. Обновите до последней версии
|
||
3. Проверьте, воспроизводится ли баг в другом браузере
|
||
|
||
### Шаблон Bug Report
|
||
|
||
```markdown
|
||
## Описание бага
|
||
Четкое описание проблемы
|
||
|
||
## Шаги для воспроизведения
|
||
1. Перейти на '...'
|
||
2. Кликнуть на '...'
|
||
3. Прокрутить до '...'
|
||
4. Увидеть ошибку
|
||
|
||
## Ожидаемое поведение
|
||
Что должно происходить
|
||
|
||
## Актуальное поведение
|
||
Что происходит на самом деле
|
||
|
||
## Скриншоты
|
||
Если применимо, добавьте скриншоты
|
||
|
||
## Окружение
|
||
- ОС: [например, macOS 14.0]
|
||
- Браузер: [например, Chrome 120.0]
|
||
- Разрешение экрана: [например, 1920x1080]
|
||
- Тема: [Dark/Light]
|
||
|
||
## Дополнительный контекст
|
||
Любая другая информация о проблеме
|
||
```
|
||
|
||
## ✨ Предложения функций
|
||
|
||
### Шаблон Feature Request
|
||
|
||
```markdown
|
||
## Описание функции
|
||
Четкое описание желаемой функции
|
||
|
||
## Мотивация
|
||
Почему эта функция будет полезна?
|
||
|
||
## Предлагаемое решение
|
||
Как вы видите реализацию?
|
||
|
||
## Альтернативы
|
||
Рассматривали ли вы альтернативные решения?
|
||
|
||
## Дополнительный контекст
|
||
Скриншоты, mockups, примеры
|
||
```
|
||
|
||
## 🎨 Рекомендации по дизайну
|
||
|
||
При добавлении новых UI элементов:
|
||
|
||
1. **Следуйте цветовой схеме:**
|
||
- Акцент: `#00f0ff` (неоново-циан)
|
||
- Вторичный: `#7a3eff` (фиолетовый)
|
||
- Успех: `#00ff9d`
|
||
- Ошибка: `#ff2a6d`
|
||
|
||
2. **Используйте существующие компоненты:**
|
||
- `.glass-card` для карточек
|
||
- `.btn-primary` для кнопок
|
||
- `.section-padding` для отступов секций
|
||
|
||
3. **Соблюдайте spacing:**
|
||
- Используйте Bootstrap spacing utilities
|
||
- Консистентные отступы (rem units)
|
||
|
||
4. **Анимации:**
|
||
- Плавные переходы (cubic-bezier)
|
||
- Используйте AOS для scroll animations
|
||
- Уважайте `prefers-reduced-motion`
|
||
|
||
## 📚 Полезные ресурсы
|
||
|
||
- [Bootstrap 5 Documentation](https://getbootstrap.com/docs/5.3/)
|
||
- [MDN Web Docs](https://developer.mozilla.org/)
|
||
- [CSS Tricks](https://css-tricks.com/)
|
||
- [Can I Use](https://caniuse.com/)
|
||
- [Conventional Commits](https://www.conventionalcommits.org/)
|
||
|
||
## 🙏 Благодарности
|
||
|
||
Спасибо всем контрибьюторам проекта!
|
||
|
||
## 📞 Контакты
|
||
|
||
Вопросы? Пишите:
|
||
- GitHub Discussions
|
||
- Issues
|
||
- Email: contact@phantom.protocol
|
||
|
||
---
|
||
|
||
**Спасибо за ваш вклад! 🚀** |