init

.gitignore

@@ -23,3 +23,10 @@
 /public/assets/
 /assets/vendor/
 ###< symfony/asset-mapper ###
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

assets/app.js

@@ -4,6 +4,6 @@
  * This file will be included onto the page via the importmap() Twig function,
  * which should already be in your base.html.twig.
  */
-import './styles/app.css';
+import './styles/app.scss';
 
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
+import "@gouvfr/dsfr/dist/dsfr.module"

assets/dsfrNoModule.js

@@ -0,0 +1 @@
+import "@gouvfr/dsfr/dist/dsfr.nomodule"

assets/styles/app.css

@@ -1,3 +0,0 @@
-body {
-    background-color: skyblue;
-}

assets/styles/app.scss

@@ -0,0 +1,4 @@
+@import "dsfr/variable";
+
+@import "@gouvfr/dsfr/dist/dsfr.css";
+@import "@gouvfr/dsfr/dist/utility/utility.css";

composer.json

@@ -32,6 +32,7 @@
         "symfony/translation": "7.0.*",
         "symfony/twig-bundle": "7.0.*",
         "symfony/web-link": "7.0.*",
+        "symfony/webpack-encore-bundle": "^2.1",
         "symfony/yaml": "7.0.*",
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/twig": "^2.12|^3.0"

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "3dcb4d863946aaba560b1efb59ec344f",
+    "content-hash": "319c6b6a7fa6a144e6cdb15e5249b7f9",
     "packages": [
         {
             "name": "composer/semver",
@@ -5152,6 +5152,77 @@
             ],
             "time": "2023-07-25T09:50:29+00:00"
         },
