Remove legacy landing and documentation files, transitioning to a new structure with Pug templates for index and terms pages. Update Vite configuration for improved build process and streamline project organization. Clean up package dependencies and enhance project clarity.
This commit is contained in:
Primakov Alexandr Alexandrovich
@@ -1,185 +1,63 @@
|
||||
# BROJS.RU Landing
|
||||
# BRO Landings
|
||||
|
||||
Лендинг платформы для обучения фронтенд-разработке
|
||||
Static pages platform for BRO platform - multiple landing pages and documentation.
|
||||
|
||||
## 🚀 Особенности v3.0 (Vite)
|
||||
## Pages
|
||||
|
||||
- ⚡ **Vite** - мгновенный запуск (vs 3+ сек у webpack)
|
||||
- 📄 **Статический HTML** для идеального SEO
|
||||
- 🎨 **SCSS + CSS Modules** для гибких стилей
|
||||
- 📱 **Адаптивный дизайн** с responsive шрифтами
|
||||
- 🎯 **React** только для главной страницы
|
||||
- 🔌 **Express stubs** из `./stubs/api` работают как раньше!
|
||||
- 🗜️ **Легкий bundle** terms.html (13 KB + 1.5 KB CSS, **без JS!**)
|
||||
- **Landing** (`/`) - Tatar Punk landing page - AI agents for business automation
|
||||
- **Terms** (`/terms.html`) - User agreement and terms of service
|
||||
|
||||
## 📦 Установка
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
root/
|
||||
src/
|
||||
html/ # Source Pug templates
|
||||
index.pug # Landing template
|
||||
terms.pug # Terms template
|
||||
styles/ # SCSS stylesheets
|
||||
landing.scss # Landing styles
|
||||
terms.scss # Terms styles
|
||||
index.html # Entry point wrapper for landing
|
||||
terms.html # Entry point wrapper for terms
|
||||
vite.config.ts # Vite config with custom Pug plugin
|
||||
dist/ # Production build (auto-generated)
|
||||
index.html # Built landing page
|
||||
terms.html # Built terms page
|
||||
*.css # Compiled stylesheets
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm start # Start dev server on http://localhost:8099
|
||||
npm run dev # Same as start
|
||||
```
|
||||
|
||||
## 🛠️ Разработка
|
||||
Open in browser:
|
||||
- http://localhost:8099/ - Landing page
|
||||
- http://localhost:8099/terms.html - Terms page
|
||||
|
||||
## Build
|
||||
|
||||
```bash
|
||||
npm start # Dev сервер на http://localhost:8099
|
||||
npm run build:prod # Production build
|
||||
```
|
||||
|
||||
## 🏗️ Сборка
|
||||
Output goes to `dist/` directory with CDN-ready paths.
|
||||
|
||||
```bash
|
||||
npm run build # Production сборка в ./dist
|
||||
npm run preview # Просмотр production сборки
|
||||
```
|
||||
## Technologies
|
||||
|
||||
## 📄 Страницы
|
||||
- **Vite** - Fast build tool with custom Pug plugin
|
||||
- **Pug** - Template engine for HTML
|
||||
- **SCSS** - Styling with modern features
|
||||
- **Static pages** - Pure static HTML output, perfect for SEO
|
||||
- **Multi-page** - Multiple static pages support
|
||||
|
||||
### Главная `/`
|
||||
- **React** приложение с анимацией Lottie
|
||||
- Динамическая страница "В разработке"
|
||||
- Dev: `http://localhost:8099/`
|
||||
- Prod: `brojs.ru/` → загружает JS с `https://static.brojs.ru/landing/main/`
|
||||
## How it works
|
||||
|
||||
### Terms `/terms`
|
||||
- `/terms` → автоматический редирект на `/terms.html`
|
||||
- **Чистый HTML** без JavaScript
|
||||
- Полный текст пользовательского соглашения
|
||||
- SEO-оптимизирован
|
||||
- Адаптивный дизайн
|
||||
- Dev: `http://localhost:8099/terms`
|
||||
- Prod: `brojs.ru/terms` → загружает CSS с `https://static.brojs.ru/landing/main/`
|
||||
1. Edit `.pug` templates in `src/html/`
|
||||
2. Vite's custom plugin compiles Pug to HTML
|
||||
3. SCSS is compiled to CSS
|
||||
4. Production build outputs static HTML + CSS files
|
||||
|
||||
## 🔌 API Stubs
|
||||
|
||||
Создавай заглушки API в `./stubs/api/`:
|
||||
|
||||
```javascript
|
||||
// stubs/api/test.js → /api/test
|
||||
module.exports = (req, res) => {
|
||||
res.json({ message: 'Hello from stub!' });
|
||||
};
|
||||
```
|
||||
|
||||
```javascript
|
||||
// stubs/api/user.js → /api/user
|
||||
module.exports.default = {
|
||||
id: 1,
|
||||
name: 'John Doe'
|
||||
};
|
||||
```
|
||||
|
||||
Примеры:
|
||||
- `http://localhost:8099/api/test`
|
||||
- `http://localhost:8099/api/user`
|
||||
|
||||
## 🎨 Стилизация
|
||||
|
||||
### CSS Modules (для React компонентов)
|
||||
```typescript
|
||||
import 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
|
||||
|
||||
## 🗂️ Структура
|
||||
|
||||
```
|
||||
bro.landing/
|
||||
├── index.html # Entry для главной
|
||||
├── terms.html # Entry для Terms (статика)
|
||||
├── vite.config.ts # Конфигурация Vite
|
||||
├── src/
|
||||
│ ├── index.tsx # React entry
|
||||
│ ├── app.tsx # React App
|
||||
│ ├── dashboard.tsx # Роутинг
|
||||
│ ├── pages/
|
||||
│ │ └── under-construction/
|
||||
│ └── styles/
|
||||
│ ├── main.module.scss # CSS Modules для React
|
||||
│ └── terms.scss # SCSS для Terms
|
||||
├── stubs/
|
||||
│ └── api/
|
||||
│ ├── test.js # Пример: GET /api/test
|
||||
│ └── user.js # Пример: GET /api/user
|
||||
└── dist/ # Build output
|
||||
├── index.html # Главная
|
||||
├── main.[hash].js # React bundle
|
||||
├── terms.html # Terms статика
|
||||
└── terms.[hash].css # Terms стили
|
||||
```
|
||||
|
||||
## 🌐 Деплой
|
||||
|
||||
### Production URLs
|
||||
После `npm run build` и деплоя:
|
||||
- **Главная**: `brojs.ru/` → `dist/index.html`
|
||||
- JS: `https://static.brojs.ru/landing/main/main.[hash].js`
|
||||
- **Terms**: `brojs.ru/terms` → `dist/terms.html`
|
||||
- CSS: `https://static.brojs.ru/landing/main/terms.[hash].css`
|
||||
|
||||
### Vite автоматически подставляет CDN пути
|
||||
В `vite.config.ts`:
|
||||
```typescript
|
||||
base: isProd
|
||||
? 'https://static.brojs.ru/landing/main/' // Production
|
||||
: '/' // Dev
|
||||
```
|
||||
|
||||
Vite **автоматически** заменит все пути к ассетам на CDN URL в production!
|
||||
|
||||
## 🔧 Технологии
|
||||
|
||||
### Core
|
||||
- **Vite 7** - молниеносная сборка
|
||||
- **React 18** - только для динамических частей
|
||||
- **TypeScript** - типизация
|
||||
- **SCSS** - препроцессор
|
||||
- **CSS Modules** - изоляция стилей
|
||||
|
||||
### Библиотеки
|
||||
- **React Router DOM** - клиентский роутинг
|
||||
- **Lottie React** - анимации
|
||||
|
||||
### Dev зависимости
|
||||
- **@vitejs/plugin-react** - React Fast Refresh
|
||||
- **sass** - компиляция SCSS
|
||||
|
||||
## ⚡ Почему Vite?
|
||||
|
||||
- 🚀 **Мгновенный запуск** (HMR из коробки)
|
||||
- ⚡ **Быстрая сборка** (esbuild + Rollup)
|
||||
- 🎯 **Простая конфигурация** (70 строк vs 500+)
|
||||
- 📦 **Меньше зависимостей**
|
||||
- 🔥 **Современный стандарт**
|
||||
|
||||
## 📚 Документация
|
||||
|
||||
Полная документация в [cloud.md](./cloud.md)
|
||||
|
||||
---
|
||||
|
||||
**Простота + Скорость + Мощь!** 🎉
|
||||
|
||||
Reference in New Issue
Block a user