{"id":15018090,"url":"https://github.com/yunusga/marmelad","last_synced_at":"2025-10-23T15:31:27.978Z","repository":{"id":8517040,"uuid":"66848494","full_name":"yunusga/marmelad","owner":"yunusga","description":"Заготовка фронтенд проекта для продвинутых и начинающих 🤘. Хорошо подходит для поддержания единой структуры проектов в команде и легкого переиспользования готовых блоков между проектами.","archived":false,"fork":false,"pushed_at":"2024-04-11T04:00:22.000Z","size":7004,"stargazers_count":16,"open_issues_count":12,"forks_count":7,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-01-30T19:11:35.025Z","etag":null,"topics":["bem","bootstrap","gulp","nunjucks","sass","scss","starter-kit","static-site-generator","stylus"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yunusga.png","metadata":{"files":{"readme":"README-UZ.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-29T13:58:29.000Z","updated_at":"2023-08-06T06:25:56.000Z","dependencies_parsed_at":"2023-02-18T14:40:22.161Z","dependency_job_id":"40458d9d-935d-49f5-9e08-e5538a83347d","html_url":"https://github.com/yunusga/marmelad","commit_stats":{"total_commits":948,"total_committers":11,"mean_commits":86.18181818181819,"dds":0.2067510548523207,"last_synced_commit":"2d9f56739fee11d57fa9f798a7100952e48004bb"},"previous_names":[],"tags_count":60,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fmarmelad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fmarmelad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fmarmelad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fmarmelad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yunusga","download_url":"https://codeload.github.com/yunusga/marmelad/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237852275,"owners_count":19376645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem","bootstrap","gulp","nunjucks","sass","scss","starter-kit","static-site-generator","stylus"],"created_at":"2024-09-24T19:51:26.411Z","updated_at":"2025-10-23T15:31:27.588Z","avatar_url":"https://github.com/yunusga.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[ci-img]:  https://travis-ci.org/solversgroup/marmelad.svg\n[ci]:      https://travis-ci.org/solversgroup/marmelad\n\n# marmelad\n\n[![npm](https://img.shields.io/npm/v/marmelad.svg)](https://www.npmjs.com/package/marmelad) [![npm](https://img.shields.io/npm/dt/marmelad.svg)](https://www.npmjs.com/package/marmelad) [![License](https://img.shields.io/github/license/solversgroup/marmelad)](https://github.com/solversgroup/marmelad/blob/main/LICENSE) ![since Wed Feb 24 08:39:42 2016 +0500](https://img.shields.io/badge/since-Wed%20Feb%2024%2008%3A39%3A42%202016%20%2B0500-blue)\n\n\u003cimg src=\"marmelad.svg?sanitize=true\" align=\"right\" title=\"Marmelad logo made by Jelly beans from www.flaticon.com is licensed by CC 3.0 BY\" width=\"100\" height=\"100\"\u003e\n\n\n[RU](README.md), UZ \n\n\n\nWeb dasturlash sohasida tajribaga ega yoki bu sohani endigina o'rganayotganlar uchun front-end loyihasini tayyorlash moduli. Fayl tuzilishi va loyiha ma'lumotlarini tartibga solishda \"BEM\" yondashuvi tufayli jamoada yagona loyiha tuzilmasini saqlash va loyihalar o'rtasida tayyor bloklarni boshqa bloklar ichida osongina qayta ishlatishni qo'llab quvvatlaydi.\n\nMarmelad modullari bir marta o'rnatiladi va faqat uni yangilanib boriladi, ya'ni har bir loyiha uchun bir nechta npm bog'liqliklarini o'rnatishning hojati yo'q. Natijada, disk hotirasini tejash va internetsiz loyihalarni yaratish va qayta ishlash imkoniyatini beradi.\n\n\n## Tarkibi\n\n- [O'rnatish](#ornatish)\n  - [MacOS va Linux uchun global modullarni o'rnatishdagi muammolar](#macos-va-linux-uchun-global-modullarni-ornatishdagi-muammolar)\n  - [npm orqali](#npm-orqali-ornatish)\n  - [Dasturchilar uchun](#dasturchilar-uchun-ornatish)\n  - [Muayyan loyihalar uchun](#muayyan-loyihalar-uchun-ornatish)\n- [Marmelad CLI](#marmelad-cli)\n  - [`init [options]` ishga tushirish](#init-options-ishga-tushirish)\n  - [`dev [options]` to'plamlarni ishga tushirish](#dev-options-toplamlarni-ishga-tushirish)\n  - [`cp \u003cname\u003e` sahifa yaratish](#cp-name-sahifa-yaratish)\n  - [`cb \u003cname\u003e [options]` blok yaratish](#cb-name-options-blok-yaratish)\n  - [`mv \u003coldName\u003e \u003cnewName\u003e [options]` blok nomini o'zgartirish](#mv-oldname-newname-options-blok-nomini-ozgartirish)\n  - [`lint`](#lint-w3c-validator)\n  - [`dist` vazifalarni chiqarish](#dist-vazifalarni-chiqarish)\n  - [`pack [name] [options]` loyihani arxivlash](#pack-name-options-loyihani-arxivlash)\n- [Marmelad TCI](#marmelad-tci)\n- [Loyiha tuzilishi](#loyiha-tuzilishi)\n- [Shablonlar/bloklar](#shablonlarbloklar)\n  - [Lag'mon](#lagmon)\n- [Shablonlar/bloklar uchun ma'lumotlar](#shablonlar-bloklar-uchun-ma'lumotlar)\n  - [`incw` kengaytma](#incw-kengaytma)\n- [Uslublar to'plami](#uslublar-toplami)\n  - [Post CSS plaginlari](#post-css-plaginlari)\n\n## Diqqat \n\n\u003e [node-w3c-validator](https://www.npmjs.com/package/node-w3c-validator) ishlashi uchun [java](https://java.com) ni o'rnatishingiz kerak.\n\n## O'rnatish\n\n\u003e Windows-dan Linux-ga yeg'uvchi fayllarni nusxalash orqali marmeladni o'rnatishga urinmang.Turli xil operatsion tizimlar uchun modullar o'rnatilgan.   Mavjud o'rnatish usullaridan foydalaning.\n\n### MacOS va Linux uchun global modullarni o'rnatishdagi muammolar\n\nOdatda, npm paketlarni loyihalaringizda \"local\" sifatida o'rnatadi. Oʻrnatish paketlarini \"global\" miqyosda ham oʻrnatishingiz mumkin (masalan, npm   install -g \u003cpackage\u003e) (buyruqlar qatori ilovalari uchun foydali). Biroq, buning salbiy tomoni shundaki, siz global miqyosda o'rnatishingiz uchun     root bo'lishingiz kerak (yoki sudo dan foydalaning).\n\nGlobal modullarni oʻrnatish boʻyicha **NPM** qoʻllanmasini koʻrib chiqing. Paketlarni global miqyosda oʻrnatishda [Resolving EACCES permissions errors when installing packages globally](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally)\n\n### npm orqali o'rnatish\n\n```bash\nnpm i marmelad -g\n```\n\n### Dasturchilar uchun o'rnatish\n\n```bash\ngit clone https://github.com/solversgroup/marmelad.git\ncd marmelad\nnpm i\nnpm link # sudo npm link для linux\n```\n\n### Muayyan loyihalar uchun o'rnatish\n\nUshbu turdagi o'rnatish mijoz loyiha fayllarini joylashtirish uchun ma'lum bir tuzilmani talab qilganda yoki assemblerning ishini loyiha   talablariga mos ravishda qayta ishlash kerak bo'lganda mos keladi. U yerda hamma narsa bo'lishi mumkin 😱.\n\n Muayyan loyihalar uchun o'rnatish, [dasturchilar uchun o'rnatish](#dasturchilar-uchun-ornatish)  bilan bir xil tarzda amalga oshiriladi, u faqat ishga tushirishda farq qiladi.\n\n**marmelad** ishga tushirish va boshlash uchun siz  **marmelad** bajariladigan faylga yo'lni belgilashingiz kerak.\n\n```bash\n# node C:\\marmelad\\bin\\marmelad.js\nnode \u003ckatalogni klonlash yo`li\u003e '\\bin\\marmelad.js'\n```\n\n## Marmelad CLI\n\n[npm orqali o'rnatish](#npm-orqali-ornatish) yoki  [dasturchilar uchun](#dasturchilar-uchun-ornatish) o'rnatilgandan so'ng, **marmelad** tizimingizning buyruq satrida ya'ni terminalida `marmelad` va `mmd` sifatida mavjud bo'ladi.\n\n**marmelad** buyruqlari bo'yicha yordam olish uchun konsol/terminalga kiring:\n\n```bash\n# Parametrlarsiz\nmarmelad # yoki mmd\n# или\nmarmelad --help # yoki mmd --help\n\nUsage: marmelad [options] [command]\n\nWeb dasturlash sohasida tajribaga ega yoki bu sohani endigina o'rganayotganlar uchun loyihani tayyorlash 🤘\n\nOptions:\n  -v, --version                     output the version number\n  -h, --help                        display help for command\n\nCommands:\n  init [options] [dir]              initialize new project\n  dev [options]                     run development server\n  cp \u003cname\u003e                         create new page\n  cb [options] \u003cname\u003e               create new block\n  mv [options] \u003coldName\u003e \u003cnewName\u003e  rename block\n  lint                              lint project\n  dist                              Release tasks for project\n  pack [options] [name]             Archive project source code (default:tar.gz)\n  help [command]                    display help for command\n\nCommands help:\n  marmelad [command] --help\n  mmd [command] --help\n\nSource files:\n  \u003cmarmelad installed directory\u003e\\marmelad\\bin\\marmelad.js\nVersion:\n  \u003cmarmelad version\u003e\n```\n\n### `init [options]` ishga tushirish\n\nIshga tushirish 3 bosqichda amalga oshiriladi:\n\n1. O'tkazilgan argumentlarni hisobga olgan holda asosiy ish qismini nusxalash\n2. Yordam fayllarini yangi loyihaning ildiziga nusxalash\n3. Yangi loyihada git omborini ishga tushirish\n\nYangi loyihani ishga tushirish uchun `mmd init [options] [dir]` buyrug'idan foydalaning.\n\nAgar ishga tushirish papkasining parametri ishga tushmasa, loyiha katalogi ochilib terminal orqali ishga tushiriladi.\n\n`-c, --css` - yangi loyiha shablonini nusxalashda `settings.marmelad.js` ichidagi `app.css` kaliti qiymatini almashtiriladi. Keyinchalik bu kalit `settings.marmelad.js` da `app.css` kengaytmasi bilan  CSS fayllarini yaratish uchun `mmd cb` blokirovka buyrug`ini yaratish uchun ishlatiladi. **marmelad** ning joriy versiyasiga yangilangandan so‘ng, eski  loyihaga qo‘llab-quvvatlashni qo‘shish uchun “settings.marmelad.js” ichidagi “css” xususiyatini “app” obyektiga/ qiymati bilan qo‘shishingiz kerak.\n\n`-t, --test` - faqat sinov uchun kerak, u loyihani ishlab chiqishda hech qanday ma'noga ega emas.\n\n`[dir]` - belgilangan papkada loyihani ishga tushirish imkonini beradi. Masalan, `mmd init new-and-awesome -t scss`.\n\n\n\n### `dev [options]` to'plamlarni ishga tushirish\n\n\u003e **Ogohlantirish !!!\n ** agar siz ishga tushirishni boshlashda `code: 'MODULE_NOT_FOUND'` xatosini ko‘rsangiz, katta ehtimol bilan **marmelad** katalogda oldindan [yaratilgan (`mmd init`)](#init-options-ishga-tushirish) ishga tushirilmoqda bo'sh **marmelad** loyihasida.\n\n - `dev` standart ishga tushirish\n- `dev -a` server parol himoyasi bilan boshlanadi, login va parol avtomatik ravishda yaratiladi\n- `dev -a \u003clogin\u003e@\u003cpassword\u003e`server parol himoyasi bilan boshlanadi, login va parol qo'lda o'rnatiladi\n- `dev --build` o'zgarishlarni kuzatish va qayta qurishni boshlamasdan loyihani bir martalik qurish\n- `dev --proxy-mod` statik qurish rejimi + kerakli resurslarni (css, js) ishchi saytning ma'lum bir katalogiga nusxalash bilan jonli saytni proksi-server qilish\n\n\u003e `dev --proxy-mod` xato **Error: Missing positive glob** Bu konfiguratsiyada nusxa ko'chirish uchun kataloglarni ko'rsatmaganingizni anglatadi, odatiy izoh bo'yicha ular izohlanadi.\n\n\n### `cp \u003cname\u003e` sahifa yaratish\n\nSahifa fayli `marmelad/_pages` katalogida yaratilgan, fayl nomida kengaytma belgilanmagan.\n\n\n### `cb \u003cname\u003e [options]` blok yaratish\n\nBlok fayllari `marmelad/_blocks` katalogida yaratilgan.\n\n```bash\n#.tci\ncb new-block --t html,js\n```\nU barcha kerakli texnologiyalarni o'z ichiga olgan bir xil nomdagi blokni yaratadi.\n\n```bash\n# marmelad/_blocks\nnew-block\n  ├─ new-block.html  # namuna\n  └─ new-block.js    # skriptlar\n```\n\n`--t` opsiyasi aynan qaysi texnologiyalarni yaratishni belgilash imkonini beradi. Aslida, ushbu parametrda vergul bilan ajratilgan har qanday formatlar sonini ro'yxatga olish mumkin.\n\nStil formati ixtiyoriy, agar u ko'rsatilmagan bo'lsa, buyruq `settings.marmelad.js -\u003e app.css` da ko'rsatilgan stil formatiga ega fayl yaratadi.\n\n\n### `mv \u003coldName\u003e \u003cnewName\u003e [options]` blok nomini o'zgartirish\n\nBlokning nomini va blok fayllari ichida blok nomining barcha takrorlanishini o'zgartirish uchun buyruq `.tci` faylida mavjud.\n\n\n```bash\n# blok fayllar nomini o'zgartirish\nmv old-block-name new-block-name\n\n# blok fayllari va blok fayllari ichidagi barcha o'zgarishlar nomini o'zgartirish\nmv old-block-name new-block-name --hard\n\n# fayllardagi  o'zgarishlarni ko'rish \nmv old-block-name new-block-name --dry --hard\n```\n\n### `lint` W3C validator\n\nTayyor bo'lgan loyihada W3C validatorni ishga tushirish.\n\n\u003e W3C validator faqat loyiha tayyor bo'lganidan keyin ishga tushirilishi kerak, aks holda tekshirish natijalari noto'g'ri bo'ladi.\n\n```bash\nmmd dev --build \u0026\u0026 mmd lint\n```\n\n\n### `dist` vazifalarni chiqarish\n\n\u003e Eksperimental buyruq, hali hech qanday variantni o'tkazib bo'lmaydi. Faqat loyihaning yakuniy fayllari bilan ishlaydi, manba kodi hech qanday tarzda ta'sir qilmaydi.\n\n- yeg'ish papkasidagi loyiha sahifalarining HTML kodini formatlash (`static`)\n- JS/CSS fayllarini siqish va ularni HTML shablonlarida siqilganlar bilan almashtirish (`.min` nomida bo'lmagan fayllar siqiladi)\n- Keshni qayta o'rnatish uchun kiritilgan fayllar uchun xeshlarni o'rnatish\n- HTML elementlarining atributlarini saralash\n\n```bash\nmmd dev --build \u0026\u0026 mmd dist\n```\n\n\n### `pack [name] [options]` loyihani arxivlash\n\nLoyiha fayllarini **tgz** yoki **zip** arxiviga joylashtiradi.\n\n- `pack` **tgz** arxiv\n- `pack -z, --zip` **zip** arxiv\n- `pack -f, --folders [marmelad,static]` faqat ma'lum kataloglarni arxivga to'plang\n- `pack --nodt` arxiv nomidagi yaratilgan sana va vaqtni almashtirmang (odatiy bo'yicha o'chirilgan)\n- `pack custom-name` arxiv uchun maxsus nom, aks holda arxiv nomi loyihaning asosiy papkasidan olinadi.\n\n```bash\npack           # project_11072019-153012.tgz\npack my-name   # my-name_11072019-153012.tgz\npack -z        # project_11072019-153012.zip\npack -f static # project_11072019-153012.tgz faqat static katalog\npack --nodt    # project.tgz sarlavhada sana va vaqt ko'rsatilmagan (odatiy bo'yicha o'chirilgan)\n```\n\n\n## Marmelad TCI\n\nTCI (text command interface) - tartib shabloniga qo'shiladi va CLI buyruqlarini **marmelad** (`cp`, `cb`), takrorlaydi, ya'ni boshqa konsol/terminalga o'tishning hojati yo'q va u erda allaqachon qo'shimcha ishlarni amalga oshiradi.\n\nEndi buning uchun **.tci** fayli mavjud, barcha buyruqlar `mmd` yoki `marmelad` prefikslarisiz kiritiladi.\n\n\n## Loyiha tuzilishi\n\n```bash\n├─ marmelad\n│  ├─ _blocks                   # bloklar\n│  │   └─ some-block            # misol bloki\n│  │       ├─ some-block.html   # blok namunasi\n│  │       ├─ some-block.js     # blok skriptlari\n│  │       ├─ some-block.styl   # blok stillari\n│  │       └─ some-block.json   # blok ma'lumotlari\n│  ├─ _pages                    # sahifalar\n│  ├─ iconizer                  # SVG-ikonka SVG-piktogramma\n│  │   ├─ colored               # ranglar SVG-ikonkalar\n│  │   └─ icons                 # monoxrom SVG-ikonkalar\n│  ├─ snippets                  # tahrir uchun BEML parchalari\n│  ├─ static                    # verstka uchun statik\n│  ├─ styles                    # stil, styl yoki scss\n│  ├─ .editorconfig             # muharrir uchun konfiguratsiya\n│  ├─ .tci                      # TCI buyruqlari marmelad\n│  ├─ data.marmelad.js          # global ma'lumotlar\n│  └─ settings.marmelad.js      # yeg'ish sozlamalari\n└─ static                       # yakuniy yig'ilish\n```\n\n\n## Shablonlar/bloklar\n\n- shablon dvigateli [nunjucks](https://mozilla.github.io/nunjucks/)\n- HTMLda BEM nomlanishini ta'minlaydi [posthtml-bem](https://www.npmjs.com/package/posthtml-bem)\n\n\n\n\n### Lag'mon\n\nKo'p sahifali yirik loyihalarda HTML shablonlarini yig'ishni optimallashtirish uchun mo'ljallangan.\n\n**Lag'mon** Bloklardan yoki sahifalardan bloklardan sahifalarning havolalarini/bog'liqlarini quradi. Bu shablon mexanizmiga qaysi sahifalar uchun blok o'zgarganligini tushunishga va faqat u ishlatiladigan sahifalarning HTML-ni qayta qurishga imkon beradi.\n\nModulning to'g'ri ishlashi uchun bloklar va sahifalarni yig'ish qoidalariga qat'iy rioya qilish kerak.\n\nTalab qilinadigan atributga ega bo'lgan BEM belgisini **Blok o'z ichiga olishi kerak** `block`:\n\n```html\n\u003cdiv block=\"block-name\" mods=\"red\"\u003e\n  ...\n\u003c/div\u003e\n```\n\nUshbu atribut sahifa va blok o'rtasida aloqa o'rnatish imkonini beradi. Agar ushbu atribut blok belgisida bo'lmasa, bu blok avtomatik ravishda o'zgarishlarni kuzatish ro'yxatidan chiqariladi va u ishlatiladigan sahifalarni qayta tiklashni to'xtatadi.\n\n\n\n## Shablonlar/bloklar uchun ma'lumotlar\n\nBlok uchun ma'lumotlar shablonlarda blok nomi ko'rsatilgan kalit bo'yicha (agar blok uchun ma'lumotlar fayli yaratilgan bo'lsa va hech bo'lmaganda biror narsa bilan to'ldirilgan bo'lsa) yoki \"data.marmelad.js\" (global ma'lumotlar) dan mavjud. Blokning o'z ma'lumotlarining nomlari/kalitlari o'zgartiriladi **camelCase**.\n\n\n\n### `incw` kengaytma\n\n`incw` - ushbu kengaytma blok fayl kengaytmasini ko'rsatmasdan, shablonga individual ma'lumotlarni uzatish bilan blok shablonlarini ulash imkonini beradi.\n\n```nunjucks\n{# shablonga ma'lumotlarni qo'lda kiritish #}\n{% incw 'kengaytmasiz shablon nomi', {title: 'Example', subtitle: 'An example component'} %}\n\n{# o'zgaruvchidan shablonga ma'lumotlarni uzatish #}\n{% incw 'kengaytmasiz shablon nomi', app.lang %}\n```\n\n`incw`ga uzatilgan ma'lumotlar shablon ichida `_ctx` tugmasi yordamida mavjud.\n\n```nunjucks\n{# shablon ulanishi #}\n{% incw 'avatar', { image: 'IMAGE URL', name: 'USERNAME'} %}\n\n{# shablonda #}\n\u003cdiv block=\"incw-template\"\u003e\n  \u003cimg src=\"{{ _ctx.image }}\" alt=\"\"\u003e\n  \u003cspan\u003e{{ _ctx.name }}\u003c/span\u003e\n\u003c/div\u003e\u003c!-- incw-template --\u003e\n```\n\n\u003e Ichki `incw` asosiy blokning `_ctx` ni olmaydi, faqat global ma'lumotlarni oladi. Muayyan ma'lumotlarni ichki `incw` ga o'tkazish uchun ma'lumotlarni aniq `incw` ga o'tkazishingiz kerak.\n\n\n## Uslublar to'plami\n\nQo'llab-quvvatlovchilarni yaratish `stylus`, `scss`, `sass`.\n\n\n### Post CSS plaginlari\n\n- [autoprefixer](https://www.npmjs.com/package/autoprefixer)\n- [postcss-easing-gradients](https://www.npmjs.com/package/postcss-easing-gradients)\n- [postcss-flexbugs-fixes](https://www.npmjs.com/package/postcss-flexbugs-fixes)\n- [postcss-inline-svg](https://www.npmjs.com/package/postcss-inline-svg)\n- [postcss-momentum-scrolling](https://www.npmjs.com/package/postcss-momentum-scrolling)\n- [postcss-sort-media-queries](https://github.com/solversgroup/postcss-sort-media-queries)\n\n\n## Iconizer\n\nIconizer qanday ulanishi va shablonlarda ishlatilishi nuqtai nazaridan o'zgarishlarga duch keldi.\n\n### Iconizerdan foydalanish\n\n**Shablonda**\n\n```HTML+Django\n{{ _icon('marmelad', { tag: 'span' }) }}\n```\n\n**Chiqishda**\n\n```HTML\n\u003cspan class=\"svg-icon svg-icon--marmelad colored\" aria-hidden=\"true\" focusable=\"false\"\u003e\n  \u003csvg class=\"svg-icon__link\"\u003e\n    \u003cuse xlink:href=\"#marmelad\"\u003e\u003c/use\u003e\n  \u003c/svg\u003e\n\u003c/span\u003e\n```\n\n### Iconizer parametrlari\n\n```HTML+Django\n{{ _icon('\u003cname\u003e', {\n  tag: 'div',\n  type: 'icons',\n  class: '',\n  mode: 'inline',\n  url: '',\n}) }}\n```\n\n`settings.marmelad.js -\u003e iconizer` dan `icon` funksiyasi **nunjucks** shablon mexanizmiga `_icon` sifatida uzatiladi.\n\n### SVG sprite turlari\n\n- `icons` - monoxrom piktogramma, barcha keraksiz dizayn atributlari olib tashlangan\n- `colored` - rangli piktogrammalarda faqat `title` tegi olib tashlanadi\n\n### Rangli SVG belgisidan foydalanishga misol\n\nRangli belgini kiritish uchun `type=\"colored\" ` atributini qo'shing\n\n```HTML+Django\n{{ _icon('marmelad', { type: 'colored' }) }}\n```\n\n### SVG sprite ulanish rejimlari\n\n- `inline` - sprayt sahifaning HTML kodiga kiritilgan\n- `external` - joylashuvi URL manziliga kirish orqali alohida fayl sifatida ishlatiladi\n\n### Iconizer 5+ uchun migratsiya\n\nВ `settings.marmelad.js`, olib tashlanishi kerak:\n\n- `paths.iconizer`\n- `app.svgSprite`\n\n```js\nconst paths = {\n  // удалить\n  iconizer: {\n    ...\n  },\n};\n\nconst app = {\n  // удалить\n  svgSprite: {\n    ...\n  },\n};\n```\n\n`settings.marmelad.js` ga yangi ob'ekt qo'shing\n\n```js\nconst iconizer = {\n  cssClass: 'main-svg-sprite',\n  mode: 'inline', // external отдельный подключаемый файл спрайта (default:inline)\n  dest: path.join(paths.dist, 'img'), // путь для собираемых спрайтов\n  url: 'img', // путь до подключаемого спрайта iconizer.dest без paths.dist\n  srcIcons: path.join(folders.marmelad, folders.iconizer.src, 'icons'),\n  srcColored: path.join(folders.marmelad, folders.iconizer.src, 'colored'),\n  icon: (name, opts) =\u003e {\n    opts = Object.assign({\n      tag: 'div',\n      type: 'icons',\n      class: '',\n      mode: 'inline',\n      url: '',\n    }, opts);\n\n    let external = '';\n    let typeClass = '';\n\n    if (opts.mode === 'external') {\n      external = `${opts.url}/sprite.${opts.type}.svg`;\n    }\n\n    if (opts.type !== 'icons') {\n      typeClass = ` svg-icon--${opts.type}`;\n    }\n\n    opts.class = opts.class ? ` ${opts.class}` : '';\n\n    return `\n      \u003c${opts.tag} class=\"svg-icon svg-icon--${name}${typeClass}${opts.class}\" aria-hidden=\"true\" focusable=\"false\"\u003e\n        \u003csvg class=\"svg-icon__link\"\u003e\n          \u003cuse xlink:href=\"${external}#${name}\"\u003e\u003c/use\u003e\n        \u003c/svg\u003e\n      \u003c/${opts.tag}\u003e\n    `;\n  },\n  plugin: {\n    mode: {\n      symbol: { // symbol mode to build the SVG\n        example: false, // Build sample page\n      },\n    },\n    svg: {\n      xmlDeclaration: false, // strip out the XML attribute\n      doctypeDeclaration: false, // don't include the !DOCTYPE declaration\n    },\n  },\n};\n```\n\nva uni sozlamalar eksportiga qo'shishni unutmang\n\n```js\nmodule.exports = {\n  // qo'shish\n  iconizer,\n};\n```\n\n## `latencyRoutes` serveri tomonidan kontentni taqdim etishda kechikish\n\n`settings.marmelad.js app.bsSp` da kontentni server tomonidan qaytarishni kechiktirish uchun sozlamalarni qo'shishingiz kerak.\n\n```js\n// masalan, yangi loyihalar uchun /api uchun standart kechikish\nlatencyRoutes: [\n  {\n    route: '/css',\n    latency: 3000,\n    active: true,\n  },\n],\n```\n\n## Litsenziya\n\n[MIT](LICENSE)\n\n## A'zoning axloq kodeksi\n\n[A'zoning axloq kodeksi](CODE_OF_CONDUCT_UZ.md\n) o'qib chiqing\n\n*Logotip muallifning piktogrammasidan olingan va o'zgartirilgan \u003ca href=\"https://www.flaticon.com/authors/freepik\" title=\"Jelly beans\"\u003eJelly beans\u003c/a\u003e litsenziya asosida tarqatiladi \u003ca href=\"http://creativecommons.org/licenses/by/3.0/\" title=\"Creative Commons BY 3.0\" target=\"_blank\"\u003eCC 3.0 BY\u003c/a\u003e с \u003ca href=\"https://www.flaticon.com/\"     title=\"Flaticon\"\u003ewww.flaticon.com\u003c/a\u003e*\n\n[Boshiga 🔝](#marmelad)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunusga%2Fmarmelad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyunusga%2Fmarmelad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunusga%2Fmarmelad/lists"}