Proces krok po kroku

Krok 1. Ustaw dokument

Rysuj w dokładnych proporcjach papieru, jeden artboard na plik. Płótno ustaw w milimetrach, a viewBox musi zgadzać się z tymi samymi liczbami.

1. 1Utwórz dokument z jednym artboardem w potrzebnym rozmiarze (tabela niżej).
2. 2Ustaw jednostki dokumentu na milimetry.
3. 3Upewnij się, że artboard jest dokładnie jeden. Drugi psuje import.
4. 4Trzymaj spad wewnątrz płótna: strona jest przycinana dokładnie do tego prostokąta.

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

A4 i A5 mają te same proporcje (1:√2), więc plik A4 jest automatycznie używany także dla A5. Własnego rysunku wymaga tylko Letter — dwa pliki na szablon, nie trzy.

Krok 2. Narysuj układ

Rysuj jak gotową stronę na konkretny miesiąc: prawdziwa siatka, prawdziwe nagłówki, prawdziwe linie. Dopiero sam tekst zamieni się w token w następnym kroku.

Dla siatki miesiąca narysuj 42 obiekty tekstowe w sześciu rzędach po siedem. Wyrównanie do właściwego dnia tygodnia i puste komórki na początku miesiąca PlanMe robi sam.

1. 1Połóż tło, ramki, linie i dekoracje.
2. 2Utwórz osobny obiekt tekstowy dla każdego miejsca, gdzie pojawi się zmienny tekst.
3. 3Nadaj każdemu obiektowi tekstowemu docelowy stopień, grubość i wyrównanie.
4. 4Sprawdź, czy najdłuższy podpis z manifestu wciąż się mieści.

Krok 3. Wstaw tokeny

Token ma postać [family.key] i trafia do treści tekstu albo do wartości dowolnego atrybutu. Podczas renderowania każdy zostaje zastąpiony realną wartością.

1. 1Zamień zmienny tekst na jego token (odnośnik niżej na tej stronie).
2. 2Wpisz token za jednym razem; nie edytuj go w środku.
3. 3Zaznacz cały obiekt tekstowy i ostyluj go w całości, nigdy fragmentu.
4. 4Nigdy nie zamieniaj tekstu na krzywe: PlanMe musi w niego podstawiać.

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

Nieznany token zostaje zastąpiony niczym — po cichu. Literówka typu [colour.primary] po prostu kasuje tekst. Dlatego krok 9 jest ważny.

Krok 4. Kartki dzienne — jedyna pułapka

Tydzień mieści się na całkowitej liczbie kartek dzięki temu, że weekend dostaje połowę wysokości zwykłego dnia. Stąd pięć szablonów dziennych.

Rzecz najważniejsza: kartka numeruje swoje dni OD SIEBIE, a nie od początku tygodnia. [sheet.date.0] to dzień, od którego zaczyna się właśnie ta kartka. Dlatego jeden rysunek day-2-up obsługuje i pon+wt, i śr+czw.

1. 1Na kartkach dziennych używaj [sheet.*] — nigdy [week.day.N].
2. 2Numeruj sloty od zera, z góry na dół.
3. 3W day-1-plus-2 i day-2-plus-2 ostatnie dwa dni to weekend; daj im mniej więcej połowę wysokości pozostałych.
4. 4Możesz narysować więcej slotów niż trzeba: nadmiarowe same się wygaszą.

[week.day.N] na kartce dziennej pokaże właściwą datę tylko na pierwszej kartce tygodnia, a dalej cudze liczby. To najczęstszy błąd w tym systemie.

Krok 5. Kolor

Dwa działające podejścia — wybierz zależnie od pakietu.

1. 1Najprościej: skopiuj wartości hex palety pakietu z manifestu (stylePacks[].palette) i rysuj bezpośrednio nimi. Dla pakietu mono to prawie zawsze właściwy wybór — to tylko czerń, szarość i biel.
2. 2Jeśli jeden rysunek ma obsłużyć kilka pakietów: po eksporcie otwórz .svg w edytorze tekstu i zamień każdy hex na odpowiedni [color.*]. Tokena nie wpiszesz do próbnika kolorów w Illustratorze.

Na stronach wewnętrznych unikaj jasnych szarości cieńszych niż 0,5 pt — domowa drukarka laserowa po prostu ich nie odbije.