+        {
+            "name": "symfony/webpack-encore-bundle",
+            "version": "v2.1.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/webpack-encore-bundle.git",
+                "reference": "75cb918df3f65e28cf0d4bc03042bc45ccb19dd0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/webpack-encore-bundle/zipball/75cb918df3f65e28cf0d4bc03042bc45ccb19dd0",
+                "reference": "75cb918df3f65e28cf0d4bc03042bc45ccb19dd0",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1.0",
+                "symfony/asset": "^5.4 || ^6.2 || ^7.0",
+                "symfony/config": "^5.4 || ^6.2 || ^7.0",
+                "symfony/dependency-injection": "^5.4 || ^6.2 || ^7.0",
+                "symfony/http-kernel": "^5.4 || ^6.2 || ^7.0",
+                "symfony/service-contracts": "^1.1.9 || ^2.1.3 || ^3.0"
+            },
+            "require-dev": {
+                "symfony/framework-bundle": "^5.4 || ^6.2 || ^7.0",
+                "symfony/phpunit-bridge": "^5.4 || ^6.2 || ^7.0",
+                "symfony/twig-bundle": "^5.4 || ^6.2 || ^7.0",
+                "symfony/web-link": "^5.4 || ^6.2 || ^7.0"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "name": "symfony/webpack-encore",
+                    "url": "https://github.com/symfony/webpack-encore"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\WebpackEncoreBundle\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Integration with your Symfony app & Webpack Encore!",
+            "support": {
+                "issues": "https://github.com/symfony/webpack-encore-bundle/issues",
+                "source": "https://github.com/symfony/webpack-encore-bundle/tree/v2.1.1"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2023-10-22T18:53:08+00:00"
+        },
         {
             "name": "symfony/yaml",
             "version": "v7.0.0",

config/bundles.php

@@ -10,4 +10,5 @@ return [
     Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
     Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
     Knp\Bundle\MenuBundle\KnpMenuBundle::class => ['all' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
 ];

config/packages/knp_menu.yaml

@@ -0,0 +1,10 @@
+# config/packages/knp_menu.yaml
+knp_menu:
+  # use "twig: false" to disable the Twig extension and the TwigRenderer
+  twig:
+    template: menu/dfsr.html.twig
+  # if true, enables the helper for PHP templates
+  # support for templating is deprecated, it will be removed in next major version
+  templating: false
+  # the renderer to use, list is also available by default
+  default_renderer: twig

config/packages/webpack_encore.yaml

@@ -0,0 +1,45 @@
+webpack_encore:
+    # The path where Encore is building the assets - i.e. Encore.setOutputPath()
+    output_path: '%kernel.project_dir%/public/build'
+    # If multiple builds are defined (as shown below), you can disable the default build:
+    # output_path: false
+
+    # Set attributes that will be rendered on all script and link tags
+    script_attributes:
+        defer: true
+        # Uncomment (also under link_attributes) if using Turbo Drive
+        # https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
+        # 'data-turbo-track': reload
+    # link_attributes:
+        # Uncomment if using Turbo Drive
+        # 'data-turbo-track': reload
+
+    # If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
+    # crossorigin: 'anonymous'
+
+    # Preload all rendered script and link tags automatically via the HTTP/2 Link header
+    # preload: true
+
+    # Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
+    # strict_mode: false
+
+    # If you have multiple builds:
+    # builds:
+        # frontend: '%kernel.project_dir%/public/frontend/build'
+
+        # pass the build name as the 3rd argument to the Twig functions
+        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}
+
+framework:
+    assets:
+        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
+
+#when@prod:
+#    webpack_encore:
+#        # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
+#        # Available in version 1.2
+#        cache: true
+
+#when@test:
+#    webpack_encore:
+#        strict_mode: false

config/services.yaml

@@ -22,3 +22,12 @@ services:
 
     # add more service definitions when explicit configuration is needed
     # please note that last definitions always *replace* previous ones
+
+
+    app.menu_builder:
+        class: App\Menu\MenuBuilder
+        arguments: ["@knp_menu.factory"]
+        tags:
+            - { name: knp_menu.menu_builder, method: createMainMenu, alias: main } # The alias is what is used to retrieve the menu
+
+    # ...

package.json

@@ -0,0 +1,25 @@
+{
+    "devDependencies": {
+        "@babel/core": "^7.17.0",
+        "@babel/preset-env": "^7.16.0",
+        "@symfony/webpack-encore": "^4.0.0",
+        "core-js": "^3.23.0",
+        "regenerator-runtime": "^0.13.9",
+        "sass": "^1.70.0",
+        "sass-loader": "^14.0.0",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^4.10.0",
+        "webpack-notifier": "^1.15.0"
+    },
+    "license": "UNLICENSED",
+    "private": true,
+    "scripts": {
+        "dev-server": "encore dev-server",
+        "dev": "encore dev",
+        "watch": "encore dev --watch",
+        "build": "encore production --progress"
+    },
+    "dependencies": {
+        "@gouvfr/dsfr": "^1.11.0"
+    }
+}

src/Controller/HomeController.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class HomeController extends AbstractController
+{
+    #[Route('/', name: 'app_home')]
+    public function index(): Response
+    {
+        return $this->render('home/index.html.twig', [
+            'controller_name' => 'HomeController',
+        ]);
+    }
+}

src/Menu/MenuBuilder.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Menu;
+
+use Knp\Menu\FactoryInterface;
+use Knp\Menu\ItemInterface;
+
+final class MenuBuilder
+{
+    public function __construct(private FactoryInterface $factory)
+    {
+
+    }
+
+
+    public function createMainMenu(array $options): ItemInterface
+    {
+        $menu = $this->factory->createItem('root');
+        $menu->setAttribute('id', 'id-144');
+        $menu->setAttribute('aria-label', 'Menu Main');
+
+        $menu->addChild('app_home', ['route' => 'app_home']);
+        $menu->addChild('app_direct1', ['route' => 'app_home']);
+        $menu->addChild('app_direct2', ['route' => 'app_home']);
+
+        return $menu;
+    }
+
+
+}

symfony.lock

@@ -211,6 +211,22 @@
             "config/packages/messenger.yaml"
         ]
     },
