# 📝 Развёртывание системы блогов - Ospabhost 8.1

## Обзор изменений

Добавлена полная система блогов с:
- Публичными страницами (`/blog`, `/blog/:url`)
- Админской панелью управления (`/dashboard/blog`)
- Rich Text редактором (Quill.js)
- Системой комментариев с модерацией
- Загрузкой изображений

---

## 🗂 Структура новых файлов

### Backend

```
backend/
├── src/
│   └── modules/
│       └── blog/
│           ├── blog.controller.ts      # API эндпоинты (посты, комментарии)
│           ├── blog.routes.ts          # Маршруты + multer для загрузки
│           └── upload.controller.ts    # Загрузка/удаление изображений
├── uploads/
│   └── blog/                           # Директория для изображений блога
└── prisma/
    └── schema.prisma                   # Обновлено: модели Post, Comment
```

### Frontend

```
frontend/
├── src/
│   └── pages/
│       ├── blog.tsx                    # Публичная страница списка статей
│       ├── blogpost.tsx                # Публичная страница статьи
│       └── dashboard/
│           ├── blogadmin.tsx           # Админ-панель блога
│           └── mainpage.tsx            # Обновлено: добавлена вкладка "📝 Блог"
└── package.json                        # Обновлено: react-quill, quill
```

---

## 🚀 Шаги развёртывания на сервере

### 1. Подготовка локального окружения

```bash
# В корне проекта
cd ospabhost/frontend
npm install  # Установка react-quill и зависимостей
npm run build

cd ../backend
npm install
```

### 2. Создание директории для изображений

На сервере создайте директорию:

```bash
mkdir -p /var/www/ospab-host/ospabhost/backend/uploads/blog
chmod 755 /var/www/ospab-host/ospabhost/backend/uploads/blog
```

### 3. Применение миграции базы данных

**На сервере** выполните:

```bash
cd /var/www/ospab-host/ospabhost/backend

# Применить миграции
npx prisma migrate deploy

# Регенерировать Prisma Client
npx prisma generate
```

### 4. Обновление кода на сервере

Загрузите обновленные файлы через Git или SFTP:

**Новые файлы:**
- `backend/src/modules/blog/blog.controller.ts`
- `backend/src/modules/blog/blog.routes.ts`
- `backend/src/modules/blog/upload.controller.ts`
- `frontend/src/pages/blog.tsx`
- `frontend/src/pages/blogpost.tsx`
- `frontend/src/pages/dashboard/blogadmin.tsx`

**Изменённые файлы:**
- `backend/src/index.ts` (добавлены маршруты `/api/blog`, раздача `/uploads/blog`)
- `backend/prisma/schema.prisma` (модели Post, Comment)
- `frontend/src/App.tsx` (маршруты `/blog`, `/blog/:url`)
- `frontend/src/pages/dashboard/mainpage.tsx` (вкладка "📝 Блог")

### 5. Сборка backend

```bash
cd /var/www/ospab-host/ospabhost/backend
npm run build
```

### 6. Перезапуск backend

```bash
pm2 restart ospab-backend
pm2 logs ospab-backend  # Проверка логов
```

### 7. Сборка и деплой frontend

```bash
cd /var/www/ospab-host/ospabhost/frontend
npm run build

# Копирование в директорию Nginx
cp -r dist/* /var/www/ospab-host/frontend/
```

### 8. Проверка прав доступа

```bash
# Права на директорию uploads
chown -R www-data:www-data /var/www/ospab-host/ospabhost/backend/uploads/blog
chmod -R 755 /var/www/ospab-host/ospabhost/backend/uploads/blog

# Права на frontend
chown -R www-data:www-data /var/www/ospab-host/frontend/
```

---

## ✅ Проверка работоспособности

### 1. Проверка API эндпоинтов

```bash
# Проверка публичного списка постов (должно вернуть пустой массив)
curl https://ospab.host:5000/api/blog/posts

# Проверка админского доступа (требуется токен)
curl -H "Authorization: Bearer YOUR_TOKEN" \
     https://ospab.host:5000/api/blog/admin/posts
```

