Покроковий процес

Крок 1. Налаштуйте документ

Малюйте в точних пропорціях паперу — по одному артборду на файл. Полотно задавайте в міліметрах, а viewBox має збігатися з цими ж числами.

1. 1Створіть документ із одним артбордом потрібного розміру (таблиця нижче).
2. 2У налаштуваннях документа виберіть одиниці — міліметри.
3. 3Переконайтеся, що артборд один. Другий артборд зламає імпорт.
4. 4Тримайте виліт усередині полотна: сторінка обрізається рівно по цьому прямокутнику.

<svg xmlns="http://www.w3.org/2000/svg"
     width="210mm" height="297mm" viewBox="0 0 210 297"
     preserveAspectRatio="xMidYMid meet">

A4 і A5 мають однакові пропорції (1:√2), тому файл A4 автоматично використовується і для A5 — масштабується. Окремий файл потрібен лише для Letter. Тобто два файли на шаблон, а не три.

Крок 2. Намалюйте макет

Малюйте так, ніби це готова сторінка на конкретний місяць: реальна сітка, реальні заголовки, реальні лінійки. Тільки замість самого тексту ви поставите токени на наступному кроці.

Для сітки місяця намалюйте 42 текстові елементи — шість рядів по сім. Вирівнювання під потрібний день тижня і порожні клітинки на початку місяця PlanMe робить сам.

1. 1Розмістіть фон, рамки, лінійки та декор.
2. 2Створіть окремий текстовий об'єкт для кожного місця, де з'являтиметься змінний текст.
3. 3Задайте кожному текстовому об'єкту фінальний кегль, накреслення й вирівнювання.
4. 4Перевірте найдовший варіант підпису з маніфесту — чи вміщається він.

Крок 3. Поставте токени

Токен має вигляд [family.key] і пишеться або в тексті, або в значенні будь-якого атрибута. Під час рендеру кожен токен замінюється на реальне значення.

1. 1Замініть змінний текст на відповідний токен (довідник — нижче на цій сторінці).
2. 2Друкуйте токен одним рухом, не редагуючи його посередині.
3. 3Виділіть увесь текстовий об'єкт і задайте стиль одразу всьому — не частинами.
4. 4Ніколи не переводьте текст у криві: PlanMe має підставити в нього значення.

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

Невідомий токен замінюється на порожнечу — без попередження. Одруківка на кшталт [colour.primary] просто зітре текст. Тому крок 8 не пропускайте.

Крок 4. Денні аркуші — головна хитрість

Тиждень розкладається на ціле число аркушів за рахунок того, що вихідні займають половину висоти звичайного дня. Звідси п'ять денних шаблонів.

Найважливіше: аркуш нумерує свої дні ВІД СЕБЕ, а не від початку тижня. [sheet.date.0] — це той день, з якого починається саме цей аркуш. Тому одне креслення day-2-up обслуговує і понеділок+вівторок, і середу+четвер.

1. 1Використовуйте [sheet.*] на денних аркушах — ніколи [week.day.N].
2. 2Нумеруйте слоти від нуля згори вниз.
3. 3У day-1-plus-2 і day-2-plus-2 останні два дні — це вихідні; дайте їм приблизно половину висоти решти.
4. 4Можна намалювати більше слотів, ніж потрібно: зайві стануть порожніми самі.

[week.day.N] на денному аркуші покаже правильну дату лише на першому аркуші тижня, а далі — чужі числа. Це найпоширеніша помилка в цій системі.

Крок 5. Колір

Два робочі підходи — обирайте під пакет.

1. 1Найпростіше: візьміть hex-значення палітри цього пакета з маніфесту (stylePacks[].palette) і малюйте прямо ними. Для чорно-білого пакета це майже завжди правильний вибір — там лише чорний, сірий і білий.
2. 2Якщо одне креслення має обслуговувати кілька пакетів: після експорту відкрийте .svg у текстовому редакторі й замініть кожен hex на відповідний [color.*]. В Illustrator токен у піпетку не введеш.

Для внутрішніх сторінок не використовуйте світло-сірий тонше за 0,5 pt — домашній лазерний принтер його просто не надрукує.

