Проект построен на базе React 19, TypeScript и сборщика Vite. Стилизация реализуется с помощью глобальных слоев SCSS и механизма CSS Modules. Для интерфейса применяются библиотеки Ant Design и MUI Icons, анимации создаются с помощью Framer Motion, а маршрутизация обеспечивается через React Router. Управление метаданными страниц осуществляется пакетом React Helmet Async, а управление пакетами выполняется через Yarn 4.
Структура каталогов разделена по функциональному назначению. В папке src/pages располагаются основные страницы проекта, включая FAQ-страницы приложений, правила чата и обработчик несуществующих адресов. Тематические подразделы статей со спойлерами находятся в каталоге src/pages/sections. Компоненты оформления статей, такие как медиафайлы, фильтры, предупреждения и код, собраны в каталоге src/components/content. Реализация верхнеуровневых и вложенных спойлеров со всеми сопутствующими утилитами вынесена в папку src/components/detailsSummary. Сложные интерактивные модули, такие как поисковый движок, редактор кривых и конвертеры файлов, расположены в папке src/components/features. Модуль поиска дополнительно разделен на пользовательский интерфейс, состояние, фоновый worker и вспомогательные скрипты ранжирования и подсветки. Глобальное оформление, шапка и футер, а также эффекты смены страниц находятся в каталогах layout и modals. Вспомогательные визуальные элементы, такие как кнопки копирования, загрузчики и карточки ссылок, собраны в папке src/components/ui. Прикладные React-хуки для обработки переходов, копирования и кликов располагаются в каталоге src/hooks, а вспомогательные системные утилиты — в src/utilities. Глобальные SCSS-стили распределены по слоям в папке src/styles. Иллюстрации и видео для статей загружаются в папку public/media, которая структурирована по названиям программ, внешних инструментов и общих медиафайлов, при этом устаревшие файлы сохраняются в подкаталоге legacy. Внутренняя документация проекта находится в каталоге docs, а служебные скрипты автоматизации собраны в папке scripts.
Точкой входа в приложение является файл src/Main.tsx, который монтирует React-компонент, а в файле src/App.tsx настраиваются глобальные провайдеры контекста, обработчики ошибок, темы оформления и маршруты. Основные страницы привязаны к маршрутам для After Effects FAQ, Premiere FAQ, Photoshop FAQ, Expressions, правил чата и других разделов. Каждая контентная страница определяет массив секций, содержащий уникальные ключи, заголовки и ссылки на компоненты, а также подключает форму поиска.
Пример объявления секции:
const sections = [
{
component: AeExportProblems,
id: "export-problems",
key: "4",
title: "Проблемы экспорта",
},
];Каждый файл в каталоге секций описывает отдельную тематическую группу вопросов. Разметка оборачивается в корневой контейнер с классом article-content, а каждый отдельный вопрос верстается компонентом DetailsSummary с понятным заголовком и уникальным якорем. Подробные правила описаны в файле articles.md.
Интерактивные инструменты проекта включают модуль поиска по контенту, редактор кривых анимации и конвертеры файлов в каталоге src/components/features/converters, подробное описание которых приведено в файле components-features.md.
Для вывода изображений и видео применяется компонент ArticleMedia. Группы внешних ссылок верстаются внутри контейнера с классом flexible-links. Требования к оформлению медиафайлов изложены в файле components-content.md, а правила для ссылок — в content-formatting.md.
Механизм генерации идентификаторов якорей нумерует спойлеры и связывает их с логикой переходов по URL-хэшу, а хук валидации проверяет корректность путей при загрузке. Поисковый движок сканирует и индексирует текстовое содержимое спойлеров, включая теги, списки, таблицы и ссылки. Для оптимизации размеров медиафайлов в конфигурацию сборщика Vite интегрирован скрипт сбора метаданных, отдающий информацию через виртуальный модуль.
Управление проектом и обслуживание контента осуществляются с помощью служебных команд Yarn. Команда yarn dev запускает сервер для локального тестирования, а yarn build собирает клиентское приложение с поддержкой серверного рендеринга и предварительной генерации страниц. Для предпросмотра сборки служит команда yarn preview. Проверки статей выполняются командами линтинга контента, отсутствия HTML-тегов в строках и корректности оформления разделителей. Выгрузка текста из тегов разметки выполняется скриптом yarn extract:marked-text, а сбор сведений о версиях и генерация стилей шрифтов запускаются соответствующими командами. Обновление метаданных медиаресурсов осуществляется скриптом yarn media:metadata. Инструменты обслуживания репозитория включают команды исправления токенов, приведения тегов к нижнему регистру, удаления пустых строк и сортировки импортов. Полная проверка типов, стилей и форматирования запускается командой yarn format. Пример типового рабочего цикла разработчика включает установку зависимостей командой yarn install и запуск сервера разработки командой yarn dev.