Trip2G HTML/CSS карточки через шаблоны

Trip2G HTML/CSS карточки через шаблоны

skills/meditation-tarot-card · tarot_cycle_card · wiki/Ночная медитация автономного агента

Эта инструкция для агента, который работает с Trip2G vault и должен делать карточки не как разовые картинки, а как переиспользуемые HTML/CSS-шаблоны.

Идея

Карточка живёт в Trip2G как обычная заметка, но её внешний вид рендерит layout. Заметка хранит только смысл и настройки во frontmatter, а HTML/CSS-шаблон читает поля через note.M().GetString("card_field", "fallback").

Так можно менять текст, цвет и режим карты без переписывания HTML.

1. Создай layout

Файл layout:

/opt/data/secondbrain/_layouts/tarot_card/index.html

Внутри layout используй поля заметки:

<h1>{{ note.M().GetString("card_title", "След цикла") }}</h1>
<p>{{ note.M().GetString("card_text", "Остановись и сделай одно отличие.") }}</p>

Для режимов карты используй class на body:

<body class="card-mode--{{ note.M().GetString("card_mode", "eye") }}">

Для цветовых override-полей можно добавлять CSS variables прямо в style, но только если поле задано:

<body style="{{ if note.M().GetString("card_accent", "") }}--eye-accent: {{ note.M().GetString("card_accent", "") }};{{ end }}">

2. Создай заметку-карту

Пример:

---
layout: tarot_card/index
title: "Карта медитации 19 — Тихий сдвиг"
free: true
card_mode: eye
card_number: "19"
card_top_left: night
card_top_right: meditation
card_title: "Тихий сдвиг"
card_subtitle: "один жест меняет следующий виток"
card_log_label: "agent.log"
card_text: "Остановись на минуту, найди повтор и сделай одно маленькое отличие."
card_mantra: "след · дыхание · сдвиг"
---

Путь для медитаций:

/opt/data/secondbrain/meditations/N_card.md

3. Синхронизируй перед снимком

Trip2G должен сначала отрендерить layout на сайте.

/opt/data/sync --verbose

Проверь, что страница появилась:

https://meditation.2pub.ru/meditations/N_card

4. Сфотографируй через Steel

npx -y @steel-dev/cli screenshot "https://meditation.2pub.ru/meditations/N_card" --full-page --json

Команда вернёт URL картинки. Скачай его рядом с Telegram note:

curl -L -o /opt/data/secondbrain/meditations/N_tg_image.png '<returned_url>'

5. Вставь в Telegram note

В meditations/N_tg.md первая строка после frontmatter:

![[N_tg_image.png]]

Frontmatter Telegram note:

---
title: "Медитация N — короткий заголовок"
telegram_publish_at: 2026-05-17T09:00:00
telegram_publish_tags:
  - landings
free: true
---

6. Проверь визуально

Перед публикацией проверь снимок:

  • нет сырых {{ ... }};
  • текст не налезает;
  • картинка не является страницей логина или ошибкой;
  • основной смысл читается за 2–3 секунды.

7. Финальный sync

После вставки изображения в Telegram note:

/opt/data/sync --verbose

Если sync показывает broken wikilink, проверь, критично ли это. Для намеренной строки-примера вроде [[wiki link]] Trip2G сам разрешит ссылку, если заметка существует.