Крок 6. Шрифти

Системні стеки працюють без жодних дій. Якщо пакет використовує власний шрифт, покладіть файл .woff2 у теку fonts/ і опишіть його в pack.json.

1. 1Складіть шрифт у fonts/ поруч зі своїми SVG.
2. 2Додайте його до масиву fonts у pack.json.
3. 3У самому SVG посилайтеся на нього через звичайний font-family або через [font.heading].
4. 4Переконайтеся, що ліцензія шрифту дозволяє вбудовування у веб і в PDF.

{
  "slug": "mono-serif",
  "name": "Serif",
  "fonts": [
    { "family": "MyDisplay", "weight": 700, "file": "MyDisplay.woff2" }
  ]
}

Крок 7. Експорт з Illustrator

Налаштування експорту важливіші, ніж здається: половина проблем із артворком починається саме тут.

1. 1File → Export → Export As… → формат SVG.
2. 2Styling: Presentation Attributes. НЕ Internal CSS — інакше кольори не підмінятимуться.
3. 3Font: SVG (жодних Convert to outlines).
4. 4Images: Embed.
5. 5Object IDs: Layer Names. Decimal: 2.
6. 6Minify — вимкнено. Responsive — вимкнено.

Internal CSS видно за класами на кшталт .st0 у файлі. Перевірка з кроку 8 ловить це одразу.

Крок 8. Назвіть файл

Назва файлу — це не опис, а адреса. За нею PlanMe розуміє, яку сторінку і в якому форматі ви намалювали.

1. 1Формат назви: <ключ-шаблону>.<формат>.svg — наприклад month-calendar.A4.svg.
2. 2Ключ беріть зі списку внизу цієї сторінки, символ у символ.
3. 3Формат — рівно A4, A5 або Letter, з великої літери.

Файл із помилкою в ключі імпортується мовчки й ніколи не відрендериться. Це відома гостра грань — саме тому є перевірка.

Крок 9. Перевірте перед відправкою

Перевірка знаходить усе, що система інакше проковтне мовчки: невідомі токени, Internal CSS, текст у кривих, токени, розірвані на кілька tspan, неправильні пропорції артборда.

1. 1Покладіть файли у storage/assets/<slug>/.
2. 2Запустіть перевірку (команда нижче).
3. 3Виправте все, що вона позначила як помилку. Попередження — на ваш розсуд.
4. 4Надішліть один готовий файл на початку роботи, а не двадцять наприкінці.

npm run assets:check

Крок 10. Передайте пакет

Одна тека на пакет. pack.json потрібен лише якщо пакет має власні шрифти — інакше ми його додамо самі.

<pack-slug>/
  pack.json
  cover.A4.svg
  cover.Letter.svg
  month-calendar.A4.svg
  ...
  fonts/
    MyDisplay.woff2

Slug теки має точно збігатися зі slug набору зі списку в розділі «Набори стилів».

Довідник токенів

Три правила, які варто знати до початку: токен не можна вкладати в токен; усередині токена не буває дужок; підставлені значення екрануються для XML, тому шрифтові стеки повертаються з &#39; замість апострофів — це нормально.

Часті помилки

• Текст переведено в криві. PlanMe нема куди підставляти значення — сторінка залишиться з вашим тестовим текстом назавжди.
• Токен розірвано на кілька tspan. Так буває, якщо редагувати текст посередині або застосувати стиль до частини рядка. [month.name] перетворюється на [mon + th.name] і не спрацьовує.
• Експорт з Internal CSS. Кольори перестають підмінюватися під пакет.
• [week.day.N] на денному аркуші замість [sheet.*]. Дати збігаються лише на першому аркуші тижня.
• Одруківка в токені. Значення зникає без жодного попередження.
• Два артборди в одному файлі. Імпортується лише перший.
• Жорстко вписаний рік або назва місяця. Файл працюватиме рівно один рік.

Усі токени [label.*]

Це статичні підписи, які PlanMe перекладає сам. Пишіть [label.notes], а не «Нотатки» — інакше сторінка залишиться англійською в українському планері.

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

Перша частина назви файлу. Помилка в ключі означає, що файл імпортується, але ніколи не відрендериться.