diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..cd41870 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "i18n-ally.localesPaths": [ + "locales" + ] +} \ No newline at end of file diff --git a/cloud.md b/cloud.md new file mode 100644 index 0000000..0ec304b --- /dev/null +++ b/cloud.md @@ -0,0 +1,424 @@ +# ☁️ BROJS.RU Landing - Полная документация + +## 📋 Оглавление + +1. [Обзор проекта](#обзор-проекта) +2. [Структура проекта](#структура-проекта) +3. [Static Site Generation (SSG)](#static-site-generation-ssg) +4. [Страница пользовательского соглашения](#страница-пользовательского-соглашения) +5. [Команды и скрипты](#команды-и-скрипты) +6. [Технологии](#технологии) +7. [Deployment](#deployment) + +--- + +## Обзор проекта + +**BROJS.RU Landing** - это статический лендинг платформы обучения фронтенд-разработке на базе React + SSG. + +### Особенности: + +✅ **React 18** с TypeScript +✅ **Static Site Generation** - HTML вкомпилирован для SEO +✅ **Chakra UI** - современный UI framework +✅ **i18next** - мультиязычность (ru/en) +✅ **React Router** - клиентский роутинг +✅ **Hydration** - гидратация статического контента + +### Страницы: + +- **`/`** - главная страница "в разработке" +- **`/terms`** - пользовательское соглашение (полное, SEO-оптимизировано) + +--- + +## Структура проекта + +``` +bro.landing/ +├── src/ +│ ├── pages/ +│ │ ├── under-construction/ # Главная страница +│ │ ├── terms/ # Пользовательское соглашение +│ │ └── index.ts # Экспорт страниц +│ ├── app.tsx # Root компонент +│ ├── dashboard.tsx # Роутинг +│ ├── index.tsx # Entry point + hydration +│ └── index.ejs # HTML шаблон +├── scripts/ +│ ├── prerender-multi.js # ⭐ Основной SSG скрипт +│ └── ssr-prerender.js # Альтернативный SSR +├── dist/ # Сборка (генерируется) +│ ├── index.html # Главная (SSG) +│ ├── terms.html # Соглашение (SSG) +│ └── index.js # React bundle +├── package.json +└── cloud.md # 📚 Эта документация +``` + +--- + +## Static Site Generation (SSG) + +### Как работает? + +1. **Webpack** собирает React → `dist/index.js` +2. **Скрипт `prerender-multi.js`** автоматически: + - Читает `dist/index.html` (пустой шаблон) + - Вставляет статический контент в `
` + - Генерирует `dist/terms.html` из `terma.md` +3. **React hydration** при загрузке оживляет статический HTML + +### Преимущества SSG: + +- 🚀 **Быстрая загрузка** - контент виден до загрузки JS +- 🔍 **SEO** - поисковики индексируют полный HTML +- ♿ **Доступность** - работает без JavaScript +- 📊 **Метрики** - улучшенные FCP и LCP + +### Hydration в index.tsx: + +```typescript +const hasPrerenderedContent = MOUNT_NODE.hasChildNodes(); + +if (hasPrerenderedContent) { + hydrateRoot(MOUNT_NODE,${line}
`; + html += '${processedLine}
`; + } + + if (inList) { + html += ''; + } + + // Footer + html += '© 2025 BROJS.RU. Все права защищены.
'; + html += 'Страница загружается...
+