7 files changed, 87 insertions, 5 deletions
diff --git a/content/overview-rich-content/index.fr.md b/content/overview-rich-content/index.fr.md
new file mode 100644
index 0000000..e768252
--- /dev/null
+++ b/content/overview-rich-content/index.fr.md
@@ -0,0 +1,82 @@
++++
+title = "Contenu riche"
+description = "Une brève description des Shortcodes personnalisés pour Zola qui implémentent des éléments html modernes : vidéo, image, gif, audio."
+date = 2021-05-15
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["video", "audio", "images", "shortcodes"]
+[extra]
+toc = true
+keywords = "Images, Videos, Audio, Gif, Rich Content, Shortcodes"
++++
+
+Plusieurs codes abrégés personnalisés sont inclus pour augmenter CommonMark (avec l'aimable autorisation du [theme d3c3nt](https://d3c3nt.figbert.com/posts/rich-content/)), en plus de ceux [déjà fournis par Zola][built-in]. `video`, `image`, `gif`, et `audio` ont été créés pour vous aider à tirer parti des éléments HTML modernes dans votre écriture.
+
+<!-- more -->
+
+## Vidéo
+
+Le `video` shortcode prend un `sources` paramètre (un tableau de chaînes) et renvoie une `<video>` balise. Chaque chaîne du `sources` tableau doit être un chemin vers un fichier vidéo d'un type différent (`webm`, `mp4`, etc). Chaque source individuelle est ensuite convertie en `<source>` balise et l'élément est renvoyé.
+
+### Usage
+```rs
+{{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
+```
+### Sortir
+```html
+{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+```
+{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+
+## Image
+
+Le `image` shortcode renvoie une `<picture>` balise et accepte trois paramètres : `sources` (un tableau de chaînes), `fallback_path`, et `fallback_alt` (les deux chaînes).
+
+Chaque chaîne du `sources` tableau doit être un chemin vers un fichier image d'un type différent (`avif`, `webp`, `png`, `jpg`, etc). `fpath` et
+`falt` sont utilisés pour créer une `<img>` balise sur laquelle le navigateur peut se replier si les autres formats ne sont pas encore pris en charge, fw et fh définissent la largeur et la hauteur de la solution de repli
+
+### Usage
+```rs
+{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
+```
+### Sortir
+```html
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+```
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+
+## GIF
+
+Le `gif` shortcode est exactement le même que le [shortcode vidéo][video]
+– il prend un tableau de chaînes appelées `sources` et renvoie une `<video>` balise. La seule différence réside dans la balise la plus à l'extérieur, qui a quatre propriétés supplémentaires : `autoplay`, `loop`, `muted`, `playsinline`.
+
+L'utilisation de la `<video>` balise à la place des gifs permet de réduire la taille des fichiers, ce qui est particulièrement important dans les régions où Internet est plus lent ou moins fiable.
+
+### Usage
+```rs
+{{/* gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
+```
+### Sortir
+```html
+{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+```
+{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+
+## l'audio
+
+Le `audio` shortcode prend un `sources` tableau de chaînes et renvoie une `<audio>` balise. Chaque chaîne du `sources` tableau doit être un chemin vers un fichier audio d'un type différent (`ogg`, `mp3`, `flac`, `wav`, etc). Le navigateur jouera le premier type qu'il prend en charge, donc les placer dans l'ordre de la taille la plus petite à la plus grande utilisera le moins de bande passante si tel est votre objectif.
+
+### Usage
+```rs
+{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}}
+```
+### Sortir
+```html
+{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}
+```
+{{ audio(sources=["over9000.ogg", "over9000.mp3"]) }}
+
+[built-in]: https://www.getzola.org/documentation/content/shortcodes/#built-in-shortcodes
+[video]: @/overview-rich-content/index.md#video
diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md
index 6e5d1b8..4dc2285 100644
--- a/content/overview-rich-content/index.md
+++ b/content/overview-rich-content/index.md
@@ -1,7 +1,7 @@
 +++
 title = "Rich Content"
 description = "A brief description of custom Shortcodes for Zola that implement modern html elements: video, image, gif, audio."
-date = 2021-05-18
+date = 2021-05-15
 draft = false
 
 [taxonomies]
@@ -41,19 +41,19 @@ parameters: `sources` (an array of strings), `fallback_path`, and
 `fallback_alt` (both strings).
 
 Each string in the `sources` array should be a path to an image file of
-a different type (`webp`, `png`, `jpg`, etc). `fpath` and
+a different type (`avif`, `webp`, `png`, `jpg`, etc). `fpath` and
 `falt` are used to create an `<img>` tag for the browser to fall
 back on if the other formats aren't yet supported, fw and fh set the width and height of the fallback
 
 ### Usage
 ```rs
-{{/* image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
+{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
 ```
 ### Output
 ```html
-{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
 ```
-{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
 
 ## GIF
 
diff --git a/content/overview-rich-content/over9000-400.avif b/content/overview-rich-content/over9000-400.avif
new file mode 100644
index 0000000..e4c6b1d
--- /dev/null
+++ b/content/overview-rich-content/over9000-400.avif
diff --git a/content/overview-rich-content/over9000-400.webp b/content/overview-rich-content/over9000-400.webp
deleted file mode 100644
index 1b2876f..0000000
--- a/content/overview-rich-content/over9000-400.webp
+++ /dev/null
diff --git a/content/overview-rich-content/over9000-640.avif b/content/overview-rich-content/over9000-640.avif
new file mode 100644
index 0000000..38d314b
--- /dev/null
+++ b/content/overview-rich-content/over9000-640.avif
diff --git a/content/overview-rich-content/over9000-960.avif b/content/overview-rich-content/over9000-960.avif
new file mode 100644
index 0000000..ae3584d
--- /dev/null
+++ b/content/overview-rich-content/over9000-960.avif
diff --git a/content/overview-rich-content/over9000-960.webp b/content/overview-rich-content/over9000-960.webp
deleted file mode 100644
index 28fba9c..0000000
--- a/content/overview-rich-content/over9000-960.webp
+++ /dev/null