{"id":33985326,"url":"https://github.com/aqquaa/blade-emerald","last_synced_at":"2025-12-13T04:53:51.252Z","repository":{"id":43708719,"uuid":"403282706","full_name":"aqquaa/blade-emerald","owner":"aqquaa","description":"Emmet like Abbreviation to generate and wrap Laravel Blade Component with markup","archived":false,"fork":false,"pushed_at":"2023-03-31T08:17:27.000Z","size":71,"stargazers_count":32,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-03T12:36:43.800Z","etag":null,"topics":["emmet-abbreviations","laravel","laravel-blade","laravel-blade-component","markup"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"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/aqquaa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-05T10:48:56.000Z","updated_at":"2022-09-06T12:52:58.000Z","dependencies_parsed_at":"2022-08-22T03:10:08.415Z","dependency_job_id":null,"html_url":"https://github.com/aqquaa/blade-emerald","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/aqquaa/blade-emerald","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aqquaa%2Fblade-emerald","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aqquaa%2Fblade-emerald/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aqquaa%2Fblade-emerald/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aqquaa%2Fblade-emerald/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aqquaa","download_url":"https://codeload.github.com/aqquaa/blade-emerald/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aqquaa%2Fblade-emerald/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27700343,"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","status":"online","status_checked_at":"2025-12-13T02:00:09.769Z","response_time":147,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["emmet-abbreviations","laravel","laravel-blade","laravel-blade-component","markup"],"created_at":"2025-12-13T04:53:47.923Z","updated_at":"2025-12-13T04:53:51.240Z","avatar_url":"https://github.com/aqquaa.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Laravel Blade Emerald\n\u003e [Emmet](http://emmet.io/) like Abbreviation to generate and wrap [Laravel](https://laravel.com/) [Blade Component](https://laravel.com/docs/master/blade#components) with markup\n\n[![Latest Version on Packagist](https://badgen.net/packagist/v/aqua/blade-emerald?label=latest\u0026color=cyan)](https://packagist.org/packages/aqua/blade-emerald)\n[![Total Downloads](https://badgen.net/packagist/dt/aqua/blade-emerald)](https://packagist.org/packages/aqua/blade-emerald)\n[![GitHub Tests Action Status](https://github.com/aqquaa/blade-emerald/actions/workflows/test.yaml/badge.svg)](https://github.com/aqquaa/blade-emerald/actions/workflows/test.yaml)\n[![Open Issues](https://badgen.net/github/open-issues/aqquaa/blade-emerald?color=red)](https://github.com/aqquaa/blade-emerald/issues?q=is%3Aopen+is%3Aissue)\n[![License](https://badgen.net/github/license/aqquaa/blade-emerald)](https://github.com/aqquaa/blade-emerald/blob/master/LICENSE.md)\n\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://binarymesh.dev/assets/package/static_markup-1.png\" width=\"410\" alt=\"example static markup\" /\u003e\n    \u003cimg src=\"https://binarymesh.dev/assets/package/blade_component-1.png\" width=\"410\" alt=\"example blade component\" /\u003e\n\u003c/p\u003e\n\n## 🌈 Features\n\n- Generate HTML in a Blade file via package provided component: `\u003cx-markup make=\"div.col\u003espan#alert\"\u003e`\n- Emmet style syntax to produce nested markup\n- Wrap around any content / other component with markup\n- Make any Blade Component accept abbreviation to wrap itself with markup ( *doesn't work for Anonymous Components* )\n\n\n## 🛸 Compatibility\n\n| Package Version | Laravel version | PHP version | Compatible |\n|-----------------|-----------------|-------------|------------|\n|    ^1.2         |       10.*       |   8.1 - 8.2 |      🟢  |\n|    ^1.0         |       9.*       |   8.0 - 8.1 |      🟢  |\n|    ^1.0         |       8.*       |   7.3 - 8.0 |      🟢  |\n|                 |       7.*       |   7.3 - 7.4 |      🔴  |\n\n## 📥 Installation\n\n```shell\ncomposer require aqua/blade-emerald\n```\n\n## 📖 Usage\n\n💡 The package provides a Blade Component `\u003cx-emerald-markup /\u003e`, This component can be used like `\u003cx-markup ...\u003e` as an alias.\nThe component support one prop named `make` which accept the abbreviation\n\n#### 🏷️ Generate static nested markup\n\n```html\n\u003cx-markup make=\"div.card[style='color:green;'] \u003e div.card-body#box\" /\u003e\n```\n\u003e produced html\n```html\n\u003cdiv class=\"card\" style=\"color:green;\"\u003e\n    \u003cdiv class=\"card-body\" id=\"box\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### 🏷️ Wrap some content\n```html\n\u003cx-markup make=\"div.col\u003ediv.alert.alert-success[role=alert]\"\u003e\n    \u003cstrong\u003eSuccess !\u003c/strong\u003e give it a click if you like.\n\u003c/x-markup\u003e\n```\n\u003cdetails\u003e\n\u003csummary\u003eproduced html\u003c/summary\u003e\n\n```html\n\u003cdiv class=\"col\"\u003e\n    \u003cdiv class=\"alert alert-success\" role=\"alert\"\u003e\n        \u003cstrong\u003eSuccess !\u003c/strong\u003e give it a click if you like.\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003c/details\u003e\n\n#### 🏷️ Accept abbreviation in your Blade Component\n\n\u003e this feature doesn't support *Anonymous Components*\n\n1.  use `Aqua\\Emerald\\Traits\\Markup` trait in your Component Class\n```php\nclass YourComponent extends Component {\n    use Markup;\n    ...\n```\n2.  the `Markup` trait assumes the prop name to be `wrap`, so lets add this as a class property \u0026 instantiate\n```php\npublic function __construct(public $wrap) {...} // using php 8.0 constructor property promotion\n```\n[read more](https://php.watch/versions/8.0/constructor-property-promotion) about constructor property promotion\n\n3.  accept abbreviation\n```html\n\u003cx-your-component wrap=\".card.bg-dark.pt-2 \u003e .card-body.text-danger\" /\u003e\n```\n\u003cdetails\u003e\n\u003csummary\u003eproduced html\u003c/summary\u003e\n\n```html\n\u003cdiv class=\"card bg-dark pt-2\"\u003e\n    \u003cdiv class=\"card-body text-danger\"\u003e\n        \u003c!-- actual content of your-component --\u003e\n        \u003cp\u003eLaravel... The PHP Framework for Web Artisans\u003c/p\u003e\n        \u003c!-- actual content of your-component --\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003c/details\u003e\n\n4.  accept abbreviation using prop of your choise\nto customize the prop name that receives the abbreviation create a static property `$wrapby` and set its value to your prop name\n\n```php\nclass YourComponent extends Component {\n    use Markup;\n\n    protected static $wrapby = 'markup'; 👈\n\n    public function __construct(public $markup, ...) {\n                                        👆\n    }\n    ...\n```\n\n```html\n\u003cx-your-component markup=\".card.bg-dark.pt-2 \u003e .card-body.text-danger\" /\u003e\n                   👆\n```\n\n## 🧰 Useful Examples\n\u003cdetails\u003e\n\u003csummary\u003eBootstrap grid\u003c/summary\u003e\n\n```html\n\u003cx-markup make=\"div.container \u003e div.row \u003e div.col-md-6\"\u003e\n    \u003cp\u003eHello world!\u003c/p\u003e\n\u003c/x-markup\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eBreadcrumb\u003c/summary\u003e\n\n```html\n\u003cx-markup make=\"nav[aria-label=breadcrumb]\u003eol.breadcrumb\"\u003e\n    \u003cli class=\"breadcrumb-item\"\u003e\u003ca href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n    \u003cli class=\"breadcrumb-item active\" aria-current=\"page\"\u003eLibrary\u003c/li\u003e\n\u003c/x-markup\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eBootstrap card with links\u003c/summary\u003e\n\n```html\n\u003cx-markup make=\"div.card.text-center\"\u003e\n    \u003cx-markup make=\"div.card-header\u003eul.nav.nav-pills.card-header-pills\"\u003e\n        \u003cx-markup make=\"li.nav-item\u003ea.nav-link.active[href=#]\"\u003eActive\u003c/x-markup\u003e\n        \u003cx-markup make=\"li.nav-item\u003ea.nav-link[href=#]\"\u003eLink\u003c/x-markup\u003e\n        \u003cx-markup make=\"li.nav-item\u003ea.nav-link.disabled[href=# tabindex=-1 aria-disabled=true]\"\u003eDisabled\u003c/x-markup\u003e\n    \u003c/x-markup\u003e\n    \u003cdiv class=\"card-body\"\u003e\n        \u003cp class=\"card-text\"\u003eWith supporting text below as a natural lead-in to additional content.\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/x-markup\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eBootstrap form-group\u003c/summary\u003e\n\n```html\n\u003cx-markup make=\"div.form-group\u003ediv.mb-3\"\u003e\n    \u003clabel for=\"email\" class=\"form-label\"\u003eEmail address\u003c/label\u003e\n    \u003cinput type=\"email\" class=\"form-control\" id=\"email\" aria-describedby=\"emailHelp\" /\u003e\n\n    \u003cx-markup make=\"div\u003ediv.#emailHelp.form-text\u003espan.text-danger.validation-msg\" /\u003e\n\u003c/x-markup\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSelf closing tag\u003c/summary\u003e\n\n```html\n\u003cx-markup make=\"img#profile[src=/avatar.jpg width=80]\" /\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAlpine x-for\u003c/summary\u003e\n\n```html\n\u003cul x-data=\"{ colors: [{ id: 1, label: 'Green' }, ...] }\"\u003e\n    \u003cx-markup make=\"template[x-for=color in colors] [:key=color.id] \u003e li[x-text=color.label]\" /\u003e\n\u003c/ul\u003e\n```\n\u003e equivalent to\n```html\n\u003cul x-data=\"{ colors: ...}\"\u003e\n    \u003ctemplate x-for=\"color in colors\" :key=\"color.id\"\u003e\n        \u003cli x-text=\"color.label\"\u003e\u003c/li\u003e\n    \u003c/template\u003e\n\u003c/ul\u003e\n```\n\u003c/details\u003e\n\n\n## 📚 Abbreviation Guide\ncheckout [spatie/html-element](https://github.com/spatie/html-element#examples) to get more idea.\n\n| Syntax | Example | Description |\n|-----------------|-----------------|-----------------|\n| `#id` | `p#foo` | ID attribute |\n| `.class` | `p.foo` | Class attribute |\n| `\u003e` | `div.row\u003ediv.col` | Nesting with child |\n| `[style='color:green;']` | `div[style='color:green;']` | Single attribute |\n| `[title=Hello world][data-foo=bar]` |  | Multiple attributes |\n\n## 📅 Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## 🏆 Credits\nThis package is actually a wrapper around [spatie/html-element](https://github.com/spatie/html-element), all the hard work has been done by Team Spatie so they deserve all the credits. All I did is make it work with Laravel Blade Components.\n\n- [![Follow](https://badgen.net/twitter/follow/srvrksh?icon=twitter\u0026label=Sourav%20R)](https://twitter.com/srvrksh)\n- [All Contributors](../../contributors)\n\n## 🎫 License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faqquaa%2Fblade-emerald","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faqquaa%2Fblade-emerald","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faqquaa%2Fblade-emerald/lists"}