Refonte de la documentation partenaire

_data/i18n/fr/index.js

@@ -30,7 +30,7 @@ module.exports = {
     personal_data: "Données personnelles",
     pick_theme: "Choisissez un thème pour personnaliser l’apparence du site.",
     previous_page: "Page précédente",
-    published_on: "Dernière modification le",
+    published_on: '<span class="fr-icon-calendar-line fr-icon--sm" aria-hidden="true"></span> Modifié le',
     read_also: "À lire aussi",
     results: "résultats",
     search: "Rechercher",

_includes/components/card.njk

@@ -1,7 +1,7 @@
 {% if not card %}
     {% set card = params %}
 {% endif %}
-<div class="fr-card {% if not card.externalUrl %} fr-enlarge-link {% endif %} {% if card.small %} fr-card--sm {% endif %} {{ card.addClass }}">
+<div class="fr-card {% if not card.externalUrl %} fr-enlarge-link {% endif %} {% if card.small %} fr-card--sm {% endif %} {% if card.horizontal %} fr-card--horizontal {% endif %} {{ card.addClass }}">
     <div class="fr-card__body">
         <div class="fr-card__content">
             {% if card.url is string %}
@@ -18,7 +18,7 @@
             </h3>
             <p class="fr-card__desc">{{ card.description }}</p>
             <div class="fr-card__start">
-                {% if card.tags %}
+                {% if card.tags and (card.show_tag is not defined or card.show_tag) %}
                     {% set tags = card.tags %}
                     {% include "components/taggroup-disabled.njk" %}
                 {% endif %}
@@ -64,7 +64,7 @@
                     <div class="fr-card__img">{% imageSync card.image.path, card.image.alt %}</div>
                 {% elif card.image.src %}
                     <div class="fr-card__img">
-                        <img class="fr-responsive-img {% if card.addClass == "fr-card--horizontal-tier" %} fr-responsive-img--16x9{% else %} fr-responsive-img--1x1{% endif %}"
+                        <img class="fr-responsive-img {% if card.addClass == "fr-card--horizontal-tier" %} fr-responsive-img--16x9{% else %} {% if card.ratio %} fr-responsive-img--{{ card.ratio }}{% else %}fr-responsive-img--1x1{% endif %}{% endif %}"
                             src="{{ card.image.src }}"
                             alt="{{ card.image.alt }}">
                     </div>

_includes/components/card_list.njk

@@ -6,9 +6,12 @@
           title: item.data.title,
           url: item.url,
           description: item.data.description,
+          tags: item.data.tags,
           image: item.data.image,
           small: small_cards,
-          show_image: show_images
+          show_image: show_images,
+          show_tag: show_tags,
+          ratio: ratio_cards
         } %}
         {% include "components/card.njk" %}
       </div>

_includes/components/page_switcher.njk

@@ -1,23 +1,38 @@
 {% if navLinks %}
   {% set flatNav = navLinks | flattenNav %}
+  {% set activeUrl = eleventyNavigation.sidemenuActive or page.url %}
+  {% set activeKey = activeUrl | replace('/', '') %}
   {% set currentIndex = -1 %}
   {% for item in flatNav %}
-    {% if item.url == page.url %}
-      {% set currentIndex = loop.index0 %}
+    {% if currentIndex == -1 %}
+      {% set itemKey = (item.url or '') | replace('/', '') %}
+      {% if itemKey == activeKey %}
+        {% set currentIndex = loop.index0 %}
+      {% endif %}
     {% endif %}
   {% endfor %}
+  {% if currentIndex == -1 and activeUrl != page.url %}
+    {% set fallbackKey = page.url | replace('/', '') %}
+    {% for item in flatNav %}
+      {% if currentIndex == -1 %}
+        {% set itemKey = (item.url or '') | replace('/', '') %}
+        {% if itemKey == fallbackKey %}
+          {% set currentIndex = loop.index0 %}
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
   {% if currentIndex > 0 %}
     {% set previousPage = flatNav[currentIndex - 1] %}
   {% else %}
     {% set previousPage = null %}
   {% endif %}
