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
<?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,
],
];
<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>
CSS JoliMardi
cd resources/css
git clone https://github.com/jolimardi/jolimardi-css
Puis importer le CSS dans le projet :
@import "jolimardi-css/jolimardi.css";
Ajouter le submodule au projet
Créer .gitmodules à la racine du projet :
[submodule "resources/css/jolimardi-css"]
path = resources/css/jolimardi-css
url = https://github.com/jolimardi/jolimardi-css/
update = rebase
branch = main
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).
Menu JoliMardi
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
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
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
@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é.
...
<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 :
@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 :
<?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-mainpermet d'outre-passer la vérification de stabilité pour le moment.
Ajouter l'alias personnalisé dans config/app.php -> aliases:
<?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