Add multi-lingual Support

14 files changed, 1016 insertions, 1 deletions

diff --git a/content/_index.fr.md b/content/_index.fr.md
new file mode 100644
index 0000000..3511f76
--- /dev/null
+++ b/content/_index.fr.md
@@ -0,0 +1,4 @@
++++
+paginate_by = 3
+sort_by = "date"
++++
diff --git a/content/overview-abridge.fr.md b/content/overview-abridge.fr.md
new file mode 100644
index 0000000..d38ced9
--- /dev/null
+++ b/content/overview-abridge.fr.md
@@ -0,0 +1,26 @@
++++
+title = "Abridge Zola Thème"
+date = 2022-05-17
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["config"]
++++
+
+Abridge est un thème Zola rapide et léger utilisant du HTML sémantique, seulement ~6kb css avant les icônes svg et la coloration syntaxique, pas de JS obligatoire, et des scores parfaits [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), et [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. Voici une page [de références des thèmes Zola](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md).
+<!-- more -->
+Pour une configuration rapide, copiez le fichier config.toml du thème abrégé à la racine de votre site zola, cela vous donnera une configuration de base avec toutes les valeurs de configuration utilisées.
+
+Vous pouvez ensuite modifier ou commenter les valeurs de ce fichier si nécessaire.
+
+Vous devez également décommenter la ligne #theme = "abridge" dans votre fichier racine zola config.toml. Cela indique à votre site racine zola d'utiliser le thème abrégé dans le dossier des thèmes.
+
+Vous pouvez définir le nombre d'éléments qui apparaissent sur la page d'accueil en modifiant `themes\abridge\content\_index.md` le fichier et en ajustant `paginate_by = 5`
+
+Vous pouvez définir la largeur globale de la page en éditant `themes\abridge\sass\_variables.scss` le fichier et en ajustant ces deux lignes:
+
+```scss
+$mw:50% !default;// largeur maximale
+$mb:1200px !default;// valeur à laquelle passer de la disposition fluide à l'utilisation de la largeur maximale
+```
diff --git a/content/overview-code-blocks.fr.md b/content/overview-code-blocks.fr.md
new file mode 100644
index 0000000..e527251
--- /dev/null
+++ b/content/overview-code-blocks.fr.md
@@ -0,0 +1,295 @@
++++
+title = "Blocs de code et thèmes"
+description = "Exemple d'article présentant la coloration syntaxique et la mise en forme des blocs de code avec un thème personnalisé."
+date = 2022-05-16
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["Markdown"]
+[extra]
+toc = true
+keywords = "Code, Code Blocks, Syntax, Syntax Highlighting, Theme"
++++
+
+Cet article présente différents Code Blocks permettant de comparer facilement des thèmes sublimes.
+<!-- more -->
+## Blocs de codes
+
+Blocs de code.. ❤️ avec coloration syntaxique automatique ✨‍
+
+Voir [les docs](https://www.getzola.org/documentation/content/syntax-highlighting/) pour les options.
+
+### Bloc de code en ligne
+
+Si nous voulons, nous pouvons aussi `spécifier le code en ligne` ce qui est utile pour `les petites choses`.
+
+### rust
+```rust,linenos,hl_lines=3
+//! jelly-actix-web-starter - Un modèle de démarrage pour les projets actix-web qui ressemble beaucoup à Django. Évitez les trucs ennuyeux et avancez plus vite.
+
+use jelly::actix_web;
+use mainlib;
+use std::io;
+
+#[actix_web::main]
+async fn main() -> io::Result<()> {
+    mainlib::main().await
+}
+
+let context = Context::new();
+```
+
+### TOML
+```toml,linenos,hl_lines=3
+base_url = "https://abridge.netlify.app/"
+title = "Abridge"
+description = "Abridge est un thème Zola rapide et léger utilisant le HTML sémantique, le CSS abridge.css class-light et aucun JS obligatoire."
+default_language = "en"
+#theme = "abridge"
+
+build_search_index = true
+minify_html = false
+feed_filename = "atom.xml"
+taxonomies = [
+    {name = "categories", feed = true},
+    {name = "tags", feed = true},
+]
+```
+
+### html
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <!--Main Content Area-->
+  <p>Test</p>
+</body>
+</html>
+```
+
+### javascript
+```javascript
+function closeSearch() {//close the search displaying the regular page.
+    const e = document.querySelector("main");
+    e.innerHTML = window.main
+}
+
+function goSearch() {// on enter key or search icon click display results to the page.
+    const e = document.querySelector("main");
+    window.main || (window.main = e.innerHTML);
+    var t = document.getElementById("suggestions"),
+        n = ((ResultsClone = t.cloneNode(!0)).id = "results", document.createElement("div")),
+        o = '<h2><button type="button" title="Close Search" onclick="closeSearch()"><i class="svgs x"></i></button> Results For: '.concat(document.getElementById("searchinput").value, "</h2>");
+    return n.innerHTML = o, ResultsClone.insertBefore(n, ResultsClone.firstChild), e.innerHTML = ResultsClone.outerHTML, t.innerHTML = "", document.getElementById("searchinput").value = "", !1
+}! function() {
+  // search function code goes here
+}
+```
+
+### php
+```php
+<?php
+/**
+ * Postfix Admin
+ */
+require_once('common.php');
+$CONF = Config::getInstance()->getAll();
+
+if ($_SERVER['REQUEST_METHOD'] == "POST") {
+    if (!isset($_SESSION['PFA_token'])) {
+        die("Invalid token (session timeout; refresh the page and try again?)");
+    }
+    $fUsername = trim(safepost('fUsername'));
+    if ($lang != check_language(false)) { # only set cookie if language selection was changed
+        setcookie('lang', $lang, time() + 60*60*24*30); # language cookie, lifetime 30 days
+    }
+}
+
+$_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true));
+
+/* vim: set expandtab softtabstop=4 tabstop=4 shiftwidth=4: */
+```
+
+
+### json
+```json
+{
+    "name": "Abridge Zola Theme",
+    "short_name": "Abridge",
+    "description": "Fast & Lightweight Zola Theme",
+    "start_url": "/index.html",
+    "scope": "/",
+    "background_color": "#111111",
+    "theme_color": "#222222",
+    "display": "standalone",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-192x192m.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}
+```
+
+### SQL
+```sql
+-- jelly-actix-web-starter - Creates an accounts table, along with some associated helpers.
+
+create or replace function update_timestamp() returns trigger as $$
+begin
+    new.updated = now();
+    return new;
+end;
+$$ language 'plpgsql';
+
+create table if not exists accounts (
+    id serial primary key,
+    name text not null,
+    email text not null unique,
+    password text not null,
+    profile jsonb not null default '{}',
+    plan integer not null default 0,
+    is_active boolean not null default true,
+    is_admin boolean not null default false,
+    has_verified_email boolean not null default false,
+    last_login timestamp with time zone,
+    created timestamp with time zone not null default now(),
+    updated timestamp with time zone not null default now()
+);
+
+create unique index accounts_unique_lower_email_idx on accounts (lower(email));
+
+create trigger user_updated before insert or update on accounts
+for each row execute procedure update_timestamp();
+```
+
+### Lua
+```lua
+function square(x)
+    return x * x
+end
+
+print(square(2)) -- prints '4'
+
+function getPlayerInformation()
+   playerName = UnitName("player")
+   playerLevel = UnitLevel("player")
+   specId, specName = GetSpecializationInfo(GetSpecialization())
+
+   return "Hey, I'm " .. playerName .. " (Level " .. playerLevel .. "). I'm currently in spec " .. specName .. "."
+end
+
+print(getPlayerInformation())
+```
+
+### C
+```c
+#include <stdio.h>
+int main() {
+    int a;
+    /* actual initialization */
+    a = 10;
+    printf("Hello, World!");
+    return 0;
+}
+```
+
+### C++
+```cpp
+// Your First C++ Program
+
+#include <iostream>
+
+int main() {
+    int a;
+    /* actual initialization */
+    a = 10;
+    std::cout << "Hello World!";
+    return 0;
+}
+```
+
+### Go
+```go
+package main
+
+import "fmt"
+
+func main() {
+    var myvariable1 = 20
+    var myvariable2 = "hello world"
+    fmt.Println("hello world")
+}
+```
+
+### Python
+```python
+#!/usr/bin/env python3
+import smtplib, socket
+from influxdb import InfluxDBClient
+
+while True:
+    send = 1
+    later = time.time() + 25200
+    iso = time.ctime(later)
+    tempF = round(bme280.temperature * 1.8 + 29, 3) #C to F formula is +32, difference is to correct bme280 temperature offset
+    humidity = round(bme280.humidity, 3)
+    pressure = round(bme280.pressure, 3)
+    # serialize data as JSON
+    data = [
+        {
+          "measurement": measurement,
+              "tags": {
+                  "location": location,
+              },
+              "time": iso,
+              "fields": {
+                  "temperature" : tempF,
+                  "humidity": humidity,
+                  "pressure": pressure
+                               }
+          }
+        ]
+    # Send the JSON data to InfluxDB
+    try:
+      client.write_points(data)
+    except socket.error as e:
+      print("Could Not Connect to InfluxDB!")
+    if tempF > 90 and humidity > 55:
+      emailSubject = "Humidity>55:  " + str(int(humidity)) + "%H  , Temperature>90:  " + str(int(tempF)) + "F"
+      emailContent = 'Humidity:  ' + str(int(humidity)) + '%H  , Temperature:  ' + str(int(tempF)) + 'F  <a href="https://metrics.example.com">Dashboard</a>'
+    elif humidity > 55:
+      emailSubject = "Humidity>55:  " + str(int(humidity)) + "%H"
+      emailContent = 'Humidity:  ' + str(int(humidity)) + '%H  , Temperature:  ' + str(int(tempF)) + 'F  <a href="https://metrics.example.com">Dashboard</a>'
+    elif tempF > 90:
+      emailSubject = "Temperature>90:  " + str(int(tempF)) + "F"
+      emailContent = 'Humidity:  ' + str(int(humidity)) + '%H  , Temperature:  ' + str(int(tempF)) + 'F  <a href="https://metrics.example.com">Dashboard</a>'
+    else:
+      send = 0
+    if send == 1:
+      try:
+        if time.time() > lastEmailTime or abs(lastTemp-int(tempF)) > 1:
+          lastEmailTime = time.time()+emailInterval
+          lastTemp = int(tempF)
+          sender.sendmail('jake@example.com', emailSubject, emailContent)
+      except socket.error as e:
+        print("Could Not Connect to SMTP server!")
+    time.sleep(interval)
+```
diff --git a/content/overview-embedded-vimeo.fr.md b/content/overview-embedded-vimeo.fr.md
new file mode 100644
index 0000000..ef29b86
--- /dev/null
+++ b/content/overview-embedded-vimeo.fr.md
@@ -0,0 +1,29 @@
++++
+title = "Vidéos Vimeo intégrées"
+description = "Exemple d'article présentant un code abrégé Zola personnalisé pour intégrer des vidéos Vimeo dans vos pages."
+date = 2021-05-07
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["shortcodes","video"]
+[extra]
+keywords = "Video, Shortcodes, Embed, Embedded, Vimeo"
++++
+
+Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exemple montre vimeo.
+<!-- more -->
+
+## Vimeo
+
+with `vm(id="id_here")`
+
+- `id`: l'identifiant de la vidéo (obligatoire)
+- `class`: une classe à ajouter au &lt;div&gt; entourant l'iframe (optionnel)
+- `autoplay`: lorsqu'il est défini sur "true", la vidéo se lance automatiquement au chargement (facultatif)
+- `loop`: lorsqu'il est défini sur "true", la vidéo est lue en boucle (optionnel)
+- `noautopause`: lorsqu'il est défini sur "true", la vidéo ne s'arrêtera pas automatiquement (optionnel)
+- `title` - définir le titre alt pour l'iframe (facultatif, par défaut sur "Vimeo")
+- `cookie` - défini sur "true" si vous voulez des cookies de suivi, sinon il est par défaut sur false.
+
+{{ vm(id="514402648") }}
diff --git a/content/overview-embedded-youtube.fr.md b/content/overview-embedded-youtube.fr.md
new file mode 100644
index 0000000..b1c8cab
--- /dev/null
+++ b/content/overview-embedded-youtube.fr.md
@@ -0,0 +1,28 @@
++++
+title = "Vidéos Youtube intégrées"
+description = "Exemple d'article présentant un code court Zola personnalisé pour intégrer des vidéos Youtube dans vos pages."
+date = 2021-05-08
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["shortcodes","video"]
+[extra]
+keywords = "Video, Shortcodes, Embed, Embedded, Youtube"
++++
+
+Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exemple montre youtube.
+<!-- more -->
+
+## Youtube
+
+avec `yt(id="the_id_here")`
+
+- `id`: l'identifiant de la vidéo (obligatoire)
+- `playlist`: l'identifiant de la playlist (optionnel)
+- `class`: une classe à ajouter au &lt;div&gt; entourant l'iframe (optionnel)
+- `autoplay`: lorsqu'il est défini sur "true", la vidéo se lance automatiquement au chargement (facultatif)
+- `title` - définir le titre alt pour l'iframe (facultatif, par défaut sur "Youtube")
+- `cookie` - défini sur "true" si vous voulez des cookies de suivi, sinon il est par défaut sur false.
+
+{{ yt(id="32gyFIWecuw") }}
diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md
new file mode 100644
index 0000000..130b061
--- /dev/null
+++ b/content/overview-images/index.fr.md
@@ -0,0 +1,107 @@
++++
+title = "Codes courts d'image"
+description = "Les images peuvent être intégrées directement à l'aide de markdown `![Ferris](ferris.svg)`, mais l'utilisation d'un shortcode empêche CLS en définissant explicitement la largeur et la hauteur."
+date = 2021-05-19
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["shortcodes","images"]
+[extra]
+toc = true
+keywords = "Image, Markdown, Shortcodes, Hover"
+thumbnail = "ferris-gesture.png"
++++
+
+Cet article couvre les **shortcodes imghover et img**. Les images peuvent également être intégrées directement à l'aide de markdown `![Ferris](ferris.svg)`, mais il est préférable d'utiliser un shortcode afin de pouvoir définir explicitement la largeur et la hauteur, cela aidera à empêcher le changement de mise en page du contenu, ce qui améliore l'expérience utilisateur et le score Google Lighthouse.
+<!-- more -->
+
+# img Shortcode
+
+- src est le chemin et le nom de fichier de l'image. (obligatoire)
+- class définit une classe pour l'image. (facultatif)
+- alt définit la note alt pour l'image. (recommandé pour google phare)
+- w est la largeur de l'image. (recommandé pour google phare)
+- h est la hauteur de l'image. (recommandé pour google phare)
+
+## Utilisation (même chemin)
+```rs
+{{/* img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) */}}
+```
+**Sortir**
+```html
+{{ img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) }}
+```
+{{ img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) }}
+
+## Utilisation (chemin relatif ./)
+```rs
+{{/* img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) */}}
+```
+**Sortir**
+```html
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) }}
+```
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) }}
+
+## Utilisation (chemin racine /)
+```rs
+{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) */}}
+```
+**Sortir**
+```html
+{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) }}
+```
+{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) }}
+
+# Image SVG directement dans le code :
+```html
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
+```
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
+
+
+# imghover Shortcode
+
+La première image du tableau src est celle comparée à toutes les autres.
+
+Lorsque vous passez votre souris sur une image, celle-ci affiche l'image à comparer.
+
+Cela peut être utilisé pour comparer une seule image avec une autre en passant seulement deux src dans le tableau.
+
+- src est un tableau de chemins et de noms de fichiers pour les images. (obligatoire)
+- w est la largeur de l'image.
+- h est la hauteur de l'image.
+- p est la taille en pourcentage que vous souhaitez que l'image utilise sur la page. (50 est la valeur par défaut)
+
+*w et h ne sont utilisés que pour calculer le rapport d'aspect, la taille globale est définie par p*
+
+## Utilisation (même chemin)
+```rs
+{{/* imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) */}}
+```
+**Sortir**
+```html
+{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }}
+
+## Utilisation (chemin relatif ./)
+```rs
+{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}}
+```
+**Sortir**
+```html
+{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }}
+
+## Utilisation (chemin racine /)
+```rs
+{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}}
+```
+**Sortir**
+```html
+{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }}
diff --git a/content/overview-markdown-and-style.fr.md b/content/overview-markdown-and-style.fr.md
new file mode 100644
index 0000000..827c2e6
--- /dev/null
+++ b/content/overview-markdown-and-style.fr.md
@@ -0,0 +1,286 @@
++++
+title = "Markdown et Style"
+description = "Exemple d'article présentant la syntaxe et le formatage de base de Markdown pour les éléments HTML."
+date = 2022-05-15
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["Markdown"]
+[extra]
+toc = true
+keywords = "Markdown, Style, Syntax, Syntax Highlighting"
++++
+
+Cet article propose un exemple de syntaxe Markdown de base pouvant être utilisée dans les fichiers de contenu Zola. Il indique également si les éléments HTML de base sont décorés avec CSS dans un thème Zola.
+<!-- more -->
+# Rubriques
+
+Les éléments HTML `<h1>`—`<h6>` suivants représentent six niveaux d'en-têtes de section.
+`<h1>` est le niveau de section le plus élevé alors qu'il `<h6>` est le plus bas.
+
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+# Paragraphe
+
+Xerum, quo qui aut unt expliquéam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur ? Quianimin porecus evelectrur, cum que nis nust voloribus ratem aut omnimi, sitatur ? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
+
+Itatur ? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia est sinveli squiatum, core et que aut hariosam ex eat.
+
+# Citations en bloc
+
+L'élément blockquote représente le contenu qui est cité à partir d'une autre source, éventuellement avec une citation qui doit être dans un élément `footer` ou `cite` et éventuellement avec des modifications en ligne telles que des annotations et des abréviations.
+
+## Blockquote sans attribution
+
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
+> **Notez** que vous pouvez utiliser *la syntaxe Markdown* dans un blockquote.
+
+## Blockquote avec attribution
+
+> Ne communiquez pas en partageant la mémoire, partagez la mémoire en communiquant.<br>
+> — <cite>Rob Pike[^1]</cite>
+
+> Tous les hommes, par nature, désirent savoir.<br>
+> ― <cite>Aristotle[^2]</cite>
+
+> Le pouvoir vient en réponse à un besoin, pas à un désir.<br>
+> — *Goku*
+
+# Les Tables
+
+Les tables ne font pas partie de la spécification principale de Markdown, mais Zola les prend en charge prêtes à l'emploi.
+
+    Nom | Âge
+--------|------
+  Alice | 23
+    Bob | 27
+   Cody | 33
+   John | 59
+  Kerry | 23
+
+## Tableau avec Markdown en ligne
+
+| Italique   | Gras     | Code   | Barré     |
+| --------  | -------- | ------ | ----------------- |
+| *italique* | **gras** | `code` | ~~barré~~ |
+
+
+## Grand tableau dans l'étiquette de la figure
+
+Entourez les très grandes tables `<figure></figure>` pour qu'elles puissent défiler horizontalement.
+<figure>
+
+| **Fabricant** | Volkswagen | Toyota | Ford | Honda | Chevrolet | BMW | Hyundai | Audi | Nissan | Kia | Mercedes | Tesla | Mitsubishi | Suzuki | Volvo | Subaru | Mazda | Jaguar | Buick | Lexus | GMC | Porsche | Cadillac |
+| ---------- | ---- | ---- | ---- | ---- | ---- | ---- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| **Revenu $B** | $254 | $249 | $127 | $124 | $123 | $113 | $88 | $83 | $74 | $61 | $55 | $54 | $38 | $31 | $30 | $28 | $27 | $22 | $21 | $19 | $17 | $16 | $12 |
+
+</figure>
+*valeurs de revenus trouvées sur le moteur de recherche et non vérifiées, uniquement à des fins de démonstration du tableau de défilement des figures.*
+
+# Texte pliable
+
+<details>
+    <summary>Titre 1</summary>
+    <p>C'EST UN SECRET POUR TOUT LE MONDE.</p>
+</details>
+
+<details>
+    <summary>Titre 2</summary>
+    <p>Reste un moment et écoute!</p>
+</details>
+
+# Blocs de codes
+
+Blocs de code.. ❤️ avec coloration syntaxique automatique ✨‍
+
+Voir [les docs](https://www.getzola.org/documentation/content/syntax-highlighting/) pour les options.
+
+## Bloc de code avec backticks
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+```
+
+## Numéros de ligne, mise en surbrillance
+
+```html,linenos,hl_lines=5 7-9
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+```
+
+## Bloc de code en ligne
+
+Si nous voulons, nous pouvons aussi `spécifier le code en ligne` ce qui est utile pour `les petites choses`.
+
+# Types de liste
+
+## Liste ordonnée
+
+1. Premier élément
+2. Deuxième élément
+3. Troisième élément
+
+## Liste non ordonnée
+
+- Élément de liste
+- Un autre article
+- Et un autre article
+
+## Liste imbriquée
+
+- Fruit
+  - Pomme
+  - Orange
+  - Banane
+- Laitier
+  - Lait
+  - Fromage
+
+# Autres éléments — abbr, sub, sup, kbd, mark, link
+
+<abbr title="Graphics Interchange Format">GIF</abbr> est un format d'image bitmap.
+
+H<sub>2</sub>O
+
+X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
+
+Appuyez sur pour terminer la session. <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd>
+
+La plupart <mark>salamanders</mark> sont nocturnes et chassent les insectes, les vers et autres petites créatures.
+
+---
+<!-- Note: There must be a blank line between every two lines of the footnote definition.  -->
+[^1]: La citation ci-dessus est extraite du [discours](https://www.youtube.com/watch?v=PAAkCSZUG1c)
+de Rob Pike lors du Gopherfest, le 18 novembre 2015.
+
+[^2]: La citation est la première phrase de [la Métaphysique](https://en.wikipedia.org/wiki/Metaphysics_(Aristotle)) d'Aristotle.
+
+## Navs
+
+Le menu principal du site est créé en imbriquant la navigation sous une balise d'en-tête. Reportez-vous au haut de ce site pour un exemple.
+
+Si la balise de navigation se trouve sous la balise principale au lieu de la balise d'en-tête, les liens auront une bordure :
+
+<header>
+    <nav>
+        <ul>
+            <li><a href="#">&#60; Précédent</a></li>
+            <li><a href="#">Suivant &#62;</a></li>
+        </ul>
+    </nav>
+</header>
+
+## Formes
+
+<form name="contact" method="POST" >
+    <p><label for="name">Nom</label>
+        <input type="text" placeholder="Name" id="name" required data-validation-required-message="Please enter your name." />
+    </p>
+    <p><label for="email">Adresse e-mail</label>
+        <input type="email" placeholder="name@example.com" id="email" required data-validation-required-message="Please enter your email address." />
+    </p>
+    <p><label for="message">Message</label>
+        <textarea rows="5" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
+    </p>
+    <div id="success"></div>
+    <p><button type="submit" id="sendMessageButton">Envoyer</button></p>
+    <br>
+    <!-- Select -->
+    <label for="fruit">Fruit</label>
+    <select id="fruit" required>
+        <option value="" selected>Choisissez un fruit…</option>
+        <option>Banane</option>
+        <option>Pastèque</option>
+        <option>Pomme</option>
+        <option>Orange</option>
+        <option>mangue</option>
+    </select>
+    <!-- Radios -->
+    <fieldset>
+        <legend>Taille</legend>
+        <label for="small">
+        <input type="radio" id="small" name="size" value="small" checked>
+        Petit
+        </label>
+        <label for="medium">
+        <input type="radio" id="medium" name="size" value="medium">
+        Moyen
+        </label>
+        <label for="large">
+        <input type="radio" id="large" name="size" value="large">
+        Grand
+        </label>
+        <label for="extralarge">
+        <input type="radio" id="extralarge" name="size" value="extralarge" disabled>
+        Extra Large
+        </label>
+    </fieldset>
+    <!-- Checkboxes -->
+    <fieldset>
+        <label for="terms">
+        <input type="checkbox" id="terms" name="terms">
+        J'accepte les termes et conditions
+        </label>
+        <label for="terms_sharing">
+        <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
+        J'accepte de partager mes informations avec des partenaires
+        </label>
+    </fieldset>
+    <!-- Switches -->
+    <fieldset>
+        <label for="switch">
+        <input type="checkbox" id="switch" name="switch" role="switch">
+        Publier sur mon profil
+        </label>
+        <label for="switch_disabled">
+        <input type="checkbox" id="switch_disabled" name="switch_disabled" disabled checked>
+        Publier sur mon profil mes réalisations
+        </label>
+    </fieldset>
+    <br>
+    <!-- Search -->
+    <input type="search" id="search" name="search" placeholder="Search" title="Search">
+    <!-- File browser -->
+    <label for="file">Navigateur de fichiers
+    <input type="file" id="file" name="file">
+    </label>
+    <!-- Range slider -->
+    <label for="range">Curseur de plage
+    <input type="range" min="0" max="100" value="50" id="range" name="range">
+    </label>
+    <!-- Date -->
+    <label for="date">Date
+    <input type="date" id="date" name="date">
+    </label>
+    <!-- Time -->
+    <label for="time">Temps
+    <input type="time" id="time" name="time">
+    </label>
+    <!-- Color -->
+    <label for="color">Couleur
+    <input type="color" id="color" name="color" value="#0eaaaa">
+    </label>
+</form>
diff --git a/content/overview-markdown-and-style.md b/content/overview-markdown-and-style.md
index befe1ed..78177db 100644
--- a/content/overview-markdown-and-style.md
+++ b/content/overview-markdown-and-style.md
@@ -1,5 +1,5 @@
 +++
-title = "Markdown and Style Guide"
+title = "Markdown and Style"
 description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
 date = 2022-05-15
 draft = false
diff --git a/content/overview-math.fr.md b/content/overview-math.fr.md
new file mode 100644
index 0000000..ed0720a
--- /dev/null
+++ b/content/overview-math.fr.md
@@ -0,0 +1,111 @@
++++
+title = "Notations mathématiques"
+description = "Exemple d'article présentant l'affichage des notations mathématiques, rendu possible par la bibliothèque KaTeX."
+date = 2021-05-05
+updated = 2022-01-01
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["shortcodes","Mathematics"]
+[extra]
+math = true
+math_auto_render = true
+keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation"
++++
+
+Vous pouvez utiliser [KaTeX](https://katex.org) pour rendre des notations mathématiques.
+
+Vous pouvez activer le $\KaTeX$ prise en charge globale, par section ou par page.
+<!-- more -->
+
+## Activer globalement
+
+Pour activer le $\KaTeX$ prise en charge dans le monde entier, ajoutez `math = true` sous `[extra]` à la `config.toml`
+racine de votre site. Maintenant, le shortcode katex sera rendu, vous pouvez également ajouter `math_auto_render = true`
+et chaque section et page de votre site chargera l' [extension KaTeX autorender](https://katex.org/docs/autorender.html).
+
+```toml
+[extra]
+math = true
+math_auto_render = false
+```
+
+## Base par section
+
+Pour activer le $\KaTeX$ support dans une section particulière, ajoutez `math = true` sous `[extra]` dans le fichier `[SECTION_NAME]/_index.md`.
+Maintenant, le shortcode katex sera rendu, vous pouvez également ajouter `math_auto_render = true`
+et la section de votre site chargera l' [extension KaTeX autorender](https://katex.org/docs/autorender.html).
+
+```toml
++++
+[extra]
+math = true
++++
+```
+
+## Base par page
+
+Pour activer le $\KaTeX$ support dans une page particulière, ajouter `math = true` sous `[extra]` dans le frontmatter de la page.
+Maintenant, le shortcode katex sera rendu, vous pouvez également ajouter `math_auto_render = true`
+et la page de votre site chargera l' [extension KaTeX autorender](https://katex.org/docs/autorender.html).
+
+```toml
++++
+[extra]
+math = true
+math_auto_render = true
++++
+```
+
+C'est une bonne pratique de permettre $\KaTeX$ prise en charge par page, car cela ne chargera que les fichiers requis sur cette page particulière, sans affecter la vitesse de chargement des autres pages. Si votre site n'est pas lourd en mathématiques, veuillez ne PAS activer cette fonctionnalité globalement ou par section.
+
+## Usage
+
+Enveloppez tout [valide](https://katex.org/docs/supported.html) $\KaTeX$ syntaxe avec `$...$` pour les mathématiques en ligne et `$$...$$` pour les mathématiques par blocs.
+
+### Mathématiques en ligne
+
+C'est la plus belle équation que j'aie jamais vue :
+
+### Usage
+```rs
+{%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%}
+```
+### Sortir
+```html
+{% katex(block=false) %} e^{i\pi}+1=0 {% end %}
+```
+{% katex(block=false) %} e^{i\pi}+1=0 {% end %}
+
+### Bloc Mathématiques
+
+Quelques Mathématiques en mode affichage sont assez justes :
+
+### Usage
+```rs
+{%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%}
+```
+### Sortir
+```html
+{% katex(block=true) %} \int_0^1 x^2 dx {% end %}
+```
+{% katex(block=true) %} \int_0^1 x^2 dx {% end %}
+
+### Exemple de rendu automatique en ligne
+```
+$ e^{i\pi}+1=0 $
+```
+
+$ e^{i\pi}+1=0 $
+
+### Exemple de bloc de rendu automatique
+```
+$$
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+$$
+```
+
+$$
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+$$
diff --git a/content/overview-rich-content/index.fr.md b/content/overview-rich-content/index.fr.md
new file mode 100644
index 0000000..43425fa
--- /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-18
+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 (`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.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
+```
+### Sortir
+```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.webp", "over9000-640.webp", "over9000-400.webp"], 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/pages/about.fr.md b/content/pages/about.fr.md
new file mode 100644
index 0000000..94989bb
--- /dev/null
+++ b/content/pages/about.fr.md
@@ -0,0 +1,21 @@
++++
+title = "À propos"
+path = "fr/about"
+template = "pages.html"
+draft = false
++++
+
+Ce site fournit une démo pour le thème [Abridge](https://github.com/Jieiku/abridge) de [Zola](https://www.getzola.org/), le générateur de site statique.
+
+Abridge a été créé par [Jake G (jieiku)](https://github.com/Jieiku) pour être rapide et léger, en utilisant du HTML sémantique, un [abridge.css](https://github.com/Jieiku/abridge.css), léger de classe et No Mandatory JS.
+
+Quelques faits amusants sur le thème :
+
+* Note parfaite sur l'audit Lighthouse de Google
+* Seulement ~6 Ko de CSS avant d'activer les icônes SVG CSS et la coloration syntaxique.
+* Pas de JavaScript obligatoire.
+* Maintenant avec le référencement !
+
+Près de la moitié des thèmes Zola MIT existants ont inspiré les fonctionnalités et la conception de ce thème.
+
+Le thème et ce site sont sous licence [MIT](https://opensource.org/licenses/MIT) .
diff --git a/content/pages/contact.fr.md b/content/pages/contact.fr.md
new file mode 100644
index 0000000..cae2626
--- /dev/null
+++ b/content/pages/contact.fr.md
@@ -0,0 +1,7 @@
++++
+title = "Contact"
+description = "Pour nous joindre, veuillez utiliser le formulaire de contact sur cette page."
+path = "fr/contact"
+template = "contact.fr.html"
+draft = false
++++
diff --git a/content/pages/privacy.fr.md b/content/pages/privacy.fr.md
new file mode 100644
index 0000000..3897e12
--- /dev/null
+++ b/content/pages/privacy.fr.md
@@ -0,0 +1,15 @@
++++
+title = "politique de confidentialité"
+description = "Cette page décrit la politique de confidentialité de ce site et la date à laquelle cette politique a été mise en vigueur."
+path = "fr/privacy"
+template = "pages.html"
+draft = false
++++
+
+## Confidentialité
+
+- Ce site ne crée ni n'utilise de cookies.
+- Ce site ne stocke pas de données dans le navigateur pour être partagées, envoyées ou vendues à des tiers.
+- Aucune information personnelle n'est partagée, envoyée ou vendue à des tiers.
+
+**Date d'entrée en vigueur:** _1er janvier 2022_
diff --git a/content/posts/_index.fr.md b/content/posts/_index.fr.md
new file mode 100644
index 0000000..e381261
--- /dev/null
+++ b/content/posts/_index.fr.md
@@ -0,0 +1,4 @@
++++
+title = "posts"
+template = "posts.html"
++++