StandartSoft Plus

Сайт-визитка студии разработки мобильного программного обеспечения с функциями привлечения клиентов и интерактивного взаимодействия.

Production: https://standartsoftplus.com
Альтернативный URL: https://abutorov.github.io/StandartSoftPlus/

Технологии

• Framework: Astro 5.16.6
• UI: React 19.2.3
• Styling: TailwindCSS 4.1.18
• Forms: Web3Forms API (email уведомления)
• Notifications: Cloudflare Workers + Telegram Bot (мгновенные уведомления)
• Runtime: Bun 1.x
• Deployment: GitHub Pages + Cloudflare DNS
• Dev Environment: Docker + DevContainer (macOS Apple Silicon)

Возможности

• ✅ Адаптивный дизайн с glassmorphism эффектами
• ✅ Интерактивная контактная форма с двойной отправкой (email + Telegram)
• ✅ Мгновенные уведомления в Telegram при получении заявки
• ✅ Портфолио проектов через Content Collections
• ✅ Автоматический деплой на GitHub Pages с кастомным доменом
• ✅ HMR (Hot Module Replacement) в разработке
• ✅ Плавающая навигация с auto-hide
• ✅ SEO оптимизация

Требования

• macOS (Apple M1/M2/M3)
• Docker Desktop
• VSCode с расширением Dev Containers
• Git
• Web3Forms API ключ (для email уведомлений)
• Telegram Bot + Cloudflare Worker (для мгновенных уведомлений)

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

Локальная разработка (DevContainer) — рекомендуется

1. Открыть проект в VSCode
2. Выполнить команду: Dev Containers: Reopen in Container
3. Создать .env файл с ключами:

cat > .env << EOF
PUBLIC_WEB3FORMS_KEY=ваш_web3forms_ключ
PUBLIC_TELEGRAM_WORKER_URL=https://telegram-notifier.standartsoftplus.workers.dev
EOF

4. Дождаться автоматической установки зависимостей

Сервер запускается автоматически на http://localhost:4321

Альтернативный запуск (Docker Compose)

# Создайте .env файл
cat > .env << EOF
PUBLIC_WEB3FORMS_KEY=ваш_ключ_здесь
PUBLIC_TELEGRAM_WORKER_URL=ваш_worker_url
EOF

# Запустите контейнер
docker compose up

Запуск без Docker

# Установите зависимости
bun install

# Создайте .env файл
cat > .env << EOF
PUBLIC_WEB3FORMS_KEY=ваш_ключ_здесь
PUBLIC_TELEGRAM_WORKER_URL=ваш_worker_url
EOF

# Запустите dev-сервер
bun dev

Команды

Команда	Описание
bun dev	Запуск dev-сервера с HMR
bun build	Сборка продакшн-версии
bun preview	Предпросмотр собранной версии
./clean-install.sh	Очистка кеша и переустановка зависимостей

Настройка уведомлений

Web3Forms (email уведомления)

Получение API ключа

1. Зарегистрируйтесь на https://web3forms.com/
2. Создайте новую форму и получите Access Key
3. Укажите email, куда будут приходить заявки

Локальная настройка

echo "PUBLIC_WEB3FORMS_KEY=ваш_ключ_из_web3forms" >> .env

Production настройка

1. Откройте: https://github.com/abutorov/StandartSoftPlus/settings/secrets/actions
2. Создайте секрет:
   • Name: PUBLIC_WEB3FORMS_KEY
   • Value: ваш ключ из Web3Forms

Telegram уведомления (мгновенные)

Контактная форма отправляет уведомления в Telegram через Cloudflare Worker.

Преимущества:

• ⚡ Мгновенное получение заявок
• 📱 Уведомления на несколько устройств
• 🆓 100% бесплатно (до 100,000 запросов/день)
• 🌍 Работает из любой точки мира

Полная инструкция: telegram_bot/TELEGRAM_SETUP.md

Быстрая настройка:

1. Создать Telegram бота через @BotFather
2. Развернуть Worker на Cloudflare Workers
3. Добавить переменные в проект:

# Локально (.env)
PUBLIC_TELEGRAM_WORKER_URL=https://telegram-notifier.standartsoftplus.workers.dev

# Production (GitHub Secrets)
PUBLIC_TELEGRAM_WORKER_URL=https://your-worker.workers.dev

Проверка работы уведомлений

Локально:

1. Откройте http://localhost:4321/contacts/
2. Заполните и отправьте форму
3. Проверьте:
   • 📧 Email (Web3Forms)
   • 📱 Telegram (Cloudflare Worker)

Production:

1. Откройте https://standartsoftplus.com/contacts/
2. Заполните и отправьте форму
3. Проверьте оба канала уведомлений

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

