# Интеграция с 21st.dev
Source: https://poehali.mintlify.app/deploy/21st-dev

Как создать лендинг с помощью готовых компонентов

<Accordion title="Что такое [21st.dev](http://21st.dev)">
  [21st.dev](https://21st.dev/) — это сайт с готовыми компонентами. Компонент — это готовый блок. Например:

  * Кнопка
  * Форма
  * Секция с текстом
  * Блок с отзывами
  * Навигационное меню

  Каждый компонент можно скопировать и вставить в ваш проект. Это быстрее, чем создавать с нуля.
</Accordion>

## Как использовать

<Steps>
  <Step title="Найдите нужный компонент">
    1. Откройте [21st.dev](https://21st.dev/)
    2. Найдите компонент, который вам нравится
       <img alt="21st.dev в светлой теме" />
       <img alt="21st.dev в светлой теме" />
    3. Скопируйте промпт компонента
       <img alt="21st.dev в светлой теме" />
       <img alt="21st.dev в светлой теме" />
  </Step>

  <Step title="Дайте указания Юре">
    1. Откройте свой сайт на [Поехали!](https://poehali.dev/)
    2. Вставьте скопированное описание в чат
    3. Попросите Юру добавить этот компонент
       <img alt="21st.dev в светлой теме" />
       <img alt="21st.dev в светлой теме" />
       <img alt="21st.dev в светлой теме" />
       <img alt="21st.dev в светлой теме" />
  </Step>

  <Step title="Настройте под свой сайт">
    Юра создаст компонент, а вы редактируйте:

    * Измени цвет на синий
    * Сделай текст крупнее
    * Добавь моё название компании
  </Step>
</Steps>

## Зачем использовать готовые компоненты

* **Экономия времени.** Не нужно придумывать дизайн с нуля. Берёте готовое решение.
* **Проверенные решения.** Компоненты уже протестированы. Они работают хорошо.
* **Профессиональный вид.** Сайт выглядит как сделанный дизайнером.

## Простой пример

Допустим, вам нужна секция с отзывами:

<Steps>
  <Step title="Откройте 21st.dev">
    и найдите там «Reviews Section»

    <img alt="21st.dev в светлой теме" />

    <img alt="21st.dev в светлой теме" />

    <img alt="21st.dev в светлой теме" />

    <img alt="21st.dev в светлой теме" />
  </Step>

  <Step title="Скопируйте промпт">
    <img alt="21st.dev в светлой теме" />

    <img alt="21st.dev в светлой теме" />

    <img alt="21st.dev в светлой теме" />

    <img alt="21st.dev в светлой теме" />
  </Step>

  <Step title="Попросите Юру сделать такой же компонент">
    <img alt="21st.dev в светлой теме" />

    <img alt="21st.dev в светлой теме" />

    Юра создаст секцию с отзывами за несколько секунд.

    <img alt="21st.dev в светлой теме" />

    <img alt="21st.dev в светлой теме" />
  </Step>
</Steps>

## Советы по использованию

* **Начинайте с простого** — выберите 2-3 компонента для начала, не берите сразу много
* **Адаптируйте под себя** — каждый компонент нужно настроить под ваш бизнес, замените текст и цвета
* **Проверяйте на телефоне** — убедитесь, что компонент хорошо выглядит на мобильном
* **Сохраняйте единый стиль** — все компоненты должны подходить друг другу по цветам и шрифтам

## Что дальше

После добавления компонентов:

1. Проверьте сайт на разных устройствах
2. Попросите друзей посмотреть
3. Опубликуйте


# Про домены
Source: https://poehali.mintlify.app/deploy/domain

Узнайте про домены больше!

<iframe />

## Что такое домен

Домен — уникальное имя сайта в интернете, например, company.com или mysite.ru. Это адрес, по которому пользователи находят ваш сайт.

<Note>
  Сайт на Поехали! получает адрес на поддомене платформы (название.poehali.dev). Но вы можете подключить свой домен для профессионального представления проекта.
</Note>

## Зачем нужен собственный домен

Собственный домен даёт важные преимущества:

* **Профессиональный имидж** — создаёт серьёзное впечатление о вашем проекте
* **Узнаваемость** — имя домена может совпадать с названием компании
* **Независимость** — сайт не будет связан с платформой разработки
* **SEO-преимущества** — лучше ранжируется в поисковых системах
* **Маркетинг** — короткий домен легче использовать в рекламе

## Советы

* **Короткое имя** — такой домен легче запомнить
* **Связь с темой** — домен должен отражать содержание сайта
* **Простые слова** — избегайте сложных сочетаний букв и цифр
* **Уникальное название** — не копируйте известные сайты
* **Правильная зона** — выбирайте подходящую зону (.com, .ru, .org) для вашей аудитории

<Note>
  Вы можете подключить собственный домен в любой момент, даже после публикации на поддомене платформы.
</Note>


# Доменные записи
Source: https://poehali.mintlify.app/deploy/domain_records

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

Доменная запись — это инструкция в системе DNS, которая говорит интернету, что делать с вашим доменом: куда отправлять почту, где находится сайт, кому доверять отправку писем и так далее.

## NS-записи

NS-запись (Name Server) указывает, какие серверы отвечают за хранение всех DNS-записей вашего домена. Это фундаментальная настройка: именно NS-записи говорят интернету, куда обращаться за информацией о вашем домене.

**Как добавить:**

1. Зайдите в редактор проекта → Название проекта (левый верхний угол) → Настройки проекта → Домен → Подключить домен
2. Введите ваше доменное имя
3. Обновите NS записи в сервисе, где покупали домен на указанные в настройках

<Note>
  Изменения NS вступают в силу не сразу. Он может занять до 24-х часов. Это нормально и не требует никаких дополнительных действий с вашей стороны — просто нужно подождать.
</Note>

## MX-записи

MX-запись (Mail Exchanger) указывает, какой почтовый сервер принимает письма для вашего домена. Без неё письма на ваш адрес просто не будут доходить.

**Когда нужно добавить MX-запись:** когда вы подключаете почтовый сервис — например, Google Workspace, Яндекс 360, Mail.ru для бизнеса или любой другой.

**Как добавить:**

1. Зайдите в редактор проекта → Название проекта (левый верхний угол) → Настройки проекта → Домен → Добавить DNS-запись
2. Создайте запись с типом **MX**
3. В поле **Имя** укажите информацию, которую предлагает добавить провайдер
4. В поле **Содержимое** вставьте приоритет и адрес почтового сервера через пробел — их даёт ваш почтовый провайдер, например: `10 aspmx.l.google.com`
5. Сохраните запись

## TXT-записи

TXT-запись — это текстовая запись, в которую можно вписать произвольный текст. Используется для разных целей: подтверждения владения доменом, настройки защиты от спама, авторизации сервисов.

**Как добавить:**

1. Зайдите в редактор проекта → Название проекта (левый верхний угол) → Настройки проекта → Домен → Добавить DNS-запись
2. Создайте запись с типом **TXT**
3. В поле **Имя** укажите информацию, которую предлагает добавить провайдер
4. В поле **Содержимое** вставьте содержимое, указанное у провайдера, заключив его в двойные кавычки. Например: `"v=DMARC1; p=none;"`
5. Сохраните запись

**Самые частые TXT-записи:**

* **SPF** — говорит почтовым серверам, с каких адресов можно отправлять письма от вашего домена. Защищает от подделки отправителя. Пример: `v=spf1 include:_spf.google.com ~all`
* **DKIM** — цифровая подпись для исходящих писем. Подтверждает, что письмо действительно отправили вы. Пример имени записи: `google._domainkey`
* **DMARC** — политика для почтовых серверов: что делать с письмами, которые не прошли проверку SPF или DKIM. Пример: `v=DMARC1; p=none; rua=mailto:report@yourdomain.com`
* **Подтверждение владения** — некоторые сервисы просят добавить TXT-запись, чтобы убедиться, что домен принадлежит вам. Обычно это одноразовая запись вида `google-site-verification=xxxxx`

### Несколько TXT-записей с одинаковым именем

Если вам нужно добавить несколько TXT-записей с одним и тем же именем (чаще всего это `@`), **не создавайте их по отдельности** — объедините в одну запись.

**Как объединить записи:**

1. Зайдите в редактор проекта → Название проекта (левый верхний угол) → Настройки проекта → Домен → Добавить DNS-запись
2. Выберете TXT-запись с нужным именем
3. Нажмите Редактировать → Добавить еще
4. Добавьте необходимое содержимое
5. Сохраните запись

Или объедините содержимое в одной записи через пробел, например:

**Неправильно** — две отдельные записи с именем `@`:

```text theme={null}
v=spf1 include:_spf.google.com ~all
v=spf1 include:mailgun.org ~all
```

**Правильно** — одна запись с объединённым содержимым:

```text theme={null}
v=spf1 include:_spf.google.com include:mailgun.org ~all
```

### Проверка DNS-записей

Если вы добавили или изменили любые записи, но наблюдаете ошибки при использовании, стоит убедиться, что они применились правильно. Для этого есть специальные онлайн-инструменты:

* [www.whatsmydns.net](https://www.whatsmydns.net/) — проверка MX, TXT, SPF, DMARC и других записей.
* [**dnschecker.org**](https://dnschecker.org/) — показывает, как ваши записи видны с серверов в разных странах. Удобно для отслеживания DNS-propagation после смены NS.

<Info>
  Если запись только что добавили и чекер её не видит — подождите 15–30 минут и проверьте снова. Большинство изменений применяются именно за это время, за исключением NS-записей, их добавление может занять до 24-х часов.
</Info>


# Скачивание проекта
Source: https://poehali.mintlify.app/deploy/download_project

Скачайте код вашего проекта для локальной разработки или готовый билд для публикации

<iframe />

## Обзор

Теперь вы можете скачивать свои проекты прямо из интерфейса Поехали! Это позволяет вам:

<CardGroup>
  <Card title="💻  Скачать код" icon="code">
    Получите исходный код проекта для локальной разработки и внесения изменений
  </Card>

  <Card title="📦  Скачать билд" icon="box">
    Скачайте готовый к публикации билд для размещения на вашем хостинге
  </Card>
</CardGroup>

<Note>
  Раньше скачивание проектов было доступно только через GitHub интеграцию. Теперь вы можете скачать проект напрямую в редакторе!
</Note>

## Как скачать проект

<Steps>
  <Step title="Откройте ваш проект" />

  <Step title="Найдите кнопку скачивания">
    В правом верхнем углу редактора найдите кнопку «Скачать»

    <img alt="Скачивание проекта светлой теме" />

    <img alt="Скачивание проекта светлой теме" />
  </Step>

  <Step title="Выберите тип загрузки">
    Выберите, что именно вы хотите скачать:

    * **Скачать код** – для разработки
    * **Скачать билд** - для публикации
      <img alt="Скачивание проекта светлой теме" />
      <img alt="Скачивание проекта светлой теме" />
  </Step>

  <Step title="Дождитесь завершения">
    Файлы будут упакованы в архив и автоматически загружены на ваш компьютер
  </Step>
</Steps>

## Типы загрузок

### Исходный код

При скачивании исходного кода вы получите:

* Все компоненты React вашего проекта
* Файлы стилей (CSS/Tailwind)
* Конфигурационные файлы
* Package.json с зависимостями
* Структуру проекта, готовую для локальной разработки

### Production билд

При скачивании билда вы получите:

* Оптимизированные файлы HTML, CSS и JavaScript
* Все изображения и ассеты
* Готовую структуру для загрузки на хостинг
* Минифицированный код для быстрой загрузки

<Warning>
  Билд содержит скомпилированный код и не предназначен для редактирования. Для внесения изменений скачайте исходный код
</Warning>

## Что делать после скачивания

<AccordionGroup>
  <Accordion title="Работа с исходным кодом">
    1. Распакуйте архив в удобную папку
    2. Откройте терминал в папке проекта
    3. Выполните `npm install` для установки зависимостей
    4. Запустите `npm run dev` для локальной разработки
    5. Вносите изменения и тестируйте локально
  </Accordion>

  <Accordion title="Публикация билда">
    1. Распакуйте архив с билдом
    2. Загрузите все файлы на ваш веб-сервер
    3. Убедитесь, что index.html находится в корневой папке
    4. Настройте ваш домен на эту папку
    5. Ваш сайт готов к работе!
  </Accordion>

  <Accordion title="Синхронизация изменений">
    Если вы внесли изменения в локальный код и хотите обновить проект в Поехали!, используйте [GitHub интеграцию](/deploy/github) для синхронизации
  </Accordion>
</AccordionGroup>

## Часто задаваемые вопросы

<AccordionGroup>
  <Accordion title="Могу ли я скачать старые версии проекта?">
    В данный момент доступна только последняя версия проекта. Для работы с версиями используйте [GitHub интеграцию](/deploy/github)
  </Accordion>

  <Accordion title="Есть ли ограничения на количество скачиваний?">
    Нет, вы можете скачивать ваши проекты неограниченное количество раз
  </Accordion>
</AccordionGroup>

## Советы

* **Тестируйте перед публикацией** — всегда проверяйте скачанный билд локально перед загрузкой на сервер
* **Используйте контроль версий** — подключите Git для отслеживания изменений в коде
* **Документируйте изменения** — ведите список всех правок при работе с локальным кодом


# Интеграция с GitHub
Source: https://poehali.mintlify.app/deploy/github

Как подключить проект к GitHub для управления версиями

## Что такое GitHub

GitHub — платформа для хранения кода и работы с ним. Здесь можно отслеживать изменения, вести историю разработки и работать в команде. GitHub использует систему Git, которая сохраняет все изменения в коде и позволяет вернуться к любой версии.

<Note>
  GitHub особенно полезен для командной работы и долгосрочных проектов.
</Note>

## Зачем нужна интеграция с GitHub

Подключение проекта к GitHub дает важные преимущества:

* **История изменений** — сохраняются все версии проекта
* **Командная работа** — несколько человек могут работать над проектом одновременно
* **Профессиональный процесс** — доступ к ветвлению, слиянию и проверке кода
* **Автоматизация** — возможность настроить CI/CD для автоматической публикации

## Как подключить GitHub

<Steps>
  <Step title="Подключение к GitHub">
    В редакторе poehali.dev нажмите **Скачать → Подключить GitHub**.

    <img alt="Подключение GitHub в светлой теме" />

    <img alt="Поключение GitHub в темной теме" />
  </Step>

  <Step title="Авторизация через GitHub">
    Войдите в аккаунт GitHub. Выберите **Все репозитории** или конкретные при запросе прав доступа.

    <img alt="Выбор акканта на GitHub в светлой теме" />

    <img alt="Выбор акканта на GitHub в темной теме" />
  </Step>

  <Step title="Выбор аккаунта">
    Укажите личный аккаунт или организацию для интеграции. Можно подключить только один аккаунт GitHub одновременно.

    <img alt="Интеграция в светлой теме" />

    <img alt="Интеграция в темной теме" />
  </Step>

  <Step title="Создание репозитория">
    Вернитесь к проекту. Нажмите **Скачать → выберите аккаунт**. Код автоматически отправится в новый репозиторий.

    <img alt="Создание репозитория в светлой теме" />

    <img alt="Создание репозитория в темной теме" />
  </Step>

  <Step title="Проверка связи">
    Зайдите на GitHub. Там появится репозиторий с вашим проектом. В poehali.dev отобразится название репозитория.

    <img alt="Создание репозитория в светлой теме" />

    <img alt="Создание репозитория в темной теме" />
  </Step>
</Steps>

<Note>
  Каждый проект привязывается к отдельному репозиторию. Для нескольких проектов повторите процесс.
</Note>

## Работа с GitHub

<AccordionGroup>
  <Accordion title="История изменений">
    С GitHub вы получаете полную историю проекта:

    * Изменения сохраняются как коммиты
    * Каждый коммит содержит данные об изменениях, авторе и времени
    * Можно просматривать всю историю проекта

    <Note>
      Коммит — сохраненное состояние проекта в определенный момент времени.
    </Note>
  </Accordion>

  <Accordion title="Ветки">
    Ветки помогают разрабатывать функции параллельно:

    * Создавайте ветки для отдельных функций
    * Переключайтесь между задачами
    * Объединяйте ветки, когда функция готова
  </Accordion>

  <Accordion title="Совместная работа">
    GitHub упрощает командную работу:

    * Дает доступ к проекту другим разработчикам
    * Позволяет проверять изменения через pull-запросы
    * Помогает отслеживать задачи через Issues

    <Note>
      Pull-запрос — способ предложить и обсудить изменения перед их внедрением.
    </Note>
  </Accordion>
</AccordionGroup>

## Советы

* **Делайте частые коммиты** — сохраняйте каждое логическое изменение
* **Пишите понятные комментарии** — это поможет найти нужные изменения
* **Используйте ветки** — разрабатывайте новые функции отдельно
* **Защищайте важные ветки** — предотвращайте случайные изменения main-ветки
* **Регулярно обновляйтесь** — всегда работайте с актуальным кодом

<Note>
  Даже для одиночной работы навыки Git пригодятся при росте проекта.
</Note>


# Публикация
Source: https://poehali.mintlify.app/deploy/publish

Размещение сайта в интернете с доступом по ссылке

## Что такое публикация сайта

Публикация сайта — это размещение вашего проекта в интернете. После публикации любой человек сможет открыть ваш сайт по ссылке.

<Note>
  Поехали! делает всю техническую работу за вас. Вам не нужно разбираться в хостинге или серверах.
</Note>

## Зачем публиковать сайт

* **Доступность** — ваш сайт смогут увидеть все пользователи интернета
* **Реклама** — вы сможете делиться ссылкой на сайт
* **Проверка** — вы увидите, как сайт работает на разных устройствах
* **Подключение сервисов** — вы сможете добавить аналитику, чаты и другие сервисы

## Как опубликовать сайт

<Steps>
  <Step title="Проверьте, что сайт готов" />

  <Step title="Нажмите кнопку «Опубликовать»">
    <img alt="Публикация сайта в светлой теме" />

    <img alt="Публикация сайта в темной теме" />
  </Step>

  <Step title="Получите ссылку на сайт">
    <img alt="Публикация сайта в светлой теме" />

    <img alt="Публикация сайта в темной теме" />
  </Step>
</Steps>

## Управление сайтом

<AccordionGroup>
  <Accordion title="Обновление сайта">
    Вы можете обновить сайт в любой момент:

    <Steps>
      <Step title="Измените проект" />

      <Step title="Нажмите «Обновить»">
        <img alt="Обновление сайта в светлой теме" />

        <img alt="Обновление сайта в темной теме" />
      </Step>

      <Step title="Подождите несколько секунд" />
    </Steps>

    <Note>
      Ссылка на сайт останется прежней. Посетители увидят изменения при обновлении страницы.
    </Note>
  </Accordion>

  <Accordion title="Версионирование">
    Ассистент Юра сохраняет историю изменений вашего сайта:

    * **Безопасные обновления** — не бойтесь экспериментировать с сайтом
    * **Возврат к предыдущей версии** — всегда можно отменить неудачные изменения
    * **Предпросмотр изменений** — просматривайте версии перед откатом
    * **История изменений** — отслеживайте, что и когда менялось

    <Steps>
      <Step title="Откройте историю версий">
        <img alt="Версионирование в светлой теме" />

        <img alt="Версионирование в темной теме" />
      </Step>

      <Step title="Выберите нужную версию">
        <img alt="Версионирование в светлой теме" />

        <img alt="Версионирование в темной теме" />
      </Step>

      <Step title="Восстановите версию">
        <img alt="Версионирование в светлой теме" />

        <img alt="Версионирование в темной теме" />

        <img alt="Версионирование в светлой теме" />

        <img alt="Версионирование в темной теме" />
      </Step>
    </Steps>

    <Note>
      Отмечайте понравившуюся версию, чтобы потом быстрее её найти

      <img alt="Версионирование в светлой теме" />

      <img alt="Версионирование в темной теме" />

      <img alt="Версионирование в светлой теме" />

      <img alt="Версионирование в темной теме" />
    </Note>
  </Accordion>
</AccordionGroup>

## Советы

* **Проверяйте сайт перед публикацией** — убедитесь, что всё работает
* **Обновляйте контент регулярно** — свежая информация нравится посетителям

<Note>
  После публикации сайта вы можете:

  * [Настроить работу с GitHub](/deploy/github)
  * [Подключить свой домен](/deploy/domain)
</Note>


# SEO
Source: https://poehali.mintlify.app/deploy/seo

Как поднять сайт на первые строки поиска

<iframe />

**Поисковая оптимизация (англ. search engine optimization, SEO)** – это способ поднять ваш сайт в поисковых системах. Чем выше ваш сайт в поиске, тем больше посетителей вы получите. Поехали! помогает настроить SEO просто и быстро.

<AccordionGroup>
  <Accordion title="Метаданные для страниц">
    Метаданные – это информация о вашей странице для поисковиков. Эти данные не видны посетителям. Юра создаст их автоматически:

    * **Заголовки страниц** – что увидят пользователи в результатах поиска
    * **Описания страниц** – короткий текст под заголовком в поиске

    <Note>
      **Совет:**

      Напишите Юре: **Обнови проект с учетом лучших практик SEO**. Он добавит все нужные метаданные.
    </Note>
  </Accordion>

  <Accordion title="Карта сайта">
    Карта сайта – это файл со списком всех ваших страниц. Она помогает поисковикам найти и добавить их в поиск быстрее.

    <img alt="Карта сайта в светлой теме" />

    <img alt="Карта сайта в светлой теме" />

    **Как загрузить карту сайта в поисковики:**

    <Steps>
      <Step title="Создайте sitemap.xml">
        Напишите Юре:

        <Tip>
          Создай карту сайта и сделай её доступной по пути /sitemap.xml.
        </Tip>

        После этого обновите сайт через кнопку **Опубликовать**. Карта сайта станет доступна.

        <img alt="Получение ссылки на sitemap.xml в светлой теме" />

        <img alt="Получение ссылки на sitemap.xml в светлой теме" />
      </Step>

      <Step title="Загрузите sitemap.xml в поисковики">
        <AccordionGroup>
          <Accordion title="Для Google">
            1. Зайдите в [Google Search Console](https://search.google.com/search-console/welcome?hl=RU).
            2. Вставьте URL вашего сайта в форму.
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
            3. Добавьте метатег в код сайта с помощью промпта.
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
               <Tip>
                 `<meta name="google-site-verification" content="IO9eAuLsjp2durxLooK_COyXgUc11Tbdyo8Tq4AeIY0" />` Вставь этот метатег на главную страницу сайта. Он должен находиться в разделе `<head>` перед первым разделом `<body>`.
               </Tip>
            4. Обновите сайт с помощью кнопки **Опубликовать**.
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
            5. Подтвердите действие в Google Search Console.
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
            6. Загрузите карту сайта в Google Search Console.
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
               <img alt="Загрузка sitemap.xml в Google в светлой теме" />
          </Accordion>

          <Accordion title="Для Яндекса">
            1. Зайдите в [Яндекс.Вебмастер](https://webmaster.yandex.ru/sites/add/).
            2. Вставьте URL вашего сайта в форму.
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
            3. Добавьте метатег в код сайта с помощью промпта.
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
               <Tip>
                 `<meta name="yandex-verification" content="49f57111fe4e1d24" />` Вставь этот метатег на главную страницу сайта. Он должен находиться в разделе `<head>` перед первым разделом `<body>`.
               </Tip>
            4. Обновите сайт с помощью кнопки **Опубликовать**.
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
            5. Подтвердите действие в Яндекс.Вебмастер.
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
            6. Загрузите карту сайта в Яндекс.Вебмастер.
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
               <img alt="Загрузка sitemap.xml на Яндекс в светлой теме" />
          </Accordion>
        </AccordionGroup>
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Заголовки страниц">
    Заголовки на странице (H1, H2, H3) важны для SEO. Они помогают роботам понять, о чём ваша страница.

    <Note>
      Используйте только **один заголовок H1** на странице. Остальная информация должна идти в подзаголовках H2 и H3.
    </Note>
  </Accordion>
</AccordionGroup>

## Частые вопросы

<AccordionGroup>
  <Accordion title="Как быстро поисковики найдут мою страницу?">
    Обычно Google и Яндекс индексируют страницы в течение нескольких дней. Карта сайта ускорит процесс.
  </Accordion>

  <Accordion title="Почему мой сайт не появляется в поиске?">
    Проверьте, что карта сайта добавлена и в Google Search Console, и в Яндекс.Вебмастер. Убедитесь, что страницы соответствуют требованиям SEO.
  </Accordion>
</AccordionGroup>


# Облачные функции
Source: https://poehali.mintlify.app/functions/cloud-functions

Ваше взаимодействие с сайтом 

<iframe />

Облачные функции — это инструмент, с помощью которого вы можете настроить более сложные процессы. Например:

* регистрировать и авторизовывать пользователей;
* отправлять вам заявки пользователей;
* собирать статистику сайта;
* подключить оплату услуг;
* многое другое.

Нужны ли вашему проекту функции? Как пользоваться функциями так, чтобы максимально улучшить ваше веб-приложение?

Опишите Юре, что вы хотите добавить на сайт и он подготовит для вас решение. Напомним: для того, чтобы функция выполняла то, что вам нужно, прорабатывайте каждую функцию отдельно; не переходите к новой функции, пока не убедитесь в правильной работе первой.

С помощью подробной информации о функциях в Ядре приложения вы сможете отследить, насколько корректно она выполняет необходимую задачу.

Какая информация о функциях у вас есть и как ей пользоваться?  Подробно расскажем в этом разделе.

## Как найти информацию о функциях

Чтобы проверить информацию о функциях откройте Ядро и перейдите в раздел Функции:

![functions.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/functions.png)

Этот раздел предназначен для того, чтобы получить общую информацию о функциях вашего сайта:

* Список всех функций проекта
* Время вычислений за 24 часа — чтобы отследить время вычисления функций
* Дата создания и последнего обновления — помогут понять, когда вы работали с функцией
* ID функций — понадобится для настройки внешних обращений к функции по API

![5.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/5.png)

Здесь так же находится сводная статистика по работе функций и их текущих [лимитах](/functions/cloud-functions#лимиты-функций):

![6.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/6.png)

Чтобы проанализировать работу конкретной функции, вы можете открыть её статистику с более детальной информацией.

## Статистика функций

Подробная статистика функции может понадобиться вам по разным причинам:

* для улучшения веб-приложения;
* для устранения неполадок;
* для проверки [лимитов](/functions/cloud-functions#лимиты-функций);
* и другое. Чтобы открыть статистику работы функции выберете нужную вам функцию из списка:

![7.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/7.png)

На открывшейся странице находятся разные параметры, описывающие функцию:

![func.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/func.png)

<div>
  Ниже находится подробное описание всех параметров. Важно: все данные таблиц обновляются в реальном времени, но могут приходить приходить с задержкой до 5 минут.
</div>

<AccordionGroup>
  <Accordion title="Описание функции">
    Из названия функции не всегда может быть понятно, что именно она выполняет. В описании находится небольшой текст о том, что делает выбранная функция.  

    ![func\_1.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/func_1.png)
  </Accordion>

  <Accordion title="Время статистики">
    Над графиками статистики находятся кнопки выбора временного отрезка, за который отображается статистика. Вы можете выбрать нужный вам отрезок: 15 минут, 1 час или 24 часа. 

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

    ![func\_2.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/func_2.png)
  </Accordion>

  <Accordion title="Частота вызовов">
    Выполнение функции вычисляется в вызовах функции. Например, каждый раз, когда пользователь регистрируется на сайте, он будет использовать функцию регистрации. То есть, будет вызывать эту функцию. 

    Вызовы функций — важный параметр, который ограничивается [лимитом](/functions/cloud-functions#лимиты-функций). В графике Частота вызовов видно когда и как часто использовалась ваша функция. Это полезно для статистики — вы сможете понять, сколько вызовов функций вам понадобится в месяц. 

    Частые вопросы о вызовах:

    <AccordionGroup>
      <Accordion title="Какие вызовы функций засчитываются?">
        Функцию можно вызвать на сайте или в редакторе во время разработки. Эти вызовы будут учитываться в графике Частоты вызовов и в лимитах. 

        Во время разработки Юра не вызывает функции. 
      </Accordion>

      <Accordion title="Функции вызываются слишком часто">
        ![func\_3.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/func_3.png)

        Если вы считаете, что функции вызываются чаще, чем вы их используете, обратите внимание на статистику функции. Попросите Юру подробно описать как работает функция. 

        Статистика и ответ Юры поможет вам продиагностировать ситуацию, после чего вы сможете настроить ее корректную работу. 
      </Accordion>
    </AccordionGroup>

    ![func\_3.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/func_3.png)
  </Accordion>

  <Accordion title="Категории ответов">
    При работе функция возвращает ответ от сервера. В этом графике указано, какой ответ возвращается при выполнении функции. Всего есть четыре категории ответов:

    * 2xx(200-208) — Все хорошо, функции работают
    * 3xx(300-308) — Ваш запрос был перенаправлен или требуются дополнительные действия
    * 4xx(400-409) — Что-то было настроено неправильно, требуется пересмотреть логику запроса.
    * 5xx(500-511) — Ошибка при обработке запроса на стороне сервиса. Этот тип ошибок всегда требует дополнительной информации для диагностики. 

    Вы можете посмотреть точный номер ответа в [логах](/functions/cloud-functions#статистика) функции.  

    ![func\_4.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/func_4.png)
  </Accordion>

  <Accordion title="Среднее время выполнения">
    На выполнение функций уходит некоторое время. Разным функциям понадобится разное время. На графике отображается среднее время выполнениявыбоанной функции. 

    ![func\_5.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/func_5.png)
  </Accordion>

  <Accordion title="Средняя память">
    В процессе работы функция может использовать память из [базы данных](/functions/database). Например, добавлять новый товар в список товаров или добавлять нового пользователя. Этот график показывает, сколько памяти из базы данных было использованно в процессе работы функции.

    ![func\_6.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/func_6.png)
  </Accordion>

  <Accordion title="Логи">
    Нажмите на вкладку, чтобы посмотреть логирование функции. Это полезный инструмент для поиска ошибок.В логах указывается:

    * точная техническая информация об ошибках при работе функции 
    * точное время запуска и завершения работы функции
    * затраченное время и память на отработку

    Если вы зашли в тупик при подключении нового функционала на сайт, такой инструмент как логи поможет вам лучше всего. Для Юры логи — это самое четкое описание проблемы, которое вы можете дать. Вам не нужно уметь читать логи — отправьте их Юре и попросите их расшифровать или решить неполадку. Он понятно опишет их для вас и исправит ошибку.

    ![func\_7.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/func_7.png)

    ![function-logs.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/function-logs.png)
  </Accordion>

  <Accordion title="Настройки">
    Каждый тариф включает **разное количество часов вычислений.** Это время распределяется между всеми вашими запросами. Вы сами решаете, как его использовать: настройте, сколько секунд отводится на один запрос — и система автоматически посчитает, сколько запросов вы сможете сделать.

    **Как это работает:** Чем меньше времени на запрос → тем больше запросов в час. Чем больше времени на запрос → тем меньше запросов, зато каждый выполняется основательнее.

    **Пример:** При таймауте 2 секунды — вы получаете до 30 запросов в минуту. При таймауте 4 секунды — 15 запросов в минуту, но с запасом времени на сложные задачи.

    Не уверены, какое значение подходит вашему сценарию? Напишите Юре — он подберёт оптимальное время под вашу задачу.
  </Accordion>
</AccordionGroup>

## Лимиты функций

У каждого тарифа есть лимиты на:

* Количество облачных функций, то есть то, сколько разных подпрограмм вы можете создать
* Время вычислений облачных функций, то есть сколько времени выделено на работу ваших функций

Следите за этими лимитами, чтобы ваше приложение работало без ошибок. 

Важно:

* Лимиты не могут уходить в минус и всегда отключаются по достижению 100%
* Обнуление счетчиков лимитов происходит каждый платежный период

## Оптимизация функций

Важной частью настройки функций является их оптимизация. Это позволит сэкономить ресурсы и ускорить работу проекта. Уточните у Юры, как часто сейчас вызываются функции, и рассчитайте, как часто их действительно нужно вызывать. Юра поможет с этим разобраться, но также обязательно проверяйте информацию и попробуйте сделать расчёты самостоятельно.

<Card title="Рассмотрим реальный пример">
  Есть панель, в которой показатели обновляются каждые 5 секунд. Для их получения требуется 7 разных функций.

  Можно настроить систему так, что браузер каждые 5 секунд будет отправлять запросы ко всем 7 функциям. Тогда получится:<br />12 × 7 = 84 вызова в минуту.

  Другой вариант — создать одну функцию, которая проверяет наличие обновлений в базе данных, и только при их наличии вызывает остальные 7 функций.

  В этом случае будет 12 вызовов в минуту, если обновлений нет, и 19 вызовов, если обновление есть.

  То есть экономия составит:<br />84 / 19 ≈ 4,4 раза.
</Card>

Оптимизация функций напрямую влияет на стабильность и стоимость работы проекта. Чем эффективнее настроены вызовы, тем меньше нагрузка на систему, быстрее отклик и ниже расход ресурсов. Не забывайте об этой части настройки функций.


# Редактирование проекта
Source: https://poehali.mintlify.app/functions/component-edit

Или как обновлять существующие компоненты?

## Редактор

Редактор помогает менять элементы на сайте. Выберите элемент и измените его через интерфейс или с помощью Юры.

<img alt="Редактор в светлой теме" />

<img alt="Редактор в темной теме" />

<Note>
  Можно редактировать кнопки, формы, карточки, меню и другие элементы.
</Note>

## Как это работает

<Steps>
  <Step title="Выбор элемента">
    Кликните на элемент, который хотите изменить

    <img alt="Редактор в светлой теме" />

    <img alt="Редактор в темной теме" />

    <img alt="Редактор в светлой теме" />

    <img alt="Редактор в темной теме" />
  </Step>

  <Step title="Редактирование через интерфейс">
    После выбора появится панель настроек. Используйте её для редактирования

    <img alt="Редактор в светлой теме" />

    <img alt="Редактор в темной теме" />

    <img alt="Редактор в светлой теме" />

    <img alt="Редактор в темной теме" />

    <Note>
      * **Маржин** – отступ снаружи элемента.
      * **Паддинг** – отступ внутри элемента.
    </Note>
  </Step>

  <Step title="Редактирование с помощью Юры">
    Опишите изменения в текстовом запросе

    <img alt="Редактор в светлой теме" />

    <img alt="Редактор в темной теме" />

    <img alt="Редактор в светлой теме" />

    <img alt="Редактор в темной теме" />
  </Step>
</Steps>

## Примеры запросов

<CodeGroup>
  ```prompt Изменение внешнего вида theme={null}
  Для выбранной формы:
  - Сделай поля с закругленными углами
  - Измени цвет кнопки на синий (#4285f4)
  - Добавь иконку конверта к выбранному элементу
  ```

  ```prompt Изменение поведения theme={null}
  Для меню навигации:
  - Добавь выпадение подменю при наведении
  - Сделай подсветку активного пункта
  ```

  ```prompt Создание элемента theme={null}
  Создай блок "Часто задаваемые вопросы" с:
  1. Заголовком
  2. 3 вопросами и ответами
  3. Кнопкой "Задать вопрос"
  ```
</CodeGroup>

## Советы

* Точно выбирайте нужный элемент
* Сохраняйте единый стиль для всех элементов
* Проверяйте, как элементы выглядят на мобильных устройствах


# Ядро приложения
Source: https://poehali.mintlify.app/functions/core

Позволяет делать полноценные веб-приложения

Нужно сделать отправку заявок через сайт? Регистрацию пользователей или сбор информации? Для таких задач вам понадобится Ядро.

<iframe />

В ядре находится то, что делает ваш сайт умным, а именно:

![core.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/core.png)

* [База данных](/functions/database)
* [Облачные функции](/functions/cloud-functions)
* [Секреты](/functions/secrets)
* [Хранилище](/functions/storage)

С их помощью вы сможете реализовать любое взаимодействие с веб-приложением и сделать его функциональным.


# Уникальные шрифты
Source: https://poehali.mintlify.app/functions/custom-fonts

Как добавить свои шрифты на ваши сайты

## Обычные шрифты

Они есть на всех компьютерах и телефонах и работают везде.

Популярные шрифты:

* Arial — простой и четкий
* Times New Roman — классический
* Courier New — как на печатной машинке

### Как попросить Юру

Напишите название шрифта в запросе:

```
Используй шрифт Arial для заголовка.
```

Юра изменит шрифт. Это быстро и надежно.

## Google Шрифты

Google Шрифты — это большая коллекция бесплатных шрифтов.
Их можно выбрать на сайте [fonts.google.com](https://fonts.google.com):

<Steps>
  <Step title="по названию">
    Найдите шрифт на Google Fonts. Запомните название. Напишите Юре:

    ```
    Используй шрифт Playfair Display для заголовка.
    ```
  </Step>

  <Step title="по ссылке">
    Скопируйте ссылку на шрифт с Google Fonts. Дайте ссылку Юре:

    ```
    Добавь этот шрифт https://fonts.google.com/specimen/Dancing+Script
    Используй его для заголовка.
    ```
  </Step>
</Steps>

## Советы по выбору шрифтов

* **Для заголовков** — выбирайте красивые шрифты: Playfair Display, Montserrat
* **Для текста** — выбирайте простые шрифты: Open Sans, Roboto
* **Не много шрифтов** — используйте максимум 2-3 шрифта на сайте


# База данных
Source: https://poehali.mintlify.app/functions/database

Здесь хранятся данные ваших таблиц

База данных понадобится вам для того, чтобы хранить информацию. С её помощью вы управляете таблицами и данными вашего веб-приложения. Здесь вы сможете посмотреть и изменить информацию о клиентах, заказах и другом.

<iframe />

Опишите Юре, как и какую информацию вам нужно собрать или внести и он создаст для вас таблицу.

![database.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/database.png)

![create\_table.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/create_table.png)

В уже готовой таблице есть несколько функций:

* Фильтр — добавьте одно или несколько условий фильтра для быстрого поиска нужных данных
* Сортировка — добавьте одно или несколько условий сортировки данных
* Вставить — вы можете вставить строку вручную в таблицу в редакторе или загрузить данные из CSV файла.

![buttons.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/buttons.png)

При выборе строки или строк вы можете:

* Удалить. Это действие нельзя отменить, восстановить удаленные строки будет невозможно.

<Note>
  Юра не может самостоятельно удалить данные из базы. Это сделано для безопасности ваших данных.
</Note>

* Копировать как JSON или CSV.
* Экспортировать в CSV выбранные данные.

<Info>
  Вы можете экспортировать таблицу целиком, нажав на три точки рядом с названием таблицы -> Экспортировать CSV.
</Info>

<Warning>
  Если у вас нет подписки, то через 30 дней после регистрации база данных замораживается.
</Warning>


# Установка расширения
Source: https://poehali.mintlify.app/functions/extension

Готовые решения для необходимых функций

Расширения — это набор инструкций для Юры, который позволяет быстро подключить необходимый функционал на сайте. Выберете кнопку Расширения в чате с Юрой в редакторе проекта, чтобы выбрать нужное расширение. Здесь мы рассмотрим общую инструкцию для установки расширений. Выберете интересующий вас раздел документации для того, чтобы узнать детали установки нужного расширения.

![Extension](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/extension.png)

Для удобства поиска расширения разделены по категориям.

![Extension 1](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/extension_1.png)

### Как добавить расширение

<Steps>
  <Step title="Подготовка">
    Перед установкой расширения подготовьте необходимые страницы или кнопки, к которым будет добавляться расширение. Например, если вы хотите добавить расширение для входа, попросите Юру добавить кнопку «Вход» на вашем сайте.
  </Step>

  <Step title="Выберете расширение">
    Выберете расширение из списка.

    ![Extension 2](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/extension_2.png)

    И нажмите «Установить».

    ![Extension 3](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/extension_3.png)
  </Step>

  <Step title="Последние штрихи">
    При установке расширения Юре может понадобиться дополнительная информация. Он даст вам последовательное описание того, какая информация ему нужна и как её найти. Отправьте ему необходимую информацию и следуйте его подсказкам, чтобы завершить настройку.

    ![Download 1](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/download_1.png)
  </Step>
</Steps>

<Info>
  Если перед установкой расширения вы создавали похожий функционал, то перед тем, как установить расширение, удалите его. Так у вас не появится ошибок при установке расширения.
</Info>


# Работа с изображениями
Source: https://poehali.mintlify.app/functions/image-edit

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

## Редактор изображений

Редактор изображений позволяет добавлять, заменять и настраивать визуальные элементы вашего сайта. Вы можете работать с различными форматами изображений (PNG, JPG, SVG), логотипами и графическими элементами.

<Note>
  Качественные изображения значительно повышают привлекательность вашего сайта и помогают лучше донести информацию до клиентов.
</Note>

## Основные возможности

<AccordionGroup>
  <Accordion title="Добавление новых изображений">
    Прикрепите изображение к текстовому запросу в чате и укажите, где вы хотите его разместить.

    <img alt="Прикрепление изображения в светлой теме" />

    <img alt="Прикрепление изображения в темной теме" />

    <Note>
      Прикрепить можно:

      * Перетащив файл в чат
      * Через интерфейс
      * Вставкой из буфера (Ctrl+V или CMD+V)
    </Note>

    <Tip>
      Добавь эту картинку в карточку с Куршской косой \[kurshskaya.jpg].

      <img alt="Прикрепление изображения в светлой теме" />

      <img alt="Прикрепление изображения в темной теме" />
    </Tip>

    <Note>
      Поддерживаемые форматы: JPG, PNG, SVG
    </Note>
  </Accordion>

  <Accordion title="Замена существующих изображений">
    Используйте текстовые запросы с прикрепленным изображением для замены.

    <Tip>
      Замени картинку в карточке с Калининградом на прикреплённую \[kaliningrad.jpg].

      <img alt="Замена изображения в светлой теме" />

      <img alt="Замена изображения в темной теме" />

      <img alt="Замена изображения в светлой теме" />

      <img alt="Замена изображения в темной теме" />
    </Tip>
  </Accordion>

  <Accordion title="Настройка параметров изображений">
    Управляйте параметрами отображения и поведения изображений:

    * **Размер и масштабирование**: изменение размеров изображения и его адаптация для разных устройств

    <Tip>
      В разделе "Популярные направления" сделай высоту картинок в два раза меньше.

      <img alt="Изменение высоты изображения в светлой теме" />

      <img alt="Изменение высоты изображения в темной теме" />
    </Tip>

    * **Выравнивание**: расположение изображения на странице (по центру, слева, справа)

    <Tip>
      Расположение картинок в разделе "Популярные направления" сделай вертикальным.

      <img alt="Выравнивание изображения в светлой теме" />

      <img alt="Выравнивание изображения в темной теме" />
    </Tip>

    * **Рамки и тени**: добавление границ и теней для выделения изображений

    <Tip>
      Сделай рамки у картинок в разделе "Популярные направления" вот таким цветом #a3b5c2.

      <img alt="Рамки на картинках в светлой теме" />

      <img alt="Рамки на картинках в темной теме" />
    </Tip>

    * **Альтернативный текст**: добавление описания для улучшения доступности и SEO

    <Tip>
      В качестве альтернативного текста для картинки в карточке с Янтарным напиши "Посёлок Янтарный".

      <img alt="Замена альтернативного текста изображения в светлой теме" />

      <img alt="Замена альтернативного текста изображения в темной теме" />
    </Tip>
  </Accordion>

  <Accordion title="Работа с логотипами">
    Особое внимание к вашему фирменному стилю:

    <Steps>
      <Step title="Добавление логотипа">
        Загрузите логотип вашей компании и разместите его в ключевых местах сайта.

        <Note>
          Рекомендуется использовать SVG или PNG с прозрачным фоном для наилучшего качества при любом масштабировании.
        </Note>
      </Step>

      <Step title="Настройка отображения">
        Адаптируйте логотип для разных размеров экрана и версий сайта (светлая/темная тема).

        <Tip>
          Добавь версию логотипа для темной темы сайта с белыми элементами вместо черных.

          <img alt="Редактирование логотипа в светлой теме" />

          <img alt="Редактирование логотипа в темной теме" />

          <img alt="Редактирование логотипа в светлой теме" />

          <img alt="Редактирование логотипа в темной теме" />
        </Tip>
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Создание и настройка галерей">
    Организуйте коллекции изображений в удобном формате:

    <Steps>
      <Step title="Создание галереи">
        Создайте галерею изображений с помощью текстового запроса.

        <Tip>
          Создай галерею изображений на странице Направления/Калининград с сеткой 3x3.

          <img alt="Галерея изображений в светлой теме" />

          <img alt="Галерея изображений в темной теме" />
        </Tip>
      </Step>

      <Step title="Наполнение контентом">
        Добавьте изображения в галерею.

        <Tip>
          На странице /destinations/kaliningrad обнови картинку "Остров Канта".
          Вместо неё поставь прикреплённое изображение \[ostrov.jpg].

          <img alt="Обновление галереи в светлой теме" />

          <img alt="Обновление галереи в темной теме" />
        </Tip>
      </Step>

      <Step title="Настройка поведения">
        Выберите вид отображения (слайдер, сетка, карусель) и интерактивные функции.

        <Tip>
          Сделай галерею на странице /destinations/kaliningrad в виде автопрокручивающейся карусели с подписями под изображениями.

          <img alt="Настройка галереи в светлой теме" />

          <img alt="Настройка галереи в темной теме" />
        </Tip>
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

## Советы

* **Выбирайте подходящий формат**:
  * JPG — для фотографий и плавных цветов
  * PNG — для прозрачности и четких линий
  * SVG — для логотипов и иконок

* **Следите за размером файла**:
  * Большие изображения замедляют загрузку
  * Маленькие могут выглядеть нечетко
  * Размер файла должен соответствовать размеру на странице

* **Соблюдайте единый стиль** — все изображения должны подходить к дизайну сайта

* **Обрабатывайте изображения** — используйте похожие фильтры для всех картинок


# Работа с npm
Source: https://poehali.mintlify.app/functions/npm-packages

Улучшайте сайты готовыми решениями

<Accordion title="Что такое npm пакеты">
  npm пакеты — это готовый код, который создали другие разработчики. Использование готовых решений значительно ускоряет разработку.

  На сайте [npmjs.com](https://www.npmjs.com/) есть тысячи пакетов для решения разных задач.
</Accordion>

## Пример использования

Вы хотите создать доску с карточками, которые нужно перетаскивать мышкой.

Можно попросить Юру написать код с нуля. Но это долго.

Лучше использовать готовый пакет [@hello-pangea/dnd](https://www.npmjs.com/package/@hello-pangea/dnd). Он уже умеет перетаскивать элементы.

### Как попросить Юру

Напишите так:

```
Используй пакет hello-pangea/dnd. 
Сделай доску с карточками. 
Карточки можно перетаскивать между колонками.
```

Юра добавит пакет в проект. Получится готовая доска:

<img alt="21st.dev в светлой теме" />

<img alt="21st.dev в темной теме" />

## Важно знать

Юра не проверяет качество пакетов. Их создают другие люди.

Вы сами отвечаете за выбор пакета. Обязательно тестируйте результат.

## Советы по выбору пакетов

* **Смотрите на скачивания** — много скачиваний означает популярный пакет, такие обычно работают лучше
* **Проверяйте обновления** — хорошие пакеты регулярно обновляются, смотрите дату последнего обновления
* **Читайте отзывы** — на GitHub есть комментарии пользователей, изучите их перед использованием
* **Тестируйте сразу** — после добавления пакета проверьте, как он работает в вашем проекте


# Перенос проекта
Source: https://poehali.mintlify.app/functions/project-transfer



Если вы хотите перенести проект в другой аккаунт или отдать его другому человеку — это займёт пару минут. Проект **переносится полностью** и удаляется из вашего аккаунта после передачи.

**Как это сделать:**

1. Откройте настройки вашего аккаунта.
2. Перейдите во вкладку «Общие» и нажмите кнопку «Получить ссылку» — вам придёт уведомление в Телеграм или на почту для подтверждения.
3. После подтверждения ссылка автоматически скопируется. Она действует 24 часа и подходит только для одного использования.
4. Откройте ссылку в другом профиле на нашем сайте — или отправьте её нужному человеку.


# Секреты
Source: https://poehali.mintlify.app/functions/secrets

Информация, которая останется в тайне

<iframe />

Для подключения некоторых функций Юре может понадобиться секретная информация: ключи доступа, пароли и т.д.

Если Юре понадобится такая информация, он скажет вам об этом. Отправьте нужную информацию в чат, он добавит запись в этот раздел.

![add\_secrets.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/add_secrets.png)

Чтобы просмотреть добавленные секреты откройте Ядро:

![secrets.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/secrets.png)

В разделе вы можете увидеть все запрошенные Юрой секреты и их описание.

![secrets.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/secrets.png)

Ваши секреты защищены, а поэтому:

* Юра не может удалить секрет.
* Юра не может изменить секрет.
* Просмотреть данные секрета не получится даже в этом разделе. Юра добавляет подробное описание секрета, чтобы вы всегда видели, за что он отвечает.

<AccordionGroup>
  <Accordion title="Как удалить секрет? ">
    Чтобы удалить секрет перейдите в раздел Секреты и нажмите иконку корзины рядом с ненужным секретом. Убедитесь в том, что Юра не использует выбранный Секрет, либо сразу же создайте новый. 

    ![3.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/3.png)
  </Accordion>

  <Accordion title="Как изменить секрет?">
    В целях безопасности ваших данных ни вы, ни Юра не сможете изменить уже добавленный секрет. Для того, чтобы изменить секрет:

    * Удалите секрет, который хотите изменить.
    * Создайте новый секрет с тем же именем и описанием, либо добавьте его через Юру. 
  </Accordion>
</AccordionGroup>


# Хранилище
Source: https://poehali.mintlify.app/functions/storage

Хранит ваши файлы

<iframe />

Хранилище — это ваше облако, которое позволит использовать файлы напрямую в проекте. Хранилище открывает для вас такие возможности, как:

* Загружать необходимые файлы в ваше веб приложение, например, фотографии ваших товаров;
* Реализовать скачивание/загрузку файлов через веб-приложение;
* Получать прямые ссылки на ваши файлы;
* Удобно управлять и организовывать файлы веб-приложения;
* и другое. Юра может настроить [функцию](/functions/cloud-functions) любой сложности, чтобы ваш проект мог работать с файлами внутри хранилища. Откройте Хранилище, чтобы начать работу с ним напрямую: <img alt="storage.png" />
  ## Как отправить файлы Юре

Вы можете загрузить в Хранилище любые нужные вам файлы. Для того, чтобы Юра смог их использовать вам нужно выполнить следующие шаги:

<Steps>
  <Step title="Загрузите файлы в хранилище">
    Откройте Хранилище и нажмите кнопку Загрузить. Выберете нужные файлы с вашего устройства. После загрузки они отобразятся в вашем Хранилище:

    ![storage\_upload.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_upload.png)
  </Step>

  <Step title="Скопируйте ссылку на файл">
    Для того, чтобы Юра смог использовать файлы, вам нужно отправить ему прямую ссылку на них. После загрузки в Хранилище для каждого файла будет создана прямая ссылка. Вы можете скопировать ссылку на один файл:

    ![storage\_link.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_link.png)

    Или сразу на несколько:

    ![storage\_links.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_links.png)
  </Step>

  <Step title="Напишите Юре">
    Уточните Юре, как именно нужно использовать ваш файл и прикрепите скопированные ссылки. Готово!

    ![storage\_prompt.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_prompt.png)
  </Step>
</Steps>

## Работа с файлами

В таблице файлов Хранилища у каждого файла подписаны данные о нём:

* Имя
* Размер
* Тип
* Дата загрузки

Чтобы организовать файлы удобным образом вы можете:

<AccordionGroup>
  <Accordion title="Найти файл">
    Чтобы найти нужный файл, начните вводить его имя в поиске:

    ![storage\_find.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_find.png)
  </Accordion>

  <Accordion title="Удалить файл">
    Чтобы удалить файл или файлы, выберете их и нажмите удалить вверху таблицы:

    ![storage\_delete.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_delete.png)

    Это действие нельзя отменить, будьте внимательны при выборе файлов:

    ![storage\_delete1.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_delete1.png)
  </Accordion>

  <Accordion title="Создать папку">
    Нажмите на кнопку, чтобы создать папку.

    ![storage\_folder.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_folder.png)

    ![storage\_folder1.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_folder1.png)

    После этого папка появится в в общем списке файлов Хранилища. 

    ![storage\_folder2.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_folder2.png)
  </Accordion>

  <Accordion title="Открыть файл">
    Нажмите на кнопку рядом с файлом, чтобы просмотреть его в соседней вкладке браузера:

    ![storage\_open.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_open.png)
  </Accordion>

  <Accordion title="Лимиты Хранилища">
    В зависимости от выбранного вами тарифа, у вас есть лимит по размеру загруженных файлов. Он отображается в правом верхнем углу:

    ![storage\_limits.png](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/storage_limits.png)
  </Accordion>
</AccordionGroup>


# Редактирование текста
Source: https://poehali.mintlify.app/functions/text-edit

Управление текстовым контентом сайта

## Текстовый редактор

Текстовый редактор позволяет создавать, изменять и форматировать текст на вашем сайте.

<Note>
  Вы можете редактировать любой текст на сайте: заголовки, параграфы, списки, подписи к изображениям и другие текстовые элементы.
</Note>

## Основные возможности

<AccordionGroup>
  <Accordion title="Редактирование существующего текста">
    Используйте текстовые запросы в чате для изменения конкретных элементов.

    <Tip>
      Измени заголовок на главной странице на **Инновационные решения для вашего бизнеса**
    </Tip>
  </Accordion>

  <Accordion title="Добавление нового текста">
    Вы можете легко добавлять новые текстовые блоки и элементы на страницы вашего сайта:

    <Tip>
      * Добавь параграф с описанием услуг под заголовком на главной странице
      * Вставь цитату клиента в разделе отзывов
      * Создай список преимуществ в разделе 'О нас'
    </Tip>
  </Accordion>

  <Accordion title="Форматирование текста">
    Придайте тексту нужный вид с помощью различных инструментов форматирования:

    * **Базовое форматирование**: жирный текст, курсив, подчеркивание
    * **Заголовки**: разные уровни заголовков (H1-H6)
    * **Списки**: маркированные и нумерованные списки
    * **Выравнивание**: по левому краю, по центру, по правому краю
    * **Интервалы**: настройка отступов и интервалов между строками

    <Tip>
      Сделай заголовок в разделе 'Услуги' жирным шрифтом и выровняй по центру
    </Tip>
  </Accordion>
</AccordionGroup>

## Примеры запросов для работы с текстом

<CodeGroup>
  ```prompt Общие изменения theme={null}
  Измени все тексты на сайте, используя более дружелюбный и неформальный тон.
  Добавь на каждую страницу призыв к действию в конце контента.
  ```

  ```prompt Работа с конкретным элементом theme={null}
  В разделе контактов исправь номер телефона на +7 (495) 123-45-67.
  Замени текст в подвале сайта на "© 2023 Компания «Поехали!». Все права защищены."
  ```

  ```prompt Содержимое новой страницы theme={null}
  На странице "Услуги" создай следующие разделы:

  1. Консультации — краткое описание услуги консультирования
  2. Разработка — информация о создании индивидуальных решений
  3. Поддержка — описание пост-релизной поддержки

  Для каждого раздела добавь заголовок, описание (2-3 предложения) и кнопку "Подробнее".
  ```
</CodeGroup>

<Note>
  Если вы не уверены, как сформулировать запрос для редактирования текста, обратитесь к разделу [Инженерия запросов](/getting-started/prompting) для получения рекомендаций.
</Note>


# Создание по изображению
Source: https://poehali.mintlify.app/getting-started/image-based

Генерация сайтов на основе загруженных изображений

## Создание сайта на основе изображения

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

<Steps>
  <Step title="Подготовьте изображение">
    Убедитесь, что ваше изображение имеет хорошее качество и четко показывает структуру интерфейса.

    <Note>
      **Подходящие типы изображений:**

      * Скриншоты существующих сайтов
      * Дизайн-макеты из Figma, Photoshop, Sketch
      * Рукописные эскизы (достаточно четкие)
      * Сгенерированные AI-изображения интерфейсов
    </Note>
  </Step>

  <Step title="Загрузите изображение">
    Нажмите на иконку загрузки в поле чата и выберите подготовленное изображение.
  </Step>

  <Step title="Добавьте пояснения">
    Дополните загруженное изображение текстовым описанием, уточняющим ваши требования.

    <Tip>
      **Примеры пояснений:**

      * Создай сайт по этому макету, но с другой цветовой схемой
      * Воспроизведи этот интерфейс, добавив раздел для отзывов клиентов
      * Реализуй дизайн по этому эскизу, адаптируя его для мобильных устройств
    </Tip>
  </Step>

  <Step title="Доработайте результат">
    После создания первой версии интерфейса запросите необходимые корректировки.

    <Tip>
      **Примеры запросов на доработку:**

      * Измени шрифт на более современный
      * Добавь анимацию при наведении на кнопки
      * Сделай карточки товаров более выразительными
      * Добавь форму поиска в шапку сайта
    </Tip>
  </Step>
</Steps>

## Советы

* **Используйте чёткие изображения** — размытые картинки затрудняют распознавание

* **Выбирайте контрастные изображения** — это помогает точнее определить границы элементов

* **Рисуйте чёрной ручкой на белой бумаге** — так эскизы будут хорошо видны

* **Подписывайте блоки и элементы** — это помогает понять, что вы хотите получить

<Note>
  Система лучше всего работает с чёткими изображениями профессиональных макетов. Рукописные эскизы могут требовать более подробных текстовых пояснений и последующих корректировок.
</Note>


# Инженерия запросов
Source: https://poehali.mintlify.app/getting-started/prompting

Как составлять эффективные промпты

## Основы составления запросов

Умение правильно составлять запросы (промпты) к ИИ — ключевой навык для эффективной работы с платформой.

<Note>
  Промпт — это ваш запрос к искусственному интеллекту. От качества и точности запроса напрямую зависит результат, который вы получите.
</Note>

<AccordionGroup>
  <Accordion title="Базовые принципы эффективных запросов">
    * **Конкретность** — описывайте желаемый результат максимально точно
    * **Полнота** — указывайте все важные детали и контекст
    * **Структурированность** — выделяйте ключевые моменты, используйте списки
    * **Ясность** — избегайте двусмысленных формулировок

    <Tip>
      **Сравнение запросов:**

      ❌ **Неэффективно**: "Сделай сайт."\
      ✅ **Эффективно**: "Создай лендинг для кофейни с разделами: меню, локации, контакты и форма бронирования столика."

      ❌ **Неэффективно**: "Это не работает, почини!"\
      ✅ **Эффективно**: "На странице контактов не отправляется форма обратной связи. Проверь код отправки формы."
    </Tip>
  </Accordion>

  <Accordion title="Структура эффективного запроса">
    <Steps>
      <Step title="Контекст">
        Объясните, что вы хотите создать и для какой цели.

        <Tip>
          Я хочу создать сайт для своей фотостудии, чтобы привлекать новых клиентов.
        </Tip>
      </Step>

      <Step title="Конкретные требования">
        Перечислите необходимые функции и элементы.

        <Tip>
          Сайт должен включать: галерею работ, информацию об услугах с ценами, контактную форму и возможность записи на фотосессию.
        </Tip>
      </Step>

      <Step title="Стилистические предпочтения">
        Опишите, как должен выглядеть результат.

        <Tip>
          Стиль минималистичный, с черно-белой цветовой схемой и акцентами бирюзового цвета.
        </Tip>
      </Step>

      <Step title="Ограничения">
        Укажите, что следует учесть или избежать.

        <Tip>
          Сайт должен хорошо работать на мобильных устройствах. Не нужны анимации, чтобы фотографии загружались быстрее.
        </Tip>
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Техники улучшения запросов">
    <Steps>
      <Step title="Использование примеров">
        Приведите примеры желаемого результата для большей ясности.

        <Tip>
          Мне нужен сайт в стиле минимализм, как современные лендинги для IT-продуктов, с преобладанием белого цвета и синими акцентами.
        </Tip>
      </Step>

      <Step title="Поэтапный подход">
        Разбивайте сложные задачи на последовательные шаги.

        <Tip>
          Сначала создай главную страницу. После утверждения дизайна перейдем к странице каталога.
        </Tip>
      </Step>

      <Step title="Обратная связь">
        Оценивайте полученные результаты и корректируйте запросы.

        <Tip>
          В целом нравится, но увеличь размер шрифта заголовков и добавь больше пространства между секциями.
        </Tip>
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Запросы для сложных проектов">
    <Steps>
      <Step title="Начинайте с общего плана">
        Сначала определите основную структуру и функциональность.

        <Tip>
          Давай спланируем структуру сервиса аренды недвижимости.
          Какие основные разделы и функции должны быть на сайте?
        </Tip>
      </Step>

      <Step title="Переходите к деталям">
        После определения общей структуры, прорабатывайте ключевые компоненты.

        <Tip>
          Теперь детально проработаем страницу объявления. Она должна включать:

          * Фотогалерею
          * Характеристики объекта
          * Карту с расположением
          * Информацию о владельце
          * Возможность бронирования
        </Tip>
      </Step>

      <Step title="Уточняйте конкретные элементы">
        Детализируйте отдельные элементы интерфейса и функционала.

        <Tip>
          Доработай форму бронирования. Добавь выбор даты заезда/выезда,
          количество гостей и поле для сообщения владельцу.
        </Tip>
      </Step>
    </Steps>

    [//]: # "<Note>"

    [//]: # "**Важно!** При работе над сложными проектами сохраняйте промежуточные результаты через функцию истории версий."

    [//]: # "</Note>"
  </Accordion>
</AccordionGroup>

## Улучшение проекта

<AccordionGroup>
  <Accordion title="Исправление ошибок">
    ### Техники эффективной отладки

    <Steps>
      <Step title="Уточняйте проблему">
        Точно опишите, что именно не работает и в каком контексте.

        <Tip>
          На странице контактов не работает отправка формы.
          Проверь, правильно ли настроен обработчик события отправки.
        </Tip>
      </Step>

      <Step title="Спрашивайте о решениях">
        Ищите альтернативные подходы к реализации функционала.

        <Tip>
          Какие есть альтернативные способы реализации слайдера изображений
          без использования тяжелых библиотек?
        </Tip>
      </Step>

      <Step title="Используйте пошаговый подход">
        Разбивайте сложные проблемы на простые шаги.

        <Tip>
          Давай решать эту проблему постепенно:

          1. Сначала проверим правильность HTML-структуры
          2. Затем проверим стили CSS
          3. И наконец посмотрим JavaScript-функционал
        </Tip>
      </Step>
    </Steps>

    <Note>
      **Совет:** После исправления ошибки попросите ИИ объяснить, что было не так, чтобы в будущем вы могли избежать подобных проблем.
    </Note>
  </Accordion>

  <Accordion title="Оптимизация и улучшение">
    ### Шаблоны запросов для оптимизации

    * **Улучшение производительности**

      <Tip>
        Проанализируй код на наличие проблем с производительностью.
        Обрати внимание на:

        * Неоптимальные запросы к данным
        * Избыточные перерисовки компонентов
        * Тяжелые ресурсы (изображения, скрипты)
      </Tip>

    * **Улучшение пользовательского опыта**

      <Tip>
        Оцени пользовательский интерфейс с точки зрения удобства
        использования. Предложи улучшения для:

        * Навигации по сайту
        * Форм ввода данных
        * Мобильной версии
      </Tip>

    * **Улучшение кода**
      <Tip>
        Выполни рефакторинг этого компонента для улучшения
        читаемости и поддерживаемости. Соблюдай принципы
        чистого кода и следуй современным стандартам.
      </Tip>
  </Accordion>

  <Accordion title="Когда запрос не даёт желаемого результата">
    Если вы не получаете желаемый результат, попробуйте следующие стратегии:

    <Steps>
      <Step title="Уточните запрос">
        Добавьте больше деталей и контекста, используйте более конкретные формулировки.

        <Tip>
          Вместо "Сделай красивый сайт" используйте "Создай одностраничный сайт для кофейни с разделами меню, о нас и контакты, в теплых коричневых тонах".
        </Tip>
      </Step>

      <Step title="Дробите сложные запросы">
        Разбейте сложный запрос на несколько простых шагов.

        <Tip>
          Давай создадим сайт по частям. Сначала спроектируем главную страницу, затем добавим функционал каталога товаров, и в конце настроим корзину и оформление заказа.
        </Tip>
      </Step>

      <Step title="Используйте визуальные примеры">
        Прикрепите изображения для наглядного пояснения ваших идей.

        <Tip>
          Я прикрепляю фотографию интерьера, который мне нравится. Используй похожий стиль для дизайна веб-страницы.
        </Tip>
      </Step>
    </Steps>

    <Note>
      **Помните:** Искусственный интеллект — это инструмент, который учится понимать вас лучше с каждым взаимодействием. Чем больше вы с ним работаете, тем лучше он адаптируется к вашему стилю и требованиям.
    </Note>
  </Accordion>
</AccordionGroup>

## Примеры хороших запросов

<CodeGroup>
  ```prompt Запрос для нового проекта theme={null}
  Создай одностраничный сайт для кофейни "Утренний Аромат" со следующими разделами:

  1. Главный экран с приветствием и фотографией интерьера
  2. О нас - краткая история кофейни (основана в 2018 году, специализируется на спешиалти кофе)
  3. Меню - разделы: кофе, чай, десерты, завтраки
  4. Контакты и карта расположения (адрес: ул. Пушкина, 15)

  Стиль: уютный, теплые коричневые и кремовые тона, шрифты без засечек.
  Важно: сайт должен быть адаптивным для мобильных устройств.
  ```

  ```prompt Доработка существующего проекта theme={null}
  На текущем сайте нашего книжного магазина нужно доработать функционал корзины:

  1. Добавить возможность применения промокодов со скидкой
  2. Реализовать расчет стоимости доставки в зависимости от региона
  3. Добавить опцию "Купить в один клик" на странице товара

  Важно сохранить существующий дизайн и стилистику сайта.
  Текущая корзина использует локальное хранилище для хранения товаров.
  ```

  ```prompt Исправление ошибки theme={null}
  На странице каталога товаров не работает фильтрация по цене.
  При перемещении ползунка цены товары не фильтруются.

  Вот что я уже проверил:
  - Значения цены корректно отображаются при перемещении ползунка
  - В консоли нет ошибок JavaScript
  - Фильтрация по другим параметрам (категория, бренд) работает нормально

  Помоги найти и исправить проблему с фильтрацией по цене.
  ```
</CodeGroup>

## Советы

* **Будьте точными** — чем точнее запрос, тем точнее результат

* **Используйте списки** — это помогает ИИ лучше организовать ответ

* **Давайте обратную связь** — оценивайте результаты и уточняйте детали

* **Пробуйте разные подходы** — экспериментируйте с формулировками запросов


# Быстрый старт
Source: https://poehali.mintlify.app/getting-started/quickstart

От идеи до готового приложения

## Инициализация сайта

Начните создавать сайты с нашим руководством:

<iframe />

<AccordionGroup>
  <Accordion title="Создать первый проект">
    Для начала работы перейдите на сайт [poehali.dev](https://poehali.dev). Начать проект можно одним из двух способов:

    <Steps>
      <Step title="Текстовый запрос">
        Введите [промпт](/getting-started/prompting) на русском языке в поле чата. Опишите, какое приложение вы хотите создать, и система автоматически сгенерирует его для вас.
      </Step>

      <Step title="Загрузка изображения">
        Прикрепите изображение дизайна в чат. Система проанализирует изображение и создаст соответствующий интерфейс на его основе.
      </Step>
    </Steps>

    <img alt="Интерфейс создания проекта в светлой теме" />

    <img alt="Интерфейс создания проекта в светлой теме" />
  </Accordion>

  <Accordion title="Первый запрос (промпт)">
    Благодаря текстовым запросам (промптам) создавать приложения стало легко.

    * Просто опишите, что хотите создать.
    * Чем точнее описание, тем лучше результат.
    * Начинайте с ясных и подробных запросов.
    * Проект легко дорабатывать и корректировать в процессе.

    <Tip>
      **Примеры запросов:**

      1. Сделай сайт для поиска попутчиков на концерты с картой мероприятий, возможностью совместной покупки билетов и чатом для обсуждения.
      2. Создай сайт-визитку для веб-дизайнера с главной страницей, портфолио и формой обратной связи.
      3. Сделай лендинг для пиццерии с меню, информацией о доставке и кнопкой заказа.
    </Tip>

    [Больше информации о том, как составлять запросы](/getting-started/prompting)
  </Accordion>

  <Accordion title="Следующие шаги">
    После инициализации проекта вы можете перейти к следующим этапам:

    <Steps>
      <Step title="Редактирование">
        Улучшайте свой проект, редактируя [текст](/functions/text-edit), [компоненты](/functions/component-edit) и [изображения](/functions/image-edit).
      </Step>

      <Step title="Решение проблем">
        В процессе разработки могут возникнуть проблемы. Используйте инструменты [отладки](/problem-solving/debug) и [рефакторинга](/problem-solving/refactor) для их решения.
      </Step>

      <Step title="Публикация">
        Когда ваш проект будет готов, [опубликуйте](/deploy/publish) его, настройте [свой домен](/deploy/domain) и [интеграцию с GitHub](/deploy/github) для контроля версий.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>


# Шаблоны
Source: https://poehali.mintlify.app/getting-started/template

Простой способ создать проект

Самый быстрый и простой способ начать разработку сайта — это использовать шаблон.

![Template](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/template.png)

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

![Template 1](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/template_1.png)

После того, как вы выберете шаблон, нажмите кнопку Использовать. После этого начнется процесс его первоначальной настройки.

![Template 2](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/template_2.png)

Расскажите Юре о вашем проекте, чтобы он мог подстроить шаблон под вас. Подробно опишите  вашего сайта, для каких целей он предназначен. Это позволит получить максимально точный шаблон.

![Template 3](https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/template_3.png)

После этого вы получите готовый шаблон, доступный для дальнейшей работы. Нажмите «Войти и запустить сборку», чтобы перейти в редактор проекта. В редакторе вы сможете продолжить работу над вашим проектом, добавить новые элементы или убрать не нужные. Спросите Юру и следуйте его подсказкам, чтобы получить необходимый результат и настроить работу всех элементов.

<Info>
  Шаблон — это каркас, дизайн вашего проекта. [Функции](/functions/cloud-functions), например, отправку заявок по кнопке, необходимо настраивать отдельно.
</Info>


# Добро пожаловать
Source: https://poehali.mintlify.app/introduction/main

Три... два... один...   ‏
Поехали — это сервис для разработки приложений сайтов через русский язык. Быстрее классической разработки в 30 раз. Без знания программирования.

## Возможности сервиса

Сервис предоставляет все инструменты для создания приложений и сайтов прямо в браузере:

| Возможность           | Описание                                           | Статус |
| --------------------- | -------------------------------------------------- | :----: |
| Создание сайтов       | Позволяет создавать UX / UI, компоненты и страницы |    ✅   |
| Исправление ошибок    | Юра анализирует код и помогает чинить баги         |    ✅   |
| Скачивание проекта    | Позволяет скачать проект в один клик               |    ✅   |
| Публикация в интернет | Ваш проект становится доступным по URL-ссылке      |    ✅   |
| Функция «Редактор»    | Позволяет обновлять конкретный элемент сайта       |    ✅   |
| Генерация картинок    | Создает картинки по вашему запросу через ИИ        |    ✅   |
| Режим разработки      | Позволяет редактировать код проекта вручную        |    ✅   |
| Ядро                  | Позволяет делать полноценные веб-приложения        |    ✅   |

## Быстрый старт

Чтобы начать работу с платформой, изучите основные руководства:

<CardGroup>
  <Card title="Начало работы" icon="rocket" href="/getting-started/quickstart">
    Пошаговое руководство для создания первого проекта.
  </Card>

  <Card title="Инженерия запросов" icon="keyboard" href="/getting-started/prompting">
    Учитесь правильно составлять запросы. Получайте максимум от сервиса.
  </Card>
</CardGroup>

## Основные функции

Изучите основные возможности платформы:

<CardGroup>
  <Card title="Текстовый редактор" icon="pen-to-square" href="/functions/text-edit">
    Управляйте текстовым наполнением веб-страниц проекта.
  </Card>

  <Card title="Редактор компонентов" icon="puzzle-piece" href="/functions/component-edit">
    Настраивайте интерактивные элементы интерфейса и их поведение.
  </Card>

  <Card title="Работа с изображениями" icon="image" href="/functions/image-edit">
    Руководство по загрузке и редактированию изображений.
  </Card>

  <Card title="Создание UI по картинке" icon="wand-magic-sparkles" href="/functions/image-to-ui">
    Превращайте дизайн-макеты и эскизы в готовый интерфейс.
  </Card>

  <Card title="Публикация" icon="upload" href="/deploy/publish">
    Узнайте, как опубликовать ваше приложение и поделиться им.
  </Card>
</CardGroup>

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

<CardGroup>
  <Card title="Автоматическая отладка" icon="bug-slash" href="/problem-solving/debug">
    Исправляйте ошибки с помощью интеллектуальных подсказок.
  </Card>

  <Card title="Рефакторинг кода" icon="code" href="/problem-solving/refactor">
    Оптимизируйте код для эффективной работы приложения.
  </Card>
</CardGroup>

## Что такое Поехали!

Поехали! — это платформа на базе искусственного интеллекта, созданная для разработки и публикации веб-сайтов прямо в браузере. Мы упростили процесс разработки, собрав всё необходимое в едином интерфейсе.

Традиционно создание приложений требует знаний программирования и установки множества программ. В Поехали! ассистент Юра выполняет всю техническую работу, что позволяет создавать сайты даже тем, кто никогда не программировал.

Ключевые возможности:

* Создание приложений из простого описания на русском языке
* Быстрая публикация в облаке всего за несколько кликов
* Простой и понятный интерфейс редактирования


# Отладка
Source: https://poehali.mintlify.app/problem-solving/debug

Автоматическое исправление ошибок в коде одним кликом

## Что такое отладка

Отладка — это поиск и исправление ошибок в коде. Ассистент Юра самостоятельно находит проблемы и предлагает решения.

<Note>
  Когда в приложении возникает ошибка, в редакторе появляется кнопка с предложением её исправить.

  <img alt="Кнопка отладки в светлой теме" />

  <img alt="Кнопка отладки в темной теме" />
</Note>

<AccordionGroup>
  <Accordion title="Как исправить ошибку">
    <Steps>
      <Step title="Заметить ошибку">
        <img alt="Кнопка отладки в светлой теме" />

        <img alt="Кнопка отладки в темной теме" />
      </Step>

      <Step title="Нажать на кнопку">
        <img alt="Кнопка отладки в светлой теме" />

        <img alt="Кнопка отладки в темной теме" />
      </Step>

      <Step title="Получить работающий сайт!">
        <img alt="Кнопка отладки в светлой теме" />

        <img alt="Кнопка отладки в темной теме" />
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

## Преимущества автоотладки

* **Экономит время** — находит ошибки быстрее, чем ручной поиск
* **Подходит всем** — не нужно знать код для исправления ошибок
* **Обучает** — объясняет причины ошибок
* **Улучшает качество** — предлагает оптимизацию кода

## Самостоятельная отладка

Если хотите исправить ошибки самостоятельно, используйте специальные методы формулирования запросов.

<Note>
  Подробнее о техниках отладки читайте в разделе [Инженерия запросов: Исправление ошибок](/getting-started/prompting#ispravlenie-oshibok).
</Note>


# Рефакторинг
Source: https://poehali.mintlify.app/problem-solving/refactor

Как улучшать код, сохраняя его функциональность

## Что такое рефакторинг

Рефакторинг — это улучшение кода без изменения его работы. Когда код становится слишком большим, ассистент Юра предложит его улучшить.

<Note>
  Когда файл превышает 200 строк, появляется кнопка рефакторинга. Она поможет сделать код лучше.

  <img alt="Кнопка рефактора в светлой теме" />

  <img alt="Кнопка рефактора в темной теме" />
</Note>

<AccordionGroup>
  <Accordion title="Для чего нужен рефакторинг">
    * **Позволяет разрабатывать большие проекты**

      Когда проект растет, код становится сложным. Рефакторинг делает его понятнее и проще в управлении.

    * **Разбивает большие файлы на маленькие**

      Вместо одного огромного файла получаются небольшие модули с чёткими задачами.

    * **Помогает ассистенту Юре**

      Юра лучше понимает чистый код и делает меньше ошибок при работе с ним.

    * **Ускоряет работу**

      Хорошо организованный код выполняется быстрее и использует меньше ресурсов.

    * **Упрощает доработку**

      Добавлять новые функции в чистый код проще и безопаснее.
  </Accordion>

  <Accordion title="Как использовать рефакторинг">
    <Steps>
      <Step title="Заметить кнопку рефакторинга">
        <img alt="Кнопка рефактора в светлой теме" />

        <img alt="Кнопка рефактора в темной теме" />
      </Step>

      <Step title="Нажать на кнопку">
        <img alt="Кнопка рефактора в светлой теме" />

        <img alt="Кнопка рефактора в темной теме" />
      </Step>

      <Step title="Получить улучшенный код!">
        <img alt="Кнопка рефактора в светлой теме" />

        <img alt="Кнопка рефактора в темной теме" />
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

## Плюсы автоматического рефакторинга

* **Экономит время** — не нужно вручную переделывать код
* **Код остается чистым** — не накапливаются проблемы
* **Легче расширять проект** — хороший код проще дополнять
* **Удобно работать в команде** — всем понятно, как устроен код

## Самостоятельное улучшение кода

Вы можете сами попросить Юру улучшить код, даже когда кнопка рефакторинга не появляется.

<Note>
  Подробнее о том, как составлять запросы для улучшения кода, читайте в разделе [Инженерия запросов: Оптимизация](/getting-started/prompting#optimizatsiya-i-uluchshenie).
</Note>


# Неоплата подписки
Source: https://poehali.mintlify.app/subscription/resources-freeze

Что происходит с проектом после окончания подписки

Если подписка закончится, **ваш сайт перестанет работать в тот же день**. Клиенты увидят сообщение об ошибке вместо вашего сайта.

У вас будет время сохранить все данные, но через 60 дней мы удалим базу данных и хранилище навсегда. Даже мы не сможем их восстановить — резервных копий не останется.

## Что произойдет с вашим проектом

| Ресурс               | День окончания | Через 30 дней | Через 60 дней |
| :------------------- | :------------- | :------------ | :------------ |
| **Сайт (домен)**     | **❄️**         | **❄️**        |               |
| **База данных**      | **❄️**         | **❄️**        | ⚠️            |
| **Хранилище файлов** | **❄️**         | **❄️**        | ⚠️            |
| **Облачные функции** | **❄️**         | **❄️**        |               |
| **Код проекта**      | ✅              | ✅             | ✅             |

**❄️** — доступ ограничен, можно восстановить

⚠️ — нельзя восстановить, если есть важные данные — то рекомендуем скачать

✅ — не удаляется

### **В день окончания подписки**

**Ваш сайт перестанет открываться**

* Клиенты увидят сообщение: «Сайт временно недоступен»
* Домен останется привязан к проекту, но не будет работать
* При продлении подписки сайт автоматически заработает снова

**Облачные функции остановятся**

* Автоматические процессы (отправка писем, обработка заказов) перестанут работать
* Код функций сохранится — их можно будет запустить заново

**Вы сможете сохранить данные:**

✅ Скачать список клиентов и заказов из базы данных

✅ Выгрузить все загруженные файлы и фотографии

✅ Экспортировать любую информацию

❌ Нельзя добавлять новые данные или изменять существующие

### **Через 30 дней**

**Настройки домена сбросятся**

* Домен отключится от проекта
* При продлении подписки потребуется заново привязать домен (займет 5-10 минут)

**База данных заморозится**

* Доступ к просмотру и скачиванию данных закроется
* При продлении подписки доступ восстановится — данные сохранятся

**Облачные функции удалятся**

* Опубликованные версии функций будут стерты
* Код останется в проекте — можно будет опубликовать заново

**Последнее предупреждение**

* Мы отправим уведомление: через 30 дней все данные будут удалены навсегда

### **Через 60 дней**

<Danger>
  База данных удалится безвозвратно
</Danger>

* Все клиенты, заказы, записи — всё будет стерто
* Восстановить данные невозможно

<Danger>
  Хранилище удалится безвозвратно
</Danger>

* Все загруженные файлы, изображения, документы — всё будет удалено
* Восстановить файлы невозможно

## Что точно сохранится

<Check>
  Код и сохраненные версии сайта
</Check>

* Исходный код проекта останется у вас
* Все версии сайта (билды) сохранятся
* Скачать их смогут только пользователи с активной подпиской

***

## Что делать прямо сейчас

### Если подписка скоро закончится:

1. Экспортируйте базу данных → [Инструкция: как выгрузить данные](/functions/database)
2. Скачайте файлы из хранилища → [Инструкция: как скачать файлы](/functions/storage)
3. Продлите подписку

## Часто задаваемые вопросы

<AccordionGroup>
  <Accordion title="Можно ли восстановить данные после 60 дней?">
    Нет. После удаления данных восстановление невозможно — даже наша техподдержка не имеет доступа к резервным копиям.
  </Accordion>

  <Accordion title="Что происходит с доменом?">
    Домен остается вашим (если вы его оплачиваете у регистратора). Он просто отключается от проекта на [poehali.dev](http://poehali.dev). При продлении подписки можно заново его привязать.
  </Accordion>

  <Accordion title="Потеряю ли я код сайта?">
    Нет. Исходный код и все версии сайта сохраняются всегда. Но скачать их можно только при активной подписке.
  </Accordion>
</AccordionGroup>