codegouvfr / eleventy-dsfr Goto Github PK
View Code? Open in Web Editor NEWTemplate pour la création d'un site utilisant le système de design de l'État avec Eleventy.
Home Page: https://codegouvfr.github.io/eleventy-dsfr/
License: MIT License
Template pour la création d'un site utilisant le système de design de l'État avec Eleventy.
Home Page: https://codegouvfr.github.io/eleventy-dsfr/
License: MIT License
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 :
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.
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.
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
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/
).
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/
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.
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.
Reprendre https://github.com/codegouvfr/eleventy-dsfr :
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.