Compare commits

...

2 Commits

Author SHA1 Message Date
028a69f3ac docs: переработать заголовки и описания разделов
All checks were successful
CI/CD Pipeline / docker (push) Successful in 51s
CI/CD Pipeline / deploy (push) Successful in 9s
- Зафиксированы новые правила в CONTRIBUTING.md: заголовок и описание
  как навигационный маркер, запреты, тесты и подходящие формы
- Описания во всех 26 разделах переписаны как короткий ответ на
  вопрос «когда сюда нужно?»
- Заголовки приведены к самодостаточному виду: SLM Design, SVG-спрайты,
  VS Code, Чистая установка Next.js, Источники данных, Создание
  проекта вручную, Стили, Алиасы импортов
- Описания добавлены в frontmatter (description) для согласованности
  с llms.txt и SEO
- Удалены навигационные ссылки сразу после описания
- Добавлен docs-overview.md — сводный обзор всех страниц
- Обновлён сайдбар: ссылка «Алиасы» → «Алиасы импортов»
2026-04-28 15:35:10 +03:00
a9ea898220 sync (черновик) 2026-04-28 10:52:09 +03:00
46 changed files with 418 additions and 417 deletions

View File

@@ -6,7 +6,7 @@ const sidebar = [
link: '/docs/',
},
{
text: 'Workflow',
text: 'Подсказки',
link: '/docs/workflow',
},
{
@@ -30,21 +30,20 @@ const sidebar = [
],
},
{
text: 'Установка и настройка',
text: 'Создание проекта',
items: [
{
text: 'Создание проекта',
collapsed: true,
items: [
{ text: 'Из шаблона', link: '/docs/setup/project-from-template' },
{ text: 'Вручную', link: '/docs/setup/project-manual' },
],
},
{ text: 'Next.js', link: '/docs/setup/nextjs' },
{ text: 'Алиасы', link: '/docs/setup/aliases' },
{ text: 'Из шаблона', link: '/docs/creating-project/from-template' },
{ text: 'По гайду вручную', link: '/docs/creating-project/manual' },
{ text: 'Чистый Next.js', link: '/docs/creating-project/nextjs' },
],
},
{
text: 'Настройка',
items: [
{ text: 'Алиасы импортов', link: '/docs/setup/aliases' },
{ text: 'Biome', link: '/docs/setup/biome' },
{ text: 'Стили', link: '/docs/setup/styles' },
{ text: 'PostCSS', link: '/docs/setup/postcss' },
{ text: 'Стили', link: '/docs/setup/styles' },
{ text: 'SVG-спрайты', link: '/docs/setup/svg-sprites' },
{ text: 'Шаблоны генерации', link: '/docs/setup/templates' },
{ text: 'VS Code', link: '/docs/setup/vscode' },
@@ -56,36 +55,6 @@ const sidebar = [
{ text: 'Структура проекта', link: '/docs/usage/project-structure' },
{ text: 'Компоненты', link: '/docs/usage/components' },
{ text: 'Страницы (App Router)', link: '/docs/usage/page-level' },
{
text: 'Данные',
collapsed: true,
items: [
{ text: 'Введение', link: '/docs/usage/data/' },
{
text: 'REST',
collapsed: true,
items: [
{
text: 'Клиенты',
collapsed: true,
items: [
{ text: 'Автоматическая генерация', link: '/docs/usage/data/rest/clients/auto' },
{ text: 'Ручная генерация', link: '/docs/usage/data/rest/clients/manual' },
],
},
{
text: 'Получение данных',
collapsed: true,
items: [
{ text: 'Серверные компоненты', link: '/docs/usage/data/rest/fetching/server' },
{ text: 'Клиентские компоненты', link: '/docs/usage/data/rest/fetching/client' },
],
},
],
},
{ text: 'Realtime', link: '/docs/usage/data/realtime' },
],
},
{ text: 'Шаблоны и генерация кода', link: '/docs/usage/templates-generation' },
{ text: 'Стили', link: '/docs/usage/styles' },
// Неактивные разделы: страницы существуют, но пока пустые.
@@ -99,7 +68,35 @@ const sidebar = [
{ text: 'Локализация · в разработке' },
],
},
{
text: 'Данные',
items: [
{ text: 'Введение', link: '/docs/usage/data/' },
{
text: 'REST',
collapsed: true,
items: [
{
text: 'Клиенты',
collapsed: true,
items: [
{ text: 'Автоматическая генерация', link: '/docs/usage/data/rest/clients/auto' },
{ text: 'Ручное создание', link: '/docs/usage/data/rest/clients/manual' },
],
},
{
text: 'Получение данных',
collapsed: true,
items: [
{ text: 'Серверные компоненты', link: '/docs/usage/data/rest/fetching/server' },
{ text: 'Клиентские компоненты', link: '/docs/usage/data/rest/fetching/client' },
],
},
],
},
{ text: 'Realtime', link: '/docs/usage/data/realtime' },
],
},
];
/**

View File

@@ -98,7 +98,8 @@ generate-llms.ts # Скрипт генерации llms.txt и R
```markdown
# {Название}
Краткое описание: о чём раздел и какие аспекты работы с областью он охватывает.
{Одно-два предложения, по которым читатель за секунду решает, нужен ли ему раздел.
Правила оформления — секция «Заголовок и описание» ниже.}
## Что нужно знать
@@ -183,58 +184,127 @@ title: Название раздела
Значение `title` совпадает с текстом `h1`-заголовка в файле.
### Заголовки
### Заголовок и описание
- Один `h1` на файл — совпадает с `title` из frontmatter.
- Сразу после `h1` — вводный абзац (одно-два предложения).
Каждая страница начинается с `h1`-заголовка и абзаца-описания сразу под ним.
Эта пара — **навигационный маркер**: попадает в сайдбар, `llms.txt`,
`README.md` архива и должна за секунду давать читателю или LLM понять,
**когда сюда нужно идти**.
#### Структура заголовков
- Один `h1` на файл, совпадает с `title` во frontmatter.
- Сразу после `h1` — описание (одно-два предложения, см. ниже).
- Основные секции — `h2`.
- Подсекции внутри `h2``h3`.
- `h4` не используется.
### Вводный абзац
#### Имя `h1` (заголовок страницы)
Абзац сразу после `h1` отвечает на вопрос «о чём этот раздел?».
Он попадает в `llms.txt` и `README.md` архива как краткое описание,
поэтому должен быть плотным и без воды.
- Называет предметную область, а не реализацию.
- Без имён пакетов, опций, конфигов и путей.
- Самодостаточен — читается без контекста сайдбара.
- Исключение: имя инструмента допустимо, если оно — единственное
устойчивое имя самой области (`PostCSS`, `Biome`, `VS Code`).
**Правила:**
**Хорошо:** «Алиасы импортов», «Структура проекта», «SVG-спрайты».
- Не начинать с «Раздел описывает», «Этот раздел», «В этом разделе»,
«Здесь рассмотрено», «В этом документе».
- Начинать с подлежащего — самой темы (`Слои SLM:`, `Соглашения об именовании:`).
- Двоеточие или тире для перечисления **категорий и областей**, а не
конкретных значений из содержимого.
- Не дублировать содержимое: если внутри раздела 12 правил —
не перечислять их во вводном абзаце.
- Не аргументировать («единые правила делают код предсказуемым»).
- 12 предложения.
**Плохо:** «Установка и настройка» (что устанавливаем?),
«Использование» (что используем?), «Введение» (во что?).
**Проверка:** если при добавлении нового правила/инструмента/раздела
вводный абзац придётся править — он слишком конкретный.
#### Описание
Описание — короткий ответ на вопрос «у меня задача X, мне сюда?».
Не аннотация. Не оглавление.
**Запреты:**
- Не упоминать конкретные пакеты, библиотеки, инструменты
(`@gromlab/svg-sprites`, `Mantine`, `Zustand`).
- Не упоминать конкретные файлы и пути
(`postcss.config.mjs`, `.templates/`, `biome.json`).
- Не упоминать конкретные опции, ключи API, имена функций
(`baseUrl`, `cl()`, `useStore`).
- Не начинать с «Раздел описывает», «Этот раздел»,
«В этом разделе», «Здесь рассмотрено».
- Не использовать дежурные префиксы как шаблон
(«Правила работы с...», «Правила написания...») — само то,
что раздел про правила, и так понятно из секции и заголовка.
- Не пересказывать содержимое перечислением подсекций
(«организация, реализация, делегирование, метаданные»).
- Не аргументировать пользу
(«обеспечит единообразие», «упростит поддержку»).
**Требования:**
- 1 предложение, обычно 512 слов.
- Звучит как ответ человека другу, а не как техспек.
- Описание читается **самостоятельно**, без контекста сайдбара.
- Если страница вложена в семантическую группу
(например, `Данные → REST → Клиенты → ...`) и её заголовок
без этой группы теряет смысл — описание явно содержит имя
родительской области, чтобы читалось без сайдбара.
**Подходящие формы:**
- «Как X.»
- «Что такое X.»
- «Из чего состоит X.»
- «Установка X.»
- «Какие X есть и как ими пользоваться.»
Перечисление аспектов через двоеточие — только если без него читатель
не сможет различить раздел от соседнего.
**Тест навигации.** Читатель видит описание — за секунду должен понять
«мне сюда» или «нет, не сюда». Если приходится перечитывать —
описание слишком длинное.
**Тест на изменение.** Если в разделе сменится пакет, переименуется
файл или добавится правило — придётся ли править описание?
Если да — оно слишком конкретное.
**Хорошо:**
```markdown
Слои SLM: назначение, классификация, направление зависимостей, правила.
Какие алиасы импортов есть в проекте и как ими пользоваться.
```
```markdown
Базовый стек проекта по областям: UI, архитектура, данные, состояние,
локализация, тестирование, стили, генерация кода.
Установка и настройка линтера-форматтера в новом проекте.
```
```markdown
Из чего состоит проект и где что лежит.
```
```markdown
Получение REST-данных в серверных компонентах.
```
**Плохо:**
```markdown
Раздел описывает слои SLM: что такое слой, какие бывают, как между
ними направлены зависимости и какие правила действуют на каждом.
Раздел описывает, какие алиасы используются в проекте: их полный список,
где они объявлены и как ими пользоваться между модулями и внутри модуля.
```
_Начинается с «Раздел описывает», пересказывает содержимое._
```markdown
Этот раздел описывает базовый стек технологий и библиотек, принятый в
проекте. React, TypeScript, Next.js, SWR, Zustand, i18next.
Установка и настройка CSS-процессора PostCSS в проекте: набор плагинов,
конфиг `postcss.config.mjs`. Выполняется один раз при заведении проекта.
```
_Упомянут конкретный файл, перечисление аспектов превратилось в оглавление._
```markdown
Правила работы с React-компонентами: файловая структура,
типизация пропсов, документирование, реализация.
```
ежурный префикс «Правила работы с...» плюс оглавление подсекций._
### Примеры кода
- Блоки кода с указанием языка: ` ```tsx `, ` ```css `, ` ```bash `, ` ```text `.

View File

@@ -65,7 +65,7 @@
| Страницы (App Router) | Как описывать layout, page, loading, error, not-found? |
| Данные: Введение | Как устроена работа с данными в проекте? |
| Данные: REST: Клиенты: Автоматическая генерация | Как сгенерировать REST-клиент автоматически из OpenAPI? |
| Данные: REST: Клиенты: Ручная генерация | Как написать REST-клиент вручную? |
| Данные: REST: Клиенты: Ручное создание | Как написать REST-клиент вручную? |
| Данные: REST: Получение данных: Серверные компоненты | Как получать данные в серверных компонентах? |
| Данные: REST: Получение данных: Клиентские компоненты | Как получать данные в клиентских компонентах (SWR)? |
| Данные: Realtime | Как работать с realtime-каналами и сокетами? |

174
docs-overview.md Normal file
View File

@@ -0,0 +1,174 @@
# Обзор страниц документации
Список всех `.md`-страниц в `docs/docs/` в порядке сайдбара (`.vitepress/config.ts`).
Поля: путь к файлу, заголовок (`h1`), описание (абзац под заголовком).
## Главная
### docs/docs/index.md
**Заголовок:** NextJS Style Guide
**Описание:** Стандарты разработки фронтенд-приложений на Next.js и TypeScript.
## Подсказки
### docs/docs/workflow.md
**Заголовок:** Подсказки
**Описание:** Короткие ответы на типовые вопросы и решения для спорных ситуаций.
## Базовые правила
### docs/docs/basics/tech-stack.md
**Заголовок:** Технологии и библиотеки
**Описание:** Какие библиотеки и инструменты используются в проекте.
### docs/docs/basics/naming.md
**Заголовок:** Именование
**Описание:** Как называть переменные, файлы и прочие сущности в коде.
### docs/docs/basics/architecture/index.md
**Заголовок:** SLM Design
**Описание:** Архитектурный подход проекта: что такое SLM и как он устроен.
### docs/docs/basics/architecture/reference/layers.md
**Заголовок:** Слои
**Описание:** Из каких слоёв состоит архитектура и как они связаны.
### docs/docs/basics/architecture/reference/modules.md
**Заголовок:** Модули
**Описание:** Что такое модуль в архитектуре и как он устроен.
### docs/docs/basics/architecture/reference/segments.md
**Заголовок:** Сегменты
**Описание:** Что такое сегмент модуля и какие они бывают.
### docs/docs/basics/code-style.md
**Заголовок:** Стиль кода
**Описание:** Как оформляется код в проекте.
### docs/docs/basics/documentation.md
**Заголовок:** Документирование
**Описание:** Что и как документировать в коде.
### docs/docs/basics/typing.md
**Заголовок:** Типизация
**Описание:** Как типизируется код в проекте.
## Создание проекта
### docs/docs/creating-project/from-template.md
**Заголовок:** Создание проекта из шаблона
**Описание:** Создание нового проекта на основе готового шаблона.
### docs/docs/creating-project/manual.md
**Заголовок:** Создание проекта вручную
**Описание:** Поэтапное создание нового проекта без использования шаблона.
### docs/docs/creating-project/nextjs.md
**Заголовок:** Чистая установка Next.js
**Описание:** Установка Next.js без лишнего шаблона — голый каркас под дальнейшую сборку.
## Настройка
### docs/docs/setup/aliases.md
**Заголовок:** Алиасы импортов
**Описание:** Какие алиасы импортов есть в проекте и как ими пользоваться.
### docs/docs/setup/biome.md
**Заголовок:** Biome
**Описание:** Установка и настройка линтера-форматтера в новом проекте.
### docs/docs/setup/postcss.md
**Заголовок:** PostCSS
**Описание:** Установка и настройка CSS-процессора в новом проекте.
### docs/docs/setup/styles.md
**Заголовок:** Стили
**Описание:** Подготовка стилевой основы проекта: токены, медиа-запросы, глобальные стили.
### docs/docs/setup/svg-sprites.md
**Заголовок:** SVG-спрайты
**Описание:** Подключение SVG-спрайтов в новом проекте.
### docs/docs/setup/templates.md
**Заголовок:** Шаблоны генерации
**Описание:** Подключение шаблонов кодогенерации в новом проекте.
### docs/docs/setup/vscode.md
**Заголовок:** VS Code
**Описание:** Единые настройки редактора и расширений для команды.
## Использование
### docs/docs/usage/project-structure.md
**Заголовок:** Структура проекта
**Описание:** Из чего состоит проект и где что лежит.
### docs/docs/usage/components.md
**Заголовок:** Компоненты
**Описание:** Как устроен и пишется React-компонент в проекте.
### docs/docs/usage/page-level.md
**Заголовок:** Файлы роутинга
**Описание:** Что должно лежать в файлах роутинга, а что — в экранах.
### docs/docs/usage/templates-generation.md
**Заголовок:** Шаблоны и генерация кода
**Описание:** Как устроены шаблоны кодогенерации и как ими пользоваться.
### docs/docs/usage/styles.md
**Заголовок:** Стили
**Описание:** Как пишутся стили в проекте.
### docs/docs/usage/images-sprites.md
**Заголовок:** —
**Описание:** _(файл пустой)_
### docs/docs/usage/svg-sprites.md
**Заголовок:** SVG-спрайты
**Описание:** Как добавлять и использовать SVG-иконки в коде.
### docs/docs/usage/video.md
**Заголовок:** —
**Описание:** _(файл пустой)_
### docs/docs/usage/stores.md
**Заголовок:** —
**Описание:** _(файл пустой)_
### docs/docs/usage/hooks.md
**Заголовок:** —
**Описание:** _(файл пустой)_
### docs/docs/usage/fonts.md
**Заголовок:** —
**Описание:** _(файл пустой)_
### docs/docs/usage/localization.md
**Заголовок:** —
**Описание:** _(файл пустой)_
## Данные
### docs/docs/usage/data/index.md
**Заголовок:** Источники данных
**Описание:** Какие источники данных используются в проекте и как с ними работать.
### docs/docs/usage/data/rest/clients/auto.md
**Заголовок:** Автоматическая генерация
**Описание:** Генерация REST-клиента из OpenAPI-спецификации.
### docs/docs/usage/data/rest/clients/manual.md
**Заголовок:** Ручное создание
**Описание:** Создание REST-клиента вручную, когда нет OpenAPI-спецификации.
### docs/docs/usage/data/rest/fetching/server.md
**Заголовок:** Серверные компоненты
**Описание:** Получение REST-данных в серверных компонентах.
### docs/docs/usage/data/rest/fetching/client.md
**Заголовок:** Клиентские компоненты
**Описание:** Получение REST-данных в клиентских компонентах.
### docs/docs/usage/data/realtime.md
**Заголовок:** Realtime
**Описание:** Работа с push-данными от сервера: подписки и события.

View File

@@ -1,9 +1,11 @@
---
title: Архитектура
title: SLM Design
description: "Архитектурный подход проекта: что такое SLM и как он устроен."
---
# SLM Design
Scoped Layered Module Design — модульная архитектура фронтенд-приложений. Код организован по слоям ответственности, а модуль содержит всё, что ему нужно: компоненты, хуки, сторы, типы, стили.
Архитектурный подход проекта: что такое SLM и как он устроен.
## Преимущества

View File

@@ -1,10 +1,11 @@
---
title: Слои
description: Из каких слоёв состоит архитектура и как они связаны.
---
# Слои
Слои SLM: назначение, классификация, направление зависимостей, правила.
Из каких слоёв состоит архитектура и как они связаны.
## Определение

View File

@@ -1,10 +1,11 @@
---
title: Модули
description: Что такое модуль в архитектуре и как он устроен.
---
# Модули
Модули SLM: состав, границы, взаимодействие с остальным кодом.
Что такое модуль в архитектуре и как он устроен.
## Определение

View File

@@ -1,10 +1,11 @@
---
title: Сегменты
description: Что такое сегмент модуля и какие они бывают.
---
# Сегменты
Сегменты SLM: типы, назначение, что лежит внутри каждого.
Что такое сегмент модуля и какие они бывают.
## Определение

View File

@@ -1,10 +1,11 @@
---
title: Стиль кода
description: Как оформляется код в проекте.
---
# Стиль кода
Единые правила оформления кода: форматирование, импорты, читаемость.
Как оформляется код в проекте.
## Отступы

View File

@@ -1,10 +1,11 @@
---
title: Документирование
description: Что и как документировать в коде.
---
# Документирование
Правила документирования кода: что и когда документировать через JSDoc.
Что и как документировать в коде.
## Общие правила

View File

@@ -1,10 +1,11 @@
---
title: Именование
description: Как называть переменные, файлы и прочие сущности в коде.
---
# Именование
Соглашения об именовании в коде: что и как называть.
Как называть переменные, файлы и прочие сущности в коде.
## Базовые правила

View File

@@ -1,10 +1,11 @@
---
title: Технологии и библиотеки
description: Какие библиотеки и инструменты используются в проекте.
---
# Технологии и библиотеки
Базовый стек проекта по областям: UI, архитектура, данные, состояние, локализация, тестирование, стили, генерация кода.
Какие библиотеки и инструменты используются в проекте.
## Что используем

View File

@@ -1,10 +1,11 @@
---
title: Типизация
description: Как типизируется код в проекте.
---
# Типизация
Правила типизации в TypeScript: общие принципы и работа с динамическими типами.
Как типизируется код в проекте.
## Общие правила

View File

@@ -1,20 +1,24 @@
---
title: Из шаблона
title: Создание проекта из шаблона
description: Создание нового проекта на основе готового шаблона.
keywords: [создать проект из шаблона, шаблон, template, tiged, degit, клонировать шаблон, эталонный шаблон, быстрый старт, scaffold, новый проект]
---
# Создание проекта из шаблона
Клонирование эталонного шаблона стайлгайда одной командой. Дефолтный сценарий создания проекта.
Создание нового проекта на основе готового шаблона.
В шаблоне уже настроены Next.js, Biome, стили, PostCSS, SVG-спрайты, VS Code и шаблоны генерации. Если нужен контроль над каждым шагом или шаблон недоступен — [Создание проекта вручную](/docs/setup/project-manual).
## Что внутри
## Требования
- Node.js 18.18+ (рекомендуется LTS 20+).
- npm 10+.
- Доступ к `gromlab.ru` (SSH-ключ добавлен).
Шаблон — готовый скелет проекта с применёнными правилами стайлгайда:
- **Стек:** Next.js (App Router), TypeScript, React.
- **Архитектура:** структура папок по SLM, алиасы импортов.
- **Качество кода:** Biome (линтер и форматер), настройки VS Code.
- **Стили:** PostCSS Modules с плагинами, токены, медиа-брейкпоинты.
- **Ассеты:** генерация SVG-спрайтов.
- **Кодогенерация:** шаблоны для страниц, компонентов, хуков, сторов.
в
## Установка
1. Склонировать шаблон в родительском каталоге будущего проекта:

View File

@@ -1,19 +1,18 @@
---
title: Вручную
title: Создание проекта вручную
description: Поэтапное создание нового проекта без использования шаблона.
keywords: [создать проект, новый проект, с нуля, init, initialize, scaffold, create-next-app, начать проект, поднять проект, эталонный проект, ручная установка]
---
# Создание проекта вручную
Сборка эталонного Next.js-проекта шаг за шагом — для случаев, когда нужен контроль над каждым шагом или шаблон недоступен.
Если шаблон доступен — быстрее использовать [Создание проекта из шаблона](/docs/setup/project-from-template).
Поэтапное создание нового проекта без использования шаблона.
## Состав эталонного проекта
| Компонент | Роль | Раздел |
|-----------|------|--------|
| Next.js | Фреймворк (роутинг, сборка, SSR) | [Next.js](/docs/setup/nextjs) |
| Next.js | Фреймворк (роутинг, сборка, SSR) | [Next.js](/docs/creating-project/nextjs) |
| Алиасы | Импорты по слоям SLM | [Алиасы](/docs/setup/aliases) |
| Biome | Линтер и форматтер (замена ESLint + Prettier) | [Biome](/docs/setup/biome) |
| Стили | Глобальные токены и breakpoints | [Стили](/docs/setup/styles) |
@@ -38,7 +37,7 @@ keywords: [создать проект, новый проект, с нуля, in
Скелет фреймворка — обязательный первый шаг, остальное опирается на него.
См. [Next.js](/docs/setup/nextjs). После выполнения проверки этого раздела `npm run build` должен проходить.
См. [Next.js](/docs/creating-project/nextjs). После выполнения проверки этого раздела `npm run build` должен проходить.
### 2. Алиасы

View File

@@ -1,11 +1,12 @@
---
title: Next.js
title: Чистая установка Next.js
description: "Установка Next.js без лишнего шаблона — голый каркас под дальнейшую сборку."
keywords: [next.js, create-next-app, npx, установка, инициализация, фреймворк, скаффолдинг, app router, typescript]
---
# Next.js
# Чистая установка Next.js
Установка фреймворка через `create-next-app` и очистка дефолтного шаблона. На выходе — чистый скелет с App Router и TypeScript.
Установка Next.js без лишнего шаблона — голый каркас под дальнейшую сборку.
## Требования

View File

@@ -1,6 +1,11 @@
---
title: NextJS Style Guide
description: Стандарты разработки фронтенд-приложений на Next.js и TypeScript.
---
# NextJS Style Guide
Соглашения по разработке Next.js проектов: архитектура и слои приложения, структура кода, организация модулей, стилизация, типизация и инфраструктура.
Стандарты разработки фронтенд-приложений на Next.js и TypeScript.
## Использование
@@ -63,7 +68,7 @@
| Страницы (App Router) | Как описывать layout, page, loading, error, not-found? |
| Данные: Введение | Как устроена работа с данными в проекте? |
| Данные: REST: Клиенты: Автоматическая генерация | Как сгенерировать REST-клиент автоматически из OpenAPI? |
| Данные: REST: Клиенты: Ручная генерация | Как написать REST-клиент вручную? |
| Данные: REST: Клиенты: Ручное создание | Как написать REST-клиент вручную? |
| Данные: REST: Получение данных: Серверные компоненты | Как получать данные в серверных компонентах? |
| Данные: REST: Получение данных: Клиентские компоненты | Как получать данные в клиентских компонентах (SWR)? |
| Данные: Realtime | Как работать с realtime-каналами и сокетами? |

View File

@@ -1,13 +1,12 @@
---
title: Алиасы
title: Алиасы импортов
description: Какие алиасы импортов есть в проекте и как ими пользоваться.
keywords: [алиасы, aliases, paths, tsconfig, импорты, baseUrl, app, layouts, screens, widgets, business, infrastructure, ui, shared]
---
# Алиасы
# Алиасы импортов
Импорты в проекте идут через алиасы слоёв SLM-архитектуры — по одному на каждый слой `src/`. Префикс `@/` **не используется**: имя слоя само по себе однозначно адресует код.
Слои и направление зависимостей — [Архитектура: слои](/docs/basics/architecture/reference/layers).
Какие алиасы импортов есть в проекте и как ими пользоваться.
## Конфиг

View File

@@ -1,11 +1,12 @@
---
title: Biome
description: Установка и настройка линтера-форматтера в новом проекте.
keywords: [biome, линтер, форматтер, lint, format, biome.json, "@biomejs/biome", замена eslint, замена prettier]
---
# Biome
Единый линтер и форматтер для JS/TS/JSON в проекте. Заменяет связку ESLint + Prettier одним инструментом.
Установка и настройка линтера-форматтера в новом проекте.
## Требования

View File

@@ -1,13 +1,12 @@
---
title: PostCSS
description: Установка и настройка CSS-процессора в новом проекте.
keywords: [postcss, postcss.config.mjs, postcss-custom-media, postcss-nesting, autoprefixer, postcss-global-data, csstools, "@custom-media", "@nest", css-процессор]
---
# PostCSS
Установка и настройка CSS-процессора PostCSS в проекте: набор плагинов, конфиг `postcss.config.mjs`. Выполняется один раз при заведении проекта.
Правила написания CSS в компонентах — [Использование](/docs/usage/styles).
Установка и настройка CSS-процессора в новом проекте.
## Зачем PostCSS

View File

@@ -1,13 +1,12 @@
---
title: Стили
description: "Подготовка стилевой основы проекта: токены, медиа-запросы, глобальные стили."
keywords: [variables.css, media.css, global.css, shared/styles, токены, переменные, custom-media, breakpoints, подключение стилей, базовые стили, инициализация]
---
# Стили
Базовая стилевая инфраструктура: токены, breakpoints и точка сборки глобальных стилей в `src/shared/styles/`.
CSS-процессор — отдельный шаг ([PostCSS](/docs/setup/postcss)). Правила написания CSS в компонентах — [Стили: использование](/docs/usage/styles).
Подготовка стилевой основы проекта: токены, медиа-запросы, глобальные стили.
## Требования

View File

@@ -1,13 +1,12 @@
---
title: Установка и настройка
title: SVG-спрайты
description: Подключение SVG-спрайтов в новом проекте.
keywords: [svg-sprites, установка, настройка, config, пакет, "@gromlab/svg-sprites", svg-sprites.config.ts]
---
# Установка и настройка
# SVG-спрайты
Первичная настройка пакета `@gromlab/svg-sprites` в проекте. Выполняется один раз при заведении проекта и при смене мажорной версии пакета.
Что такое спрайты, как с ними работать и как управлять цветом — [Использование](/docs/usage/svg-sprites).
Подключение SVG-спрайтов в новом проекте.
## Требования

View File

@@ -1,13 +1,12 @@
---
title: Шаблоны генерации
description: Подключение шаблонов кодогенерации в новом проекте.
keywords: [шаблоны, templates, .templates, tiged, generator, генератор шаблонов, добавить шаблон, скачать шаблоны, scaffold]
---
# Шаблоны генерации
Папка `.templates/` в корне проекта для генератора модулей `@gromlab/create`.
Синтаксис шаблонов и работа генератора — [Шаблоны и генерация кода](/docs/usage/templates-generation).
Подключение шаблонов кодогенерации в новом проекте.
## Требования

View File

@@ -1,10 +1,11 @@
---
title: Настройка VS Code
title: VS Code
description: Единые настройки редактора и расширений для команды.
---
# Настройка VS Code
# VS Code
Каждый проект содержит папку `.vscode/` с конфигурацией редактора. Это гарантирует, что все участники команды работают с одинаковыми настройками форматирования, линтинга и расширениями.
Единые настройки редактора и расширений для команды.
## Структура `.vscode/`

View File

@@ -1,13 +1,11 @@
---
title: Компоненты
description: Как устроен и пишется React-компонент в проекте.
---
# Компоненты
Правила написания React-компонентов: файловая структура модуля, типизация пропсов, документирование и реализация. Раздел охватывает компоненты всех слоёв — от `shared/ui` до `screens`.
Архитектурные слои и их назначение описаны в разделе [Архитектура](/docs/basics/architecture/).
Как устроен и пишется React-компонент в проекте.
## Правила организации

View File

@@ -1,11 +1,12 @@
---
title: Введение
title: Источники данных
description: Какие источники данных используются в проекте и как с ними работать.
keywords: [данные, api, rest, realtime, клиент, swr, infrastructure, введение, карта раздела]
---
# Введение
# Источники данных
Работа с источниками данных в проекте: REST, realtime и любые другие каналы, которые появятся в будущем. Раздел описывает, как создаются клиенты для API и как полученные данные доходят до страниц и компонентов.
Какие источники данных используются в проекте и как с ними работать.
## Принципы раздела
@@ -22,7 +23,7 @@ keywords: [данные, api, rest, realtime, клиент, swr, infrastructure,
- **Клиенты** — как создаётся клиент REST API:
- [Автоматическая генерация](/docs/usage/data/rest/clients/auto) — для API с OpenAPI-спецификацией, через `@gromlab/api-codegen`.
- [Ручная генерация](/docs/usage/data/rest/clients/manual) — для API без схемы, клиент пишется и поддерживается руками.
- [Ручное создание](/docs/usage/data/rest/clients/manual) — для API без схемы, клиент пишется и поддерживается руками.
- **Получение данных** — как клиент используется в приложении:
- [Серверные компоненты](/docs/usage/data/rest/fetching/server) — прямой `await` метода клиента в Server Components.
- [Клиентские компоненты](/docs/usage/data/rest/fetching/client) — через готовые хуки модуля API; SWR с кешем, дедупликацией и ревалидацией скрыт внутри хука.

View File

@@ -1,13 +1,12 @@
---
title: Realtime
description: "Работа с push-данными от сервера: подписки и события."
keywords: [realtime, websocket, sse, подписка, swr subscription, useSWRSubscription, push, события]
---
# Realtime
Канал для push-данных: WebSocket, SSE, событийные шины и любой другой источник, инициирующий передачу со стороны сервера. Транспорт не зашит в правила — важна абстракция «подписка».
Получение REST-данных — [REST](/docs/usage/data/rest/clients/auto).
Работа с push-данными от сервера: подписки и события.
## Принципы

View File

@@ -1,13 +1,12 @@
---
title: Автоматическая генерация
description: Генерация REST-клиента из OpenAPI-спецификации.
keywords: [api, rest, openapi, codegen, генерация, клиент, api-codegen, gromlab, infrastructure, swagger-typescript-api]
---
# Автоматическая генерация
Если у API есть OpenAPI-спецификация — клиент генерируется утилитой [@gromlab/api-codegen](https://gromlab.ru/gromov/api-codegen) (обёртка над `swagger-typescript-api`). Ручной код для таких API не пишется.
Когда схемы нет — [Ручная генерация](/docs/usage/data/rest/clients/manual).
Генерация REST-клиента из OpenAPI-спецификации.
В примерах ниже используется условный API `pet-project-api` (kebab-case в путях) / `petProjectApi` (camelCase в коде). В реальном проекте имена выбираются по конкретному API.

View File

@@ -1,13 +1,12 @@
---
title: Ручная генерация
title: Ручное создание
description: "Создание REST-клиента вручную, когда нет OpenAPI-спецификации."
keywords: [api, rest, клиент, ручной, fetch, infrastructure, api-клиент]
---
# Ручная генерация
# Ручное создание
Если у API нет OpenAPI-спецификации — клиент пишется и поддерживается вручную. Цель та же, что и у автогенерации: единая точка работы с API, без прямых `fetch` в коде приложения.
Когда схема есть — [Автоматическая генерация](/docs/usage/data/rest/clients/auto).
Создание REST-клиента вручную, когда нет OpenAPI-спецификации.
В примерах ниже используется условный API `pet-project-api` / `petProjectApi`. В реальном проекте имена выбираются по конкретному API.

View File

@@ -1,13 +1,12 @@
---
title: Клиентские компоненты
description: Получение REST-данных в клиентских компонентах.
keywords: [swr, клиентские компоненты, useSWR, хук, мутация, useSWRMutation, кеш, ревалидация]
---
# Клиентские компоненты
В клиентских компонентах данные получаются через **готовые хуки**, которые экспортируются из модуля API. SWR инкапсулирован в хуке — компонент не знает про `useSWR`, ключи и fetcher.
Создание клиента и хуков — [Автоматическая](/docs/usage/data/rest/clients/auto) / [Ручная](/docs/usage/data/rest/clients/manual) генерация.
Получение REST-данных в клиентских компонентах.
## Правила

View File

@@ -1,13 +1,12 @@
---
title: Серверные компоненты
description: Получение REST-данных в серверных компонентах.
keywords: [server components, rsc, серверные компоненты, fetch, api, app router, прямой вызов]
---
# Серверные компоненты
В серверных компонентах (Server Components App Router) данные получаются **прямым вызовом метода API-клиента**. SWR и хуки здесь не применяются — они для клиентского кода.
Создание клиента — [Автоматическая](/docs/usage/data/rest/clients/auto) / [Ручная](/docs/usage/data/rest/clients/manual) генерация.
Получение REST-данных в серверных компонентах.
## Правила

View File

@@ -1,10 +1,11 @@
---
title: Файлы роутинга
description: "Что должно лежать в файлах роутинга, а что — в экранах."
---
# Файлы роутинга
Правила для специальных файлов App Router (`page.tsx`, `layout.tsx`, `error.tsx`, `not-found.tsx` и др.) — чем наш подход отличается от дефолтного.
Что должно лежать в файлах роутинга, а что — в экранах.
## Организация

View File

@@ -1,10 +1,11 @@
---
title: Структура проекта
description: Из чего состоит проект и где что лежит.
---
# Структура проекта
Файловая организация Next.js-проекта по архитектуре SLM.
Из чего состоит проект и где что лежит.
## Корень репозитория

View File

@@ -1,10 +1,11 @@
---
title: Использование
title: Стили
description: Как пишутся стили в проекте.
---
# Использование
# Стили
Правила написания CSS: PostCSS Modules, форматирование, переменные. Установка и настройка процессора — [PostCSS](/docs/setup/postcss).
Как пишутся стили в проекте.
## Общие правила

View File

@@ -1,11 +1,12 @@
---
title: Использование
title: SVG-спрайты
description: Как добавлять и использовать SVG-иконки в коде.
keywords: [svg, спрайт, sprite, иконка, icon, SvgSprite, превью, preview, цвет, color]
---
# Использование
# SVG-спрайты
Работа с SVG-иконками через сгенерированный компонент `<SvgSprite/>`. Установка пакета — [Установка и настройка](/docs/setup/svg-sprites).
Как добавлять и использовать SVG-иконки в коде.
## Шаги

View File

@@ -1,5 +1,6 @@
---
title: Шаблоны и генерация кода
description: Как устроены шаблоны кодогенерации и как ими пользоваться.
---
<!-- @formatter:off -->
@@ -7,7 +8,7 @@ title: Шаблоны и генерация кода
# Шаблоны и генерация кода
Как работают шаблоны, как их создавать, синтаксис переменных и как генерировать код с помощью расширения VS Code и CLI.
Как устроены шаблоны кодогенерации и как ими пользоваться.
## Структура шаблонов

View File

@@ -1,86 +1,8 @@
---
title: Workflow
title: Подсказки
description: Короткие ответы на типовые вопросы и решения для спорных ситуаций.
---
# Workflow
# Подсказки
Порядок действий при разработке — от создания проекта до реализации фич.
## Создание проекта
Инициализация нового проекта из готового шаблона.
1. Создать проект из шаблона:
```bash
npx tiged git@gromlab.ru:templates/nextjs.git my-app
cd my-app
npm install
```
2. Проект готов к разработке — стек, структура SLM, конфигурация
редактора и шаблоны генерации уже настроены.
## Генерация кода
Создание модулей из шаблонов `.templates/` вместо ручного создания файлов.
1. Определить тип модуля и соответствующий шаблон:
| Модуль | Слой | Шаблон |
|------------|--------------|-------------|
| Компонент | `ui/` | `component` |
| Бизнес-модуль | `business/` | `module` |
| Виджет | `widgets/` | `widget` |
| Layout | `layouts/` | `layout` |
| Экран | `screens/` | `screen` |
| Стор | `stores/` | `store` |
2. Сгенерировать модуль из шаблона.
3. Если подходящего шаблона нет — сначала создать шаблон, затем использовать.
Ручное создание файловой структуры модулей запрещено.
## Добавление страницы
Создание нового маршрута: экран + точка входа для роутинга.
1. Сгенерировать экран из шаблона `screen` в `src/screens/`.
2. Заполнить экран логикой и стилями.
3. Создать `page.tsx` в нужном маршруте `src/app/`.
`page.tsx` — тонкая обёртка: только `metadata` и рендер экрана.
Логика, стили и хуки размещаются в экране, не в `page.tsx`.
## Добавление UI-модуля
Создание компонента, бизнес-модуля, виджета или layout.
1. Сгенерировать модуль из соответствующего шаблона в целевой слой.
2. Заполнить модуль логикой и стилями.
3. Дочерние компоненты — генерировать из шаблона `component` в папку `ui/`
внутри родителя.
Дочерние компоненты не экспортируются через `index.ts` родителя.
## Стилизация
Выбор инструмента стилизации по приоритету.
1. Использовать Mantine-компоненты и их пропсы.
2. Если Mantine не покрывает — использовать CSS-токены
(`--color-*`, `--space-*`, `--radius-*`).
3. Если нужна кастомная стилизация — PostCSS Modules.
Инлайн-стили (`style`), магические значения и глобальные стили
вне `app/styles/` запрещены.
## Получение данных
*Раздел в разработке* — SWR, генерация API-клиентов, сокеты.
## Управление состоянием
*Раздел в разработке* — когда создавать стор, что хранить локально и глобально.
## Локализация
*Раздел в разработке* — переводы и i18next.
Короткие ответы на типовые вопросы и решения для спорных ситуаций.

View File

@@ -1,31 +0,0 @@
---
title: Генерация кода
---
# Генерация кода
Как создавать модули в проекте с помощью шаблонов — какие модули покрыты генерацией и когда стоит создавать новые шаблоны.
## Какие модули генерируются из шаблонов
| Модуль | Слой | Шаблон |
|---|---|---|
| Компонент | `ui/` | `component` |
| Бизнес-модуль | `business/` | `module` |
| Виджет | `widgets/` | `widget` |
| Layout | `layouts/` | `layout` |
| Экран | `screens/` | `screen` |
| Стор | `stores/` | `store` |
## Что нужно знать
В проекте принято создавать модули из шаблонов `.templates/`. Шаблоны задают единообразную файловую структуру и сокращают рутину — не нужно вручную создавать папки, файлы типов, стилей и экспорты.
Если для нужного модуля нет подходящего шаблона — стоит сначала создать шаблон, а затем использовать его.
## Когда создавать новый шаблон
- Повторяющаяся структура появляется больше одного раза.
- Существующий шаблон не покрывает нужный тип модуля.
Инструменты и синтаксис шаблонов — [Шаблоны и генерация кода](/docs/usage/templates-generation).

View File

@@ -1,31 +0,0 @@
---
title: Создание проекта
---
# Создание проекта
Как начать новый проект, соответствующий стандартам этого руководства.
## Что нужно знать
Новый проект создаётся из готового шаблона. Шаблон содержит настроенный стек, структуру SLM, конфигурацию редактора и шаблоны генерации кода — проект готов к разработке сразу после установки зависимостей.
### Создание из шаблона
```bash
npx tiged git@gromlab.ru:templates/nextjs.git my-app
cd my-app
npm install
```
## Что входит в шаблон
- Next.js + TypeScript (App Router)
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура SLM (`layouts/`, `screens/`, `widgets/`, `business/`, `infrastructure/`, `ui/`, `shared/`)
- Шаблоны генерации (`.templates/`)
- Конфигурация VS Code (`.vscode/`)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные

View File

@@ -1,22 +0,0 @@
---
title: Добавление UI-модуля
---
# Добавление UI-модуля
Как создать компонент, бизнес-модуль, виджет или layout в проекте.
## Что нужно знать
Все UI-модули создаются только из шаблонов `.templates/`. Ручное создание файловой структуры запрещено. Если подходящего шаблона нет — сначала создать шаблон в `.templates/`, затем использовать его.
## Порядок действий
1. [Сгенерировать](/docs/usage/templates-generation) модуль из соответствующего шаблона в целевой слой.
2. Заполнить модуль логикой и стилями.
## Дочерние компоненты
Если модулю нужны внутренние подкомпоненты — [генерировать](/docs/usage/templates-generation) их из шаблона `component` в папку `ui/` внутри родительского модуля. Дочерние компоненты не экспортируются через `index.ts` родителя.
Правила написания компонентов — [Компоненты](/docs/usage/components).

View File

@@ -1,27 +0,0 @@
---
title: Добавление страницы
---
# Добавление страницы
Как добавить новую страницу в проект по стандартам этого руководства.
## Что нужно знать
Страница в проекте — это два файла: экран в `src/screens/` (вся логика, стили, зависимости) и `page.tsx` в `src/app/` (точка входа для роутинга Next.js). Экран генерируется из шаблона, `page.tsx` создаётся вручную.
## Порядок действий
1. [Сгенерировать](/docs/usage/templates-generation) экран из шаблона `screen` в папку `src/screens/`.
2. Заполнить экран логикой и стилями.
3. Создать `page.tsx` в нужном маршруте `src/app/`. Файл страницы должен быть тонким — только `metadata` и рендер экрана. Никакой логики, стилей и хуков в `page.tsx` не размещается — всё это живёт в экране.
## Правила
- Ручное создание файловой структуры экрана запрещено — только [генерация](/docs/usage/templates-generation) из шаблона.
- Логика, стили и зависимости размещаются в экране, не в `page.tsx`.
- Каждая страница содержит `metadata` с `title` и `description`.
Примеры `page.tsx` и `metadata` — [Page-level компоненты](/docs/usage/page-level).

View File

@@ -1,7 +0,0 @@
---
title: Получение данных
---
# Получение данных
Как получать данные с сервера — SWR, генерация API-клиентов, сокеты.

View File

@@ -1,22 +0,0 @@
---
title: Начало работы
---
# Начало работы
Что нужно знать перед началом разработки в проекте.
## Стек проекта
**Next.js** (App Router), **Mantine**, **Zustand**, **SLM Design**.
Подробнее — [Технологии и библиотеки](/docs/basics/tech-stack).
## Ключевые особенности
- **Генерация вместо ручного создания** — компоненты, бизнес-модули, виджеты, сторы и другие модули не создаются вручную. Файловая структура генерируется из шаблонов `.templates/`. Ручное создание файловой структуры модулей запрещено.
- **Biome вместо ESLint + Prettier** — один инструмент для линтинга и форматирования. Автофикс и сортировка импортов происходят автоматически при сохранении файла.
## Настройка окружения
Открыть проект в VS Code и установить рекомендуемые расширения — редактор предложит это автоматически. Подробнее — [Настройка VS Code](/docs/setup/vscode).

View File

@@ -1,7 +0,0 @@
---
title: Локализация
---
# Локализация
Как добавлять переводы и подключать локализацию через i18next.

View File

@@ -1,7 +0,0 @@
---
title: Управление состоянием
---
# Управление состоянием
Как работать с состоянием — когда создавать стор, что хранить локально и глобально.

View File

@@ -1,23 +0,0 @@
---
title: Стилизация
---
# Стилизация
Как стилизовать компоненты в проекте — приоритет инструментов и правила их применения.
## Приоритет стилизации
Основной UI-фреймворк проекта — **Mantine**. При стилизации компонентов придерживаться следующего приоритета:
1. **Mantine-компоненты и их пропсы** — в первую очередь использовать встроенные возможности Mantine (пропсы, `classNames`, `styles`).
2. **Глобальные CSS-токены** (`--color-*`, `--space-*`, `--radius-*`) — для значений, которые не покрываются Mantine.
3. **PostCSS Modules** — когда Mantine не покрывает задачу и нужна кастомная стилизация.
## Что запрещено
- **Инлайн-стили** — использование атрибута `style` в компонентах строго запрещено.
- **Магические значения** — произвольные цвета, отступы и скругления запрещены, использовать токены.
- **Глобальные стили** вне `app/styles/` запрещены.
Правила написания CSS, вложенность, медиа-запросы и токены — [Стили: использование](/docs/usage/styles).