feat: sidemenu automatique sur les layouts/page #19

Co-authored-by: pprevautel <[email protected]>

_includes/components/sidemenu.njk

@@ -0,0 +1,34 @@
+{% set items = params.items %}
+{% macro sidemenuList(subItems) %}
+    {% for item in subItems %}
+        <li class="fr-sidemenu__item">
+            {% if item.children.length > 0 %}
+                <button class="fr-sidemenu__btn"
+                        aria-expanded="false"
+                        aria-controls="{{ item.id }}">{{ item.name }}</button>
+                <div class="fr-collapse" id="{{ item.id }}">
+                    <ul class="fr-sidemenu__list">
+                        {{ sidemenuList(item.children) }}
+                    </ul>
+                </div>
+            {% else %}
+                <a class="fr-sidemenu__link" href="#{{ item.id }}" target="_self">{{ item.name }}</a>
+            {% endif %}
+        </li>
+    {% endfor %}
+{% endmacro %}
+<nav class="fr-sidemenu fr-sidemenu--sticky-full-height"
+     role="navigation"
+     aria-labelledby="fr-sidemenu-title">
+    <div class="fr-sidemenu__inner">
+        <button class="fr-sidemenu__btn"
+                aria-controls="fr-sidemenu-wrapper"
+                aria-expanded="false">Sommaire</button>
+        <div class="fr-collapse" id="fr-sidemenu-wrapper">
+            <div class="fr-sidemenu__title" id="fr-sidemenu-title">Sommaire</div>
+            <ul class="fr-sidemenu__list">
+                {{ sidemenuList(items) }}
+            </ul>
+        </div>
+    </div>
+</nav>

_includes/layouts/page.njk

@@ -1,7 +1,9 @@
 ---
 layout: layouts/base.njk
+sidemenu: false
 ---
 
+{% from "components/component.njk" import component with context %}
 <div class="fr-mb-6w">
     <div class="fr-py-6w fr-background-alt--blue-cumulus">
         <div class="fr-container">
@@ -18,7 +20,15 @@ layout: layouts/base.njk
     </div>
     <div class="fr-container fr-mt-6w" data-pagefind-body>
         <div class="fr-grid-row">
-            <div class="fr-col-12">{{ content | safe }}</div>
+            {% if sidemenu %}
+                {% set sideMenuItems = content | getSideMenuItems %}
+                <div class="fr-col-12 fr-col-md-4">
+                    {{ component("sidemenu", {
+                                        items: sideMenuItems
+                                        }) }}
+                </div>
+            {% endif %}
+            <div class="fr-col-12 {% if sidemenu %}fr-col-md-8 fr-py-12v{% endif %}">{{ content | safe }}</div>
         </div>
     </div>
 </div>

content/fr/tutoriels/alimentation-diffusion-simple/index.md

@@ -3,6 +3,7 @@ title: Alimentation et diffusion simple
 layout: layouts/page.njk
 mermaid: true
 showBreadcrumb: true
+sidemenu: true
 ---
 
 Le but de ce tutoriel va être de diffuser des données vecteur en WFS et WMS. Les concepts de l'entrepôt manipulés lors de chaque étape sont détaillés dans les notes, avec le terme français et celui technique entre parenthèse.
@@ -648,17 +649,13 @@ POST /datastores/{datastore}/configurations
                         "native_name": "ecoregions",
                         "public_name": "regions_ecologiques",
                         "title": "Régions écologiques",
-                        "keywords": [
-                            "Tutoriel", "Données mondiales"
-                        ],
+                        "keywords": ["Tutoriel", "Données mondiales"],
                         "abstract": "Grandes régions naturelles mondiales"
                     },
                     {
                         "native_name": "pays",
                         "title": "Pays du monde",
-                        "keywords": [
-                            "Tutoriel", "Données mondiales"
-                        ],
+                        "keywords": ["Tutoriel", "Données mondiales"],
                         "abstract": "Pays du monde"
                     }
                 ],
@@ -882,7 +879,7 @@ POST /datastores/{datastore}/configurations/{configuration wfs}/offerings
 
 <br/>
 
-On peut vérifier la présence de nos couches `pays_ecoregions:regions_ecologiques` et `pays_ecoregions:pays` dans le *getCapabilities* du service
+On peut vérifier la présence de nos couches `pays_ecoregions:regions_ecologiques` et `pays_ecoregions:pays` dans le _getCapabilities_ du service
 
 On peut également récupérer nos données dans un SIG comme QGis. Pour les régions écologiques, le service se limite à 1000 objets, ils ne seront donc pas tous téléchargés en une seule fois.
 
