PlanMe · Designers

Dokumentacja dla projektantów

Twórz strony planera w Adobe Illustrator (lub dowolnym edytorze SVG), eksportuj SVG z tokenami w nawiasach kwadratowych — PlanMe wyrenderuje je z lokalizowanym tekstem, przekolorowaniem motywu i osadzonymi czcionkami. Podgląd i PDF są identyczne.

Przegląd

Każdy SVG jest powiązany z motywem, szablonem strony i rozmiarem papieru. Gdy AssetTemplate istnieje dla motywu użytkownika, klucza szablonu i rozmiaru — Twoja grafika zastępuje wbudowany układ.

Używaj tokenów w nawiasach dla dynamicznego tekstu, etykiet i kolorów motywu. Importer waliduje placeholdery, usuwa niebezpieczny markup i rejestruje paczki z dysku.

1. Rozmiar obszaru roboczego

Projektuj w dokładnym rozmiarze papieru w milimetrach. Ustaw width/height SVG w mm (lub viewBox o tych samych wymiarach).

Papier	Rozmiar (mm)
A4	210 × 297
A5	148 × 210
US Letter	215.9 × 279.4

2. Tokeny [w nawiasach]

Umieszczaj tokeny w treści <text>/<tspan> lub atrybutach (fill, stroke, style). Przy renderowaniu każdy [token] jest zastępowany. Nieznane tokeny są usuwane.

Pola dynamiczne projektu

Token	Wartość
[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

Tekst zlokalizowany

Rozwiązywane według języka planera (Project.locale), nie języka strony.

Token	Wartość
[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)

Przekolorowanie motywu i czcionki

Odwołuj się do palety aktywnego motywu — grafika przekolorowuje się po zmianie motywu:

[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>

Dla własnych czcionek zadeklaruj je w pack.json i użyj nazwy family w SVG.

3. Style tekstu

Importer skanuje <text> i <tspan> pod kątem font-family, font-size, font-weight i fill. Metadane służą do osadzania czcionek.

4. Układ paczki

Paczki znajdują się w storage/assets/ (ASSETS_DIR). Jeden folder na paczkę, nazwany slugiem (zgodnym z Asset.slug w bazie).

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

Pliki SVG nazywają się <templateKey>.<paperSize>.svg — np. cover.A4.svg lub month-calendar.A5.svg.

pack.json

Opcjonalne deklaracje czcionek dla @font-face:

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

5. Import i wdrożenie

Uruchom importer, aby zweryfikować i zarejestrować paczki na serwerze:

Usuwa <script>, handlery zdarzeń i javascript: URL
Wyciąga placeholdery i style tekstu
Tworzy/aktualizuje wiersze AssetTemplate dla (asset, templateKey, paperSize)
Serwuje czcionki pod /api/assets/<slug>/fonts/<file>

npm run assets:import

Dostępne tokeny [label.*]

Użyj tych kluczy po label. w SVG (np. [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]

Klucze szablonów stron

Użyj ich jako pierwszej części nazwy pliku SVG.

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