ebf0daacce
All checks were successful
platform/bro-js/bro.landing/pipeline/head This commit looks good
130 lines
4.0 KiB
Markdown
130 lines
4.0 KiB
Markdown
# BROJS.RU Landing
|
||
|
||
Лендинг платформы для обучения фронтенд-разработке
|
||
|
||
## 🚀 Особенности v3.0
|
||
|
||
- ⚡ **Минимальные зависимости** - только необходимое
|
||
- 📄 **Статический HTML** для идеального SEO
|
||
- 🎨 **SCSS + CSS Modules** для гибких стилей
|
||
- 📱 **Адаптивный дизайн** с responsive шрифтами
|
||
- 🎯 **React** только там, где нужна динамика
|
||
- 🔥 **Легкий bundle** terms.html (10 KB + 1.5 KB CSS, **без JS!**)
|
||
|
||
## 📦 Установка
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
## 🛠️ Разработка
|
||
|
||
```bash
|
||
npm start # Dev сервер на http://localhost:8099
|
||
```
|
||
|
||
## 🏗️ Сборка
|
||
|
||
```bash
|
||
npm run build:prod # Production сборка в ./dist
|
||
```
|
||
|
||
## 📄 Страницы
|
||
|
||
### Главная `/`
|
||
- **React** приложение с анимацией Lottie
|
||
- Динамическая страница "В разработке"
|
||
- Файлы: `index.html` + `index.js` (916 KB) + `index.css` (190 B)
|
||
|
||
### Terms `/terms`
|
||
- **Чистый HTML** без JavaScript
|
||
- Полный текст пользовательского соглашения
|
||
- SEO-оптимизирован
|
||
- Адаптивный дизайн
|
||
- Файлы: `terms.html` (10.5 KB) + `terms.css` (1.5 KB)
|
||
|
||
## 🎨 Стилизация
|
||
|
||
### CSS Modules (для React компонентов)
|
||
```typescript
|
||
import * as styles from './styles/main.module.scss';
|
||
element.className = styles.app;
|
||
```
|
||
|
||
**Преимущества:**
|
||
- Изоляция стилей
|
||
- Автоматические уникальные имена классов
|
||
- TypeScript поддержка
|
||
|
||
### Обычный SCSS (для статических страниц)
|
||
```scss
|
||
// terms.scss
|
||
$mobile: 768px;
|
||
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
@media (max-width: $mobile) {
|
||
font-size: 1.75rem; // Адаптивный шрифт
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📱 Адаптивность
|
||
|
||
Все размеры шрифтов автоматически уменьшаются на мобильных устройствах (< 768px):
|
||
- H1: 2.5rem → 1.75rem
|
||
- H2: 1.75rem → 1.5rem
|
||
- H3: 1.25rem → 1.1rem
|
||
- Body: 1rem → 0.95rem
|
||
|
||
## 🗂️ Структура
|
||
|
||
```
|
||
src/
|
||
├── styles/
|
||
│ ├── main.module.scss # CSS Modules для React
|
||
│ ├── main.module.scss.d.ts # TypeScript типы
|
||
│ └── terms.scss # SCSS для статики
|
||
├── pages/
|
||
│ └── under-construction/ # Главная страница
|
||
├── index.tsx # Entry для React
|
||
├── terms.js # Entry для CSS
|
||
├── terms.html # Статический HTML
|
||
└── index.ejs # Шаблон для React
|
||
```
|
||
|
||
## 🌐 Деплой
|
||
|
||
После `npm run build:prod`:
|
||
- `index.html` → `brojs.ru/`
|
||
- `terms.html` → `brojs.ru/terms`
|
||
- Статика → `static.brojs.ru/landing/main/`
|
||
|
||
## 🔧 Технологии
|
||
|
||
### Core
|
||
- **React 18** - только для динамических частей
|
||
- **TypeScript** - типизация
|
||
- **Webpack 5** - сборка с multiple entry points
|
||
- **SCSS** - препроцессор
|
||
- **CSS Modules** - изоляция стилей
|
||
|
||
### Библиотеки
|
||
- **React Router DOM** - клиентский роутинг
|
||
- **i18next** - интернационализация
|
||
- **Lottie React** - анимации
|
||
|
||
### Dev зависимости
|
||
- **sass** + **sass-loader** - компиляция SCSS
|
||
- **css-loader** - обработка CSS (с поддержкой CSS Modules)
|
||
- **style-loader** - инжект CSS в dev режиме
|
||
- **mini-css-extract-plugin** - извлечение CSS в production
|
||
|
||
## 📚 Документация
|
||
|
||
Полная документация в [cloud.md](./cloud.md)
|
||
|
||
## 🤝 Участие
|
||
|
||
Проект использует минималистичный подход - добавляем зависимости только по мере необходимости!
|