Tutorja tan-Nunjucks — Lily Design System

X'se tibni

Formola żgħira ta' kuntatt rrenderjata fuq is-server — qasam b'tikketta, buttuna biex tibgħat, żero tagħbija JavaScript — l-ewwel għarwiena, imbagħad bi stil, f'madwar 10 minuti.

Qabel ma tibda

Għandek bżonn git, Node 22 jew iktar ġdid, u pnpm 10 jew iktar ġdid. Kwalunkwe pipeline Nunjucks jaħdem — Eleventy, Express jew Nunjucks sempliċi.

Pass 1 — Ġib il-kodiċi

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-nunjucks-headless
pnpm install
pnpm test        # vitest rendering every macro

Kull komponent huwa direttorju fi components/ b' macro.njk, it-test tiegħu u d-dokumentazzjoni tiegħu — pereżempju components/button/macro.njk. Immira l-loader Nunjucks tiegħek lejn components/ (f'Eleventy, żidu mat-triq tal-includes) u importa dak li għandek bżonn.

Pass 2 — L-ewwel komponent tiegħek

{% from "components/button/macro.njk" import button %}

{{ button({ text: "Save", type: "submit" }) }}

Jirrendi <button class="button" type="submit">Save</button>. Il-makro jieħdu oġġett params wieħed: text (b'escape) jew html (mhux ipproċessat), type, label għal aria-labelu mqabbad tal-ganċ tal-klassi.

Pass 3 — Ikkomponi formola żgħira

{% from "components/form/macro.njk" import form %}
{% from "components/label/macro.njk" import label %}
{% from "components/text-input/macro.njk" import textInput %}
{% from "components/button/macro.njk" import button %}

<form class="form" method="post">
  <div class="field">
    {{ label({ for: "name", text: "Full name" }) }}
    {{ textInput({ id: "name", name: "name", required: true }) }}
  </div>
  {{ button({ text: "Save", type: "submit" }) }}
</form>

Peress li kollox jiġi rrenderjat fuq is-server, il-browser jirċievi HTML semantiku pur bil-ganċijiet tal-klassi — tagħbija JavaScript ta' żero bytes.

Iċċekkja x-xogħol tiegħek: tella' l-paġna u l-formola tidher għarwiena — eżattament kif intenzjonat: l-istil għad irid jiġi. Agħfas Tab: il-focus jgħaddi minn kull kontroll, it-tikketta tiġi mħabbra u l-ibgħat jaħdem. Il-mġiba lesta; id-dehra hija tiegħek u hija l-pass li jmiss.

Pass 4 — Agħtiha stil

Agħti stil lill-ganċijiet — .button, .text-input, .label, .field — fl-istylesheet tiegħek, jew evita tema lesta fil-layout bażi tiegħek:

<link rel="stylesheet" href="/themes/united-kingdom-government-digital-service.css" />

Pass 5 — Ara kollox jaħdem

L-app eżempju Nunjucks + Eleventy tibni l-katalogu sħiħ bħala sit statiku b'paġni ta' dimostrazzjoni għal kull komponent:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-nunjucks-eleventy-examples
pnpm install && pnpm run dev

Passi li jmiss

Temi — inkluż il-mudell tal-cookies ta' Eleventy għal bdil tat-tema SSR mingħajr titbit.
Għajnuniet tal-preferenzi — lingwa u daqs tat-test.
Katalogu tal-komponenti — proprjetajiet, ARIA u tastiera għal kull komponent.

Mistoqsijiet matul it-triq? Il-paġna tal-għajnuna hija mimlija tweġibiet — u jekk pass jista' jkun iktar ċar, għidilna u nħossuna kuntenti ntejbu t-tutorja.