chore(11ty): upgrade to v3

.eleventy.js

@@ -1,20 +1,19 @@
-const path = require("node:path");
+import path from 'node:path'
 // Globals: dates, strings
-const { DateTime } = require('luxon')
-const string = require('string')
-const slugify = s => string(s).slugify().toString()
+import { DateTime } from 'luxon'
+import slugify from '@sindresorhus/slugify'
 // Markdown configuration
-const markdownit = require("markdown-it")
-const anchor = require("markdown-it-anchor")
-const figure = require("markdown-it-image-figures")
-const footnote = require("markdown-it-footnote")
-const { imgSize } = require("@mdit/plugin-img-size")
+import markdownit from 'markdown-it'
+import anchor from 'markdown-it-anchor'
+import figure from 'markdown-it-image-figures'
+import footnote from 'markdown-it-footnote'
+import { imgSize } from '@mdit/plugin-img-size'
 // 11ty plugins
-const tocPlugin = require("eleventy-plugin-toc")
-const rssPlugin = require("@11ty/eleventy-plugin-rss")
-const syntaxHighlightPlugin = require("@11ty/eleventy-plugin-syntaxhighlight")
+import tocPlugin from 'eleventy-plugin-toc'
+import rssPlugin from '@11ty/eleventy-plugin-rss'
+import syntaxHighlightPlugin from '@11ty/eleventy-plugin-syntaxhighlight'
 
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
 	// Shortcodes
 	eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`)
 
@@ -49,7 +48,7 @@ module.exports = function (eleventyConfig) {
 		typographer: true,
 		quotes: ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'],
 	})
-		.use(anchor, { slugify })
+		.use(anchor, { slugify: s => slugify(s) })
 		.use(footnote)
 		.use(figure, {
 			figcaption: true,

docs/21e-seminaire-accessiweb/index.html

@@ -8,7 +8,7 @@
 		<link rel="preload" as="font" href="/assets/fonts/museo-slab-300.woff2"><link rel="stylesheet" href="/assets/styles.min.css" media="all">
 		<link rel="stylesheet" href="/assets/impression.min.css" media="print">
 		<meta name="description" content="Réservé jusqu’à présent aux seuls membres du &lt;abbr title=&quot;Groupe de Travail AccessiWeb&quot;&gt;GTA&lt;/abbr&gt;, la 21&lt;sup&gt;e&lt;/sup&gt; édition s’est ouverte aux non-membres.">
-		<meta name="generator" content="Eleventy v2.0.1">
+		<meta name="generator" content="Eleventy v3.0.0">
 		<link rel="icon" href="/favicon.ico" sizes="32x32">
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 		<link rel="author" href="/humans.txt" type="text/plain">
@@ -58,7 +58,7 @@ <h2 class="h3-like description" itemprop="description">Réservé jusqu’à pré
 		<time class="screen-reader-text" datetime="2015-07-15T15:06:31" itemprop="datePublished">15 juillet 2015</time>
 			<div itemprop="articleBody">
 				<p>C’est donc une grande première, et moi qui lisait les comptes-rendus des précédents séminaires sur internet ait enfin pu y assister !</p>
-<h2 id="en-tant-quorateur" tabindex="-1">En tant qu’orateur</h2>
+<h2 id="en-tant-qu-orateur" tabindex="-1">En tant qu’orateur</h2>
 <p>Le thème du séminaire était « <a href="https://inova.snv.jussieu.fr/evenements/colloques/colloques/index.php?c=87">Choisir et utiliser un CMS pour créer des contenus accessibles</a> », organisé par <a href="https://accessiblog.fr/">Olivier Nourry</a>.</p>
 <p>Non seulement j’ai pu y assister, mais j’ai même été invité par Olivier à y faire une intervention autour de la même thématique que celle abordée lors du <a href="https://2014.wptech.fr">WP Tech</a> au sujet des <strong>thèmes enfants dans WordPress</strong> (et leur utilisation dans une méthodologie de travail basée sur l’amélioration perpétuelle).</p>
 <p>WordPress étant le CMS le plus utilisé au monde – et de loin – Olivier souhaitait mettre en avant une pratique concrète pour <strong>incorporer l’accessibilité à la production de sites WordPress</strong>. C’est avec plaisir que j’ai accepté le défi.</p>
@@ -81,7 +81,7 @@ <h2 id="en-tant-que-spectateur" tabindex="-1">En tant que spectateur</h2>
 <p>Les sujets étaient extrêmement intéressants, et comme l’a évoqué Olivier pour conclure le séminaire : ce type de démarche n’a – à ma connaissance, comme à la sienne – <strong>jamais</strong> été mené en profondeur.</p>
 <p>La comparaison de la prise en compte de l’accessibilité des différents acteurs de l’écosystème des CMS est tout à fait pertinente et <strong>totalement absent des comparatifs</strong> qu’on peut trouver ça et là.</p>
 <p>La présentation des ATAG2 en <strong>des termes compréhensibles par un humain</strong> est également une performance, que peu de personnes pouvaient réaliser. Ayant déjà tenté l’aventure de lire et comprendre les ATAG2, j’ai été épaté par le travail produit par Jean-Pierre Villain et ait noirci de notes quatre ou cinq pages de mon carnet.</p>
-<h2 id="ce-nest-pas-fini" tabindex="-1">Ce n’est pas fini !</h2>
+<h2 id="ce-n-est-pas-fini" tabindex="-1">Ce n’est pas fini !</h2>
 <p>Comme Dominique Burger (président de BrailleNet) et Olivier Nourry l’ont annoncé, <strong>un livre blanc est en cours d’élaboration</strong> afin de diffuser le contenu de ce séminaire.</p>
 <p><strong>Une invitation est également lancée aux professionnels du web – qui utiliseraient couramment un CMS oublié de ce séminaire – de se plier à l’exercice d’évaluer l’accessibilité de leur outil préféré afin d’enrichir le comparatif.</strong></p>
 <p>Pour conclure, je suis réellement ravi d’avoir pu <strong>rencontrer, échanger, apprendre</strong> autant et je tiens à remercier chaleureusement <strong>l’association BrailleNet</strong> pour avoir permis que cet événement ait lieu, et Olivier Nourry de m’y avoir invité en tant qu’intervenant : j’en suis très honoré.</p>
@@ -124,7 +124,7 @@ <h2 id="ce-nest-pas-fini" tabindex="-1">Ce n’est pas fini !</h2>
 		<div class="aside pl2 pt2 pr3">
 			<h3 class="tk-bello-pro h2-like m-reset">Sommaire</h3>
 			<div class="textwidget">
-				<ol><li><a href="#en-tant-quorateur">En tant qu’orateur</a></li><li><a href="#en-tant-que-spectateur">En tant que spectateur</a></li><li><a href="#ce-nest-pas-fini">Ce n’est pas fini !</a></li><li><a href="#comments">Commentaires</a></li></ol>
+				<ol><li><a href="#en-tant-qu-orateur">En tant qu’orateur</a></li><li><a href="#en-tant-que-spectateur">En tant que spectateur</a></li><li><a href="#ce-n-est-pas-fini">Ce n’est pas fini !</a></li><li><a href="#comments">Commentaires</a></li></ol>
 			</div>
 		</div>
 	</aside>

docs/404.html

@@ -8,7 +8,7 @@
 		<link rel="preload" as="font" href="/assets/fonts/museo-slab-300.woff2"><link rel="stylesheet" href="/assets/styles.min.css" media="all">
 		<link rel="stylesheet" href="/assets/impression.min.css" media="print">
 		<meta name="description" content="Page non trouvée">
-		<meta name="generator" content="Eleventy v2.0.1">
+		<meta name="generator" content="Eleventy v3.0.0">
 		<link rel="icon" href="/favicon.ico" sizes="32x32">
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 		<link rel="author" href="/humans.txt" type="text/plain">

docs/a-qui-parlent-vos-css/index.html

@@ -8,7 +8,7 @@
 		<link rel="preload" as="font" href="/assets/fonts/museo-slab-300.woff2"><link rel="stylesheet" href="/assets/styles.min.css" media="all">
 		<link rel="stylesheet" href="/assets/impression.min.css" media="print">
 		<meta name="description" content="Les façons dʼécrire nos &lt;abbr lang=&quot;en&quot; title=&quot;Cascading StyleSheet&quot;&gt;CSS&lt;/abbr&gt; se multiplient et se mélangent, me laissant une question sur le bout de la langue&amp;nbsp;: pour qui écrit-on ces styles&amp;nbsp;?">
-		<meta name="generator" content="Eleventy v2.0.1">
+		<meta name="generator" content="Eleventy v3.0.0">
 		<link rel="icon" href="/favicon.ico" sizes="32x32">
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 		<link rel="author" href="/humans.txt" type="text/plain">

docs/a-venir-ffeeeedd/index.html

@@ -8,7 +8,7 @@
 		<link rel="preload" as="font" href="/assets/fonts/museo-slab-300.woff2"><link rel="stylesheet" href="/assets/styles.min.css" media="all">
 		<link rel="stylesheet" href="/assets/impression.min.css" media="print">
 		<meta name="description" content="Au fil des années de pratique qui se succèdent, chaque professionnel du web acquière des techniques, des compétences et des habitudes qui lui sont propres.">
-		<meta name="generator" content="Eleventy v2.0.1">
+		<meta name="generator" content="Eleventy v3.0.0">
 		<link rel="icon" href="/favicon.ico" sizes="32x32">
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 		<link rel="author" href="/humans.txt" type="text/plain">

docs/a11y-css-version-deux/index.html

@@ -8,7 +8,7 @@
 		<link rel="preload" as="font" href="/assets/fonts/museo-slab-300.woff2"><link rel="stylesheet" href="/assets/styles.min.css" media="all">
 		<link rel="stylesheet" href="/assets/impression.min.css" media="print">
 		<meta name="description" content="Ma volonté d’améliorer toujours plus mes pratiques et mes productions ne faiblissant pas, les itérations sur ce projet me tenant à cœur ont été productives. J’ai encore appris beaucoup, manipulé de nouveaux outils et fait de nouvelles rencontres.">
-		<meta name="generator" content="Eleventy v2.0.1">
+		<meta name="generator" content="Eleventy v3.0.0">
 		<link rel="icon" href="/favicon.ico" sizes="32x32">
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 		<link rel="author" href="/humans.txt" type="text/plain">
@@ -89,7 +89,7 @@ <h3 id="desactivation-de-tests" tabindex="-1">Désactivation de tests</h3>
 <h2 id="traduction" tabindex="-1">Traduction</h2>
 <p>Pour celle-ci, je vais applaudir discrètement et vous renvoyer vers <a href="https://kittygiraudel.com/2014/10/22/translation-system-in-sass/">l’article écrit par Kitty (en anglais)</a> qui détaille le fonctionnement de son <strong>système de traduction en Sass</strong>.</p>
 <p>Oui, vous avez bien lu :désormais a11y.css est multilingue en demeurant écrit uniquement en Sass. Outre la portée accrue de façon incroyable suite au passage en anglais, l’exploit technique de Kitty est incroyable. J’en profite pour signaler la parution de son premier livre « CSS3 : pratique du design web » <a href="https://www.eyrolles.com/Informatique/Livre/css3-9782212140231">en vente aux éditions Eyrolles</a>, que je vous recommande chaudement.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p>
-<h2 id="documentation-test" tabindex="-1">Documentation &amp; test</h2>
+<h2 id="documentation-and-test" tabindex="-1">Documentation &amp; test</h2>
 <p>Vous vous en doutez, le projet est devenu relativement complexe. Les solutions apportées par les différents contributeurs on tellement enrichi ce projet que même moi, je ne m’y retrouvais plus.</p>
 <p>J’avais déjà mentionné lors de <a href="https://www.ffoodd.fr/wp-tech-2014/" title="WP Tech 2014">mon atelier au WP Tech</a> mon <strong>intérêt pour la documentation</strong> ; c’est donc tout naturellement que j’ai cherché à documenter plus précisément a11y.css. Et de mon point de vue, il y a deux aspects très différents à documenter :</p>
 <ul>
@@ -135,12 +135,12 @@ <h3 id="hologram" tabindex="-1">Hologram</h3>
 <p><strong>Et voilà !</strong> Hologram génère un mini-site statique grâce à un jeu de ressources très simple. Il est ainsi possible de personnaliser l’entête, le pied-de-page et les ressources statiques pour aménager sa documentation à volonté. <strong>Magique</strong> 🙂</p>
 <p>Et puisque j’avais déjà créé une branche pour servir de présentation en ligne sur Github, j’ai ajouté ces nouveaux fichiers HTML afin d’en faire <strong>un véritable site de démonstration</strong>.</p>
 <p>Jetez un œil au <a href="https://ffoodd.github.io/a11y.css/">site de démonstration d’a11y.css</a> !</p>
-<h3 id="sassdoc" tabindex="-1">SassDoc</h3>
+<h3 id="sass-doc" tabindex="-1">SassDoc</h3>
 <p>Pour finir, l’architecture du projet s’étant alourdie d’options et de fonctionnalités, il fallait permettre aux utilisateurs de Sass de s’approprier plus facilement l’outil.</p>
 <p>Par chance, la majorité de ces enrichissements étaient l’œuvre de Kitty Giraudel, qui s’avère aussi être le créateur de <a href="https://sassdoc.com/">SassDoc</a>. La personne a tendance à faire des trucs un peu fou en Sass, et cet outil de documentation correspond à la perfection aux besoins d’une API Sass.</p>
 <p>Ni une ni deux, Kitty a mis en place SassDoc !</p>
 <p>Et voilà un projet <strong>complètement documenté</strong>.</p>
-<h2 id="ce-nest-pas-fini" tabindex="-1">Ce n’est pas fini !</h2>
+<h2 id="ce-n-est-pas-fini" tabindex="-1">Ce n’est pas fini !</h2>
 <p>Il reste quelques sujets à avancer :</p>
 <ul>
 <li>Mettre à niveau SassDoc pour utiliser la V2 ;</li>
@@ -170,7 +170,7 @@ <h2 id="ce-nest-pas-fini" tabindex="-1">Ce n’est pas fini !</h2>
 		<div class="aside pl2 pt2 pr3">
 			<h3 class="tk-bello-pro h2-like m-reset">Sommaire</h3>
 			<div class="textwidget">
-				<ol><li><a href="#corrections-multiples">Corrections multiples</a></li><li><a href="#personnalisation">Personnalisation</a></li><li><a href="#traduction">Traduction</a></li><li><a href="#documentation-test">Documentation &amp; test</a></li><li><a href="#ce-nest-pas-fini">Ce n’est pas fini !</a></li></ol>
+				<ol><li><a href="#corrections-multiples">Corrections multiples</a></li><li><a href="#personnalisation">Personnalisation</a></li><li><a href="#traduction">Traduction</a></li><li><a href="#documentation-and-test">Documentation &amp; test</a></li><li><a href="#ce-n-est-pas-fini">Ce n’est pas fini !</a></li></ol>
 			</div>
 		</div>
 	</aside>

docs/a11y-cssun-credo/index.html

@@ -8,7 +8,7 @@
 		<link rel="preload" as="font" href="/assets/fonts/museo-slab-300.woff2"><link rel="stylesheet" href="/assets/styles.min.css" media="all">
 		<link rel="stylesheet" href="/assets/impression.min.css" media="print">
 		<meta name="description" content="Mon crédo, c’est l’&lt;strong&gt;amélioration perpétuelle&lt;/strong&gt;. Tester la qualité d’une intégration peut s’avérer difficile, surtout si vous souhaitez le faire au fil de l’eau. C’est pourquoi depuis deux ans j’affine mon petit &lt;abbr lang=&quot;en&quot; title=&quot;Cascading StyleSheet&quot;&gt;CSS&lt;/abbr&gt; de «&amp;thinsp;pré-audit&amp;thinsp;»&amp;thinsp;:&amp;nbsp;&lt;a href=&quot;https://github.com/ffoodd/a11y.css&quot; target=&quot;_blank&quot; title=&quot;Le projet a11y.css sur GitHub (nouvelle fenêtre)&quot;&gt;a11y.css&lt;/a&gt;.">
-		<meta name="generator" content="Eleventy v2.0.1">
+		<meta name="generator" content="Eleventy v3.0.0">
 		<link rel="icon" href="/favicon.ico" sizes="32x32">
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 		<link rel="author" href="/humans.txt" type="text/plain">

docs/accesslide-la-prise-en-main/index.html

@@ -8,7 +8,7 @@
 		<link rel="preload" as="font" href="/assets/fonts/museo-slab-300.woff2"><link rel="stylesheet" href="/assets/styles.min.css" media="all">
 		<link rel="stylesheet" href="/assets/impression.min.css" media="print">
 		<meta name="description" content="La conférence que je m’apprête à donner lors du &lt;a href=&quot;http://2015.wpmx.org/&quot;&gt;WPMX Day&lt;/a&gt; est l’occasion de créer un nouveau diaporama. C’est là qu’intervient &lt;a href=&quot;http://www.access42.net&quot;&gt;Access42&lt;/a&gt; et son superbe outil &lt;a href=&quot;htt//www.accesslide.net&quot;&gt;AccesSlide&lt;/a&gt;&amp;nbsp;!">
-		<meta name="generator" content="Eleventy v2.0.1">
+		<meta name="generator" content="Eleventy v3.0.0">
 		<link rel="icon" href="/favicon.ico" sizes="32x32">
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 		<link rel="author" href="/humans.txt" type="text/plain">

docs/ameliorer-les-images-dans-wordpress-avec-html5-et-aria/index.html

@@ -8,7 +8,7 @@
 		<link rel="preload" as="font" href="/assets/fonts/museo-slab-300.woff2"><link rel="stylesheet" href="/assets/styles.min.css" media="all">
 		<link rel="stylesheet" href="/assets/impression.min.css" media="print">
 		<meta name="description" content="WordPress est un bon outil, pour qui sait s&#39;en servir. Parmi les défauts que je lui trouve, la gestion de la sémantique et de l’accessibilité sur le front-end sont assez sensibles. Voici le fruit de mes réflexions et recherches sur la thématique des images &amp;mdash; un thème sensible s’il en est.">
-		<meta name="generator" content="Eleventy v2.0.1">
+		<meta name="generator" content="Eleventy v3.0.0">
 		<link rel="icon" href="/favicon.ico" sizes="32x32">
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml">
 		<link rel="author" href="/humans.txt" type="text/plain">
@@ -58,7 +58,7 @@ <h2 class="h3-like description" itemprop="description">WordPress est un bon outi
 		<time class="screen-reader-text" datetime="2013-11-12T16:32:51" itemprop="datePublished">12 novembre 2013</time>
 			<div itemprop="articleBody">
 				<p>Pour commencer, il faut comprendre une problématique de base en terme d’accessibilité : la distinction entre <strong>les images décoratives</strong> et <strong>les images porteuses de sens</strong>. Pour comprendre cette distinction et son importance, je vous recommande vivement la lecture d’<a href="https://www.ffoodd.fr/lecture-accessibilite-web/" title="Accessibilité web"><em>«Accessibilité web»</em></a> par <a href="https://www.armonyaltinier.fr/" title="Le site d’Armony Altinier (nouvelle fenêtre)">Armony Altinier</a>. Comme souvent lorsque nous parlons d’<strong>accessibilité web</strong>, il s’agit de bon sens : une image porteuse de sens doit être restituée à tous les utilisateurs, tandis qu’une image décorative ne doit être montrée qu’aux utilisateurs disposant d’un affichage graphique complet.</p>
-<h2 id="les-limites-de-wordpress" tabindex="-1">Les limites de WordPress</h2>
+<h2 id="les-limites-de-word-press" tabindex="-1">Les limites de WordPress</h2>
 <p>Tout le monde n’est pas sensible à ces questions, même s’il le faudrait : WordPress ne fait pas exception. Il donne cependant la possibilité à ses utilisateurs de servir des images de façon tout à fait correcte, en proposant de base pour tous les fichiers la capacité d’adjoindre un texte alternatif — ce qui remplit le critère principal des <a href="https://checklists.opquast.com/fr/" title="Les checklists Opquast (nouvelle fenêtre)">bonnes pratiques d’OpQuast</a> et permet de satisfaire la plupart des critères de niveau Bronze d’Accessiweb.</p>
 <p>Pour autant WordPress ne va pas plus loin :</p>
 <ul>
@@ -103,7 +103,7 @@ <h2 id="les-images-porteuses-de-sens" tabindex="-1">Les images porteuses de sens
   <span class="token variable">$output</span> <span class="token operator">.=</span> ’<span class="token operator">&lt;</span><span class="token operator">/</span>figure<span class="token operator">></span>’<span class="token punctuation">;</span>
   <span class="token keyword">return</span> <span class="token variable">$output</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span></code></pre>
-<h2 id="lintervention-detaillee" tabindex="-1">L’intervention détaillée</h2>
+<h2 id="l-intervention-detaillee" tabindex="-1">L’intervention détaillée</h2>
 <p>La structure d’origine est conservée ; je détaille ce qui a été fait :</p>
 <ul>
 <li>Une couche sémantique HTML5 est appliquée en lieu et place du balisage «neutre» précédent : <code>figure</code> et <code>figcaption</code> ;</li>
@@ -140,7 +140,7 @@ <h2 id="mises-a-jour" tabindex="-1">Mises à jour</h2>
 		<div class="aside pl2 pt2 pr3">
 			<h3 class="tk-bello-pro h2-like m-reset">Sommaire</h3>
 			<div class="textwidget">
-				<ol><li><a href="#les-limites-de-wordpress">Les limites de WordPress</a></li><li><a href="#les-images-porteuses-de-sens">Les images porteuses de sens</a></li><li><a href="#lintervention-detaillee">L’intervention détaillée</a></li><li><a href="#mises-a-jour">Mises à jour</a></li></ol>
+				<ol><li><a href="#les-limites-de-word-press">Les limites de WordPress</a></li><li><a href="#les-images-porteuses-de-sens">Les images porteuses de sens</a></li><li><a href="#l-intervention-detaillee">L’intervention détaillée</a></li><li><a href="#mises-a-jour">Mises à jour</a></li></ol>
 			</div>
 		</div>
 	</aside>