codegouvfr / eleventy-dsfr Goto Github PK

• Ajouter le composant du DSFR Barre de recherche, inclus dans le header
• Implémenter la recherche en utilisant Pagefind
  • Créer une nouvelle page pour les résultats

Reprendre https://github.com/codegouvfr/eleventy-dsfr :

• Mettre à jour la version d'11ty
• Mettre à jour le DSFR et copier les fichiers automatiquement
• Implémenter les composants de base du DSFR
• Ajouter les pages obligatoires du footer et les fichiers de base (licences)
• Prendre en charge l'i18n
• Contrôler l'a11y et la responsivity
• GitHub CI/CD + GitHub page

Au chargement des pages en mode sombre, un effet de clignotement se produit avec d'abord la page en mode clair puis très rapidement un passage en mode sombre.
Ceci se produit lors de tous les changements de pages.

Je ne sais pas ce qui, dans le fonctionnement d'11ty, justifie cet effet.

Ajouter un calendrier .ics généré depuis un fichier d'événements (au format JSON défini ici), accessible également pour Eleventy (dans _data/).

Sur le déploiement du site de démo sur github pages, les articles de la documentation ont tous la même date malgré leur configuration à git Last Modified.

C'est parce que le build a lieu sur un dépôt dont le checkout a été fait sans aucun historique, seulement le dernier commit.

Pour que les dates soient correctes dans le déploiement, il faut modifier l'action checkout du workflow pour qu'elle prenne tout l'historique

     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - name: Setup Pages
         uses: actions/configure-pages@v4
       - name: Build with Eleventy

• Audit
• Outillage ?

https://github.com/markdown-it/markdown-it-footnote

Il serait pratique, notamment pour y placer du contenu riche, que le composant accordéon soit proposé en markdown. Ceci pour éviter aux rédacteurs qui ne sont pas développeurs de devoir saisir tout un balisage HTML.

{% from "components/component.njk" import component with context %}
{{ component("accordionsgroup", {
    items: [{
        title: "Intitulé accordéon",
        content: "<p>Contenu HTML potentiellement riche !</p>"
    }]
}) }}

Mais le fonctionnement des markdown containers ne me semble pas s'y prêter très bien. Il faudrait un container pour le groupe d'accordéons et un autre pour chacun des accordéons et les imbriquer.

Est-ce que vous auriez une idée pour le développement de cette fonction ?

Dans le même type, j'aurais aussi besoin du composant onglets qui fonctionne également avec un groupe et des éléments au sein de ce groupe. La méthode trouvée pour l'accordéon pourrait être réutilisée pour les onglets.

Pour accélérer la prise en main, la mettre dans le README directement.

Ensuite, le README peut proposer de continuer de lire la documentation dans GitHub pour chaque composant.

• Mettre à jour l'interface de la page de blog
• Mettre à jour l'interface de la page d'un article
• Gérer la pagination (articles et tags)
• Ajouter un système de filtrage par tag
• Internationaliser le blog

Certains composants introduisent des éléments headings qui sont ceux par défaut de la documentation du DSFR mais peuvent ne pas correspondre à la hiérarchie des headings de la page dans laquelle on insère le composant. Ceci pose un problème d'accessibilité de la page en créant des sauts de heading ou en interrompant le plan logique de la page.

Ceci concerne en particulier :

• un h3 dans le composant Accordéon en njk
• un h3 dans le conteneur markdown de l'Accordéon
• un h3 dans le composant Alert en njk
• un h3 dans le conteneur markdown de l'Alerte
• un h3 dans Callout en njk
• un h3 dans Callout en md
• un h3 dans le composant Carte en njk
• un h4 dans le composant Tuile en njk

Il faudrait introduire une possibilité de préciser quel niveau de heading on souhaite donner au composant (entre h2 et h6) pour chacun de ces éléments, aussi bien s'il l'insère en utilisant la syntaxe nunjucks que la syntaxe markdown.

Cette problématique est rencontrée sur toutes les adaptations du DSFR dans différents frameworks. Un paramètre supplémentaire titleAs a été introduit sur les composants concernés dans codegouvfr/react-dsfr par exemple.

https://tina.io/docs/frameworks/11ty/

Il n'est pas possible de créer plusieurs groupes d'accordéons avec la syntaxe Nunjucks.

Les accordéons se voient attribuer un identifiant accordion-{{ loop.index }} qui est identique pour chacun des accordions group en commençant par 1 pour le premier accordéon du groupe.

Il faudrait un identifiant dont on puisse garantir l'unicité au lieu du seul loop.index.

J'ai d'abord pensé à donner un identifiant numérique aléatoire au groupe : accordion-{{ range(1,100) | random }}-{{ loop.index }}
Mais sur un coup de malchance, avec plusieurs groupes dans la page on pourrait encore tomber sur des identifiants identiques.

Puis j'ai vu qu'on avait une dépendance à nanoid non exploitée et qu'on pourrait l'utiliser de cette façon : https://tinytip.co/tips/eleventy-njk-globals/

• PR référencement dans 11ty-website
• Twitter, Mastodon
• Bluehats talk ?
• Discussion avec MiNumEco & RGAA

Bonjour,
Je travaille pour l'Etat de Pays de la Loire et nous étudions la possibilité de réaliser l'intégration d'une maquette via Eleventy-dsfr,

J'aimerais savoir si ils existent déjà des sites déployés utilisant eleventy-dsfr s'il vous plaît ?

Excusez moi de passer par ce canal, mais j'aimerais pouvoir vous contacter à ce sujet s'il vous plaît @hjonin

Actuellement, il dispose de paramètres assez compliqués et manque encore de flexibilité (toutes les options ne sont pas prises en compte). Il est cependant un composant essentiel.