sicamp canvas

Приложение для генерации обложек для соцсетей.

Вводите текст в форму, получаете картинку. Картинка генерируется в SVG, при скачивании экспортируется в PNG.

Ключевые детали генерации:

• Форма и начальные параметры SVG, например логотип, свёрстаны прямо в index.html.
• Шрифты подключаются в src/fonts.ts и вставляются прямо в SVG, чтобы можно было корректно отрисовать или скачать картинку.
• В src/svg.ts логика по отрисовке данных в SVG: текста, года, полосок и т.д.

Как запустить локально:

nvm install # Установить версию node.js, описанную в файле .nvmrc
nvm use     # Активировать версию node.js, описанную в файле .nvmrc
npm ci      # Установить зависимости
npm run dev # Запустить приложение в режиме разработки

Доступные команды

• npm ci — установить зависимости
• npm run dev — запустить локально
• npm run lint:fix — починить проблемы линтинга и отформатировать
• npm run build — собрать в режиме продакшена
• npm run preview — запустить локально собранный продакшен-артефакт

Технологии

• Node.js
• TypeScript
• Vite — сборка
• Biome — линтер

CI

На push в main запускается:

• Автодеплой Github Pages на sicamp.github.io/canvas/
• Запуск Biome для линтера