Add Awesome CodeGouvFr page

_includes/components/card.njk

@@ -23,6 +23,8 @@
               {{ card.date | readableDate }}
             </time>
           </p>
+        {% elif card.detail %}
+          {{ card.detail | safe }}
         {% endif %}
       </div>
     </div>
@@ -49,6 +51,10 @@
     {% endif %}
     {% if card.image.path %}
       <div class="fr-card__img">{% imageSync card.image.path, card.image.alt %}</div>
+    {% elif card.image.url %}
+      <div class="fr-card__img">
+        <img class="fr-responsive-img fr-responsive-img--1x1" src="{{ card.image.url }}" alt="{{ card.image.alt }}">
+      </div>
     {% endif %}
   </div>
 </div>

content/fr/awesome/index.njk

@@ -0,0 +1,27 @@
+---
+title: "Awesome CodeGouvFr"
+layout: layouts/page.njk
+---
+<p class="fr-text--lead">
+  Voici la liste des logiciels libres développés par des administrations et à fort potentiel de réutilisation.
+<br>
+  Vous pouvez en apprendre plus dans le <a href="https://github.com/codegouvfr/awesome-codegouvfr" target="_blank">dépôt dédié à cette liste</a> et dans <a>l'article de blog</a> expliquant ce projet.
+</p>
+<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 = {
+      url: false,
+      externalUrl: project.landingURL or project.url,
+      title: project.name,
+      description: project.description.fr.shortDescription,
+      image: {
+        url: project.logo,
+        alt: "Logo du projet"
+      },
+      detail: '<img src="' + project.awesomeShield + '" alt="Badge Awesome CodeGouvFr du projet">'
+    } %}
+    {% include "components/card.njk" %}
+  </div>
+  {% endall %}
+</div>

eleventy.config.js

@@ -1,4 +1,5 @@
 const {DateTime} = require("luxon");
+const yaml = require("js-yaml");
 const markdownItAnchor = require("markdown-it-anchor");
 const markdownItAttrs = require("markdown-it-attrs");
 const markdownItContainer = require("markdown-it-container");
@@ -53,6 +54,8 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(pluginBundle);
     eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
 
+    eleventyConfig.addDataExtension("yml, yaml", contents => yaml.load(contents));
+
     // Custom collections
     eleventyConfig.addCollection("allPosts", function(collectionApi) {
         return collectionApi.getFilteredByTags("posts")

package.json

@@ -35,6 +35,7 @@
     "@gouvfr/dsfr": "^1.9.3",
     "chalk": "^4.1.2",
     "ics": "^3.2.0",
+    "js-yaml": "^4.1.0",
     "luxon": "^3.2.1",
     "markdown-it-anchor": "^8.6.6",
     "markdown-it-attrs": "^4.1.6",