Skip to main content

Packages Composer

Blade Icons

composer require blade-ui-kit/blade-icons
composer require codeat3/blade-coolicons
# Créer le dossier qui contiendra les icones "custom" pour le projet
mkdir ressources/icons

php artisan vendor:publish --tag=blade-icons
php artisan view:clear
/config/blade-icons.php
<?php

return [
'sets' => [
'default' => [
'path' => 'resources/icons',
'prefix' => '',
],
// Coolicon est automatiquement dispo en plus de default s'il est installé
],

// Global Default Classes - applied to all icons by default
'class' => 'icon',

// Evite les icones énormes tant que le css n'est pas chargé
'attributes' => [
'width' => 24,
'height' => 24,
],

'components' => [
// Disable the component, only use directive @svg(...) -> perf boost
'disabled' => true,
],
];
example.blade.php
<body>

// Pour afficher l'icone custom du projet /ressources/icons/icon-perso.svg
@svg('icon-perso')

// Pour afficher l'icone Coolicons Hamburger
@svg('coolicon-hamburger-md')

// Pour ajouter une classe, c'est le 2nd argument
@svg('coolicon-hamburger-md', 'ma-classe-pour-cette-icone')

// Rendu dans le HTML :
<svg class="icon ma-classe-pour-cette-icone" viewBox="0 0 24 24" fill="none"><g>...</g></svg>

</body>

La liste des icônes ici.

CSS JoliMardi

cd resources/css
git clone https://github.com/jolimardi/jolimardi-css

Puis importer le CSS dans le projet :

resources/css/app.css
@import "jolimardi-css/jolimardi.css";

Ajouter le submodule au projet

Créer .gitmodules à la racine du projet :

/.gitmodules
[submodule "resources/css/jolimardi-css"]
path = resources/css/jolimardi-css
url = https://github.com/jolimardi/jolimardi-css/
update = rebase
branch = main
info

Pour mettre à jour ce CSS, exécuter git submodule update --remote --merge (pratique à mettre dans le Deploy Script de Forge par exemple, après le git pull).

composer require jolimardi/laravel-menu:dev-master
php artisan vendor:publish --provider="JoliMardi\Menu\MenuServiceProvider" --tag=config

Ajouter le component <x-menu/> dans un template blade, là où vous voulez afficher le menu. Modifier config/menu.yml pour ajouter des routes au composant.

Sections JoliMardi

danger

Il faut d'abord installer Nova

composer require ebess/advanced-nova-media-library:^4.1.6
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="medialibrary-migrations"
php artisan migrate
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="medialibrary-config"
php artisan vendor:publish --tag=nova-media-library

composer require jolimardi/laravel-sections:dev-main
php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider"
php artisan migrate
info

S'il y a un problème de "minimum stability", modifier composer.json en modifiant "minimum-stability": "dev",

Il est maintenant possible d'utiliser le composant <x-section><x-section />.

Importer le CSS

resources/css/app.css
@import "../../vendor/jolimardi/laravel-sections/dist/sections.css";

Utilisation dans les Views

<body>
@mySection($all_sections_from_db, $key_of_the_section_to_display)
</body>

Option vidéo youtube

Si vos sections text-with-image ne comprendront pas de vidéo à la place de l'image. Alors il faut modifier la sections text-with-image en enlevant les partie surligné.

resources/views/vendor/laravel-sections/text-with-image.blade.php
...
<div class="section-image">
@if (isset($section->video_url))
<div class="video-container">
{{-- <x-youtube :youtube='$section->video_url' :youtube-thumbnail-media="$section->getFirstMedia('video_thumbnail')" /> --}}
<x-youtube-inline :youtube='$section->video_url' />
</div>
@else
{{ $section->getFirstMedia('image')->img('', ['alt' => $section->title]) }}
@endif
</div>
...

Sinon, il faut ajouter le composant youtube-inline.blade.php dans resources/views/components :

resources/views/components/youtube-inline.blade.php
@if (isset($youtube))
<div class="video-thumbnail ratio-16x9">

<iframe src="https://www.youtube.com/embed/{{ $youtube }}?&loop=1&playlist={{ $youtube }}&rel=0&controls=1&autoplay=1&mute=1&start=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>

</div>
@endif

Ajout d'une nouvelle section via Nova

Prérequis : avoir installé Laravel Nova (voir plus loin)

Se connecter à Nova pour ajouter une section. La clé est importante pour afficher la section (c'est son machine name). Il est possible d'ajouter des types de section (via Nova), puis de créer le nouveau template dans /ressources/views/components/vendor/laravel-sections/ma-nouvelle-section.blade.php

Metas JoliMardi

composer require jolimardi/laravel-metas
php artisan vendor:publish --provider="JoliMardi\Metas\MetasServiceProvider"

Ajouter les variables globale :

app/Http/Controller/Controller.php
<?php

namespace App\Http\Controllers;


use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Routing\Controller as BaseController;
use JoliMardi\Metas\Services\MetasService;
use Illuminate\Support\Facades\View;

class Controller extends BaseController {
use AuthorizesRequests, ValidatesRequests;

public function __construct() {
// Chargement des variables globales utilisables dans toutes les vues, et overridables dans les controllers
View::share('title', MetasService::getTitle());
View::share('description', MetasService::getDescription());
View::share('og_image', '/img/example.jpg');
}
}

Flash

composer require jolimardi/laravel-flash:dev-master
php artisan vendor:publish --provider="JoliMardi\Flash\FlashServiceProvider" --tag="views"

:dev-main permet d'outre-passer la vérification de stabilité pour le moment.

Ajouter l'alias personnalisé dans config/app.php -> aliases:

/config/app.php
<?php

use Illuminate\Support\Facades\Facade;
use Illuminate\Support\ServiceProvider;

return [
...
// Tout en bas du fichier

'aliases' => Facade::defaultAliases()->merge([
'MyFlash' => JoliMardi\Flash\Flash::class,
])->toArray(),
];

Utiliser dans un controlleur Flash::success('Ceci est un message de succès');.

Retrouvez tout les types de message dans la documentation du package : https://github.com/jolimardi/laravel-flash

Debugbar

composer require barryvdh/laravel-debugbar --dev