Каталог примеров кода (IT Code Examples)
Энциклопедия Вселенная IT не может бесконечно раздувать HTML и JS-бандл тысячами длинных листингов, тяжёлых React-демо и растровых иллюстраций. Для этого есть три открытых сервиса:
| Сервис | URL | Что выносим |
|---|---|---|
| IT Code Examples | code.spirzen.ru | Длинные листинги, мультифайловые практикумы (Astro + Shiki) |
| IT Play | play.spirzen.ru | Интерактивные симуляторы и визуализации (Astro + React) |
| IT Encyclopedia Media | assets.spirzen.ru | Иллюстрации, скриншоты, экспорт диаграмм (статика на GitHub Pages) |
В статье остаётся объяснение; код и интерактив подгружаются через iframe, картинки — по URL с assets. Это пилот многоуровневой архитектуры: spirzen.ru — текст и SEO, code — код, play — интерактив, assets — медиа.
Исходник схемы — info/it-universe-three-tier.drawio; полная экосистема — О проекте → архитектура.
Зачем выносить код и демо отдельно
| Проблема в энциклопедии | Решение |
|---|---|
| Длинные листинги раздувают HTML статей | Код в it-code-examples |
| Тяжёлые React-демо раздувают JS-бандл (~4000 файлов) | Демо в it-play |
| Мультифайловые практикумы тяжело читать в markdown | Вкладки файлов, подсветка на сборке |
| Лимит GitHub Pages (~1 GB) | Отдельные репозитории — отдельные лимиты |
| Сотни скриншотов и иллюстраций в репозитории энциклопедии | Репозиторий it-encyclopedia-media → assets.spirzen.ru |
Короткие фрагменты (3–15 строк) и лёгкие inline-виджеты по-прежнему уместны прямо в markdown. Всё длиннее ~30 строк, мультифайловое или интерактивное с состоянием — в отдельные сервисы. Растровые иллюстрации — на assets.spirzen.ru (путь в репозитории повторяет путь статьи).
Пример иллюстрации (IT Encyclopedia Media)
Пилотная картинка лежит в it-encyclopedia-media и раздаётся без участия билда энциклопедии:
Исходник в репозитории: it-encyclopedia-media/.../617/media-pilot-test.png.
Пример кода (IT Code Examples)
Ниже — живой пример Python — Hello World из каталога. Блок подстраивает высоту под содержимое; ссылка внизу открывает полную страницу примера.
Код ITЗагрузка примера кода…
Исходники: it-code-examples/examples/python/hello-world/.
Пример интерактива (IT Play)
Конструктор блоков — соберите вложенную структуру кода из строк и фигурных скобок. Демо живёт в it-play и подгружается так же через iframe с авто-высотой и синхронизацией темы.
Play ITЗагрузка интерактивного демо…
Исходники: it-play/plays/code-basics/block-builder/.
Для авторов статей
Код (code.spirzen.ru)
import ExternalCodeEmbed from '@site/src/components/ExternalCodeEmbed';
<ExternalCodeEmbed example="python/hello-world" title="Python — Hello World" />
| Проп | Назначение |
|---|---|
example | Slug вида python/hello-world → /e/embed/python/hello-world/ |
title | Заголовок iframe (доступность) |
src | Полный URL embed (override) |
minHeight | Минимальная высота, по умолчанию 200 |
Интерактив (play.spirzen.ru)
import ExternalPlayEmbed from '@site/src/components/ExternalPlayEmbed';
<ExternalPlayEmbed example="code-basics/block-builder" title="Конструктор блоков" />
| Проп | Назначение |
|---|---|
example | Slug вида code-basics/block-builder → /p/embed/code-basics/block-builder/ |
title | Заголовок iframe |
src | Полный URL embed (override) |
minHeight | Минимальная высота, по умолчанию 320 |
Правило для новых материалов: текст → it-knowledge-base, код → it-code-examples, интерактив → it-play, иллюстрации → it-encyclopedia-media.
Локально — энциклопедия npm start (:3000), code npm run dev (:4321), play npm run dev (:4322). URL подставляются автоматически.