АромаШеф

Сайт, содержащий рецепты с эфирными маслами. Изоморфное Javascript-приложение (MPA с минимумом клиентской интерактивности).

aromachef.ru

Набор возможностей

• PWA.
• Группировка по разделам и хэштегам.
• Вывод 12-ти последних рецептов на главной.
• Карта сайта.
• API: список страниц.
• AMP-версия.
• Интеграция с Telegram-ботом.
• Комментирование рецептов (с премодерацией).
• Автогенерация изображений с различной плотностью пикселей, превью на основе исходных изображений.

Для разработчика

• Перезагрузка страницы в браузере при перезагрузке сервера с помощью Server Sent Events.
• CLI-инструмент автогенерации изображений.
• Инструмент aвтообновления зависимостей.
• Инструмент бэкапа данных.
• Biome для проверки кода.
• Node.js Test Runner для тестирования.
• Автодеплой при пуше через github action по наличию фразы [deploy] в заголовке коммита.

Технические особенности

• Написано на чистом Javascript (JSDoc для тайпчекинга), CSS, SQL. Сборка бандлов (postcss, rolldown) для инвалидации кэша (в dev-режиме скрипты работают как есть).
• Для высокоинтерактивных блоков используется petite-vue.
• Валидация HTML-разметки, БЭМ-нейминга, AMP-разметки, XML-структуры карты сайта.
• Хранение контента в MySQL, реализация на сервере через mysql2.
• БЭМ-нейминг классов, без вложенности. Дополнение к методологии:
  • хелперы с префиксом _ в названии, подключены в конце;
  • допускается вложенность тегов не более 2-х;
  • компоненты, основанные на уникальных тегах, могут не иметь классов.