Laravel Themer package: add multi-theme support for Laravel application

 This Laravel Themer package adds multi-theme support to your Laravel application. It also provides a simple authentication scaffolding and presets for Bootstrap, Tailwind, Vue, and React as a starting point for building a Laravel application.

In my opinion, this Laravel Themer package is a better alternative to the official laravel/ui & laravel/breeze packages because of the following features:

• Any number of themes
• Fallback theme support (WordPress style); It allows creating a child theme to extend any theme
• Provides authentication scaffolding similar to laravel/ui & laravel/breeze
• Exports all auth controllers, tests, and other files similar to laravel/breeze
• Provides frontend presets for Bootstrap, Tailwind, Vue 2, Vue 3, and React

If you don't want to use this package's auth scaffolding, instead, you want to use Laravel Fortify, no problem with that. You can use Laravel Themer with Fortify as well. Laravel Fortify is a frontend agnostic authentication backend for Laravel, and it does not provide views or frontend presets. So, use Fortify for backend authentication and Laravel Themer for your views, presets, and for multi-theme support.

Video Tutorial

Installation

Install via composer

1composer require qirolab/laravel-themer

Publish a configuration file:

1php artisan vendor:publish --provider="Qirolab\Theme\ThemeServiceProvider" --tag="config"

Creating a theme

Use the following command to create a theme:

1php artisan make:theme

Middleware to set a theme

Register ThemeMiddleware in app\Http\Kernel.php:

1protected $routeMiddleware = [
2    // ...
3    'theme' => \Qirolab\Theme\Middleware\ThemeMiddleware::class,
4];

Examples for middleware usage:

1Route::get('/dashboard', 'DashboardController@index')
2    ->middleware('theme:dashboard-theme');

Theme methods:

 1// Set active theme
 2Theme::set('theme-name');
 3 
 4// Get current active theme
 5Theme::active();
 6 
 7// Get current parent theme
 8Theme::parent();
 9 
10// Clear theme. So, no theme will be active
11Theme::clear();
12 
13// Get theme path
14Theme::path($path = 'views');
15// output:
16// /app-root-path/themes/active-theme/views
17 
18Theme::path($path = 'views', $themeName = 'admin');
19// output:
20// /app-root-path/themes/admin/views
21 
22Theme::getViewPaths();
23// Output:
24// [
25//     '/app-root-path/themes/admin/views',
26//     '/app-root-path/resources/views'
27// ]

webpack.mix.js Configuration

After creating a new theme, it creates a separate webpack.mix.js file for that theme. So, to compile the theme's webpack.mix.js file it should be included in the app's webpack.mix.js that is located in the root path.

1// add this in the root `webpack.mix.js`
2require(`${__dirname}/themes/theme-name/webpack.mix.js`);

In the case of multiple themes, If you add multiple webpack.mix.js of different themes. Then webpack may not compile these correctly. So, you should modify the root webpack.mix.js with the following code:

1let theme = process.env.npm_config_theme;
2 
3if(theme) {
4   require(`${__dirname}/themes/${theme}/webpack.mix.js`);
5} else {
6    // default theme to compile if theme is not specified
7  require(`${__dirname}/themes/theme-name/webpack.mix.js`);
8}

Now, you can use the following command to compile assets for a particular theme:

1npm run dev --theme=theme-name

Read More

Laravel ETag and Conditionals Package

 Laravel ETag and Conditionals is a package that provides a set of middleware for ETags and HTTP conditional requests. The goal of this package is to provide tools for better client-side caching for Laravel apps.

Using the techniques supported by this middleware, browsers can handle the caching provided automatically based on ETag headers in HTTP responses.

ETag Support

At the heart of this package, the setEtag middleware will set the ETag header on responses. The value of this header is the MD5 hash of the content. This package also supports HEAD requests (see the readme for details).

HTTP Conditional Requests

This package's middleware currently supports two HTTP Conditional requests: If-Match and If-None-Matched. To give a high-level understanding of how this can be useful to your app, when the If-None-Match header in the request matches the Etag, then a 304 response is returned, and the browser will use cached content instead. If the If-None-Match header doesn't match the newly created ETag value, then a 200 response is returned. This applies to GET and HEAD requests only.

Learn More

You can learn more about this package, get full installation instructions, and view the source code on GitHub. It's also advisable to learn more about the ETag header and HTTP conditional requests to understand how the HTTP specification works to support browser caching.

The author of the package also wrote an article that explains how to write the middleware in this package: Caching your Laravel API with ETag and Conditional Requests.

Read More

Friendly Prefix IDs for Eloquent Models

 Laravel Prefixed IDs is a package by Spatie that automatically adds a friendly prefixed ID to Laravel models. As Freek Van der Herten describes in his introductory post about this package, it provides human-readable prefixes to otherwise random IDs. For example, you might give a token ID that contains a friendly prefix:

1token_sandbox_FKdleMEKfiemsiDSMEODL

The token_sandbox prefix could indicate that it's a token for your sandbox environment, which would otherwise look like a random ID.

Here's an example model from Freek's article that illustrates how you use this package to indicate the model has a prefixed column:

1namespace App\Models;
2 
3use Illuminate\Database\Eloquent\Model;
4use Spatie\PrefixedIds\Models\Concerns\HasPrefixedId;
5 
6class YourModel extends Model
7{
8    use HasPrefixedId;
9}

If you follow the installation instructions, you'll need a table column for your model that contains the prefixed id, which defaults to prefixed_id.

Here are a few examples of how you might use this package with a model containing a prefixed ID:

1$model = ApiToken::create();
2$model->prefixed_id
3 
4ApiToken::findByPrefixedId('token_sandbox_fekjlmsme39dmMS'); // returns model
5ApiToken::findByPrefixedId('invalid-id'); // null

You can learn more about this package, get full installation instructions, and view the source code on GitHub.

Read More