Trending

#AssetMapper

Latest posts tagged with #AssetMapper on Bluesky

Latest Top
Trending

Posts tagged #AssetMapper

Preview
DaisyUI 5 avec Symfony 6/7 Aujourd'hui, c'est mardi et c'est surtout ...DaisyUI. Dans les dernières versions de Symfony (6 et 7) on a un nouveau composant pour gérer nos assets : AssetMapper. Le mini défi du jour : installer DaisyUI pour un nouveau projet. ## Création du projet Symfony Rien de bien compliqué à ce niveau, surtout avec la CLI Symfony (ici mon projet s'appelle FormerK): symfony new FormerK --webapp ## Installation du bundle Tailwind Encore une fois la doc de Symfony est bien utile : cd FormerK composer require symfonycasts/tailwind-bundle ## Configuration du bundle Tailwind Si vous faites tout de suite les commandes indiquées en fin d'installation, vous allez (avec la commande _bin/console tailwind:init_) installer la version 3 de Tailwind. Ce n'est pas ce que l'on veut, puisque la dernière version de DaisyUI utilise Tailwind 4. Pour modifier la version de Tailwind utilisée, éditez le fichier config/packages/symfonycasts_tailwind.yaml et modifiez le comme suit: symfonycasts_tailwind: # Specify the EXACT version of Tailwind CSS you want to use binary_version: 'v4.1.6' Lancez maintenant les commandes suivantes et observez le résultat: bin/console tailwind:init bin/console tailwind:build ## Installation de DaisyUI Pour installer DaisyUI, là aussi, rien de compliqué : on va utiliser la commande de gestion des dépendances d'AssetMapper: bin/console importmap:require daisyui@latest et voilà le résultat: ## Configuration de Tailwind pour utiliser DaisyUI Dans la version 4 de Tailwind, on utilise maintenant le "@plugin". Nous n'avions pas configuré Tailwind dans notre projet, donc on va faire les 2 en même temps. Editez le fichier assets/styles/app.css comme suit: @import "tailwindcss"; @plugin "../vendor/daisyui/daisyui.index.js"; Puis relancez un build Tailwind avec la même commande : bin/console tailwind:build et admirez le résultat: ## Un exemple ! Créez un controleur dans votre application et dans votre template, ça doit donner ça avec l'exemple d'alert de DaisyUI : {% extends 'base.html.twig' %} {% block body %} <div role="alert" class="alert alert-success"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> <span>Your purchase has been confirmed!</span> </div> {% endblock %} Evidemment, il faut relancer la commande de compilation de tailwind: bin/console tailwind:build Si vous ne voulez pas relancer la build à la main en permanence et que ça recompile à chaque changement sur vos templates, laissez tourner la commande suivante dans un terminal: bin/console tailwind:build --watch Et voilà le résultat : Enjoy !
0 0 0 0
16 - Utiliser CKEditor 5 pour écrire les articles (Symfony 7)
16 - Utiliser CKEditor 5 pour écrire les articles (Symfony 7) YouTube video by Nouvelle Techno

🚀 Nouveau Tutoriel Symfony 7 🎨

Dans ce 16ème tutoriel, vous apprendrez à intégrer CKEditor5 dans un projet Symfony 7 en utilisant AssetMapper pour gérer vos assets facilement.

🔗 youtu.be/Qwubyuogcz0

#Symfony7 #CKEditor5 #AssetMapper #PHP #WebDevelopment #ProgrammationWeb #EditeurTexte

1 0 0 0