Обновление веб-платформы: блочный конструктор страниц, виджеты и настройки темы

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

Что изменилось?

• Блочные страницы: блоки Hero, расширенный текст, сетка функций, статистика, FAQ, временная шкала, две колонки, галерея, логотипы партнеров, контактная форма и встроенный контент.
• Настройки блоков: вариант, фон (стекло, сетка, аврора, градиент), выравнивание, отступы и параметры анимации управляются для каждого блока отдельно.
• Виджеты: повторяющиеся блоки, такие как призыв к действию «Расскажите о своем проекте» или технологическая строка, определяются один раз и добавляются на нужную страницу по ссылке.
• Шаблоны страниц: новые страницы с шаблонами лендинга, услуг, кампании и страницы «О нас» начинают создаваться с готовой последовательности блоков.
• Настройки темы: вариант темы, цвет акцента и интенсивность анимации можно изменить из панели; учитываются предпочтения пользователей с уменьшенным движением.

Модель данных: старые поля сохранены

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

alter table public.page_sections
  add column block_type text not null default 'rich_text',
  add column settings   jsonb not null default '{}'::jsonb,
  add column is_visible boolean not null default true;

alter table public.page_sections
  add constraint page_sections_block_type_check check (block_type in (
    'hero', 'rich_text', 'feature_grid', 'stats', 'cta', 'gallery', 'faq', 'logo_wall',
    'testimonial', 'contact_form', 'embed_html', 'spacer', 'two_column', 'timeline', 'widget_ref'));

Видимость и правила публикации в базе данных

Анонимный посетитель может читать только опубликованные и видимые блоки опубликованных страниц. Это правило определено не в интерфейсе, а в политике Row Level Security в PostgreSQL, поэтому даже тот, кто делает прямой запрос к API, не может видеть черновики или скрытые блоки. Мы применяем этот подход во всех таблицах контента.

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

Демо-режим: сайт, работающий даже без подключения

Одной из особенностей платформы является возможность работать без подключения к базе данных. Весь начальный контент создается из одного исходного файла; один и тот же процесс сборки формирует как файл сидинга (seed) базы данных, так и статические демо-данные. Таким образом, среды разработки, тестирования и демонстрации используют один и тот же контент, и изменения в контенте не требуют ручного редактирования в двух местах одновременно.

Доступность и производительность

Блоки доступны для навигации с клавиатуры, аккордеоны FAQ содержат атрибуты ARIA, а анимация учитывает системные настройки уменьшения движения. Тяжелые визуальные эффекты (например, трехмерные сцены hero) загружаются только тогда, когда это поддерживается устройством и браузером.

Что нового в разделе Insights?

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

Что дальше?

В предстоящий период планируется внедрение A/B вариантов на уровне блоков, рабочего процесса перевода для многоязычного контента и улучшений медиабиблиотеки. Мы объявим об этом здесь, как только даты дорожной карты станут окончательными; наш принцип — не преподносить незавершенную функцию как готовую.

Как работают настройки блоков?

У каждого блока есть два поля данных: контент и настройки. Контент хранит локализованные тексты и списки элементов (например, вопросы FAQ), а настройки определяют внешний вид. Схема настроек была намеренно сделана узкой: вариант, фон, выравнивание, отступы и анимация. Произвольный CSS или случайные поля не допускаются, поэтому каждое изменение, сделанное из панели, остается в рамках системы дизайна, а целостность сайта не нарушается.

{
  "variant": "accordion",
  "background": "glass",
  "align": "left",
  "padding": "md",
  "animation": "fade"
}

Альтернативы контента: эксперименты без удаления

При изменении контента блока никому не хочется терять старую версию. В этой версии блоки могут содержать именованные альтернативы контента: сохраняются две версии заголовка или описания одного и того же блока, а в панели выбирается то, какая из них будет опубликована. Это также является основой для запланированных в будущем A/B тестов.

Редактирование на месте в панели управления

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

Аудит и история версий

Каждое изменение блока записывается в журнал аудита с указанием того, кто и когда его изменил; ревизии контента сохраняются, и при необходимости можно вернуться к предыдущей версии. Права на публикацию и права на редактирование разделены: редактор может подготовить черновик, но у него может не быть прав на публикацию. Такое разделение ролей является стандартным в панелях управления наших корпоративных клиентов.

Технологический стек

• Интерфейс: React, TypeScript, Vite, Tailwind CSS; для анимаций — Motion и GSAP.
• Данные: Supabase на базе PostgreSQL; права регулируются политиками Row Level Security.
• Валидация: схемы Zod проверяют как вводимые в форму данные, так и структуру контента.
• Развертывание: Docker и Nginx; общедоступные страницы предварительно рендерятся во время сборки.

Подход к тестированию

Схема блоков, функции нормализации и общедоступный рендерер проверяются с помощью модульных тестов, а политики базы данных — с помощью SQL-тестов, выполняемых на реальной базе PostgreSQL. Такие правила, как «скрытый блок не виден анонимному пользователю», проверяются не только в интерфейсе, но и в тесте политики. Проверка правила в двух местах — это не избыточность, а осознанный выбор в целях безопасности.

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