Laravel Layouts

about

This is at an alpha stage - do not use in production This package provide a way to handle layouts components in laravel.

Installation

composer require kda/laravel-layouts

composer.json

add

@php artisan vendor:publish --provider=\"KDA\\Laravel\\Layouts\\ServiceProvider\"  --tag=\"assets\" --force",

in the post-autoload-dump scripts of your composer.json

"scripts": {
        "post-autoload-dump": [
           ...other scripts ,
            "@php artisan vendor:publish --provider=\"KDA\\Laravel\\Layouts\\ServiceProvider\"  --tag=\"assets\" --force",
           
        ],
        ...
    },

usage

php artisan  make:laravel-layout Page

creating layouts

php artisan  make:laravel-layout TestLayout

will create two files

• app/Layouts/TestLayout.php
• resources/views/components/laravel-layouts/layouts/test.blade.php

rendering layouts

This is a real life example of using a layout

use KDA\Laravel\Layouts\Facades\LayoutManager;

Route::get('/pages/{id}', function ($id) {
    $page = MyPageModel::find($id);// 
    $layout = $page->layout; // this is a string like App\Layouts\Page
    
    return LayoutManager::render($layout, $page->content, ['page' => $page]);
})->name('page');

hooks

LayoutManager allows to register custom hooks in your layouts with the registerRenderHook method.

These are the hooks defined in the default layout component provided with this package.

• base hooks

  • head.start
  • head.meta
  • head.styles
  • head.scripts
  • head.end

• body hooks

  • body.start
  • body.after
  • livewire.end
  • alpine.plugins
  • body.end

In a laravel app, you can set up the basic css & js like this in the boot method of your provider.

LayoutManager::registerRenderHook(
    'head.styles',
    fn() => Blade::render('<link href="{{ asset(mix(\'css/app.css\')) }}" rel="stylesheet"/>')
);

LayoutManager::registerRenderHook(
    'head.scripts',
    fn() => Blade::render('<script src="{{ asset(mix(\'js/app.js\')) }}"></script>')
);

custom hooks

in your project, you can add hooks in your views by calling

@hook("my-custom-hook",$context)

Default Components

By default laravel-layouts embed livewire & alpine in it's js file. It also set up a css var with the scrollbar width in the <html> Tag

Browser and OS mediaqueries

Laravel layouts also set two useful classes in your html tag with the current browser and current os.

    <html style="--scrollbar-width: 15px;" class="linux chrome">

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Fabien Karsegard
• All Contributors

License

The MIT License (MIT). Please see License File for more information.