Тестовое задание · 7 Jun 2024

hadar - вики по Rick and Morty, пересобранная как секретное досье

• Nuxt 3
• Vue 3
• TypeScript
• Tailwind
• Cloudflare

Вики из трёх разделов поверх публичного API Rick and Morty (персонажи, локации, эпизоды), пересобранная целиком. Оригинал держался на unstyled-библиотеке компонентов и шаблонной тёмной теме; в этой версии библиотека убрана полностью в пользу нативных доступных компонентов - свой пагинатор, radio-группа на fieldset, кастомная карточка-досье - на единой системе токенов OKLCH в направлении глубокого teal-ink 'межпространственного досье', где portal-green используется только как сигнал 'живой', метаданные моноширинные, без чистого чёрного и белого. Вместе с этим ушли реальные дефекты: пагинатор, ошибавшийся на единицу между 1-based API и 0-based виджетом; фильтр пола, деливший имя radio-группы со статусом, из-за чего две группы конфликтовали; карточка эпизода, подписывавшая дату выхода как 'type'; watchEffect, читавший URL во время записи и засорявший историю; и ответ API '404 при отсутствии совпадений', который показывался как пугающая ошибка вместо пустого состояния. Вёрстка - честный адаптив 390-1440 (сворачиваемые фильтры, сетка от одной до трёх колонок, липкий пагинатор со счётчиком) на полном уровне доступности: skip-ссылка, лендмарки, один h1 с правильной иерархией заголовков, доступные имена, карточки, управляемые с клавиатуры, с видимым фокусом, и учёт prefers-reduced-motion для каждой анимации. Фишка - карточка персонажа: засекреченное досье, которое 'рассекречивает' портрет при наведении, фокусе или тапе, со штампом статуса по состоянию субъекта. Правдоподобный текст везде, реальные состояния загрузки, пустоты и ошибки, нормальный подвал. Nuxt 3 + Vue 3 + TypeScript + Tailwind, статическая сборка и деплой на Cloudflare Pages.