astro_redi/frontend/README.md

# Astro Frontend для Redi.dev

Современный веб-сайт-портфолио, разработанный на Astro с использованием PocketBase в качестве CMS.

## 🚀 Стек технологий

- **Astro 6** - фреймворк для создания быстрых сайтов
- **TypeScript** - строгая типизация
- **Tailwind CSS** - стилизация
- **Solid.js** - реактивные компоненты
- **PocketBase** - headless CMS и бэкенд
- **Bun** - пакетный менеджер и рантайм
- **Nanostores** - управление состоянием

## 📁 Структура проекта

```
astro_redi/
├── .env                    # Переменные окружения (в корне проекта!)
├── frontend/               # Исходный код frontend части
│   ├── public/             # Статические файлы
│   ├── src/
│   │   ├── assets/         # Стили, изображения
│   │   ├── components/     # Astro и Solid.js компоненты
│   │   ├── layouts/        # Макеты страниц
│   │   ├── lib/            # Вспомогательные библиотеки (PocketBase клиент)
│   │   ├── pages/          # Страницы приложения
│   │   └── globalInterfaces.ts  # Глобальные TypeScript интерфейсы
│   ├── astro.config.mjs    # Конфигурация Astro
│   ├── package.json        # Зависимости
│   └── tsconfig.json       # Конфигурация TypeScript
├── astro_redidev/          # Резервная копия старой версии
├── backend/                # Бэкенд часть (если есть)
└── scripts/
    └── dev-server.js       # Скрипт запуска локальных серверов
```

## ⚙️ Переменные окружения

Файл `.env` должен находиться в **корне проекта** (`astro_redi/.env`):

```env
# Локальная разработка
PUBLIC_SITE_URL=http://localhost:4321
PUBLIC_POCKETBASE_URL=http://127.0.0.1:8090

# Продакшен (раскомментировать при деплое)
# PUBLIC_SITE_URL=https://redib.ru
# PUBLIC_POCKETBASE_URL=http://pocketbase-y8oskk4kgkgko0s88c8c4oo0.144.124.229.64.sslip.io:8080
```

## 🛠️ Установка и запуск

### Требования

- **Bun** (рекомендуется) или Node.js 22+
- **PocketBase** (локально или удалённо)

### Локальная разработка

1. **Установите зависимости:**
   ```bash
   bun install
   ```

2. **Запустите PocketBase:**
   ```bash
   # PocketBase должен быть запущен на порту 8090
   # Используйте скрипт dev-server.js для одновременного запуска
   node scripts/dev-server.js
   ```

3. **Откройте браузер:**
   - Astro: http://localhost:4321
   - PocketBase Admin: http://localhost:8090/_/

### Сборка для продакшена

```bash
bun run build
```

### Продакшен запуск

```bash
bun run start
```

## 📊 Коллекции PocketBase

Проект использует следующие коллекции:

| Коллекка | Описание | Поля |
|----------|----------|------|
| `projects` | Проекты портфолио | `name`, `description`, `short_description`, `long_description`, `stack`, `image`, `url_site`, `github`, `order`, `isActive` |
| `featured_projects` | Избранные проекты | `name`, `description`, `image`, `url`, `github`, `stack`, `featured`, `forSale`, `order`, `isActive` |
| `posts` | Блог | `title`, `description`, `publishDate`, `tags`, `coverImage`, `coverImageAlt`, `isFeatured`, `isActive` |
| `about` | Информация об авторе | `title`, `description`, `professional_experience`, `skills`, `contact_title`, `contact_description`, `whatsapp_link`, `email`, `image`, `alt_text`, `isActive` |
| `navigation` | Навигация сайта | `items` (JSON) |

## 🌐 Изображения из PocketBase

Изображения загружаются напрямую из PocketBase по URL:

```
{PUBLIC_POCKETBASE_URL}/api/files/{collection_id}/{record_id}/{filename}
```

Пример:
```
http://127.0.0.1:8090/api/files/projects/t7i08mbfzuzp6e6/tech_news_ncqktq5j8r.avif
```

## 📦 Деплой

### В Coolify

Проект настроен для деплоя в Coolify с использованием адаптера `@astrojs/node`:

1. Укажите переменные окружения в Coolify:
   - `COOLIFY_FQDN` — домен приложения
   - `COOLIFY_URL` — URL приложения
   - `PUBLIC_SITE_URL` — публичный URL сайта
   - `PUBLIC_POCKETBASE_URL` — URL PocketBase

2. Команды сборки и запуска:
   - Build: `bun run build`
   - Start: `bun run start`
   - Install: `bun install`

### Другие платформы

Проект совместим с:
- Vercel
- Netlify
- Cloudflare Pages
- Любые VPS с Node.js/Bun

## 🔧 Скрипты

| Команда | Описание |
|---------|----------|
| `bun install` | Установка зависимостей |
| `bun run dev` | Запуск режима разработки |
| `bun run build` | Сборка проекта |
| `bun run start` | Запуск продакшен версии |
| `bun run astro check` | Проверка типов TypeScript |

## 📝 Особенности реализации

- **SSR (Server-Side Rendering)** — динамические страницы рендерятся на сервере
- **Статическая генерация** — пагинация проектов генерируется при сборке
- **Оптимизация изображений** — ленивая загрузка, правильные размеры
- **SEO** — sitemap, метатеги, семантическая разметка
- **Тёмная тема** — автоматическое переключение по системным настройкам
- **Адаптивный дизайн** — мобильная версия, планшет, десктоп

## 👨‍💻 Автор

**RediBedi** — веб-разработчик, специализирующийся на Astro и современных frontend технологиях.

- Портфолио: [redib.ru](https://redib.ru)
- GitHub: [RediBedi](https://github.com/RediBedi)