@mrktg-common/project-generator

Движок генератора лендингов на Astro. Публикуется в npm как @mrktg-common/project-generator. Ничего не знает о брендах и регионах: реестр брендов, регион, региональный оверлей шаблона и темы приходят от регионального генератора.

Региональные генераторы — тонкие обёртки: bin с вызовом main(config), свой template/ с Layout.astro под пакет компонентов региона, карта тем. Пользователь запускает их: npm create <регион>-project my-landing.

Что делает движок

1. Вопросы (@clack/prompts): имя проекта (или . — текущая папка), бренд из реестра, где будет опубликован лендинг (Острота с префиксом региона или админка лендингов с /voyage/; вопрос задаётся, если регион передал landingsAdminUrl), путь лендинга после префикса, флюидная ли вёрстка (по умолчанию нет), какие шрифты подключить (отмечены шрифты бренда), ставить ли зависимости, делать ли git init и какую ссылку положить в origin. Любой ответ можно передать флагом (--brand, --publisher ostrota|landings-admin, --path, --fluid/--no-fluid, --fonts <id,…>, --install/--no-install, --git/--no-git, --remote <url>), тогда вопрос не задаётся. Ссылка на репозиторий приводится к виду для origin: https-адрес страницы репозитория переводится в ssh, https с .git и ssh остаются как есть. Хвост вроде /tree/main или /-/blob/..., скопированный из адресной строки, отбрасывается.
2. buildVars: из бренда и региона собирает словарь для шаблона — прод-урл https://<хост бренда>/<префикс>/<путь>/, base для Astro, фавиконка и язык бренда, урлы инфраструктуры региона (лоадер футера, clamp-scaling, лоадер аналитики), пакет и версия компонентов. Ответ про флюид даёт FLUID и UNIT: единицу вёрстки rem при флюиде и px без него. Ответ про шрифты даёт FONTS_CSS — @font-face выбранных шрифтов для src/styles/fonts.css.
3. scaffold: копирует template/base движка, поверх — config.templateDir регионального генератора. Плейсхолдеры {{KEY}} подставляются, неизвестный ключ — ошибка. Блок {{#KEY}}…{{/KEY}} на отдельных строках остаётся только при истинном значении ({{^KEY}} — наоборот): так региональный шаблон подключает css из clamp-scaling только при флюидной вёрстке. Файлы _gitignore, _nvmrc, _editorconfig переименовываются в dot-файлы (npm выкидывает их при публикации).

Конфиг регионального генератора

import { main } from '@mrktg-common/project-generator';

main({
  command: 'create-xx-project',      // имя bin, для справки и README сгенерированного проекта
  registry,                          // реестр брендов региона (brands-core IRegistry)
  region,                            // { id, host, bucketHost, componentsPackage }
  templateDir,                       // абсолютный путь к региональному оверлею шаблона
  brandTheme: (brand) => 'theme',    // какую тему пакета компонентов подключать бренду
  brandFonts: (brand) => ['spoof'],  // необязательно; шрифты бренда из src/fonts.js, без него шрифтов нет
  analyticsBrand: (brand) => 'alpha', // необязательно; ?brand= для лоадера аналитики, без него лоадер угадывает бренд по домену
  landingPrefix: (brand) => 'journey', // необязательно; префикс лендингов Остроты, по умолчанию journey
  landingsAdminUrl: 'https://…',     // необязательно; адрес админки лендингов, без него лендинги только для Остроты
  landingsAdminOnly: (brand) => false, // необязательно; бренды, которых нет в Остроте, — только через админку лендингов
  componentsVersion: async (pkg) => '^1.0.0', // необязательно; по умолчанию — свежая из npm
});

Региональный оверлей обязан содержать src/layouts/Layout.astro — базовый шаблон его импортирует. Layout импортирует ../styles/fonts.css, его кладёт базовый шаблон. Доступные плейсхолдеры: см. src/vars.js.

Урлы инфраструктуры

src/urls.js знает три точки входа на хосте региона: /footers/loader.js, /clamp-scaling/v1, /loader/loader.js. Это публичные контракты соответствующих репозиториев; меняется контракт — правится здесь.

Лоадеру аналитики бренд передаётся параметром ?brand= (analyticsBrand в конфиге региона): без него лоадер определяет бренд по домену сайта и на тестовых хостах не подключает ни аналитику, ни баннер cookies. Имена брендов у лоадера свои и не обязаны совпадать с id реестра.

Шрифты

Разрешённый список — FONTS в src/fonts.js: шрифт, его font-family и файлы woff2 в папке /fonts/ бакета региона. Раскладка папки одинаковая во всех регионах, но не каждый шрифт лежит в каждом бакете, поэтому в вопросе регион предлагает только шрифты, положенные хоть одному его бренду (brandFonts). Новый шрифт: выложить файлы в бакеты регионов, где он нужен, добавить его в FONTS, отметить у брендов в региональном генераторе.

font-family совпадают с теми, что объявляют темы пакетов компонентов: одинаковое правило из темы и из проекта браузер сводит к одному файлу.

Разработка

npm install
npm test          # node --test, на вымышленном регионе и бренде