├── .devcontainer/           # Конфигурация DevContainer
├── .github/workflows/       # GitHub Actions для CI/CD
│   └── deploy.yml           # Автоматический деплой на GitHub Pages
├── telegram_bot/            # Telegram интеграция
│   ├── worker.js            # Cloudflare Worker код
│   └── TELEGRAM_SETUP.md    # Инструкция по настройке
├── .env                     # Переменные окружения (НЕ коммитить!)
├── .env.example             # Пример .env файла
├── clean-install.sh         # Скрипт очистки и переустановки зависимостей
├── src/
│   ├── components/          # Astro/React компоненты
│   │   ├── FloatingNav.astro    # Плавающая навигация
│   │   ├── ContactFormCard.tsx  # React форма с Telegram интеграцией
│   │   ├── ProjectsList.astro   # Список проектов портфолио
│   │   └── hero.astro           # Hero секция главной страницы
│   ├── content/             # Astro Content Collections
│   ├── layouts/             # Шаблоны страниц
│   ├── pages/               # Роутинг страниц
│   │   ├── contacts/        # Страница контактов с формой
│   │   └── ...
│   └── styles/              # Глобальные стили
├── public/                  # Статические файлы
├── astro.config.mjs         # Конфигурация Astro
├── compose.yaml             # Docker Compose конфигурация
├── brandbook.md             # Брендбук проекта
└── how_add_content.md       # Инструкция по добавлению контента

Контактная форма

Реализована форма с двойной системой уведомлений:

Функции:

• Автофокус на первое поле
• Валидация полей (email, телефон, telegram)
• Динамическая смена типа контакта
• Floating labels анимация
• Демо-режим (без API ключей)
• Graceful degradation (работает даже если один канал недоступен)

Каналы доставки:

1. Email через Web3Forms - надежная доставка
2. Telegram через Cloudflare Worker - мгновенные уведомления

Логика отправки:

• Параллельная отправка в оба канала
• Успех засчитывается если хотя бы один канал сработал
• Ошибка только если оба канала недоступны

Деплой

Проект автоматически публикуется на GitHub Pages при push в ветку main:

• URL: https://standartsoftplus.com
• Альтернативный URL: https://abutorov.github.io/StandartSoftPlus/
• CI/CD: GitHub Actions (.github/workflows/deploy.yml)

Требования для деплоя

GitHub Secrets должны быть настроены:

PUBLIC_WEB3FORMS_KEY          # Email уведомления
PUBLIC_TELEGRAM_WORKER_URL    # Telegram уведомления

Проверить: https://github.com/abutorov/StandartSoftPlus/settings/secrets/actions

Настройка кастомного домена

DNS настройка (Cloudflare)

A-записи для apex домена:

Type	Name	Content	Proxy status
A	@	185.199.108.153	DNS only
A	@	185.199.109.153	DNS only
A	@	185.199.110.153	DNS only
A	@	185.199.111.153	DNS only

CNAME для www:

Type	Name	Content	Proxy status
CNAME	www	abutorov.github.io	DNS only

Решение проблем

Форма контактов не работает

Email не приходит:

1. Проверьте .env: PUBLIC_WEB3FORMS_KEY
2. Проверьте GitHub Secret: PUBLIC_WEB3FORMS_KEY
3. Проверьте спам-папку

Telegram не приходит:

1. Проверьте .env: PUBLIC_TELEGRAM_WORKER_URL
2. Проверьте Cloudflare Worker: https://dash.cloudflare.com
3. Проверьте переменные Worker: TELEGRAM_BOT_TOKEN, TELEGRAM_CHAT_ID_1, TELEGRAM_CHAT_ID_2
4. Проверьте логи Worker: Dashboard → telegram-notifier → Logs

Оба канала не работают:

1. Откройте консоль браузера (F12)
2. Отправьте форму
3. Посмотрите Network tab на ошибки
4. Проверьте CORS (Worker должен возвращать правильные headers)

Демо-режим формы

Если в консоли: "Форма работает в демо-режиме"

Это значит оба API ключа отсутствуют. Добавьте хотя бы один:

• PUBLIC_WEB3FORMS_KEY для email
• PUBLIC_TELEGRAM_WORKER_URL для Telegram

Проблемы с Cloudflare Worker

См. подробную инструкцию: telegram_bot/TELEGRAM_SETUP.md

Безопасность

• ✅ API ключи хранятся в .env (локально) и GitHub Secrets (production)
• ✅ Telegram Bot Token хранится в Cloudflare Worker Secrets
• ✅ .env файл в .gitignore - не попадает в репозиторий
• ✅ Форма валидирует все поля перед отправкой
• ✅ Web3Forms защищает от спама и ботов
• ✅ Cloudflare Worker имеет rate limiting и CORS protection
• ✅ Cloudflare DNS защищает от DDoS атак

Полезные ссылки

• Инструкция по добавлению контента
• Настройка Telegram уведомлений
• Брендбук проекта
• Astro Documentation
• TailwindCSS Documentation
• Web3Forms Documentation
• Cloudflare Workers Documentation
• Telegram Bot API