{"id":20397203,"url":"https://github.com/litstack/bladesmith","last_synced_at":"2026-05-10T17:47:38.576Z","repository":{"id":240906494,"uuid":"274622250","full_name":"litstack/bladesmith","owner":"litstack","description":"A package with helpful Blade components for your litstack project.","archived":false,"fork":false,"pushed_at":"2024-05-08T13:53:54.000Z","size":643,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"1.x","last_synced_at":"2025-01-15T11:10:49.058Z","etag":null,"topics":[],"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/litstack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2020-06-24T08:56:39.000Z","updated_at":"2024-05-08T13:54:57.000Z","dependencies_parsed_at":"2024-05-21T12:00:30.692Z","dependency_job_id":"091a7ef6-93a0-4d6e-a874-565c3f56b136","html_url":"https://github.com/litstack/bladesmith","commit_stats":null,"previous_names":["litstack/bladesmith"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/litstack%2Fbladesmith","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/litstack%2Fbladesmith/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/litstack%2Fbladesmith/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/litstack%2Fbladesmith/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/litstack","download_url":"https://codeload.github.com/litstack/bladesmith/tar.gz/refs/heads/1.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241945526,"owners_count":20046869,"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":[],"created_at":"2024-11-15T04:12:30.892Z","updated_at":"2026-05-10T17:47:38.534Z","avatar_url":"https://github.com/litstack.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bladesmith\n\nA package with helpful Blade components for your\n[litstack](https://github.com/litstack/litstack) project.\n\n## Official Documentation\n\nDocumentation for Bladesmith can be found on\n[litstack.io](https://litstack.io/docs/packages/bladesmith).\n\n## License\n\nBladesmith was created by\n**[Lennart Carstens-Behrens](https://twitter.com/lennartcb)** under the\n**[Sponsorware license](https://github.com/sponsorware/docs)**.\n\n## Setup\n\nTo include all styles and scripts the `x-styles` tag must be placed in the head\nand the `x-scripts` tag at the end of the body.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        ...\n\n        \u003cx-styles /\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        ...\n\n        \u003cx-scripts /\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Customize\n\nIf you want to customize the blade components, you can simply publish them and\nedit them as desired.\n\n```shell\nphp artisan vendor:publish --provider=\"Fjord\\Ui\\FjordUiServiceProvider\" --tag=views\n```\n\n## Image\n\nThe image component uses lazy loading and prints a base64 string of the image\nbefore loading it. It also outputs the appropriate media conversion for the\ncorresponding screen sizes.\n\nThe component requires an image parameter with a media model:\n\n```php\n\u003cx-fj-image :image=\"$model-\u003eimage\"/\u003e\n```\n\nThe component lazy loads images and previews a minified base64 version of the\nimage untill it is loaded. ![fjord lazy loading](./lazy.png)\n\nYou may disable lazy loading by setting the `lazy` attribute to false:\n\n```php\n\u003cx-fj-image :image=\"$model-\u003eimage\" :lazy=\"false\" /\u003e\n```\n\n## Building Navigations in Fjord\n\nEvery page needs a navigation. Building it often takes time, especially if the\ndesign has to be adapted exactly to your needs. The Ui kit comes with a simple\nextensive solution to include all possible navigations types that are built with\na `list` field in a short time.\n\nWe start by creating a form in that we can build our navigation:\n\n```shell\nphp artisan fjord:form --collection=navigations --form=main_navigation\n```\n\nThe next step is to add a `nav` field to the newly created config file:\n\n```php\nnamespace FjordApp\\Config\\Form\\Navigations;\n\nclass MainNavigationConfig extends FormConfig\n{\n\tpublic function show(CrudShow $page)\n    {\n        $page-\u003ecard(function ($form) {\n            $form-\u003enav('main')-\u003etitle('Main Navigation')-\u003emaxDepth(3);\n        });\n    }\n}\n```\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"./nav-field.png\" width=\"600px\"\u003e\n\u003c/p\u003e\n\nNow we can simply pass the list field to the `x-fj-nav-list` component and a\nnavigation is created that can be build in the fjord backend:\n\n```php\nuse Fjord\\Support\\Facades\\Form;\n\n$nav = Form::load('navigations', 'main_navigation');\n\n\u003cx-fj-nav-list :list=\"$nav-\u003emain\" layout=\"horizontal\" dropdown/\u003e\n```\n\nThis will result in the following simple horizontal navigation:\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"./nav-result.png\" width=\"600px\"\u003e\n\u003c/p\u003e\n\nCustomize the table using the following options\n\n| Method        | Description                                                            |\n| ------------- | ---------------------------------------------------------------------- |\n| `layout`      | Can be `horizontal` or `vertical`. (default is `vertial`)              |\n| `dropdown`    | Wether the navigation should be a dropdown menue on `mouseover`.       |\n| `depth`       | Max depth.                                                             |\n| `subLevel`    | Start depth.                                                           |\n| `expandable`  | Only display's level one, all child levels can be expanded on `click`. |\n| `class`       | Navigation class.                                                      |\n| `activeClass` | Class of active items. (default is: `fj--active`)                      |\n\n## Translatable Routes\n\nBuild translated routes in the form of `/en/home`, `/de/startseite` made easy.\n\nMake shure to translate your routes within your translation-files in the\n`resources` directory, for example:\n\n```php\n// lang/de/routes.php\n\nreturn [\n    'home' =\u003e 'startseite'\n];\n```\n\nYou can now simply add translated Routes to your preferred routes file using the\n`__()` helper in the uri string like this:\n\n```php\nRoute::trans('/__(routes.home)', 'HomeController@show')-\u003ename('home');\n```\n\nA translated route will be created for all locales defined in your\n`translatable` config. The locale will be prepended to the given **uri** and\n**name**. So the routes for the previous example would be:\n\n-   `en.home` =\u003e `/en/home`\n-   `de.home` =\u003e `/de/startseite`\n\nThe `__route` helper prepends the current locale to the given name and returns\nthe corresponding route:\n\n```php\n\u003ca href=\"{{ __route('home') }}\"\u003e\n    ...\n\u003c/a\u003e\n```\n\n### Switching Languages\n\nYou may want to place a link to the different language route on your website. To\ndo this, the `translate` method can be applied to the current route with the\ndesired locale.\n\n```php\n\u003ca href=\"{{ Request::route()-\u003etranslate('de') }}\"\u003eDeutsch\u003c/a\u003e\n```\n\n#### With Parameters\n\nFor routes with parameters a translator must be specified. A translator is a\ncontroller method that returns the route parameters for the desired locale. The\ntranslator method receives the desired locale and the parameters for the current\nlocale.\n\n```php\n// ./routes/web.php\nRoute::trans('/{slug}', 'MyController@show')-\u003etranslator('getSlug')-\u003ename('home');\n\n// ./app/Http/Controllers/MyController.php\n\n...\n\nclass MyController extends Controller\n{\n\t...\n\n\tpublic function getSlug($locale, $slug)\n\t{\n\t\t$slug = Post::whereTranslation('slug', $slug)\n\t\t\t-\u003efirst()\n\t\t\t-\u003etranslate($locale)\n\t\t\t-\u003eslug;\n\n\t\treturn ['slug' =\u003e $slug];\n\t}\n}\n```\n\n## Localize\n\nThe Blade componend `x-fj-localize` creates a link to the translated routes of\nall locales.\n\n```php\n\u003cx-fj-localize /\u003e\n```\n\nResult:\n\n```html\n\u003ca href=\"/en/home\" class=\"locale locale-en locale-active\"\u003eEN\u003c/a\u003e\n\u003ca href=\"/de/startseite\" class=\"locale locale-de\"\u003eDE\u003c/a\u003e\n```\n\nYou may change the content of the link By passing a slot with the name of the\nlocale:\n\n```php\n\u003cx-fj-localize\u003e\n\t\u003cx-slot name=\"en\"\u003e\n\t\tEnglish\n\t\u003c/x-slot\u003e\n\t\u003cx-slot name=\"de\"\u003e\n\t\tDeutsch\n\t\u003c/x-slot\u003e\n\u003c/x-fj-localize\u003e\n```\n\nResult:\n\n```html\n\u003ca href=\"/en/home\" class=\"locale locale-en locale-active\"\u003eEnglish\u003c/a\u003e\n\u003ca href=\"/de/startseite\" class=\"locale locale-de\"\u003eDeutsch\u003c/a\u003e\n```\n\n## Helpers\n\n### `child_is_active`\n\nThe child is active determines wether a list item has a child with an active\nroute. The following example will add the `is-active` class when a list item has\nan active `route` that is added from route field.\n\n```php\n$form-\u003eroute('route_field')-\u003ecollection('app')-\u003etitle('Pick a route.');\n```\n\n```php\n@foreach($data-\u003elist as $item)\n\t\u003cspan class=\"child_is_active($item, 'route_field', 'is-active')\"\u003e\n\t\t{{ $item-\u003etitle }}\n\t\u003c/span\u003e\n@endforeach\n```\n\n### (Google)-Bot detection\n\nFor bot-detection in your templates use the custom Blade-If:\n\n```php\n@bot\n\ti'm a bot\n@else\n\ti'm human\n@endbot\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flitstack%2Fbladesmith","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flitstack%2Fbladesmith","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flitstack%2Fbladesmith/lists"}