Блок для сайта партнёра

Готовый блок показывает на сайте партнёра животных, которым сейчас нужна помощь. Ему не нужны React, свой бэкенд, API-ключ, cookie или вход. Блок читает публичный API прямо из браузера.

Файлы блока:

partner-feed.html — пример отдельной страницы;
partner-feed.js — модуль блока.

Отдельная страница

Положите оба файла рядом в каталог, который публикует ваш сайт. Если сборщик копирует public/ в итоговую сборку, это public/; без сборщика — каталог с опубликованными HTML-файлами.

После публикации страница будет доступна по адресу https://<ваш-сайт>/partner-feed.html. Убедитесь, что partner-feed.js открывается с кодом 200 и отдаётся как JavaScript, а не как HTML-страница.

Встраивание в существующую страницу

Положите partner-feed.js в корень сайта и добавьте в HTML один контейнер:

<section id="partner-pets" aria-label="Životinje kojima je potrebna pomoć"
  data-lang="sr" data-species="cat" data-limit="24"></section>
<script type="module" src="/partner-feed.js"></script>

Перенесите из примера стили классов .partner-grid, .partner-card, .partner-media, .partner-copy, .partner-actions, .partner-status и стили фокуса ссылок. Стили body, header и заголовка в примере относятся к отдельной странице — заголовок встроенного блока оформите в стиле своего сайта.

Если сайт задаёт Content Security Policy, разрешите:

в connect-src — https://serbia.paws-help.com;
в img-src — https://pub-243a4442d498487695f71cd0508ca79c.r2.dev (хранилище фото).

Настройка

Атрибут	Допустимые значения	По умолчанию
`data-lang`	`sr`, `ru`, `en`	`sr`
`data-species`	`cat`, `dog`, `other`, `all`	`cat`
`data-type`	`adoption`, `foster`, `fundraise`, `all`	`all`
`data-limit`	целое 1–24, размер одной страницы	`24`

all — без фильтра. Неизвестное значение заменяется значением по умолчанию. Показываются только активные карточки. Меняя язык или вид животных, поправьте и статический заголовок страницы.

Как ведёт себя блок

Загружает до трёх страниц — максимум 72 карточки — и группирует карточки одного животного вместе, сохраняя ссылки на все способы помощи.
Обновляется раз в 30 секунд, пока вкладка открыта и видна. Данные старше 30 секунд убираются, так что на экране не висит устаревший список.
Пустая выборка и недоступность API показываются разными сообщениями. После ошибки блок ждёт минимум 30 секунд, при 429 — столько, сколько указано в Retry-After.
Видео, карточка без фото или ошибка загрузки изображения показываются заглушкой.
Это превью, а не полный каталог: актуальное состояние животного всегда в его карточке на Paws Help.