Как устроена Вселенная IT
Этот раздел — внутренняя энциклопедия проекта о том, как собран сам сайт "Вселенная IT". Здесь разобраны репозиторий it-knowledge-base, фреймворк Docusaurus, кастомные React-компоненты, система тем, поиск, встраивание интерактива и скрипты, которые гоняются перед каждой сборкой.
Материал рассчитан на разработчика, который
- хочет понять архитектуру перед правкой статьи или компонента;
- планирует добавить демо, подборку или раздел и сохранить работоспособность сборки;
- интересуется, почему тяжёлый интерактив вынесен в iframe на play.spirzen.ru.
Как устроена Вселенная IT
Технический разбор сайта spirzen.ru — архитектура, Docusaurus, стек, структура src/, компоненты, темы и скрипты сборки для тех, кто хочет понять или доработать проект.
Архитектура
Многосервисная архитектура "Вселенной IT" — сервисы, паттерны, интеграции, spirzen.ru, code, play, assets и глоссарий терминов для разработчиков сайта.
docusaurus.config.js
Что такое Docusaurus, разбор docusaurus.config.js — пресеты, плагины, webpack, themeConfig, clientModules и глоссарий терминов конфигурации.
package.json и стек
Что такое package.json, npm-скрипты, зависимости Docusaurus и React, devDependencies, пайплайн docs:* и глоссарий терминов стека it-knowledge-base.
sidebars.js
Что такое sidebars.js, боковое меню Docusaurus, autogenerated, _category_.json, slug, id документа, порядок пунктов и глоссарий навигации "Вселенной IT".
TypeScript
Что такое TypeScript и JavaScript, tsconfig.json, compilerOptions, алиасы, JSX/TSX, swizzle-тема, lazyDemo, useDoc, миграция и глоссарий типизации в it-knowledge-base.
Структура src/
Исходный код src/, components, theme, data, css, remark, clientModules, embed-сервисы, article chrome, глоссарий и связи с docs/ в it-knowledge-base.
Темы и стили
Что такое тема и стили, двухслойное оформление data-theme и data-design, Infima, CSS-переменные, custom.css, DesignThemePicker, FOUC и глоссарий визуала it-knowledge-base.
Данные и скрипты
Что такое данные, скрипты и контент, JSON-индексы, remark-плагины, пайплайн docs:*, wiki-поиск, редиректы, lazy demo и глоссарий it-knowledge-base.
Компоненты
Что такое React-компонент, embeds play/code, lazy-обёртки, BrowserOnly, MDX, props, postMessage, хабы, DocSearch и глоссарий компонентов it-knowledge-base.
Карта раздела
| Глава | О чём |
|---|---|
| Архитектура | Многосервисная модель (spirzen.ru, code, play, assets) |
| docusaurus.config.js | Пресеты, плагины, webpack, редиректы |
| package.json и стек | Зависимости, npm-скрипты, Node 20+ |
| sidebars.js | Ручные категории и autogenerated в боковом меню |
| TypeScript | tsconfig, миграция JSX → TSX, типы Docusaurus |
| Структура src/ | Папки clientModules, theme, components, data… |
| Темы и стили | Light/dark и 25+ палитр data-design |
| Данные и скрипты | JSON, remark-плагины, генерация индексов |
| Компоненты | Написание, подключение и отладка React в MDX |
Быстрый старт для разработчика
git clone https://github.com/spirzen/it-knowledge-base.git
cd it-knowledge-base
npm install
npm start
Перед start и build автоматически запускаются скрипты wiki-индекса, поискового индекса и редиректов. Локально сайт откроется на http://localhost:3000. Embed-сервисы по умолчанию смотрят на localhost:4321 (code) и localhost:4322 (play), если вы их подняли отдельно.
Об интерактиве с точки зрения читателя — в разделе Интерактив. О манифесте и правилах контента — Манифест и правила.