bukatchuk ui

Блоки

Документация API

Страница документации API: сведения об авторизации и ошибках, оглавление, группы операций с таблицей полей, запросом и ответом.

api-docs с версии 0.1.0

Примеры

Документация API встреч
<main class="page"><div class="page__in api">
  <p class="page__back"><a href="#">← К API-токенам</a></p>
  <p class="eyebrow">// meet.bukatchuk.ru/api/v1</p>
  <h1 class="page__h">API видеоконференций</h1>
  <p class="page__lead">Через API скрипты и сервисы управляют встречами и контактами — тем же, что доступно в личном кабинете. Обмен идёт в JSON.</p>
  <div class="api__facts">
    <div class="card">
      <p class="field__label">Авторизация</p>
      <p class="api__text">Каждый запрос несёт токен в заголовке. Токен создаётся в кабинете, в разделе «API-токены».</p>
      <pre class="codebox codebox--sm api__pre">Authorization: Bearer meet_…</pre>
    </div>
    <div class="card">
      <p class="field__label">Ошибки</p>
      <p class="api__text">Ответ с кодом 4xx или 5xx содержит код ошибки и пояснение. Неверные поля — код 422.</p>
      <pre class="codebox codebox--sm api__pre">{"error": {"code": "unauthorized"}}</pre>
    </div>
    <div class="card">
      <p class="field__label">Даты</p>
      <p class="api__text">Даты в ответах — UTC в формате ISO 8601.</p>
      <pre class="codebox codebox--sm api__pre">2026-12-25T11:30:00Z</pre>
    </div>
  </div>
  <nav class="api__nav" aria-label="Разделы API">
    <a class="api__nav-item" href="#meetings">Встречи <span>2</span></a>
  </nav>
  <section class="api__group" id="meetings">
    <h2 class="subhead">Встречи</h2>
    <p class="api__text">Создание и просмотр встреч текущего пользователя.</p>
    <article class="api__op" id="meetings-create">
      <header class="api__op-head">
        <span class="api__method api__method--post">POST</span>
        <code class="api__path">/api/v1/meetings</code>
        <span class="api__summary">Создать встречу</span>
      </header>
      <div class="api__op-body">
        <div class="table-wrap"><table class="table api__table">
          <thead><tr><th>Поле</th><th>Тип</th><th>Описание</th></tr></thead>
          <tbody>
            <tr><td><code>title</code><br><small class="api__req">обязательное</small></td><td>строка<br><small>до 120 символов</small></td><td>Название встречи.</td></tr>
            <tr><td><code>starts_at</code></td><td>дата и время</td><td>Начало в формате ISO 8601.</td></tr>
          </tbody>
        </table></div>
        <div class="api__cols">
          <div class="api__col">
            <p class="field__label">Запрос <button class="btn btn--sm btn--ghost api__copy" type="button" data-ui-copy="curl -X POST https://meet.bukatchuk.ru/api/v1/meetings" data-ui-copied="Скопировано">Скопировать</button></p>
            <pre class="api__term">curl -X POST https://meet.bukatchuk.ru/api/v1/meetings</pre>
          </div>
          <div class="api__col">
            <p class="field__label">Ответ <span class="badge badge--ok">201</span></p>
            <pre class="codebox codebox--sm api__pre">{"id": 42, "title": "Планёрка"}</pre>
            <p class="field__hint">Созданная встреча.</p>
          </div>
        </div>
      </div>
    </article>
  </section>
</div></main>

Установка

bukatchuk-ui add api-docs

Вместе с компонентом установятся: tokens, fonts, base, page, field, card, button, table, badge, core, codebox, subhead.

Файлы

ФайлНазначение
api-docs.cssстили
example.htmlобразец разметки, в проект не копируется
api-docs.jinja.htmlвставка для Jinja

Макрос для Jinja

{#- Страница документации API. facts — список (title, text, sample); groups — список групп с полями
    anchor, title, note и operations (anchor, method, path, summary, params, fields, curl, status, example, returns). -#}
{% macro api_docs(title, lead, groups, facts=[], eyebrow='', back=None, back_text='← Назад') -%}
<main class="page"><div class="page__in api">
  {%- if back %}
  <p class="page__back"><a href="{{ back }}">{{ back_text }}</a></p>
  {%- endif %}
  {%- if eyebrow %}
  <p class="eyebrow">{{ eyebrow }}</p>
  {%- endif %}
  <h1 class="page__h">{{ title }}</h1>
  <p class="page__lead">{{ lead }}</p>
  {%- if facts %}
  <div class="api__facts">
    {%- for f in facts %}
    <div class="card">
      <p class="field__label">{{ f.title }}</p>
      <p class="api__text">{{ f.text }}</p>
      <pre class="codebox codebox--sm api__pre">{{ f.sample }}</pre>
    </div>
    {%- endfor %}
  </div>
  {%- endif %}
  <nav class="api__nav" aria-label="Разделы API">
    {%- for g in groups %}<a class="api__nav-item" href="#{{ g.anchor }}">{{ g.title }} <span>{{ g.operations|length }}</span></a>{% endfor %}
  </nav>
  {%- for g in groups %}
  <section class="api__group" id="{{ g.anchor }}">
    <h2 class="subhead">{{ g.title }}</h2>
    {%- if g.note %}<p class="api__text">{{ g.note }}</p>{% endif %}
    {%- for op in g.operations %}
    <article class="api__op" id="{{ op.anchor }}">
      <header class="api__op-head">
        <span class="api__method api__method--{{ op.method|lower }}">{{ op.method }}</span>
        <code class="api__path">{{ op.path }}</code>
        <span class="api__summary">{{ op.summary }}</span>
      </header>
      <div class="api__op-body">
        {%- if op.params or op.fields %}
        <div class="table-wrap"><table class="table api__table">
          <thead><tr><th>Поле</th><th>Тип</th><th>Описание</th></tr></thead>
          <tbody>
            {%- for p in op.params %}<tr><td><code>{{ p.name }}</code><br><small>в адресе</small></td><td>целое число</td><td>{{ p.description }}</td></tr>{% endfor %}
            {%- for f in op.fields %}<tr>
              <td><code>{{ f.name }}</code>{% if f.required %}<br><small class="api__req">обязательное</small>{% endif %}</td>
              <td>{{ f.type }}{% if f.limits %}<br><small>{{ f.limits }}</small>{% endif %}</td>
              <td>{{ f.description }}{% if f.default is not none %} <small>По умолчанию: {{ f.default }}.</small>{% endif %}</td>
            </tr>{% endfor %}
          </tbody>
        </table></div>
        {%- endif %}
        <div class="api__cols">
          <div class="api__col">
            <p class="field__label">Запрос <button class="btn btn--sm btn--ghost api__copy" type="button" data-ui-copy="{{ op.curl }}" data-ui-copied="Скопировано">Скопировать</button></p>
            <pre class="api__term">{{ op.curl }}</pre>
          </div>
          <div class="api__col">
            <p class="field__label">Ответ <span class="badge badge--ok">{{ op.status }}</span></p>
            {%- if op.example %}<pre class="codebox codebox--sm api__pre">{{ op.example }}</pre>{% endif %}
            <p class="field__hint">{{ op.returns }}.</p>
          </div>
        </div>
      </div>
    </article>
    {%- endfor %}
  </section>
  {%- endfor %}
</div></main>
{%- endmacro %}