### 2. Проверка frontend

Откройте в браузере:
- `https://ospab.host/blog` - список статей
- `https://ospab.host/dashboard/blog` - админ-панель (требуется вход как админ)

### 3. Проверка загрузки изображений

1. Войдите как супер-админ
2. Откройте `/dashboard/blog`
3. Нажмите "➕ Создать статью"
4. В редакторе нажмите кнопку изображения
5. Загрузите изображение
6. Проверьте, что изображение вставилось в редактор

---

## 🔧 Настройка Nginx (если требуется)

Если раздача изображений не работает, добавьте в конфиг Nginx:

```nginx
location /uploads/blog {
    alias /var/www/ospab-host/ospabhost/backend/uploads/blog;
    access_log off;
    expires 30d;
    add_header Cache-Control "public, immutable";
}
```

После изменений:

```bash
nginx -t
systemctl reload nginx
```

---

## 📊 Структура базы данных

### Модель Post

```prisma
model Post {
  id          Int       @id @default(autoincrement())
  title       String
  content     String    @db.Text
  excerpt     String?   @db.Text
  coverImage  String?
  url         String    @unique
  status      String    @default("draft")
  views       Int       @default(0)
  authorId    Int
  author      User      @relation(fields: [authorId], references: [id])
  comments    Comment[]
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
  publishedAt DateTime?
}
```

### Модель Comment

```prisma
model Comment {
  id         Int      @id @default(autoincrement())
  postId     Int
  post       Post     @relation(fields: [postId], references: [id], onDelete: Cascade)
  userId     Int?
  user       User?    @relation(fields: [userId], references: [id])
  authorName String?
  content    String   @db.Text
  status     String   @default("pending")
  createdAt  DateTime @default(now())
}
```

---

## 🎯 Функциональность

### Публичная часть

- **`/blog`** - Список опубликованных статей с превью
- **`/blog/:url`** - Полная статья с комментариями
- Отправка комментариев (авторизованные и гости)
- Счётчик просмотров

### Админ-панель (`/dashboard/blog`)

#### Вкладка "Статьи"
- Список всех статей (черновики, опубликованные, архив)
- Создание новой статьи
- Редактирование существующих
- Удаление с подтверждением
- Rich Text редактор с:
  - Форматирование текста (жирный, курсив, подчёркнутый, зачёркнутый)
  - Заголовки (H1-H6)
  - Выбор шрифта и размера
  - Цвет текста и фона
  - Списки (маркированные, нумерованные)
  - Выравнивание
  - Ссылки, изображения, видео
- Загрузка обложки (URL)
- Загрузка изображений в контент (через кнопку в редакторе)
- Выбор кастомного URL (не автоматический slug)
- Управление статусом (черновик/опубликовано/архив)

#### Вкладка "Комментарии"
- Список всех комментариев
- Модерация (одобрение/отклонение)
- Удаление спама
- Показ связанной статьи
- Отображение автора (зарегистрированный или гость)

---

## 🔒 Права доступа

- **Публичные страницы** - доступны всем
- **Отправка комментариев** - доступна всем (гости вводят имя)
- **Админ-панель блога** - только для `user.isAdmin === true`
- **Модерация комментариев** - только для админов
- **Создание/редактирование постов** - только для админов

---

## 📝 Использование

### Создание первой статьи

1. Войдите как супер-админ
2. Откройте `/dashboard/blog`
3. Нажмите "➕ Создать статью"
4. Заполните:
   - **Заголовок**: "Добро пожаловать в наш блог!"
   - **URL**: `welcome` (статья будет доступна по `/blog/welcome`)
   - **Краткое описание**: "Первая статья нашего блога"
   - **Обложка**: `https://images.unsplash.com/photo-1499750310107-5fef28a66643`
   - **Содержание**: Напишите текст, используя Rich Text редактор
   - **Статус**: "Опубликовано"
5. Нажмите "Создать статью"

### Модерация комментариев

