Lily ਨਾਲ ਸ਼ੁਰੂਆਤ

ਇੰਸਟਾਲ ਕਰੋ

Lily ਇੱਕ Git ਮੋਨੋਰੈਪੋ ਵਿੱਚ ਰਹਿੰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਹਰ ਫ੍ਰੇਮਵਰਕ ਦੀ ਹੈੱਡਲੈੱਸ ਲਾਇਬ੍ਰੇਰੀ, ਸਹਾਇਕ ਪੈਕੇਜਾਂ ਅਤੇ ਉਦਾਹਰਨ ਐਪ ਲਈ ਡਾਇਰੈਕਟਰੀ ਹੈ। ਇਸ ਨੂੰ ਅਜ਼ਮਾਉਣ ਦਾ ਸਭ ਤੋਂ ਤੇਜ਼ ਤਰੀਕਾ ਮੋਨੋਰੈਪੋ ਕਲੋਨ ਕਰਨਾ ਅਤੇ ਆਪਣੇ ਸਟੈਕ ਲਈ ਹੈੱਡਲੈੱਸ ਲਾਇਬ੍ਰੇਰੀ ਖੋਲ੍ਹਣਾ ਹੈ:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-headless
pnpm install

ਇਹੀ ਪੈਟਰਨ ਹੋਰ ਫ੍ਰੇਮਵਰਕਾਂ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ:

• @lilydesignsystem/html-headless — ਇੰਸਟਾਲ ਦੀ ਲੋੜ ਨਹੀਂ; ਕਾਪੀ ਕਰੋ .html ਫਾਈਲਾਂ
• @lilydesignsystem/svelte-headless — pnpm install
• @lilydesignsystem/react-headless — pnpm install
• @lilydesignsystem/vue-headless — pnpm install
• @lilydesignsystem/angular-headless — pnpm install
• @lilydesignsystem/nunjucks-headless — pnpm install
• lily-design-system-blazor-headless — dotnet build

ਹੈੱਡਲੈੱਸ ਲਾਇਬ੍ਰੇਰੀਆਂ ਕਲੋਨ ਜਾਂ ਵੈਂਡਰ ਕਰਨ ਲਈ ਬਣਾਈਆਂ ਗਈਆਂ ਹਨ — ਸਰੋਤ ਨੂੰ ਸੱਚ ਦਾ ਸਰੋਤ ਮੰਨੋ ਅਤੇ ਜੋ ਚਾਹੀਦਾ ਹੈ ਉਹ ਕਾਪੀ ਕਰੋ। ਪਸੰਦ ਸਹਾਇਕ ਵਾਧੂ ਤੌਰ ਤੇ ਬਿਲਡ ਅਤੇ ਪ੍ਰਕਾਸ਼ਨ ਪਾਈਪਲਾਈਨ (JS ਫ੍ਰੇਮਵਰਕਾਂ ਲਈ npm, Blazor ਲਈ NuGet) ਵਾਲੇ ਇੰਸਟਾਲ ਕਰਨ ਯੋਗ ਪੈਕੇਜਾਂ ਵਜੋਂ ਆਉਂਦੇ ਹਨ।

ਹੈੱਡਲੈੱਸ ਕੰਪੋਨੈਂਟ ਵਰਤੋ

ਹੈੱਡਲੈੱਸ ਕੰਪੋਨੈਂਟ ਸਿਮੈਂਟਿਕ HTML, ARIA ਅਤੇ ਪ੍ਰੋਪ ਦਿੰਦੇ ਹਨ — ਪਰ CSS ਨਹੀਂ। ਹਰ ਫ੍ਰੇਮਵਰਕ ਵਿੱਚ Button ਇਹ ਹੈ:

HTML

<button class="button" type="button" aria-label="Save">
  Save
</button>

Svelte

<script>
  import Button from "lily-design-system-svelte-headless/components/Button/Button.svelte";
</script>

<Button onclick={save}>Save</Button>

React

import Button from "lily-design-system-react-headless/components/Button";

<Button onClick={save}>Save</Button>

Vue