@@ -898,9 +895,9 @@ Génération d'un SLD
 Après l'export des styles depuis QGis dans son format, il est nécessaire d'utiliser l'outil **GeoStyler** en ligne de commande pour les convertir :
 
 ```sh
-$  geostyler-cli -o ecoregions.sld -t sld -s qgis ecoregions.qml 
+$  geostyler-cli -o ecoregions.sld -t sld -s qgis ecoregions.qml
 ✔ File "ecoregions.qml" translated successfully. Output written to ecoregions.sld
-$  geostyler-cli -o pays.sld -t sld -s qgis pays.qml 
+$  geostyler-cli -o pays.sld -t sld -s qgis pays.qml
 ✔ File "pays.qml" translated successfully. Output written to pays.sld
 ```
 
@@ -913,6 +910,7 @@ Chaque outil d'export peut entraîner des comportements différents. Au final, l
 <br/>
 
 {% from "components/component.njk" import component with context %}
+
 <div>
 {{ component("download", {
     title: "ecoregions.sld",
@@ -922,6 +920,7 @@ Chaque outil d'export peut entraîner des comportements différents. Au final, l
 </div>
 
 {% from "components/component.njk" import component with context %}
+
 <div>
 {{ component("download", {
     title: "pays.sld",
@@ -935,6 +934,7 @@ Chaque outil d'export peut entraîner des comportements différents. Au final, l
 Ces fichiers FTL permettent de mettre en forme la réponse HTML lors des appels au `GetFeatureInfo`.
 
 {% from "components/component.njk" import component with context %}
+
 <div>
 {{ component("download", {
     title: "ecoregions.ftl",
@@ -955,6 +955,7 @@ Contenu de ecoregions.ftl
 ```
 
 {% from "components/component.njk" import component with context %}
+
 <div>
 {{ component("download", {
     title: "pays.ftl",
@@ -987,9 +988,9 @@ POST /datastores/{datastore}/statics
 
 **Corps de la requête Multipart**
 
- * file = <ecoregions.sld>
- * type = "GEOSERVER-STYLE"
- * name = "Style pour les écorégions"
+-   file = <ecoregions.sld>
+-   type = "GEOSERVER-STYLE"
+-   name = "Style pour les écorégions"
 
 **Corps de réponse JSON**
 
@@ -999,9 +1000,7 @@ POST /datastores/{datastore}/statics
     "type": "GEOSERVER-STYLE",
     "_id": "{sld ecoregions}",
     "type_infos": {
-        "used_attributes": [
-            "biome_name"
-        ]
+        "used_attributes": ["biome_name"]
     }
 }
 ```

content/fr/tutoriels/controle-des-acces/diffusion/index.md

@@ -5,6 +5,7 @@ date: git Last Modified
 tags:
     - Contrôle des accès
     - Diffusion
+sidemenu: true
 ---
 
 En tant que consommateur de données, c'est également via l'API que l'on va pouvoir configuer ses clés d'accès. Cela n'implique pas d'avoir accès à une entrepôt, ni même d'être le membre d'une communauté.

content/fr/tutoriels/tutoriels.11tydata.js

@@ -1,4 +1,4 @@
 module.exports = {
     tags: ["Géoplateforme", "tutoriel"],
-    layout: "layouts/post.njk",
+    layout: "layouts/page.njk",
 };

eleventy.config.js

@@ -17,6 +17,7 @@ const pluginCalendar = require("@codegouvfr/eleventy-plugin-calendar");
 const customMarkdownContainers = require("./markdown-custom-containers");
 
 const { translations } = require("./_data/i18n");
+const { getSideMenuItems } = require("./utils.js");
 
 module.exports = function (eleventyConfig) {
     // Copy the contents of the `public` folder to the output folder
@@ -146,6 +147,14 @@ module.exports = function (eleventyConfig) {
         return collection.find((post) => post.fileSlug === slug);
     });
 
+    eleventyConfig.addFilter("getSideMenuItems", getSideMenuItems);
+
+    eleventyConfig.addPairedShortcode("testpaired", async function (content = "", param1) {
+        console.log(content);
+        console.log(param1);
+        return `<div>Hello ${param1}</div>`;
+    });
+
     // Customize Markdown library settings:
     eleventyConfig.amendLibrary("md", (mdLib) => {
         mdLib.use(markdownItAnchor, {