Dyskans Nunjucks — Lily Design System

Pyth a wrewgh drehevel

Furv kestava byghan dyskwedhys war servyer — mewnos gans lavell, botton danvon, kargh JavaScript hwath — kynsa noeth, ena stylys, yn a-dro dhe 10 mynysenn.

Kyns dalleth

Ty a'n jeves othom a git, Node 22 po nowodhyes, ha pnpm 10 po nowodhyes. Fordh Nunjucks vyth a ober — Eleventy, Express, po Nunjucks plen.

Kamm 1 — Kevewgh an koodh

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

Pub darn yw kuntelleth yn components/ gans macro.njk, y brov, ha'y dhogynnans — rag ensampel components/button/macro.njk. Poyntewgh dha gargyer Nunjucks orth components/ (yn Eleventy, keworrewgh dhe'n fordh includes) hag enporthewgh an pyth a'n jeves othom.

Kamm 2 — Dha dharn kynsa

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

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

Dyskwedh <button class="button" type="submit">Save</button>. Makros a gemmer unn objekt params: text (ihesys) po html (ha), type, label rag aria-labelha keworrer krok klass.

Kamm 3 — Kesstrewewgh furv byghan

{% 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>

Drefen pubtra yw dyskwedhys war an servyer, an gwiaskodhor a dhelergh HTML a dhiswelyans pur gans an krogow klass — kargh JavaScript a hwath bytes.

Hwithrewgh dha oberenn: kargewgh an folen ha'n furv a hevel plen — yn ewn herwydh bryntyans: an stylyans yw hwath a-rag. Gwaskewgh Tab: fokus a wayn dres pub kontroll, an lavell yw displetys, ha'n danvon a ober. An hwedhel yw gwrys; an semlant yw dhiso ha henna yw nessa.

Kamm 4 — Stylyewgh

Stylyewgh an krogow — .button, .text-input, .label, .field — yn dha folen-stil, po kevrewgh tebel parys yn dha dhyllans selys:

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

Kamm 5 — Gwelewgh pubtra ow ’oberi

An App ensampel Nunjucks + Eleventy a dreh an rolyans kowl avel gwiasva stedhek gans folennow dyskwedhyans dre bub darn:

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

Kammow nessa

Tebelyow — gans an patrom cookie Eleventy rag chanj tebel SSR heb splan.
Gweresoryon dewisyow — yeth ha myns an skrif.
Rolyans darnow — perthynasow, ARIA, ha klavyer dre bub darn.

Govynnow war an fordh? An folen skoodhya yw leun a worthebow — ha mar pe kamm moy splann, leverewgh dhyn ha ni a wellha an dyskans yn lowen.