HTML Cards — генератор карточек для блога

Проект для быстрого формирования набора квадратных карточек (1080×1080+) для публикаций в соцсетях/блоге. Интерфейс рендерит карточки по описанию в JSON и позволяет экспортировать каждую карточку или весь набор в PNG прямо из браузера.

Структура проекта

• index.html
  — основная страница.
• scripts.js
  — логика: загрузка
  ./.content/data.json
  , рендер карточек, экспорт в PNG через
  html2canvas
  .
• styles.css
  — оформление карточек.
• .content/
  — локальные данные (в Git не попадает):
  • data.json
    — обязательный файл с контентом карточек.
  • cover.png
    — обязательное изображение для титульной карточки (
    type: "title"
    ).
• .res/
  — служебные ресурсы (изображения и шаблон данных)
  • data-template.json
    — образец структуры для
    data.json
    .
• .artifacts/
  — локальная папка для сохранённых экспортов PNG (в Git не попадает).

Запуск и использование

1. Подготовьте данные

• Скопируйте файл-шаблон
  ./.res/data-template.json
  в
  ./.content/data.json
  .
• Удалите все комментарии из
  ./.content/data.json
  (файл должен быть валидным JSON без комментариев).
• Используйте поле
  content
  и пишите желаемую HTML‑разметку напрямую (заголовки, списки, жирный, курсив и т.п.).
• Поместите
  cover.png
  в папку
  ./.content/
  .

2. Запустите локальный сервер (из корня проекта)

• Вариант A (Python 3):
  python -m http.server 5500
• Вариант B (Node.js):
  npx serve .
• Вариант C (VS Code): расширение "Live Server" → Open with Live Server

3. Откройте страницу

• Перейдите в браузере на
  http://localhost:5500/
  (или порт, который показал ваш сервер).

4. Экспорт

• Нажмите кнопку «Экспортировать все в PNG», чтобы сохранить все карточки.
• Либо кликните по любой карточке, чтобы экспортировать только её.

Примечание: При открытии

напрямую как

file://...

браузер может заблокировать загрузку JSON. Используйте локальный HTTP‑сервер.