+    "symfony/webpack-encore-bundle": {
+        "version": "2.1",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.0",
+            "ref": "082d754b3bd54b3fc669f278f1eea955cfd23cf5"
+        },
+        "files": [
+            "assets/app.js",
+            "assets/styles/app.css",
+            "config/packages/webpack_encore.yaml",
+            "package.json",
+            "webpack.config.js"
+        ]
+    },
     "twig/extra-bundle": {
         "version": "v3.8.0"
     }

templates/base.html.twig

@@ -1,17 +1,41 @@
-<!DOCTYPE html>
+<!doctype html>
-<html>
+<html lang="fr" data-fr-scheme="system">
-    <head>
+<head>
-        <meta charset="UTF-8">
+    <meta charset="utf-8">
-        <title>{% block title %}Welcome!{% endblock %}</title>
+    <meta name="format-detection" content="telephone=no">
-        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        {% block stylesheets %}
+{#    <link rel="stylesheet" href="dsfr/dsfr.min.css">#}
-        {% endblock %}
+    {% block stylesheets %}
+        {{ encore_entry_link_tags('app') }}
+    {% endblock %}
+    <meta name="theme-color" content="#000091"><!-- Défini la couleur de thème du navigateur (Safari/Android) -->
+    <link rel="apple-touch-icon" href="favicon/apple-touch-icon.png"><!-- 180×180 -->
+    <link rel="icon" href="favicon/favicon.svg" type="image/svg+xml">
+    <link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon"><!-- 32×32 -->
+    <link rel="manifest" href="favicon/manifest.webmanifest" crossorigin="use-credentials">
+    <!-- Modifier les chemins relatifs des favicons en fonction de la structure du projet -->
+    <!-- Dans le fichier manifest.webmanifest aussi, modifier les chemins vers les images -->
+    <title>{% block title %}Hello HomeController!{% endblock %}</title></head>
+{#<body>    <!--      code de la page     -->#}
+<!-- Script en version es6 module et nomodule pour les navigateurs le ne supportant pas -->
+{#<script type="module" src="dsfr/dsfr.module.min.js"></script>#}
+{#<script type="text/javascript" nomodule src="dsfr/dsfr.nomodule.min.js"></script>#}
+
+<body>
+{% block javascripts %}
+    {{ encore_entry_script_tags('app') }}
+    {{ encore_entry_script_tags('dsfrNoModule', attributes={nomodule: true}) }}
+{% endblock %}
+
+{% block header %}
+    <header role="banner">
+        <nav class="fr-nav" role="navigation" aria-label="Menu Principal">
+        {{ knp_menu_render('main') }}
+        </nav>
+    </header>
+{% endblock %}
+{% block body %}{% endblock %}
+{% block footer %}{% endblock %}
+</body>
 
-        {% block javascripts %}
-{% block importmap %}{{ importmap('app') }}{% endblock %}
-        {% endblock %}
-    </head>
-    <body>
-        {% block body %}{% endblock %}
-    </body>
 </html>

templates/home/index.html.twig

@@ -0,0 +1,20 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Hello HomeController!{% endblock %}
+
+{% block body %}
+<style>
+    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
+    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
+</style>
+
+<div class="example-wrapper">
+    <h1>Hello {{ controller_name }}! ✅</h1>
+
+    This friendly message is coming from:
+    <ul>
+        <li>Your controller at <code><a href="{{ '/home/jerome/Projects/atos/dsfr-menu/src/Controller/HomeController.php'|file_link(0) }}">src/Controller/HomeController.php</a></code></li>
+        <li>Your template at <code><a href="{{ '/home/jerome/Projects/atos/dsfr-menu/templates/home/index.html.twig'|file_link(0) }}">templates/home/index.html.twig</a></code></li>
+    </ul>
+</div>
+{% endblock %}

templates/menu/dfsr.html.twig

@@ -0,0 +1,111 @@
+{% extends 'knp_menu.html.twig' %}
+
+{#{% macro attributes(attributes) %}#}
+{#    {% for name, value in attributes %}#}
+{#        {%- if value is not none and value is not same as(false) -%}#}
+{#            {{- ' %s="%s"'|format(name, value is same as(true) ? name|e : value|e)|raw -}}#}
+{#        {%- endif -%}#}
+{#    {%- endfor -%}#}
+{#{% endmacro %}#}
+
+{#{% block compressed_root %}#}
+{#    {% apply spaceless %}#}
+{#    {{ block('root') }}#}
+{#    {% endapply %}#}
+{#{% endblock %}#}
+
+{% block root %}
+    {% set listAttributes = item.childrenAttributes %}
+    {% set listAttributes = listAttributes|merge({'class': 'fr-nav__list'}) %}
+
+    {% set attributes = item.attributes %}
+    {% set id = attributes.id|default(null)%}
+    {% set ariaLabel = attribute(attributes, 'aria-label') | default("Menu principal")%}
+    <nav class="fr-nav" id="{{ id }}" role="navigation" aria-label="{{ ariaLabel }}">
+        {{ block('list') -}}
+    </nav>
+{% endblock %}
+
+{#{% block list %}#}
+{#    {% if item.hasChildren and options.depth is not same as(0) and item.displayChildren %}#}
+{#        {% import _self as knp_menu %}#}
+{#        <ul{{ knp_menu.attributes(listAttributes) }}>#}
+{#            {{ block('children') }}#}
+{#        </ul>#}
+{#    {% endif %}#}
+{#{% endblock %}#}
+
+{#{% block children %}#}
+{#    #}{# save current variables #}
+{#    {% set currentOptions = options %}#}
+{#    {% set currentItem = item %}#}
+{#    #}{# update the depth for children #}
+{#    {% if options.depth is not none %}#}
+{#        {% set options = options|merge({'depth': currentOptions.depth - 1}) %}#}
+{#    {% endif %}#}
+{#    #}{# update the matchingDepth for children #}
+{#    {% if options.matchingDepth is not none and options.matchingDepth > 0 %}#}
+{#        {% set options = options|merge({'matchingDepth': currentOptions.matchingDepth - 1}) %}#}
+{#    {% endif %}#}
+{#    {% for item in currentItem.children %}#}
+{#        {{ block('item') }}#}
+{#    {% endfor %}#}
+{#    #}{# restore current variables #}
+{#    {% set item = currentItem %}#}
+{#    {% set options = currentOptions %}#}
+{#{% endblock %}#}
+
+{% block item %}
+    {% if item.displayed %}
+        {# building the class of the item #}
+        {%- set classes = item.attribute('class') is not empty ? [item.attribute('class')|merge(['fr-nav__item'])] : ['fr-nav__item'] %}
+        {%- if matcher.isCurrent(item) %}
+            {%- set classes = classes|merge([options.currentClass]) %}
+        {%- elseif matcher.isAncestor(item, options.matchingDepth) %}
+            {%- set classes = classes|merge([options.ancestorClass]) %}
+        {%- endif %}
+        {%- if item.actsLikeFirst %}
+            {%- set classes = classes|merge([options.firstClass]) %}
+        {%- endif %}
+        {%- if item.actsLikeLast %}
+            {%- set classes = classes|merge([options.lastClass]) %}
+        {%- endif %}
+
+        {# Mark item as "leaf" (no children) or as "branch" (has children that are displayed) #}
+        {% if item.hasChildren and options.depth is not same as(0) %}
+            {% if options.branch_class is not empty and item.displayChildren %}
+                {%- set classes = classes|merge([options.branch_class]) %}
+            {% endif %}
+        {% elseif options.leaf_class is not empty %}
+            {%- set classes = classes|merge([options.leaf_class]) %}
+        {%- endif %}
+
+        {%- set attributes = item.attributes %}
+        {%- if classes is not empty %}
+            {%- set attributes = attributes|merge({'class': classes|join(' ')}) %}
+        {%- endif %}
+        {# displaying the item #}
+        {% import _self as knp_menu %}
+        <li{{ knp_menu.attributes(attributes) }}>
+            {%- if item.uri is not empty and (not matcher.isCurrent(item) or options.currentAsLink) %}
+                {{ block('linkElement') }}
+            {%- else %}
+                {{ block('spanElement') }}
+            {%- endif %}
+            {# render the list of children#}
+            {%- set childrenClasses = item.childrenAttribute('class') is not empty ? [item.childrenAttribute('class')] : [] %}
+            {%- set childrenClasses = childrenClasses|merge(['menu_level_' ~ item.level]) %}
+            {%- set listAttributes = item.childrenAttributes|merge({'class': childrenClasses|join(' ') }) %}
+            {{ block('list') }}
+        </li>
+    {% endif %}
+{% endblock %}
+
+{% block linkElement %}
+    {%- set attributes = item.linkAttributes %}
+    {% set attributes = attributes|merge({'class': 'fr-nav__link'}) %}
+    {% import _self as knp_menu %}<a href="{{ item.uri }}"{{ knp_menu.attributes(attributes) }}>{{ block('label') }}</a>{% endblock %}
+
+{% block spanElement %}{% import _self as knp_menu %}<span{{ knp_menu.attributes(item.labelAttributes) }}>{{ block('label') }}</span>{% endblock %}
+
+{% block label %}{% if options.allow_safe_labels and item.getExtra('safe_label', false) %}{{ item.label|raw }}{% else %}{{ item.label }}{% endif %}{% endblock %}

webpack.config.js

@@ -0,0 +1,78 @@
+const Encore = require('@symfony/webpack-encore');
+const path = require('path');
+// Manually configure the runtime environment if not already configured yet by the "encore" command.
+// It's useful when you use tools that rely on webpack.config.js file.
+if (!Encore.isRuntimeEnvironmentConfigured()) {
+    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
+}
+
+Encore
+    // directory where compiled assets will be stored
+    .setOutputPath('public/build/')
+    // public path used by the web server to access the output path
+    .setPublicPath('/build')
+    // only needed for CDN's or subdirectory deploy
+    //.setManifestKeyPrefix('build/')
+
+    /*
+     * ENTRY CONFIG
+     *
+     * Each entry will result in one JavaScript file (e.g. app.js)
+     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
+     */
+    .addEntry('app', './assets/app.js')
+    .addEntry('dsfrNoModule', './assets/dsfrNoModule.js')
+
+    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
+    .splitEntryChunks()
+
+    // will require an extra script tag for runtime.js
+    // but, you probably want this, unless you're building a single-page app
+    .enableSingleRuntimeChunk()
+
+    /*
+     * FEATURE CONFIG
+     *
+     * Enable & configure other features below. For a full
+     * list of features, see:
+     * https://symfony.com/doc/current/frontend.html#adding-more-features
+     */
+    .cleanupOutputBeforeBuild()
+    .enableBuildNotifications()
+    .enableSourceMaps(!Encore.isProduction())
+    // enables hashed filenames (e.g. app.abc123.css)
+    .enableVersioning(Encore.isProduction())
+
+    // configure Babel
+    // .configureBabel((config) => {
+    //     config.plugins.push('@babel/a-babel-plugin');
+    // })
+
+    // enables and configure @babel/preset-env polyfills
+    .configureBabelPresetEnv((config) => {
+        config.useBuiltIns = 'usage';
+        config.corejs = '3.23';
+    })
+
+    // enables Sass/SCSS support
+    .enableSassLoader()
+
+    .addAliases({
+        'Δ': path.resolve('./node_modules/@gouvfr/dsfr/dist')
+    })
+
+    // uncomment if you use TypeScript
+    //.enableTypeScriptLoader()
+
+    // uncomment if you use React
+    //.enableReactPreset()
+
+    // uncomment to get integrity="..." attributes on your script & link tags
+    // requires WebpackEncoreBundle 1.4 or higher
+    //.enableIntegrityHashes(Encore.isProduction())
+
+    // uncomment if you're having problems with a jQuery plugin
+    //.autoProvidejQuery()
+;
+
+module.exports = Encore.getWebpackConfig();