Кейс · Сайт · TypeScript

letterpress-ts: «Реглет», концепт сайта печатной мастерской

Концепт многостраничного сайта вымышленной мастерской высокой печати на чистом TypeScript без фреймворка: Vite multi-page с 8 HTML-входами, компоненты как типизированные функции, возвращающие DOM. Конструктор набора превращает текст в литеры и оттиск, калькулятор считает тираж, состояние хранится в ссылке. Мастерской и ценам верить не нужно: суммы по демо-формулам.

TypeScript
Vite
Multi-page
DOM
CSS
axe
Cloudflare Pages
GitHub Actions

Открыть живой сайт ewsirdev-letterpress.pages.dev Код по запросу в Telegram

01 · Как выглядит

Скриншоты

Скриншот проекта «letterpress-ts: «Реглет», концепт сайта печатной мастерской» на экране 1280 пикселей — Десктоп, 1280 px

Скриншот проекта «letterpress-ts: «Реглет», концепт сайта печатной мастерской» на экране телефона, 390 пикселей — Телефон, 390 px

02 · О проекте

Что это и зачем

Ограничения

Концепт: формулы расчёта вымышлены, заказ формирует письмо mailto, отправить его нужно самому.

Английской версии нет.

Что внутри

Без фреймворка: 8 HTML-входов Vite, компоненты как функции, возвращающие DOM
Конструктор набора: гарнитура, краска, бумага, кегль, шпации; состояние в ссылке и проверка параметров
Таблица цен на главной считается при сборке теми же формулами, что калькулятор
Пользовательский текст попадает в DOM через textContent, innerHTML запрещён линтером

03 · Как запустить

Запуск одной командой

git clone <репозиторий по запросу> letterpress-ts
cd letterpress-ts
npm ci
npm run dev

04 · Код

Репозиторий приватный

Исходники лежат в приватном репозитории. Напишите в Telegram, открою доступ.

Запросить код