1. Откройте `/dashboard/blog`
2. Перейдите на вкладку "Комментарии"
3. Комментарии со статусом "На модерации" можно:
   - ✅ Одобрить (появятся на сайте)
   - ❌ Отклонить (скрыты, но не удалены)
   - 🗑️ Удалить (полное удаление)

---

## 🐛 Возможные проблемы

### Проблема: "post and comment are not properties of PrismaClient"

**Решение:**
```bash
cd /var/www/ospab-host/ospabhost/backend
npx prisma generate
npm run build
pm2 restart ospab-backend
```

### Проблема: Изображения не загружаются

**Проверьте:**
1. Права на директорию `backend/uploads/blog` (должно быть `755`)
2. Nginx раздаёт `/uploads/blog` (см. конфиг выше)
3. В логах backend нет ошибок multer

**Проверка:**
```bash
# Проверка прав
ls -la /var/www/ospab-host/ospabhost/backend/uploads/blog

# Проверка логов
pm2 logs ospab-backend --lines 50
```

### Проблема: Вкладка "📝 Блог" не появляется в админ-панели

**Причины:**
- Пользователь не является супер-админом (`isAdmin !== true`)
- Frontend не пересобран после изменений

**Решение:**
```bash
cd /var/www/ospab-host/ospabhost/frontend
npm run build
cp -r dist/* /var/www/ospab-host/frontend/
```

### Проблема: Rich Text редактор не загружается

**Причина:** `react-quill` не установлен

**Решение:**
```bash
cd /var/www/ospab-host/ospabhost/frontend
npm install react-quill quill --legacy-peer-deps
npm run build
```

---

## 📦 Зависимости

### Backend
- `multer` (уже установлен)
- `express` (уже установлен)
- `prisma` (уже установлен)

### Frontend
- `react-quill@2.0.0` ✅ УСТАНОВЛЕНО
- `quill` ✅ УСТАНОВЛЕНО

---

## 🎨 Кастомизация

### Изменение лимита размера изображений

В `backend/src/modules/blog/blog.routes.ts`:

```typescript
const upload = multer({
  storage: storage,
  limits: {
    fileSize: 10 * 1024 * 1024 // Измените на нужное значение (в байтах)
  },
  // ...
});
```

### Добавление поддержки других форматов

В `backend/src/modules/blog/blog.routes.ts`:

```typescript
fileFilter: function (req, file, cb) {
  const allowedTypes = /jpeg|jpg|png|gif|webp|svg/; // Добавьте нужные форматы
  // ...
}
```

### Настройка панели инструментов Quill

В `frontend/src/pages/dashboard/blogadmin.tsx` (переменная `quillModules`):

```typescript
const quillModules = {
  toolbar: {
    container: [
      // Добавьте/удалите нужные кнопки
      [{ 'header': [1, 2, 3, false] }],
      ['bold', 'italic', 'underline'],
      // ...
    ],
    // ...
  }
};
```

---

## 📚 API эндпоинты

### Публичные

- `GET /api/blog/posts` - Список опубликованных постов
- `GET /api/blog/posts/:url` - Пост по URL
- `POST /api/blog/posts/:postId/comments` - Добавить комментарий

### Админские (требуется токен + isAdmin)

- `GET /api/blog/admin/posts` - Все посты
- `POST /api/blog/admin/posts` - Создать пост
- `PUT /api/blog/admin/posts/:id` - Обновить пост
- `DELETE /api/blog/admin/posts/:id` - Удалить пост
- `POST /api/blog/admin/upload-image` - Загрузить изображение
- `DELETE /api/blog/admin/images/:filename` - Удалить изображение
- `GET /api/blog/admin/comments` - Все комментарии
- `PATCH /api/blog/admin/comments/:id` - Модерировать комментарий
- `DELETE /api/blog/admin/comments/:id` - Удалить комментарий

---

## ✨ Готово!

После выполнения всех шагов система блогов будет полностью функциональной. Если возникнут проблемы, проверьте логи:

```bash
# Логи backend
pm2 logs ospab-backend

# Логи Nginx
tail -f /var/log/nginx/error.log
```

---

**Дата создания:** 01.11.2025  
**Версия:** 1.0.0  
**Автор:** GitHub Copilot