<script setup>
  import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<Button @click="save">Save</Button>

Angular

import { Button } from "@lilydesignsystem/angular-headless";

@Component({
  imports: [Button],
  template: `<lily-button (click)="save()">Save</lily-button>`,
})

Blazor

<Button OnClick="Save">Save</Button>

Nunjucks

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

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

ਸਟਾਈਲ ਕੀਤੀ ਉਦਾਹਰਨ ਵਰਤੋ

ਉਦਾਹਰਨ ਐਪਾਂ ਵਿੱਚ CSS, ਰੂਟ ਅਤੇ ਪੂਰੇ ਡੈਮੋ ਪੰਨੇ ਸ਼ਾਮਲ ਹਨ। ਪ੍ਰਯੋਗ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਤੇਜ਼ ਤਰੀਕਾ SvelteKit, Next, Nuxt, Analog ਜਾਂ Eleventy ਉਦਾਹਰਨ ਐਪ ਚਲਾਉਣਾ ਅਤੇ ਇੱਥੇ ਡੈਮੋ ਦੇਖਣਾ ਹੈ /components.

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install
pnpm run dev

ਫਿਰ ਖੋਲ੍ਹੋ http://localhost:5173 ਅਤੇ ਇੱਥੇ ਬ੍ਰਾਊਜ਼ ਕਰੋ /components.

ਸਟਾਈਲਿੰਗ ਅਤੇ ਡਿਜ਼ਾਈਨ ਟੋਕਨ

ਹਰ ਕੰਪੋਨੈਂਟ ਆਪਣੇ ਰੂਟ ਐਲੀਮੈਂਟ ਉੱਤੇ ਇੱਕ ਕਬਾਬ-ਕੇਸ ਕਲਾਸ ਨਾਲ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ। ਉਦਾਹਰਨ ਵਜੋਂ, <Button> ਇਸ ਤਰ੍ਹਾਂ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ <button class="button">। ਇਸ ਨੂੰ ਜਿਵੇਂ ਚਾਹੋ ਸਟਾਈਲ ਕਰੋ:

.button {
  background: var(--my-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}
.button:hover { background: var(--my-primary-hover); }

Lily ਦੀ ਮੂਲ ਰੰਗ-ਪੱਟੀ (ਉਦਾਹਰਨ ਐਪਾਂ ਵਿੱਚ ਵਰਤੀ ਗਈ) ਇਹ ਹੈ:

• ਮੁੱਢਲਾ: #2563eb
• ਖ਼ਤਰਾ: #dc2626
• ਚੇਤਾਵਨੀ: #f59e0b
• ਸਫਲਤਾ: #16a34a
• ਪੰਨੇ ਦੀ ਪਿੱਠਭੂਮੀ: #f9fafb
• ਕਾਰਡ ਦੀ ਪਿੱਠਭੂਮੀ: #ffffff

ਇਹ ਸੁਝਾਅ ਹਨ, ਲੋੜਾਂ ਨਹੀਂ। ਇਨ੍ਹਾਂ ਨੂੰ ਆਪਣੀ ਬ੍ਰਾਂਡ ਰੰਗ-ਪੱਟੀ ਨਾਲ ਬਦਲੋ ਅਤੇ Lily ਖ਼ੁਸ਼ੀ ਨਾਲ ਨਾਲ ਆ ਜਾਂਦਾ ਹੈ।

ਤਿਆਰ ਥੀਮ

CSS ਸ਼ੁਰੂ ਤੋਂ ਨਹੀਂ ਲਿਖਣੀ ਚਾਹੁੰਦੇ? Lily ਦਿੰਦਾ ਹੈ 57 ਸੁਤੰਤਰ ਹਵਾਲਾ ਥੀਮ ਇਸ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ themes/ । ਹਰੇਕ ਇੱਕ ਸਟਾਈਲਸ਼ੀਟ ਹੈ ਜੋ Lily ਕਲਾਸ ਹੁੱਕਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦੀ ਹੈ — ਇਸ ਨੂੰ ਲਿੰਕ ਕਰੋ ਅਤੇ ਤੁਸੀਂ ਸਟਾਈਲ ਹੋ ਗਏ:

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

ਇਹ ਸੈੱਟ ਇਨ੍ਹਾਂ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ:

• ਜਨਤਕ ਖੇਤਰ — NHS England, NHS Scotland ਅਤੇ NHS Wales (ਹਰੇਕ ਮਰੀਜ਼-ਮੁਖੀ ਅਤੇ ਪ੍ਰੈਕਟੀਸ਼ਨਰ-ਮੁਖੀ ਰੂਪਾਂ ਵਿੱਚ), GOV.UK GDS, ਅਤੇ U.S. Web Design System।
• ਵਿਕਰੇਤਾ-ਪ੍ਰੇਰਿਤ — Adobe Spectrum, Mozilla Protocol।
• ਆਮ ਮੰਤਵ — light, dark, nord, dracula, wireframe, ਅਤੇ ਤੀਹ-ਕੁ ਹੋਰ।

ਥੀਮ ਸਿਲੈਕਟਰ ਵਰਤਦੇ ਹਨ :where(...), ਇਸ ਲਈ ਤੁਹਾਡੀ ਆਪਣੀ CSS ਹਮੇਸ਼ਾ ਨਿਰਧਾਰਤਤਾ ਵਿੱਚ ਜਿੱਤਦੀ ਹੈ। ਰਨਟਾਈਮ ਬਦਲਣ ਲਈ ਇਨ੍ਹਾਂ ਨੂੰ ਹੇਠਲੇ theme-picker ਸਹਾਇਕ ਨਾਲ ਜੋੜੋ, ਜਾਂ ਪਾਲਣਾ ਕਰੋ ਥੀਮਿੰਗ ਟਿਊਟੋਰਿਅਲ.

ਪਸੰਦ ਸਹਾਇਕ

ਹਰ ਫ੍ਰੇਮਵਰਕ ਵਿੱਚ ਅੱਠ ਛੋਟੇ ਚੋਣਕਾਰ ਹਨ, ਹਰੇਕ ਦਾ ਆਪਣਾ lily-design-system-{framework}-{package} ਪੈਕੇਜ ਹੈ (ਅਤੇ ਇੱਕ picker-bar ਜੋ ਇਨ੍ਹਾਂ ਨੂੰ ਇਕੱਠਾ ਕਰਦਾ ਹੈ)। ਹਰੇਕ ਇੱਕ ਹੈੱਡਲੈੱਸ ਆਈਕਨ ਬਟਨ ਹੈ ਜੋ ਪੌਪਅੱਪ ਖੋਲ੍ਹਦਾ ਹੈ — ਲਿਸਟਬਾਕਸ, ਲਿੰਕਾਂ ਦੀ ਸੂਚੀ, ਖੋਜ ਫਾਰਮ, ਜਾਂ (date-time-picker ਲਈ) ਤਾਰੀਖ਼ ਚੋਣਕਾਰ ਡਾਇਲਾਗ — ਨੇਟਿਵ <select>ਨਹੀਂ; SSR-ਸੁਰੱਖਿਅਤ ਹੈ; ਅਤੇ ਕੋਈ CSS ਨਹੀਂ ਦਿੰਦਾ:

• theme-picker — ਪ੍ਰਬੰਧਿਤ <link>ਨੂੰ ਬਦਲ ਕੇ ਰਨਟਾਈਮ ਤੇ ਥੀਮ ਸਟਾਈਲਸ਼ੀਟਾਂ ਲੋਡ ਕਰਦਾ ਹੈ, ਦਸਤਾਵੇਜ਼ ਉੱਤੇ data-theme ਸੈੱਟ ਕਰਦਾ ਹੈ, ਅਤੇ ਚੋਣਵੇਂ ਤੌਰ ਤੇ ਇਸ ਵਿੱਚ ਸਥਾਈ ਰੂਪ ਵਿੱਚ ਸੰਭਾਲਦਾ ਹੈ localStorage.
• locale-picker — ਸੈੱਟ ਕਰਦਾ ਹੈ lang ਅਤੇ dir (ਆਟੋਮੈਟਿਕ RTL ਖੋਜ ਨਾਲ) ਤਾਂ ਜੋ ਤੁਹਾਡੀ i18n ਲਾਇਬ੍ਰੇਰੀ ਪਿੱਛੇ ਚੱਲ ਸਕੇ; ਆਪ ਕੋਈ ਅਨੁਵਾਦ ਨਹੀਂ ਕਰਦਾ।
• text-size-picker — ਸੈੱਟ ਕਰਦਾ ਹੈ data-text-size ਦਸਤਾਵੇਜ਼ ਉੱਤੇ; ਤੁਹਾਡੀ CSS ਹਰ ਮੁੱਲ ਨੂੰ ਫੌਂਟ ਆਕਾਰ ਨਾਲ ਜੋੜਦੀ ਹੈ।
• motion-picker — ਸੈੱਟ ਕਰਦਾ ਹੈ data-motion ਦਸਤਾਵੇਜ਼ ਉੱਤੇ, ਮਹਿਮਾਨ ਦੀ ਘਟਾਈ-ਗਤੀ ਸੈਟਿੰਗ ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ; ਤੁਹਾਡੀ CSS ਅਤੇ ਸਕ੍ਰਿਪਟ ਫ਼ੈਸਲਾ ਕਰਦੇ ਹਨ ਕੀ ਦਬਾਉਣਾ ਹੈ।
• search-picker — ਇੱਕ ਆਈਕਨ ਬਟਨ ਜੋ ਖੋਜ ਖੇਤਰ ਖੋਲ੍ਹਦਾ ਹੈ; ਜਮ੍ਹਾਂ ਕਰਨਾ ਖੋਜ ਪੰਨੇ ਉੱਤੇ ਲੈ ਜਾਂਦਾ ਹੈ। ਇੱਕ ਕਾਰਵਾਈ ਦਾ ਮਾਲਕ ਹੈ, ਪਸੰਦ ਦਾ ਨਹੀਂ।
• link-picker — ਇੱਕ ਘਰ ਦਾ ਆਈਕਨ ਜੋ ਤੁਹਾਡੀ ਐਪ ਦੁਆਰਾ ਪਰਿਭਾਸ਼ਿਤ ਪੰਨਾ ਲਿੰਕਾਂ (ਹੋਮ, ਸਾਡੇ ਬਾਰੇ, ਸਾਡੇ ਨਾਲ ਸੰਪਰਕ ਕਰੋ, ਗੋਪਨੀਯਤਾ ਨੀਤੀ, …) ਦਾ ਮੀਨੂ ਖੋਲ੍ਹਦਾ ਹੈ। ਇੱਕ ਕਾਰਵਾਈ ਦਾ ਮਾਲਕ ਹੈ, ਪਸੰਦ ਦਾ ਨਹੀਂ।
• share-picker — ਨੇਟਿਵ ਸਾਂਝਾਕਰਨ ਸ਼ੀਟ ਜਾਂ ਖਪਤਕਾਰ-ਦਿੱਤੀ ਮੰਜ਼ਿਲਾਂ ਦੀ ਸੂਚੀ ਖੋਲ੍ਹਦਾ ਹੈ, ਨਾਲ URL ਕਾਪੀ ਕਰਨਾ। ਇੱਕ ਕਾਰਵਾਈ ਦਾ ਮਾਲਕ ਹੈ, ਪਸੰਦ ਦਾ ਨਹੀਂ: ਕੁਝ ਲਾਗੂ ਨਹੀਂ ਕਰਦਾ, ਕੁਝ ਸੰਭਾਲਦਾ ਨਹੀਂ।
• date-time-picker — ਇੱਕ ਟੈਕਸਟ ਖੇਤਰ ਨਾਲ ਇੱਕ ਤਾਰੀਖ਼, ਸਮੇਂ, ਜਾਂ ਦੋਵਾਂ ਲਈ APG ਤਾਰੀਖ਼-ਚੋਣਕਾਰ ਡਾਇਲਾਗ। ਇੱਕ ਫਾਰਮ ਮੁੱਲ ਦਾ ਮਾਲਕ ਹੈ, ਪਸੰਦ ਦਾ ਨਹੀਂ: ISO ਸਟ੍ਰਿੰਗ ਇਸ ਨਾਲ ਆਉਂਦੀ-ਜਾਂਦੀ ਹੈ <input type="date">.

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-theme-picker

Svelte ਕੈਟਾਲਾਗ ਮਿਆਰੀ ਹਵਾਲਾ ਹੈ; React, Vue, Angular, HTML, Nunjucks, Web Components ਅਤੇ Blazor ਪੋਰਟ ਇਕਰਾਰਨਾਮੇ-ਦਰ-ਇਕਰਾਰਨਾਮੇ ਇਸ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ। ਵੇਖੋ ਸਹਾਇਕ ਟਿਊਟੋਰਿਅਲ.

ਪਹੁੰਚਯੋਗਤਾ

ਕੰਪੋਨੈਂਟ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦੇ ਹਨ WCAG 2.2 AAA। ਉਹ ਇਨ੍ਹਾਂ ਪੈਟਰਨਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ:

• ਆਮ <div>s.
• <label for="id"> ਦੀ ਬਜਾਏ ਸਿਮੈਂਟਿਕ HTML ਐਲੀਮੈਂਟ, ਲੇਬਲਾਂ ਨੂੰ ਇਨਪੁੱਟਾਂ ਨਾਲ ਜੋੜਦੇ ਹੋਏ।
• aria-labelledby / aria-describedby ਆਪਸੀ ਹਵਾਲਿਆਂ ਲਈ।
• aria-invalid + aria-errormessage ਗ਼ਲਤੀ ਸਥਿਤੀਆਂ ਲਈ।
• role="alert" ਅਤੇ aria-live ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਲਈ।
• aria-pressed, aria-expanded, aria-current ਸਥਿਤੀ ਲਈ।
• ਗਰਿੱਡਾਂ ਲਈ ਰੋਵਿੰਗ tabindex ।

ਫੋਕਸ ਸੂਚਕ ਜਾਣ-ਬੁੱਝ ਕੇ ਖਪਤਕਾਰ ਦੁਆਰਾ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ — Lily ਕਦੇ ਵੀ ਮੂਲ ਫੋਕਸ ਰਿੰਗ ਨਹੀਂ ਬਣਾਉਂਦਾ ਜੋ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਨਾਲ ਟਕਰਾਏ। ਉਦਾਹਰਨ ਐਪਾਂ ਆਪਣੇ ਸਾਰੇ ਰੂਟਾਂ ਉੱਤੇ ਸਾਫ਼ axe-core ਬੇਸਲਾਈਨ ਰੱਖਦੀਆਂ ਹਨ।

ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ

ਹਰ ਲੇਬਲ, ਪਲੇਸਹੋਲਡਰ, ਗ਼ਲਤੀ ਸੁਨੇਹਾ ਅਤੇ ਬਟਨ ਟੈਕਸਟ ਇੱਕ ਪ੍ਰੋਪ ਹੈ। ਕੋਈ ਪੱਕੀ ਲਿਖੀ ਸਟ੍ਰਿੰਗ ਨਹੀਂ ਹੈ। ਆਪਣੀ ਪਸੰਦ ਦਾ ਅਨੁਵਾਦ ਫ੍ਰੇਮਵਰਕ ਜੋੜੋ — Paraglide, i18next, vue-i18n, react-intl, .resx ਫਾਈਲਾਂ, ਕੁਝ ਵੀ।

ਤਾਰੀਖ਼ਾਂ, ਨੰਬਰਾਂ ਅਤੇ ਮੁਦਰਾਵਾਂ ਲਈ, ਕੰਪੋਨੈਂਟ ਪਹਿਲਾਂ ਤੋਂ ਫਾਰਮੈਟ ਕੀਤੀਆਂ ਸਟ੍ਰਿੰਗਾਂ ਸਵੀਕਾਰ ਕਰਦੇ ਹਨ: ਤੁਸੀਂ ਇਸ ਨਾਲ ਫਾਰਮੈਟ ਕਰਦੇ ਹੋ Intl.DateTimeFormat / Intl.NumberFormat / ਆਪਣੀ ਪਸੰਦੀਦਾ ਲਾਇਬ੍ਰੇਰੀ ਅਤੇ ਨਤੀਜਾ ਪਾਸ ਕਰਦੇ ਹੋ।

locale-picker ਸਹਾਇਕ ਚੁਣੇ ਗਏ ਲੋਕੇਲ ਦਾ ਸੰਕੇਤ ਤੁਹਾਡੀ i18n ਲਾਇਬ੍ਰੇਰੀ ਨੂੰ ਇਹ ਸੈੱਟ ਕਰਕੇ ਦਿੰਦਾ ਹੈ lang ਅਤੇ dir ਦਸਤਾਵੇਜ਼ ਰੂਟ ਉੱਤੇ।

ਟੈਸਟਿੰਗ

ਹਰ ਫ੍ਰੇਮਵਰਕ ਉਪ-ਪ੍ਰੋਜੈਕਟ ਆਪਣੇ ਮੁਹਾਵਰੇਦਾਰ ਸਟੈਕ ਨਾਲ ਆਪਣੇ ਟੈਸਟ ਦਿੰਦਾ ਹੈ:

• HTML: ਅਸਲ ਬ੍ਰਾਊਜ਼ਰ ਚਲਾਉਂਦਾ WebDriverIO।
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (Analog Vite ਪਲੱਗਇਨ ਰਾਹੀਂ)।
• Nunjucks: ਰੈਂਡਰ ਸਹਾਇਕ ਵਾਲਾ Vitest।
• Blazor: bUnit।

ਟੈਸਟ ਵਰਤਦੇ ਹਨ ਸਿਰਫ਼ Vitest ਦੇ ਬਿਲਟ-ਇਨ ਮੈਚਰ — ਕਦੇ ਨਹੀਂ jest-dom ਮੈਚਰ। ਇਹ ਟੈਸਟ ਸੂਟਾਂ ਨੂੰ ਪੋਰਟੇਬਲ ਰੱਖਦਾ ਹੈ। ਉਦਾਹਰਨ ਐਪਾਂ Playwright ਐਂਡ-ਟੂ-ਐਂਡ ਸੂਟ, axe-core ਪਹੁੰਚਯੋਗਤਾ ਬੇਸਲਾਈਨਾਂ, ਅਤੇ ਜਵਾਬਦੇਹ ਵਿਊਪੋਰਟ ਛਾਣਬੀਣ ਜੋੜਦੀਆਂ ਹਨ।

AI ਏਜੰਟ

ਇਹ ਸਾਈਟ ਆਪਣੀ ਰੂਟ ਉੱਤੇ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਦੀ ਹੈ llms.txt ਅਤੇ llms.json — ਆਪਣੇ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਪੰਨਿਆਂ ਦਾ ਚੁਣਿਆ ਨਕਸ਼ਾ, ਕਿਸੇ ਵੀ ਟੂਲ ਲਈ ਜੋ ਪਾਲਣਾ ਕਰਦਾ ਹੈ llms.txt ਰੀਤ ਦੀ.

ਮਿਆਰੀ ਮੋਨੋਰੈਪੋ ਵਾਧੂ ਤੌਰ ਤੇ ਦੋ ਦਿੰਦਾ ਹੈ Claude Skills: lily-design-system-skill: ਇੱਕ ਆਮ-ਮੰਤਵ ਹੁਨਰ ਜੋ ਸਿਸਟਮ ਨਾਲ ਬਣਾਉਣ ਵਾਲੇ ਹਰ ਕਿਸੇ ਲਈ Lily ਦੇ ਸੰਕਲਪਾਂ, ਸ਼ਬਦਾਵਲੀ ਅਤੇ ਰਚਨਾ ਪੈਟਰਨਾਂ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ, ਅਤੇ lily-design-system-maintainer-skill, ਇੱਕ ਤਕਨੀਕੀ ਹੁਨਰ ਜੋ ਇਸ ਉੱਤੇ ਕੰਮ ਕਰਨ ਵਾਲੇ ਹਰ ਕਿਸੇ ਲਈ ਮੋਨੋਰੈਪੋ ਦੇ ਲੋੜੀਂਦੀਆਂ-ਫਾਈਲਾਂ ਲੇਆਉਟ ਅਤੇ ਟੂਲਿੰਗ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ। ਦੋਵੇਂ ਇਸ ਦੀ ਰੂਟ ਵਿੱਚ ਹਨ ਮਿਆਰੀ ਮੋਨੋਰੈਪੋ.

ਸਮੱਸਿਆ-ਨਿਵਾਰਨ

ਯੋਗਦਾਨ

Lily ਨੌਜਵਾਨ ਹੈ ਅਤੇ ਸਹਿਯੋਗ ਦਾ ਸਵਾਗਤ ਕਰਦਾ ਹੈ। ਇਸ ਸਮੇਂ ਸਭ ਤੋਂ ਲਾਭਦਾਇਕ ਯੋਗਦਾਨ ਇਹ ਹਨ:

• ਨਵੇਂ ਕੰਪੋਨੈਂਟ (ਖ਼ਾਸ ਕਰਕੇ ਸਥਾਪਿਤ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮਾਂ ਦੇ ਪੈਟਰਨ)।
• ਨਵੇਂ ਥੀਮ — ਹਰ ਇੱਕ ਸਵੈ-ਸੰਪੂਰਨ ਸਟਾਈਲਸ਼ੀਟ ਹੈ, ਚੰਗੀ ਹੱਦਬੰਦੀ ਵਾਲਾ ਪਹਿਲਾ PR।
• ਬਿਹਤਰ ਉਦਾਹਰਨ ਸਟਾਈਲਿੰਗ — ਦਿਖਾਓ ਕੀ ਸੰਭਵ ਹੈ।
• ਉਦਾਹਰਨ ਐਪ ਸਟ੍ਰਿੰਗਾਂ ਦੇ ਅਨੁਵਾਦ।
• ਘੱਟੋ-ਘੱਟ ਮੁੜ-ਉਤਪਾਦਨ ਸਮੇਤ ਬੱਗ ਰਿਪੋਰਟਾਂ।
• ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਅਤੇ ਸਹਾਇਕ ਤਕਨੀਕ ਨਾਲ ਪਹੁੰਚਯੋਗਤਾ ਆਡਿਟ।

ਇੱਥੇ issue ਅਤੇ PR ਖੋਲ੍ਹੋ github.com/LilyDesignSystem/lily-design-system.

ਭਾਈਚਾਰਾ ਅਤੇ ਸਹਾਇਤਾ

• ਸਵਾਲ ਅਤੇ ਬੱਗ ਰਿਪੋਰਟਾਂ — ਇੱਥੇ issue ਖੋਲ੍ਹੋ github.com/LilyDesignSystem/lily-design-system.
• ਈਮੇਲ — ਸੰਭਾਲਕਰਤਾ ਪੜ੍ਹਦਾ ਹੈ joel@joelparkerhenderson.com ਅਤੇ ਸਹਿਯੋਗ, ਮਾਰਗਦਰਸ਼ਨ ਅਤੇ ਫੀਡਬੈਕ ਦਾ ਸਵਾਗਤ ਕਰਦਾ ਹੈ।
• ਮਿਰਰ — Lily ਇਨ੍ਹਾਂ ਉੱਤੇ ਵੀ ਪੁਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ Codeberg ਅਤੇ GitLab, ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਪਸੰਦੀਦਾ ਫੋਰਜ ਤੋਂ ਹਿੱਸਾ ਲੈ ਸਕੋ।
• ਆਚਰਣ — ਪ੍ਰੋਜੈਕਟ ਇੱਕ ਮਿਆਰੀ ਆਚਰਣ ਸੰਹਿਤਾ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ; ਦਿਆਲੂ ਰਹੋ, ਨੇਕ ਨੀਅਤ ਮੰਨੋ।

FAQ