145 lines
7.4 KiB
Markdown
145 lines
7.4 KiB
Markdown
|
|
# Astro Redi
|
|||
|
|
|
|||
|
|
Монорепозиторий образовательной платформы Redi с курсами и материалами для обучения.
|
|||
|
|
|
|||
|
|
## Описание проекта
|
|||
|
|
|
|||
|
|
Проект представляет собой полнофункциональное веб-приложение с разделением на frontend и backend части:
|
|||
|
|
|
|||
|
|
- **Frontend**: Современное SSR-приложение на Astro с интеграцией SolidJS для интерактивных компонентов
|
|||
|
|
- **Backend**: PocketBase — легковесная backend-платформа для управления данными и аутентификации
|
|||
|
|
|
|||
|
|
## Технологический стек
|
|||
|
|
|
|||
|
|
### Frontend
|
|||
|
|
- **Astro 6** — фреймворк для генерации статических и серверных сайтов
|
|||
|
|
- **SolidJS** — реактивная библиотека для интерактивных компонентов
|
|||
|
|
- **Tailwind CSS** — утилитарный CSS-фреймворк
|
|||
|
|
- **TypeScript** — строгая типизация без использования `any`
|
|||
|
|
- **PocketBase SDK** — клиент для взаимодействия с backend
|
|||
|
|
- **Astro Icon** — работа с иконками
|
|||
|
|
- **Nanostores** — легковесное управление состоянием
|
|||
|
|
- **Sharp** — обработка изображений
|
|||
|
|
|
|||
|
|
### Backend
|
|||
|
|
- **PocketBase** — backend-решение с реальной базой данных и API
|
|||
|
|
|
|||
|
|
## Структура проекта
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
astro_redi/
|
|||
|
|
├── backend/ # Backend на PocketBase
|
|||
|
|
│ ├── pb_data/ # Данные PocketBase (БД, файлы)
|
|||
|
|
│ └── pb_migrations/ # Миграции схемы базы данных
|
|||
|
|
│
|
|||
|
|
├── frontend/ # Frontend на Astro
|
|||
|
|
│ ├── public/ # Статические файлы
|
|||
|
|
│ ├── src/
|
|||
|
|
│ │ ├── assets/ # Изображения, шрифты и другие ассеты
|
|||
|
|
│ │ ├── components/ # UI-компоненты
|
|||
|
|
│ │ │ ├── about/ # Компоненты страницы "О компании"
|
|||
|
|
│ │ │ ├── base/ # Базовые компоненты
|
|||
|
|
│ │ │ ├── blog/ # Компоненты блога
|
|||
|
|
│ │ │ ├── courses/ # Компоненты курсов
|
|||
|
|
│ │ │ ├── home/ # Компоненты главной страницы
|
|||
|
|
│ │ │ ├── layout/ # Компоненты макета (header, footer)
|
|||
|
|
│ │ │ └── projects/ # Компоненты проектов
|
|||
|
|
│ │ ├── icons/ # Иконки приложения
|
|||
|
|
│ │ ├── layouts/ # Макеты страниц
|
|||
|
|
│ │ ├── lib/ # Утилиты и вспомогательные функции
|
|||
|
|
│ │ ├── pages/ # Страницы приложения
|
|||
|
|
│ │ │ ├── api/ # API endpoints
|
|||
|
|
│ │ │ ├── blog/ # Страницы блога
|
|||
|
|
│ │ │ ├── courses/ # Страницы курсов
|
|||
|
|
│ │ │ └── projects/ # Страницы проектов
|
|||
|
|
│ │ ├── stores/ # Хранилища состояния (Nanostores)
|
|||
|
|
│ │ ├── env.d.ts # TypeScript декларации для окружения
|
|||
|
|
│ │ └── globalInterfaces.ts # Глобальные TypeScript интерфейсы
|
|||
|
|
│ ├── astro.config.mjs # Конфигурация Astro
|
|||
|
|
│ ├── tailwind.config.mjs # Конфигурация Tailwind CSS
|
|||
|
|
│ └── tsconfig.json # Конфигурация TypeScript
|
|||
|
|
│
|
|||
|
|
├── scripts/ # Скрипты для разработки и сборки
|
|||
|
|
│ ├── dev-server.js # Скрипт запуска frontend и backend
|
|||
|
|
│ └── stop-server.js # Скрипт остановки серверов
|
|||
|
|
│
|
|||
|
|
├── package.json # Корневой package.json
|
|||
|
|
└── QWEN.md # Правила разработки проекта
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Страницы приложения
|
|||
|
|
|
|||
|
|
- **Главная** (`/`) — основная страница с информацией о платформе
|
|||
|
|
- **О компании** (`/about`) — информация о платформе Redi
|
|||
|
|
- **Курсы** (`/courses`) — каталог образовательных курсов
|
|||
|
|
- Страница курса (`/courses/[slug]`) — детальная информация о курсе
|
|||
|
|
- **Проекты** (`/projects`) — выполненные проекты
|
|||
|
|
- **Блог** (`/blog`) — статьи и публикации
|
|||
|
|
|
|||
|
|
## Архитектурные особенности
|
|||
|
|
|
|||
|
|
- **SSR (Server-Side Rendering)** — рендеринг на стороне сервера через Node.js adapter
|
|||
|
|
- **Компонентный подход** — разделение компонентов по функциональным областям
|
|||
|
|
- **Строгая типизация** — TypeScript без использования `any`, все интерфейсы в `globalInterfaces.ts`
|
|||
|
|
- **Модульность** — алиасы импортов для удобной навигации по коду
|
|||
|
|
- **SEO-оптимизация** — интеграция `@astrojs/sitemap` для индексации
|
|||
|
|
- **Обработка контента** — утилита `processHtmlContent` для обработки HTML-контента из PocketBase
|
|||
|
|
- **Адаптивная верстка** — Tailwind CSS с типографикой
|
|||
|
|
|
|||
|
|
## Установка и запуск
|
|||
|
|
|
|||
|
|
### Требования
|
|||
|
|
- **Bun** — пакетный менеджер и рантайм
|
|||
|
|
- **PocketBase** — для запуска backend
|
|||
|
|
|
|||
|
|
### Установка зависимостей
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
bun run install:all
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Запуск в режиме разработки
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# Запуск обоих серверов (frontend + backend)
|
|||
|
|
bun run dev
|
|||
|
|
|
|||
|
|
# Или раздельно:
|
|||
|
|
bun run frontend # Только frontend
|
|||
|
|
bun run backend # Только backend
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Сборка проекта
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
bun run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Форматирование и линтинг
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
bun run format # Форматирование кода через Biome
|
|||
|
|
bun run lint # Проверка кода через Biome
|
|||
|
|
bun run lint:fix # Автоматическое исправление ошибок
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Инфраструктура
|
|||
|
|
|
|||
|
|
- **Bun** — пакетный менеджер и рантайм
|
|||
|
|
- **Biome** — линтер и форматтер кода
|
|||
|
|
- **Git** — система контроля версий
|
|||
|
|
- **Node.js adapter** — для запуска SSR в режиме standalone
|
|||
|
|
|
|||
|
|
## Переменные окружения
|
|||
|
|
|
|||
|
|
Основная переменная окружения:
|
|||
|
|
|
|||
|
|
- `PUBLIC_SITE_URL` — URL сайта для sitemap (по умолчанию `https://redib.ru`)
|
|||
|
|
|
|||
|
|
## Ссылки
|
|||
|
|
|
|||
|
|
- [Документация Astro](https://docs.astro.build/en/getting-started/)
|
|||
|
|
- [Документация PocketBase](https://pocketbase.io/docs/)
|
|||
|
|
- [Документация SolidJS](https://docs.solidjs.com/solid-start/getting-started)
|
|||
|
|
- [Документация Astro Icon](https://www.astroicon.dev/getting-started/)
|