flobbos/page-composer

A livewire based CMS for Laravel

v0.0.4-alpha 2024-11-26 08:33 UTC

Requires

• php: ^8.1
• blade-ui-kit/blade-heroicons: ^2.0
• flobbos/laravel-translatable-db: ^1.4
• illuminate/support: 10.*|11.*
• khatabwedaa/blade-css-icons: ^1.0
• livewire/livewire: ^3.0

MIT

• Alexej Krzewitzki

• cms
• laravel
• livewire

README

Handle your content a little differently

This package aims to create a flexible CMS experience for the user as well as the developer. Content is divided into rows and columns which contain elements of your choosing, text, photo, video and elements you can create based on your needs. This is a different approach at handling website content. I hope you like it.

Docs

• Installation
• Dependency configuration
• Laravel layout
• Livewire
• Configuration
• Laravel compatibility

Installation

Install package

Add the package in your composer.json by executing the command.

composer require flobbos/page-composer

PageComposer features auto discover for Laravel. In case this fails, just add the Service Provider to the app.php file.

Flobbos\PageComposer\PageComposerServiceProvider::class,

Running the installation routine

Using the new install command you are guided through the process of publishing all necessary files as well as set up all required directories and symlinks.

php artisan page-composer:install

Follow the step by step process or alternatively you can just run everything at once. There is a prompt for that option.

Publish configuration file

This step is very important because it publishes the NewsletterTemplate model to the App folder so you can set your own fillable fields as well as relationships you may need. The template generator needs to have this model present otherwise you will receive an error.

This also publishes the inital base layout that will be used to generate newsletter templates.

php artisan vendor:publish --tag=page-composer-config

Here you need to use the route previously defined for your controller. The default is the same but you will also be asked during the generation process.

Dependency configuration

TranslatableDB

The package relies on flobbos/translatable-db to handle translations. It's important to configure this package as well. For this you need to run:

php artisan vendor:publish

Select the Flobbos\TranslatableDb package. It will publish a configuration file to which you need to add the following path:

'language_model' => 'Flobbos\PageComposer\Models\Language',

This way the language model will be detected correctly and translations can be loaded.

Livewire

Please also check the Livewire section for two very important config settings to make things work correctly.

Tailwind

Additionally you will need to add the package views to your TailwindCSS configuration so everything is compiled correctly. In the contents section of the config file please add the following line:

"./vendor/flobbos/page-composer/src/resources/views/*.blade.php",

This will let Tailwind know where to look for files to check for classnames and such.

Laravel layout

PageComposer injects a few snippets onto the scripts stack in order to make the default components work like the editor for example. For this to work correctly you need to add the following to your default layout:

@stack('scripts')

Either at the top or bottom of your layout file.

Migrations

During the publishing process the migration for the newsletter_templates table was also published. Add all fields you need and run the migration.

php artisan migrate

Adding the package

Routes

The routes will be automatically loaded from the package folder. However you may need to update the middlewares being used on these routes. You can do this easily by editing the config like so:

'middleware' => [
        'web',
        'auth:sanctum',
        config('jetstream.auth_session'),
        'verified',
    ]

In this example we have Laravel Jetstream installed with the default configuration.

Menu entries

There's no default menu provided with the package. You need to add these entries yourself. The following routes must be added to access the PageComposer:

route('page-composer::pages.index');
route('page-composer::pages.create');
route('page-composer::pages.edit',$page_id);

If you want to use the default preview route, you need to add the following route:

route('page-composer::pages.detail',$page_id);

There's also a built in micro bug tracker for users of the package. There users can report bugs or add wishes for new elements and such.

route('page-composer::dashboard');

Configuration

The configuration options have been kept fairly simple at the moment. The following options are available:

Validation rules

Here you can set some basic validation options that will be used for saving a page.

'rules' => [
        'page.name' => 'required', //mandatory
        'page.photo' => 'required',
        'page.slider_image' => 'sometimes:image',
        'page.newsletter_image' => 'sometimes:image',
        'pageTranslations.*.content.title' => 'required', //mandatory
        'page.category_id' => 'required', //remove if not using categories
    ],

FAQ

There's a small FAQ to help people get started. If you want to show this:

   'showFaq' => true,

Tags

If you want to use the tags provided by the package for the pages created:

    'useTags' => true,

Categories

PageComposer comes with a default categorisation option. If you want to use it:

    'useCategories' => true,

Element Creator

PageComposer provides stubs for creating new content elements. These will of course just create a blank element template which you need to update. This option might be a bit counter intuitive for the regular users if made available during production.

    'showElementCreator' => true,

Livewire

The package relies on Livewire 3 and Alpine 3. There are a few options you need to change to make things work.

Legacy model binding

The option for binding directly to an Eloquent model has been removed in Livewire 3 by default. PageComposer heavily relies on this feature since it was initially created with Livewire 2. This will change in the future but the for moment you need to enable this feature for things to work.

'legacy_model_binding' => true,

Layout

All full page components use the classic layout path which differs from the default layout path suggested by Livewire 3. Set the folling option for the correct layout path:

'layout' => 'layouts.app',

Laravel compatibility

Lower versions of Laravel are not supported.