Krok 6. Czcionki

Stosy systemowe działają bez żadnych zabiegów. Jeśli pakiet używa własnego kroju, umieść plik .woff2 w folderze fonts/ i opisz go w pack.json.

1. 1Umieść czcionkę w fonts/ obok swoich plików SVG.
2. 2Dodaj ją do tablicy fonts w pack.json.
3. 3W samym SVG odwołaj się do niej zwykłym font-family albo przez [font.heading].
4. 4Sprawdź, czy licencja pozwala na osadzanie w webie i w PDF.

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

Krok 7. Eksport z Illustratora

Ustawienia eksportu znaczą więcej, niż się wydaje: połowa problemów z grafiką zaczyna się właśnie tutaj.

1. 1File → Export → Export As… → SVG.
2. 2Styling: Presentation Attributes. NIE Internal CSS, bo kolory przestaną się podmieniać.
3. 3Font: SVG (nigdy Convert to outlines).
4. 4Images: Embed.
5. 5Object IDs: Layer Names. Decimal: 2.
6. 6Minify wyłączone. Responsive wyłączone.

Internal CSS poznasz po klasach w stylu .st0 w pliku. Kontroler z kroku 9 wyłapuje to natychmiast.

Krok 8. Nazwij plik

Nazwa pliku to adres, nie opis. Po niej PlanMe rozpoznaje, którą stronę i w jakim formacie narysowałeś.

1. 1Wzór to <klucz-szablonu>.<format>.svg — na przykład month-calendar.A4.svg.
2. 2Klucz weź z listy na dole tej strony, znak po znaku.
3. 3Format to dokładnie A4, A5 albo Letter, z wielkiej litery.

Plik z literówką w kluczu zaimportuje się po cichu i nigdy nie wyrenderuje. To znana ostra krawędź — od tego jest kontroler.

Krok 9. Sprawdź przed wysłaniem

Kontroler znajduje wszystko, co system inaczej przełknąłby bez słowa: nieznane tokeny, Internal CSS, tekst na krzywych, tokeny rozbite na kilka tspanów, źle proporcjonowany artboard.

1. 1Umieść pliki w storage/assets/<slug>/.
2. 2Uruchom kontroler (polecenie poniżej).
3. 3Popraw wszystko, co zgłosi jako błąd. Ostrzeżenia zostawiamy Tobie.
4. 4Przyślij jeden gotowy plik na początku, a nie dwadzieścia na końcu.

npm run assets:check

Krok 10. Przekaż pakiet

Jeden folder na pakiet. pack.json jest potrzebny tylko wtedy, gdy pakiet ma własne czcionki — w przeciwnym razie dodamy go sami.

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

Slug folderu musi dokładnie odpowiadać slugowi pakietu z sekcji pakietów stylów.

Odnośnik tokenów

Trzy zasady warte poznania na start: tokeny nie mogą być zagnieżdżane; token nie może zawierać nawiasów; podstawione wartości są escapowane dla XML, więc stosy czcionek wracają z &#39; zamiast apostrofów — to poprawne i renderuje się dobrze.

Częste błędy

• Tekst zamieniony na krzywe. PlanMe nie ma w co podstawiać — strona na zawsze zostaje z Twoim tekstem zastępczym.
• Token rozbity na kilka tspanów. Zdarza się przy edycji tekstu w środku albo stylowaniu części wiersza. [month.name] staje się [mon + th.name] i nigdy nie zadziała.
• Eksport z Internal CSS. Kolory przestają reagować na pakiet.
• [week.day.N] na kartce dziennej zamiast [sheet.*]. Daty zgadzają się tylko na pierwszej kartce tygodnia.
• Literówka w tokenie. Wartość znika bez żadnego ostrzeżenia.
• Dwa artboardy w jednym pliku. Importuje się tylko pierwszy.
• Zaszyty na sztywno rok albo nazwa miesiąca. Plik działa dokładnie przez jeden rok.

Wszystkie tokeny [label.*]

To statyczne podpisy, które PlanMe tłumaczy za Ciebie. Pisz [label.notes], a nie „Notatki” — inaczej strona zostanie po angielsku w ukraińskim planerze.

Klucze szablonów stron

Pierwsza część nazwy pliku. Błędny klucz zaimportuje się po cichu i nigdy się nie wyrenderuje.