-  {% if currentIndex < (flatNav | length) - 1 %}
+  {% if currentIndex != -1 and currentIndex < (flatNav | length) - 1 %}
     {% set nextPage = flatNav[currentIndex + 1] %}
   {% else %}
     {% set nextPage = null %}
   {% endif %}
-  {% if (previousPage or nextPage) 
-    and eleventyNavigation.nav != "main" %}
+  {% if (previousPage or nextPage) and eleventyNavigation.nav != "main" %}
     <div class="page-switcher fr-pt-6w fr-mt-14v" data-pagefind-ignore>
       {% if previousPage %}
         <p class="fr-mb-0 previous-page">

_includes/components/published_on.njk

@@ -1,4 +1,4 @@
 <p class="fr-text--xs fr-mt-6v" data-pagefind-ignore>
-    {{ "published_on" | i18n }}
+    {{ "published_on" | i18n | safe }}
     <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
 </p>

_includes/components/tabnav.njk

@@ -0,0 +1,35 @@
+{% if not tabnav %}
+    {% set tabnav = params %}
+{% endif %}
+<div class="dsfr-doc-tab-navigation">
+  <div class="fr-sidemenu" data-fr-js-sidemenu-actionee="true">
+    <div class="fr-sidemenu__inner">
+      <button aria-expanded="false" aria-controls="dsfr-doc-tab-navigation--collapse" type="button" class="fr-sidemenu__btn" data-fr-js-collapse-button="true">
+        {# Affiche le titre de l'onglet actif, sinon le premier onglet #}
+        {% if tabnav.items and (tabnav.items | length) > 0 %}
+          {% set activeTab = tabnav.items | selectattr('active') | first %}
+          {{ activeTab.title if activeTab else tabnav.items[0].title }}
+        {% else %}
+          Dans cette rubrique
+        {% endif %}
+      </button>
+      <div class="fr-collapse" id="dsfr-doc-tab-navigation--collapse" data-fr-js-collapse="true">
+        <ul>
+          {% for item in tabnav.items %}
+            <li>
+              {% if item.active %}
+                <div aria-current="page" class="dsfr-doc-tab-navigation__tab">
+                  {{ item.title }}
+                </div>
+              {% else %}
+                <a class="dsfr-doc-tab-navigation__tab" href="{{ item.url }}">
+                  {{ item.title }}
+                </a>
+              {% endif %}
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

_includes/components/tile.njk

@@ -21,21 +21,34 @@
                    {% if tile.externalUrl %}target="_blank" rel="noopener"{% endif %}>{{ tile.title }}</a>
             </{{- title_tag -}}>
             <p class="fr-tile__desc">{{ tile.description }}</p>
+            {% if tile.tileTag %}
+                <div class="fr-tile__start">
+                    <p class="fr-tag {{ tile.tileTag.icon }} fr-tag--icon-left">{{ tile.tileTag.label }}</p>
+                </div>
+            {% endif %}
         </div>
     </div>
     {% if tile.pictogram %}
         <div class="fr-tile__header">
             <div class="fr-tile__pictogram">
                 {% set pictogramUrl = "/artwork/pictograms/" + tile.pictogram %}
-                <svg aria-hidden="true"
-                     class="fr-artwork"
-                     viewBox="0 0 80 80"
-                     width="80px"
-                     height="80px">
-                    <use class="fr-artwork-decorative" href="{{ pictogramUrl | htmlBaseUrl }}#artwork-decorative"></use>
-                    <use class="fr-artwork-minor" href="{{ pictogramUrl | htmlBaseUrl }}#artwork-minor"></use>
-                    <use class="fr-artwork-major" href="{{ pictogramUrl | htmlBaseUrl }}#artwork-major"></use>
-                </svg>
+                {% if tile.pictogram.slice(-4) == ".png" %}
+                    <img src="{{ pictogramUrl | htmlBaseUrl }}"
+                        alt=""
+                        width="80"
+                        height="80"
+                        class="fr-artwork" />
+                {% else %}
+                    <svg aria-hidden="true"
+                        class="fr-artwork"
+                        viewBox="0 0 80 80"
+                        width="80px"
+                        height="80px">
+                        <use class="fr-artwork-decorative" href="{{ pictogramUrl | htmlBaseUrl }}#artwork-decorative"></use>
+                        <use class="fr-artwork-minor" href="{{ pictogramUrl | htmlBaseUrl }}#artwork-minor"></use>
+                        <use class="fr-artwork-major" href="{{ pictogramUrl | htmlBaseUrl }}#artwork-major"></use>
+                    </svg>
+                {% endif %}
             </div>
         </div>
     {% endif %}

_includes/components/tile_list.njk

@@ -1,5 +1,5 @@
 {% if items and items.length %}
-    <div class="fr-grid-row fr-grid-row--gutters fr-mt-6w" data-pagefind-ignore>
+    <div class="fr-grid-row fr-grid-row--gutters fr-my-1v" data-pagefind-ignore>
         {% for item in items %}
             <div class="fr-col-12 fr-col-md-6 fr-col-lg-{{ columns or 4 }}">
                 {% set tile = {
@@ -8,7 +8,8 @@
                     url: item.url,
                     description: item.data.description,
                     pictogram: item.data.pictogram,
-                    externalUrl: item.data.externalUrl
+                    externalUrl: item.data.externalUrl,
+                    tileTag: item.data.tileTag
                 } %}
                 {% include "components/tile.njk" %}
             </div>

_includes/layouts/accueil.njk

@@ -43,19 +43,17 @@ layout: layouts/base.njk
         </div>
       </div>
       {{ content | safe }}
-      {% if eleventyNavigation and eleventyNavigation.key %}
-        {% set topLevelPages = [] %}
-        {% for entry in navCollection %}
-          {% if not entry.data.eleventyNavigation.parent %}
-            {% set _ = topLevelPages.push(entry) %}
-          {% endif %}
-        {% endfor %}
-        {% set topLevelPages = topLevelPages | sort(attribute = "data.eleventyNavigation.order") %}
-        {% set items = topLevelPages %}
-        {% set columns = 6 %}
-        {% set title_tag = "h2" %}
-        {% include "components/tile_list.njk" %}
-      {% endif %}
+      {% set topLevelPages = [] %}
+      {% for entry in navCollection %}
+        {% if not entry.data.eleventyNavigation.parent %}
+          {% set _ = topLevelPages.push(entry) %}
+        {% endif %}
+      {% endfor %}
+      {% set topLevelPages = topLevelPages | sort(attribute = "data.eleventyNavigation.order") %}
+      {% set items = topLevelPages %}
+      {% set columns = 6 %}
+      {% set title_tag = "h2" %}
+      {% include "components/tile_list.njk" %}
       {% include "components/page_switcher.njk" %}
     </div>
   </div>

_includes/layouts/partenaire.njk

@@ -12,20 +12,12 @@ layout: layouts/base.njk
             {% include "components/breadcrumb.njk" %}
           {% endif %}
           <h1>{{ title }}</h1>
-          {% include "components/published_on.njk" %}
-          {% if description %}
-            <p class="fr-text--lead">{{ description }}</p>
-          {% endif %}
         </div>
       </div>
-      {{ content | safe }}
-      {% set items = collections.all 
-        | filterRoot("./content/fr/partenaires/")
-        | filterCollectionLang 
-        | sort(attribute="data.title") %}
-      {% set columns = 4 %}
-      {% include "components/card_list.njk" %}
-      {% include "components/page_switcher.njk" %}
+      {% if description %}
+        <p class="fr-text--lead">{{ description }}</p>
+      {% endif %}
     </div>
   </div>
-</div>
+</div>
+{{ content | safe }}

_includes/layouts/partenaire_accueil.njk

@@ -0,0 +1,86 @@
+---
+layout: layouts/base.njk
+---
+
+{% from "components/component.njk" import component with context %}
+<div class="fr-container">
+  <div class="fr-grid-row">
+    <div class="fr-col-12 fr-col-md-4">
+      {% set effectiveNav = eleventyNavigation.nav %}
+      {% if sidemenuNav %}
+        {% set effectiveNav = sidemenuNav %}
+      {% endif %}
+      {% if effectiveNav == "guides-utilisateur" %}
+        {% set navLinks = collections.utilisateurNavigation | filterCollectionLang | eleventyNavigation %}
+        {% set navCollection = collections.utilisateurNavigation %}
+        {% set sidemenuTitle = "Guides utilisateur" %}
+      {% elif effectiveNav == "guides-producteur" %}
+        {% set navLinks = collections.producteurNavigation | filterCollectionLang | eleventyNavigation %}
+        {% set navCollection = collections.producteurNavigation %}
+        {% set sidemenuTitle = "Guides producteur" %}
+      {% elif effectiveNav == "guides-developpeur" %}
+        {% set navLinks = collections.developpeurNavigation | filterCollectionLang | eleventyNavigation %}
+        {% set navCollection = collections.developpeurNavigation %}
+        {% set sidemenuTitle = "Guides développeur" %}
+      {% elif effectiveNav == "ign" %}
+        {% set navLinks = collections.ignNavigation | filterCollectionLang | eleventyNavigation %}
+        {% set navCollection = collections.ignNavigation %}
+        {% set sidemenuTitle = "Institut national de l'information géographique et forestière" %}
+      {% endif %}
+      {% include "templates/sidemenu.njk" %}
+    </div>
+    <div id="contenu" class="fr-col-12 fr-col-md-8 fr-py-12v">
+      <div class="fr-grid-row">
+        <div class="fr-col-12">
+          {% if showBreadcrumb %}
+            {% include "components/breadcrumb.njk" %}
+          {% endif %}
+          <img src="{{ image.path }}"
+            alt="{{ image.alt }}"
+            height="80"
+            class="fr-artwork" />
+          {% include "components/published_on.njk" %}
+          <h1>{{ title }}</h1>
+          {% if tileTag %}
+              <div class="fr-tile__start">
+                  <p class="fr-tag {{ tileTag.icon }} fr-tag--icon-left">{{ tileTag.label }}</p>
+              </div>
+          {% endif %}
+        </div>
+      </div>
+      {{ content | safe }}
+      {% set generalitesPage = null %}
+      {% set topLevelPages = [] %}
+      {% for entry in navCollection %}
+        {% if not entry.data.eleventyNavigation.parent %}
+          {% if entry.data.title == "Généralités" %}
+            {% set generalitesPage = entry %}
+          {% else %}
+            {% set _ = topLevelPages.push(entry) %}
+          {% endif %}
+        {% endif %}
+      {% endfor %}
+      {% if generalitesPage %}
+        <div class="fr-col-12 fr-my-10v">
+          {% set card = {
+              title: generalitesPage.data.title,
+              url: generalitesPage.url,
+              description: generalitesPage.data.description,
+              horizontal: true,
+              small: true
+          } %}
+          {% include "components/card.njk" %}
+        </div>
+      {% endif %}
+      <h2>Offre produit et services</h2>
+      <p>{{ hintText }}</p>
+      {% set topLevelPages = topLevelPages | sort(attribute = "data.eleventyNavigation.order") %}
+      {% set items = topLevelPages %}
+      {% set columns = 4 %}
+      {% set title_tag = "h2" %}
+      {% set small_cards = true %}
+      {% set ratio_cards = "16x9" %}
+      {% include "components/card_list.njk" %}
+    </div>
+  </div>
+</div>