Как редактировать документацию

Любой пользователь может помочь улучшить документацию ArtGeneration.me! Это проще, чем кажется. Здесь вы найдете пошаговую инструкцию для новичков.

Зачем это нужно?

Вы заметили ошибку или опечатку
Описание устарело после обновления сервиса
Хотите добавить полезную информацию
Можете лучше объяснить какую-то функцию

Ваш вклад поможет тысячам других пользователей!

Способ 1: Редактирование через браузер (самый простой)

Этот способ не требует установки программ. Всё делается в браузере.

Шаг 1: Найдите страницу для редактирования

Откройте страницу документации, которую хотите исправить
Прокрутите вниз страницы
Нажмите ссылку "Редактировать на GitHub"

Шаг 2: Войдите в GitHub

Если у вас нет аккаунта GitHub:

Перейдите на github.com
Нажмите Sign up
Введите email, придумайте пароль и имя пользователя
Подтвердите email

Если аккаунт есть — просто войдите.

Шаг 3: Отредактируйте файл

GitHub покажет текст страницы в редакторе
Найдите место, которое хотите изменить
Внесите правки прямо в текст

Шаг 4: Сохраните изменения

Прокрутите вниз до раздела "Commit changes"
В поле "Commit message" кратко опишите что изменили
- Например: "Исправил опечатку в разделе генератора"
Нажмите зеленую кнопку "Propose changes"

Шаг 5: Создайте Pull Request

На следующей странице нажмите "Create pull request"
Проверьте описание и нажмите "Create pull request" ещё раз
Готово! Ваши изменения отправлены на проверку

После проверки модератором изменения появятся на сайте.

Способ 2: Локальное редактирование (для продвинутых)

Этот способ даёт больше контроля и удобен для больших изменений.

Требования

Установленный Git
Установленный Node.js (версия 18 или выше)
Текстовый редактор (VS Code рекомендуется)

Шаг 1: Склонируйте репозиторий

git clone https://github.com/timoncool/artgen_docs.git
cd artgen_docs

Шаг 2: Установите зависимости

npm install

Шаг 3: Запустите локальный сервер

npm run dev

Откройте в браузере: http://localhost:3000

Шаг 4: Редактируйте файлы

Файлы документации находятся в папке pages/:

pages/ru/ — русская версия
pages/en/ — английская версия

Изменения автоматически отображаются в браузере при сохранении файла.

Шаг 5: Создайте Pull Request

git checkout -b my-changes
git add .
git commit -m "Описание изменений"
git push origin my-changes

Затем откройте GitHub и создайте Pull Request.

Формат файлов (MDX)

Документация написана в формате MDX — это Markdown с поддержкой React-компонентов.

Основные элементы

# Заголовок первого уровня

## Заголовок второго уровня

### Заголовок третьего уровня

Обычный текст параграфа. Можно использовать **жирный текст**
и *курсив*.

- Элемент списка
- Ещё один элемент
- И ещё один

1. Нумерованный список
2. Второй пункт
3. Третий пункт

[Текст ссылки](https://example.com)

`/assets/docs-pages/screens/example.png`

Выделение важной информации

> Это цитата или важное замечание

**Важно:** Это выделенный текст.

Код

Для вставки кода используйте обратные кавычки:

Инлайн код: `npm install`

Блок кода:
\`\`\`bash
npm install
npm run dev
\`\`\`

Добавление изображений

Скриншоты и картинки делают документацию намного понятнее. Не стесняйтесь добавлять их к описаниям!

Шаг 1: Подготовьте изображение

Формат: PNG или WebP
Рекомендуемая ширина: 800-1200 пикселей
Обязательно сожмите изображение через TinyPNG — это бесплатно и уменьшает размер в 2-3 раза без потери качества. Просто перетащите файл на сайт и скачайте оптимизированную версию.

Шаг 2: Назовите файл правильно

Имя файла должно быть на латинице, строчными буквами, через дефис:

generator-logo-templates.png — правильно
Скриншот 2026.png — неправильно
IMG_1234.png — неправильно

Имя должно кратко описывать содержимое картинки.

Шаг 3: Загрузите в нужную папку

Куда класть изображения зависит от раздела:

Скриншоты для документации → .static-assets-src/public/assets/docs-pages/screens/
Картинки для руководств → .static-assets-src/public/assets/docs-pages/guide/
Картинки для новостей → .static-assets-src/public/assets/docs-pages/blog/

После добавления изображения обновите manifest и загрузите файл в CDN:

python3 scripts/static-assets/sync-static-assets.py \
  --source-dir .static-assets-src/public \
  --manifest src/01-shared/static-assets/static-assets-manifest.json \
  --upload \
  --write-manifest

Шаг 4: Добавьте в документацию

Вставьте картинку в нужное место в тексте:

![Краткое описание изображения](/assets/docs-pages/screens/имя-файла.png)

Текст в квадратных скобках — это описание картинки, оно должно быть осмысленным.

Структура документации

pages/
├── ru/                      # Русская версия
│   ├── docs/                # Руководство пользователя
│   │   ├── generator/       # Генератор изображений
│   │   ├── gallery/         # Галерея
│   │   ├── editor/          # Редактор
│   │   └── ...
│   ├── news/                # Новости (автозагрузка из папки)
│   │   ├── index.jsx        # Лента новостей
│   │   ├── 2026-01-15-....mdx
│   │   └── ...
│   └── about-docs/          # Работа над документацией
│       ├── contributing.mdx # Эта страница
│       └── contributors.mdx # Авторы
└── en/                      # English version (аналогичная структура)