From af44fc426b9d63ab61e1414eaad9bcb96ffc6bf2 Mon Sep 17 00:00:00 2001 From: Julien Rosset Date: Tue, 30 Apr 2024 17:43:00 +0200 Subject: [PATCH] =?UTF-8?q?Home=20page=20(empty=20except=20=E2=80=9Chome?= =?UTF-8?q?=E2=80=9D)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit + Add AssertMapper (“import”) + Load bootstrap (SASS) and popper + Base twig template --- .gitignore | 6 ++- assets/app.js | 6 +++ assets/styles/_bootstrap.scss | 76 ++++++++++++++++++++++++++++++ assets/styles/_flahses.scss | 3 ++ assets/styles/app.scss | 2 + composer.json | 78 ++++++++++++++++--------------- config/bundles.php | 21 +++++---- config/packages/asset_mapper.yaml | 8 ++++ importmap.php | 25 ++++++++++ src/Controller/CoreController.php | 20 ++++++++ symfony.lock | 18 +++++++ templates/_flashes.html.twig | 12 +++++ templates/base.html.twig | 76 +++++++++++++++++++++++------- templates/core/main.html.twig | 7 +++ templates/html.html.twig | 21 +++++++++ templates/root.twig | 1 + 16 files changed, 316 insertions(+), 64 deletions(-) create mode 100644 assets/app.js create mode 100644 assets/styles/_bootstrap.scss create mode 100644 assets/styles/_flahses.scss create mode 100644 assets/styles/app.scss create mode 100644 config/packages/asset_mapper.yaml create mode 100644 importmap.php create mode 100644 src/Controller/CoreController.php create mode 100644 templates/_flashes.html.twig create mode 100644 templates/core/main.html.twig create mode 100644 templates/html.html.twig create mode 100644 templates/root.twig diff --git a/.gitignore b/.gitignore index d4c5472..e93e543 100644 --- a/.gitignore +++ b/.gitignore @@ -19,4 +19,8 @@ ###> Composer ### /composer.lock -###< Composer ### \ No newline at end of file +###< Composer ### +###> symfony/asset-mapper ### +/public/assets/ +/assets/vendor/ +###< symfony/asset-mapper ### diff --git a/assets/app.js b/assets/app.js new file mode 100644 index 0000000..a43f453 --- /dev/null +++ b/assets/app.js @@ -0,0 +1,6 @@ +//region CSS +import './styles/app.scss'; +//endregion +//region Bootstrap +import 'bootstrap'; +//endregion diff --git a/assets/styles/_bootstrap.scss b/assets/styles/_bootstrap.scss new file mode 100644 index 0000000..84f2379 --- /dev/null +++ b/assets/styles/_bootstrap.scss @@ -0,0 +1,76 @@ +//region Fonctions de base de Bootstrap +@import '../../vendor/twbs/bootstrap/scss/functions'; +//endregion +//region Color theme +//$primary : rgb(0, 0, 0); +//$secondary : rgb(102, 102, 102); + +$alert-padding-y : 0.25rem; +$alert-padding-x : 0.25rem; +$alert-margin-bottom : 0.5rem; +//endregion +//region Autres variables Bootstrap +$enable-rounded : false; +$nav-link-padding-y : 0; + +$box-shadow : 0px 3px 15px 0 rgba(0, 0, 0, .8); +//endregion +//region Les autres variables de Boostrap +@import '../../vendor/twbs/bootstrap/scss/variables'; +@import '../../vendor/twbs/bootstrap/scss/variables-dark'; +//endregion +//region Maps personnalisés + +//endregion +//region Reste de la configuration de Bootstrap +@import '../../vendor/twbs/bootstrap/scss/maps'; +@import '../../vendor/twbs/bootstrap/scss/mixins'; +@import '../../vendor/twbs/bootstrap/scss/utilities'; +//endregion +//region Layout & components de Bootstrap +@import '../../vendor/twbs/bootstrap/scss/root'; +@import '../../vendor/twbs/bootstrap/scss/reboot'; +@import '../../vendor/twbs/bootstrap/scss/type'; +@import '../../vendor/twbs/bootstrap/scss/images'; +@import '../../vendor/twbs/bootstrap/scss/containers'; +@import '../../vendor/twbs/bootstrap/scss/grid'; +@import '../../vendor/twbs/bootstrap/scss/tables'; +@import '../../vendor/twbs/bootstrap/scss/forms'; +@import '../../vendor/twbs/bootstrap/scss/buttons'; +@import '../../vendor/twbs/bootstrap/scss/transitions'; +@import '../../vendor/twbs/bootstrap/scss/dropdown'; +@import '../../vendor/twbs/bootstrap/scss/button-group'; +@import '../../vendor/twbs/bootstrap/scss/nav'; +@import '../../vendor/twbs/bootstrap/scss/navbar'; +@import '../../vendor/twbs/bootstrap/scss/card'; +@import '../../vendor/twbs/bootstrap/scss/accordion'; +@import '../../vendor/twbs/bootstrap/scss/breadcrumb'; +@import '../../vendor/twbs/bootstrap/scss/pagination'; +@import '../../vendor/twbs/bootstrap/scss/badge'; +@import '../../vendor/twbs/bootstrap/scss/alert'; +@import '../../vendor/twbs/bootstrap/scss/progress'; +@import '../../vendor/twbs/bootstrap/scss/list-group'; +@import '../../vendor/twbs/bootstrap/scss/close'; +@import '../../vendor/twbs/bootstrap/scss/toasts'; +@import '../../vendor/twbs/bootstrap/scss/modal'; +@import '../../vendor/twbs/bootstrap/scss/tooltip'; +@import '../../vendor/twbs/bootstrap/scss/popover'; +@import '../../vendor/twbs/bootstrap/scss/carousel'; +@import '../../vendor/twbs/bootstrap/scss/spinners'; +@import '../../vendor/twbs/bootstrap/scss/offcanvas'; +@import '../../vendor/twbs/bootstrap/scss/placeholders'; +//endregion +//region Helpers de Boostrap +@import '../../vendor/twbs/bootstrap/scss/helpers'; +//endregion +//region API de Bootstrap +@import '../../vendor/twbs/bootstrap/scss/utilities/api'; +//endregion +//region Classes complémentaires +.text-smallCaps { + font-variant : small-caps; +} +.text-overflow-ellipsis { + text-overflow : '…'; +} +//endregion \ No newline at end of file diff --git a/assets/styles/_flahses.scss b/assets/styles/_flahses.scss new file mode 100644 index 0000000..3325661 --- /dev/null +++ b/assets/styles/_flahses.scss @@ -0,0 +1,3 @@ +#flashes { + font-size : 0.75rem; +} \ No newline at end of file diff --git a/assets/styles/app.scss b/assets/styles/app.scss new file mode 100644 index 0000000..aad57e1 --- /dev/null +++ b/assets/styles/app.scss @@ -0,0 +1,2 @@ +@import 'bootstrap'; +@import 'flahses'; \ No newline at end of file diff --git a/composer.json b/composer.json index 26e3da2..1ddd1c1 100644 --- a/composer.json +++ b/composer.json @@ -4,44 +4,47 @@ "minimum-stability": "stable", "prefer-stable": true, "require": { - "php": ">=8.1", - "ext-ctype": "*", - "ext-iconv": "*", - "doctrine/annotations": "^2.0", - "doctrine/doctrine-bundle": "^2.9", + "php": ">=8.1", + "ext-ctype": "*", + "ext-iconv": "*", + "doctrine/annotations": "^2.0", + "doctrine/doctrine-bundle": "^2.9", "doctrine/doctrine-migrations-bundle": "^3.2", - "doctrine/orm": "^2.15", - "phpdocumentor/reflection-docblock": "^5.3", - "phpstan/phpdoc-parser": "^1.20", - "stof/doctrine-extensions-bundle": "^1.7", - "symfony/asset": "6.4.*", - "symfony/console": "6.4.*", - "symfony/doctrine-messenger": "6.4.*", - "symfony/dotenv": "6.4.*", + "doctrine/orm": "^2.15", + "phpdocumentor/reflection-docblock": "^5.3", + "phpstan/phpdoc-parser": "^1.20", + "stof/doctrine-extensions-bundle": "^1.7", + "symfony/asset": "6.4.*", + "symfony/asset-mapper": "6.4.*", + "symfony/console": "6.4.*", + "symfony/doctrine-messenger": "6.4.*", + "symfony/dotenv": "6.4.*", "symfony/expression-language": "6.4.*", - "symfony/flex": "^2", - "symfony/form": "6.4.*", - "symfony/framework-bundle": "6.4.*", - "symfony/http-client": "6.4.*", - "symfony/intl": "6.4.*", - "symfony/mailer": "6.4.*", - "symfony/mime": "6.4.*", - "symfony/monolog-bundle": "^3.0", - "symfony/notifier": "6.4.*", - "symfony/process": "6.4.*", - "symfony/property-access": "6.4.*", - "symfony/property-info": "6.4.*", - "symfony/runtime": "6.4.*", - "symfony/security-bundle": "6.4.*", - "symfony/serializer": "6.4.*", - "symfony/string": "6.4.*", - "symfony/translation": "6.4.*", - "symfony/twig-bundle": "6.4.*", - "symfony/validator": "6.4.*", - "symfony/web-link": "6.4.*", - "symfony/yaml": "6.4.*", - "twig/extra-bundle": "^3.0", - "twig/twig": "^3.0" + "symfony/flex": "^2", + "symfony/form": "6.4.*", + "symfony/framework-bundle": "6.4.*", + "symfony/http-client": "6.4.*", + "symfony/intl": "6.4.*", + "symfony/mailer": "6.4.*", + "symfony/mime": "6.4.*", + "symfony/monolog-bundle": "^3.0", + "symfony/notifier": "6.4.*", + "symfony/process": "6.4.*", + "symfony/property-access": "6.4.*", + "symfony/property-info": "6.4.*", + "symfony/runtime": "6.4.*", + "symfony/security-bundle": "6.4.*", + "symfony/serializer": "6.4.*", + "symfony/string": "6.4.*", + "symfony/translation": "6.4.*", + "symfony/twig-bundle": "6.4.*", + "symfony/validator": "6.4.*", + "symfony/web-link": "6.4.*", + "symfony/yaml": "6.4.*", + "symfonycasts/sass-bundle": "^0.6.0", + "twbs/bootstrap": "^5.3", + "twig/extra-bundle": "^3.0", + "twig/twig": "^3.0" }, "config": { "allow-plugins": { @@ -73,7 +76,8 @@ "scripts": { "auto-scripts": { "cache:clear": "symfony-cmd", - "assets:install %PUBLIC_DIR%": "symfony-cmd" + "assets:install %PUBLIC_DIR%": "symfony-cmd", + "importmap:install": "symfony-cmd" }, "post-install-cmd": [ "@auto-scripts" diff --git a/config/bundles.php b/config/bundles.php index e18835f..7d94d18 100644 --- a/config/bundles.php +++ b/config/bundles.php @@ -1,15 +1,16 @@ ['all' => true], - Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true], - Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true], - Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true], - Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true], - Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true], - Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true], - Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true], - Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true], - Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true], + Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true], + Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true], + Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true], + Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true], + Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true], + Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true], + Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true], + Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true], + Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true], + Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true], Stof\DoctrineExtensionsBundle\StofDoctrineExtensionsBundle::class => ['all' => true], + Symfonycasts\SassBundle\SymfonycastsSassBundle::class => ['all' => true], ]; diff --git a/config/packages/asset_mapper.yaml b/config/packages/asset_mapper.yaml new file mode 100644 index 0000000..b88b490 --- /dev/null +++ b/config/packages/asset_mapper.yaml @@ -0,0 +1,8 @@ +framework: + asset_mapper: + # The paths to make available to the asset mapper. + paths: + - assets/ + excluded_patterns: + - '*/assets/styles/_*.scss' + - '*/assets/styles/**/_*.scss' diff --git a/importmap.php b/importmap.php new file mode 100644 index 0000000..766eee7 --- /dev/null +++ b/importmap.php @@ -0,0 +1,25 @@ + [ + 'path' => './assets/app.js', + 'entrypoint' => true, + ], + 'bootstrap' => [ + 'version' => '5.3.3', + ], + '@popperjs/core' => [ + 'version' => '2.11.8', + ], +]; diff --git a/src/Controller/CoreController.php b/src/Controller/CoreController.php new file mode 100644 index 0000000..004a41f --- /dev/null +++ b/src/Controller/CoreController.php @@ -0,0 +1,20 @@ +addFlash('danger', 'This is a dangerous looking message'); + $this->addFlash('success', 'All is fine !'); + + return $this->render('core/main.html.twig'); + } +} diff --git a/symfony.lock b/symfony.lock index a29fe66..c94fd1c 100644 --- a/symfony.lock +++ b/symfony.lock @@ -61,6 +61,21 @@ "./config/packages/stof_doctrine_extensions.yaml" ] }, + "symfony/asset-mapper": { + "version": "6.4", + "recipe": { + "repo": "github.com/symfony/recipes", + "branch": "main", + "version": "6.4", + "ref": "6c28c471640cc2c6e60812ebcb961c526ef8997f" + }, + "files": [ + "./assets/app.js", + "./assets/styles/app.css", + "./config/packages/asset_mapper.yaml", + "./importmap.php" + ] + }, "symfony/console": { "version": "6.2", "recipe": { @@ -276,6 +291,9 @@ "./config/packages/messenger.yaml" ] }, + "symfonycasts/sass-bundle": { + "version": "v0.6.0" + }, "twig/extra-bundle": { "version": "v3.6.0" } diff --git a/templates/_flashes.html.twig b/templates/_flashes.html.twig new file mode 100644 index 0000000..0bfa03b --- /dev/null +++ b/templates/_flashes.html.twig @@ -0,0 +1,12 @@ +{% block flashTag %} +
+ {% endblock %} + {% for flashType, flashMessages in app.flashes %} + {% for flashMessage in flashMessages %} +
+ {{ flashMessage }} + +
+ {% endfor %} + {% endfor %} +
\ No newline at end of file diff --git a/templates/base.html.twig b/templates/base.html.twig index d4f83f7..e48782a 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -1,19 +1,63 @@ - - - - - {% block title %}Welcome!{% endblock %} - - {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #} - {% block stylesheets %} - {{ encore_entry_link_tags('app') }} +{% extends "/html.html.twig" %} + +{% block headContent %} + {% block headContentMeta %} + + + {% endblock %} + + {% block title %}{% endblock %} + + {% block CSS %}{% endblock %} + + {% block JS_head %}{% endblock %} +{% endblock %} + +{% block bodyTag %} + + {% endblock %} + {% block bodyContent %} + {% block headerTag %} +
+ {% endblock %} + {% block headerContent %}{% endblock %} +
+ + {% block divBodyTag %} +
{% endblock %} + {% block asideLeft %}{% endblock %} + + {% block centerDivBodyTag %} +
+ {% endblock %} + + {% block sectionTop %}{% endblock %} + + {% include '/_flashes.html.twig' %} + + {% block sectionBefore %}{% endblock %} + {% block mainTag %} +
+ {% endblock %} + {% block mainContent %}{% endblock %} +
+ {% block sectionAfter %}{% endblock %} +
+ {% block asideRight %}{% endblock %} +
+ + {% block footerTag %} + + +
+ {% block bodyHidden %}{% endblock %} +
- {% block javascripts %} - {{ encore_entry_script_tags('app') }} + {% block JS %} + {% block importmap %}{{ importmap('app') }}{% endblock %} {% endblock %} - - - {% block body %}{% endblock %} - - + {% endblock %} diff --git a/templates/core/main.html.twig b/templates/core/main.html.twig new file mode 100644 index 0000000..b4b3340 --- /dev/null +++ b/templates/core/main.html.twig @@ -0,0 +1,7 @@ +{% extends '/base.html.twig' %} + +{% block title %}Home{% endblock %} + +{% block mainContent %} + Home +{% endblock %} diff --git a/templates/html.html.twig b/templates/html.html.twig new file mode 100644 index 0000000..7e88923 --- /dev/null +++ b/templates/html.html.twig @@ -0,0 +1,21 @@ +{% extends "/root.twig" %} + +{% block pageContent %} + + + {% block htmlTag %} + + {% endblock %} +{% block headTag %} + + +{% endblock %} + {% block headContent %}{% endblock %} + +{% block bodyTag %} + +{% endblock %} + {% block bodyContent %}{% endblock %} + + +{% endblock %} diff --git a/templates/root.twig b/templates/root.twig new file mode 100644 index 0000000..a8937c2 --- /dev/null +++ b/templates/root.twig @@ -0,0 +1 @@ +{% block pageContent %}{% endblock %} \ No newline at end of file