jolimardi / laravel-sections
Custom sections implementation by Joli Mardi
Installs: 178
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
pkg:composer/jolimardi/laravel-sections
Requires
- php: ^8.1
README
Ce package et fait pour fonctionner avec Filament et
composer require jolimardi/filament-video-field
Le CSS pour les sections est disponible sur le repo Joli Mardi CSS
Installation
composer require jolimardi/laravel-sections
php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider"
Tags
Il est également possible de publish le package en plusieurs fois en ajoutant différents tags, selon les besoins :
php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="models"- Publish aussi les modelsphp artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="migrations"php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="assets"php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="views"php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="enums"-
php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="icons"
- Lancez les migrations pour ajouter les tables nécessaires à la base de données :
php artisan migrate`
Configuration
- Importez le fichier CSS du package dans
app.cssen ajoutant la ligne suivante (Recommandé avec Vite.js):
@import "../../vendor/jolimardi/laravel-mysections/dist/sections.css";
Utilisation
Utilisez la fonction mySection($data, $key) dans une views pour insérer une section. Pour passer des données spécifiques à la section ainsi que sa clé correspondante.
Composants
Il est possible d'utiliser le composant <x-section> dans une views afin de définir des règles CSS pré-établies pour les sections. Voici un exemple :
<x-layout> @mySection($sections, 'home.about') <x-section large gray> <h3>Ma section</h3> <p>Largeur max-width-large et background "gray"</p> </x-section> <x-section maxWidth="large" bg="gray"> <h3>Ma section</h3> <p>Contenu de ma section</p> </x-section> </x-layout>
Customiser les sections
Pour publier les vues dans votre projet et pourvoir les modifier (dans resources/views/vendor/laravel-sections) :
php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="views"
Création d'une nouvelle section intégrée à ce package
Voici les étapes à suivre pour créer une nouvelle section :
- Ouvrez Nova et rendez-vous sur le tableau de bord.
- Dans le menu, cliquez sur "Sections" pour ouvrir la liste des sections.
- Cliquez sur "Ajouter une nouvelle section".
Si vous avez ajouter une nouvelle section au packages, pensez à vous rentre sur "Sections templates" en amont pour lui donner un nom afin de pouvoir l'utiliser lors de la sélection du template
- Sélectionnez les paramètres de la section. Trois sections sont pré-définies, mais il est possible d'en ajouter d'autres.
- Pour ajouter une nouvelle section, allez dans "Section templates" sur Nova.
- Donnez un nom à votre section et sélectionnez une vue.
Remarque : Ces instructions supposent que vous êtes déjà familiarisé avec l'utilisation de Nova et de Laravel. Si ce n'est pas le cas, je vous recommande de consulter la documentation officielle pour plus d'informations.
Modifier ce package (pour les contributeurs)
- Installer les dépendances
composer install npm install
- Modifier un fichier css à chaque sauvegarde
dist/sections.css
npx mix watch
Ou mettre à jour une fois en utilisant :
npx mix
Remarque : Si vous modifier le contenu de
/distet que vous avez publish les assets. Il faut supprimer le fichiersection.cssdanspublic/vendor/mysectionset relancer la commande pour publish le nouveau fichier (ou le --force marche ? A tester). (Voir Installation -> Tags)
Ajouter une nouvelle section au package
-
Ajouter une nouvelle vue : Créez et ajoutez une nouvelle vue dans le dossier
src/views. -
Ajouter un fichier CSS : Créez et ajoutez un fichier CSS correspondant dans le dossier
src/css. -
Mettre à jour le fichier
webpack.mix.js: Ajoutez le fichier CSS à la configuration duwebpack.mix.js. -
Compilation des assets : Exécutez la commande npx mix pour recompiler les assets et actualiser le dossier
dist. -
Mise à jour du submodule : Si vous utilisez ce package en tant que submodule dans un autre projet, assurez-vous de mettre à jour le submodule.
-
Référence : Ensuite, reportez-vous à la section 'Création d'une nouvelle section' pour plus de détails sur la création d'une nouvelle section.
Note : Si on ajoute un fichier css, il faut l'ajouter au webpack.mix.js et relancé la commande npx mix watch.
Puis mettre à jour le dépôt et de mettre à jour votre projet avec les nouvelles modifications.
@TODO
- Ajouter les variables css type max-width pour pouvoir utiliser le component
<x-section><x-section />sans avoir besoin de jolimardi-css - Build le webpack.mix.js pour automatiquement récupérer tous les fichiers css du dossier relatif. J'ai essayé de glob les fichiers mais j'ai toujours un comportement qui ne convient pas.