Use component import style

content/fr/awesome/index.njk

@@ -14,7 +14,8 @@ eleventyNavigation:
 <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-mb-3w">
   {% asyncAll filename, project in awesome.dist %}
   <div class="fr-col-12 fr-col-md-3">
-    {% set card = {
+    {% from "components/component.njk" import component with context %}
+    {{ component("card", {
       url: false,
       externalUrl: project.landingURL or project.url,
       title: project.name,
@@ -24,8 +25,7 @@ eleventyNavigation:
         alt: "Logo du projet"
       },
       detail: '<a class="fr-link link-no-style" href="https://github.com/codegouvfr/awesome-codegouvfr#awesome-codegouvfr-score" target="_blank"><img src="' + project.awesomeShield + '" alt="Badge Awesome CodeGouvFr du projet"></a>'
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>

content/fr/bluehats/bsoc/2022/contributions.njk

@@ -12,16 +12,16 @@ permalink: /fr/bluehats/bsoc-contributions-2022/
 <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-mb-3w">
   {% asyncAll project in projects %}
   <div class="fr-col-12 fr-col-md-4">
-    {% set card = {
+    {% from "components/component.njk" import component with context %}
+    {{ component("card", {
       url: project.url,
       title: project.title,
       description: project.description,
       image: {
         path: project.imagePath,
         alt: project.title
       }
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>

content/fr/bluehats/bsoc/2022/promotion.njk

@@ -12,7 +12,8 @@ permalink: /fr/bluehats/bsoc-promotion-2022/
 <div class="fr-grid-row fr-grid-row--gutters fr-mb-3w">
   {% asyncAll person in people %}
   <div class="fr-col-12">
-    {% set card = {
+    {% from "components/component.njk" import component with context %}
+    {{ component("card", {
       url: person.projectUrl,
       urlDescription: "En savoir plus sur " + person.projectName,
       title: person.name,
@@ -22,8 +23,7 @@ permalink: /fr/bluehats/bsoc-promotion-2022/
         alt: person.name
       },
       orientation: "horizontal"
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>

content/fr/communs/index.njk

@@ -6,24 +6,23 @@ eleventyNavigation:
   parent: Ressources
   order: 7
 ---
-{% set callout = {
+{% from "components/component.njk" import component with context %}
+{{ component("callout", {
   description: "Cette page vise à valoriser les démarches de communs numériques engagées par les administrations.  Elle référence aussi des communs numériques libres et collaboratifs auxquels le secteur public contribue déjà.  Les références proposées sur cette page sont appelées à évoluer au fil du temps."
-} %}
-{% include "components/callout.njk" %}
+}) }}
 <h2>Des communs numériques déjà utilisés dans le secteur public</h2>
 <p>On ne présente plus les projets Wikimédia, OpenStreetMap ou Open Food Facts. Ces communs numériques libres et
   collaboratifs font déjà l'objet de contributions de la part de l'administration et nous vous encourageons à y
   contribuer.</p>
 <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-py-3w">
   {% asyncAll communNumerique in communsNumeriques %}
   <div class="fr-col-12 fr-col-md-4">
-    {% set card = {
+    {{ component("card", {
       url: false,
       externalUrl: communNumerique.url,
       title: communNumerique.title,
       description: communNumerique.description
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>
@@ -33,7 +32,7 @@ eleventyNavigation:
 <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-py-3w">
   {% asyncAll communNumerique in admCommunsNumeriques %}
   <div class="fr-col-12 fr-col-md-4">
-    {% set card = {
+    {{ component("card", {
       url: false,
       externalUrl: communNumerique.url,
       title: communNumerique.title,
@@ -42,8 +41,7 @@ eleventyNavigation:
         path: communNumerique.imagePath,
         alt: communNumerique.title
       }
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>

content/fr/explicabilite/index.njk

@@ -6,22 +6,21 @@ eleventyNavigation:
   parent: Ressources
   order: 9
 ---
-{% set callout = {
+{% from "components/component.njk" import component with context %}
+{{ component("callout", {
   description: "Cette page recense les outils logiciels pouvant aider les administrations à mettre en œuvre l'explication des décisions administratives lorsque celles-ci reposent sur des algorithmes opérés par des programmes informatiques"
-} %}
-{% include "components/callout.njk" %}
+}) }}
 
 <h2>Différents outils, différentes finalités</h2>
 
 <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-py-3w">
   {% asyncAll outilExplicabilite in outilsExplicabilite %}
   <div class="fr-col-12 fr-col-md-4">
-    {% set card = {
+    {{ component("card", {
       url: outilExplicabilite.url,
       title: outilExplicabilite.title,
       description: outilExplicabilite.description
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>

content/fr/utiliser/index.njk

@@ -10,11 +10,11 @@ showBreadcrumb: true
     </div>
   {% endfor %}
 </div>
-{% set callout = {
+{% from "components/component.njk" import component with context %}
+{{ component("callout", {
   description: "Le <strong>SILL</strong> est publié depuis 2012 : chaque logiciel présent est utilisé par au moins une administration.  En tant qu'agent public inscrit au SILL, vous pouvez solliciter les référents de chaque logiciel qui pourront répondre à vos questions et vous aider dans l'appropriation de ces solutions.",
   link: {
     url: "https://code.gouv.fr/sill/add-software",
     title: "Inscrivez-vous !"
   }
-} %}
-{% include "components/callout.njk" %}
+}) }}