PlanMe · Designers

Документація для дизайнерів

Створюйте сторінки планера в Adobe Illustrator (або будь-якому SVG-редакторі), експортуйте SVG з токенами у квадратних дужках — PlanMe відобразить їх з локалізованим текстом, перефарбуванням теми та вбудованими шрифтами. Попередній перегляд і PDF ідентичні.

Огляд

Кожен SVG прив’язаний до набору тем, шаблону сторінки та розміру паперу. Якщо AssetTemplate існує для теми користувача, ключа шаблону та розміру — ваше оформлення замінює вбудований макет.

Використовуйте токени у дужках для динамічного тексту, локалізованих підписів і кольорів теми. Імпортер перевіряє плейсхолдери, видаляє небезпечну розмітку та реєструє пакети з диска.

1. Розмір полотна

Створюйте макет у точному розмірі паперу в міліметрах. Встановіть width/height SVG у mm (або viewBox з тими ж розмірами).

Папір	Розмір (мм)
A4	210 × 297
A5	148 × 210
US Letter	215.9 × 279.4

2. Токени [у дужках]

Розміщуйте токени в вмісті <text>/<tspan> або в атрибутах (fill, stroke, style). Під час рендерингу кожен [token] замінюється. Невідомі токени видаляються.

Динамічні поля проєкту

Токен	Значення
[title]	Page heading config, else the planner title
[subtitle]	Subtitle config, else "<Theme> Edition"
[heading]	Raw config.heading value
[year]	Planner year
[motif]	Theme decorative motif
[themeName]	Theme display name
[config.<key>]	Any value from the page config object

Локалізований текст

Вони визначаються мовою планера (Project.locale), а не мовою сайту.

Токен	Значення
[label.<key>]	Planner label — see table below
[month.name]	Month name from config.month
[month.short]	Abbreviated month from config.month
[month.1] … [month.12]	Specific month (1-based)
[weekday.long.0] … [weekday.long.6]	Weekday names, rotated to week start
[weekday.short.0] … [weekday.6]	Abbreviated weekday names
[day.1] … [day.31]	Day number (literal)

Перефарбування теми та шрифти

Посилання на палітру активної теми — оформлення перефарбовується при зміні теми:

[color.primary], [color.accent], [color.background], [color.surface]
[color.text], [color.muted], [color.line]
[font.heading], [font.body] — theme font stacks

<rect fill="[color.primary]" .../>
<text style="fill:[color.text];font-family:[font.heading]">[title]</text>

Для власних шрифтів оголосіть їх у pack.json і використовуйте ім’я family у SVG.

3. Стилі тексту

Імпортер сканує <text> та <tspan> на font-family, font-size, font-weight і fill. Це зберігається як метадані для вбудовування шрифтів.

4. Структура пакета

Пакети зберігаються в storage/assets/ (ASSETS_DIR). Одна папка на набір, названа за slug (відповідає Asset.slug у БД).

storage/assets/
  winter/
    pack.json
    cover.A4.svg
    cover.A5.svg
    fonts/
      MyDisplay.woff2

SVG файли називаються <templateKey>.<paperSize>.svg — наприклад cover.A4.svg або month-calendar.A5.svg.

pack.json

Необов’язкові оголошення шрифтів для @font-face:

{
  "slug": "winter",
  "fonts": [
    {
      "family": "My Display",
      "weight": 700,
      "style": "normal",
      "file": "MyDisplay.woff2"
    }
  ]
}

5. Імпорт і розгортання

Запустіть імпортер для перевірки та реєстрації пакетів на сервері:

Видаляє <script>, обробники подій і javascript: URL
Витягує плейсхолдери та стилі тексту
Створює/оновлює рядки AssetTemplate для (asset, templateKey, paperSize)
Обслуговує шрифти за /api/assets/<slug>/fonts/<file>

npm run assets:import

Доступні токени [label.*]

Використовуйте ці ключі після label. у SVG (напр. [label.notes]).

Key	Token
notes	[label.notes]
topPriorities	[label.topPriorities]
todo	[label.todo]
habitTracker	[label.habitTracker]
healthWellness	[label.healthWellness]
gratitude	[label.gratitude]
goals	[label.goals]
budget	[label.budget]
weeklyPlan	[label.weeklyPlan]
weekSpread	[label.weekSpread]
dailyPlan	[label.dailyPlan]
schedule	[label.schedule]
edition	[label.edition]

Ключі шаблонів сторінок

Використовуйте їх як першу частину імені SVG-файлу.

coveryear-overviewmonth-calendarweek-one-pageweek-spreadday-per-pagehabit-trackerhealth-trackernotes-linedgoalsbudgetgratitude