resolve merge conflicts

38 files changed, 1496 insertions, 31 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/archive/_index.fr.md b/content/archive/_index.fr.md
new file mode 100644
index 0000000..b1a35cf
--- /dev/null
+++ b/content/archive/_index.fr.md
@@ -0,0 +1,3 @@
++++
+template = "archive.html"
++++
diff --git a/content/archive/_index.md b/content/archive/_index.md
new file mode 100644
index 0000000..b1a35cf
--- /dev/null
+++ b/content/archive/_index.md
@@ -0,0 +1,3 @@
++++
+template = "archive.html"
++++
diff --git a/content/blog/_index.fr.md b/content/blog/_index.fr.md
new file mode 100644
index 0000000..0b72ce0
--- /dev/null
+++ b/content/blog/_index.fr.md
@@ -0,0 +1,5 @@
++++
+template = "index.html"
+paginate_by = 3
+sort_by = "date"
++++
diff --git a/content/blog/_index.md b/content/blog/_index.md
new file mode 100644
index 0000000..0b72ce0
--- /dev/null
+++ b/content/blog/_index.md
@@ -0,0 +1,5 @@
++++
+template = "index.html"
+paginate_by = 3
+sort_by = "date"
++++
diff --git a/content/blog/blog-section.fr.md b/content/blog/blog-section.fr.md
new file mode 100644
index 0000000..6c1fe97
--- /dev/null
+++ b/content/blog/blog-section.fr.md
@@ -0,0 +1,29 @@
++++
+title = "Blog Section"
+date = 2021-05-04
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["config"]
++++
+
+Vous pouvez placer votre contenu dans content/blog/ au lieu de content/ cela fera des URL de publication example.com/blog/post-title
+<!-- more -->
+Dans le répertoire du blog, vous verrez le _index.md:
+
+```md
++++
+template = "index.html"
+paginate_by = 3
+sort_by = "date"
++++
+```
+
+Au lieu de index.html, vous pouvez également spécifier archive.html, les deux modèles prennent en charge les sections:
+
+```md
++++
+template = "archive.html"
++++
+```
diff --git a/content/blog/blog-section.md b/content/blog/blog-section.md
new file mode 100644
index 0000000..71bb0f5
--- /dev/null
+++ b/content/blog/blog-section.md
@@ -0,0 +1,29 @@
++++
+title = "Blog Section"
+date = 2021-05-04
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["config"]
++++
+
+You can place your content in content/blog/ instead of content/ this will make post urls example.com/blog/post-title
+<!-- more -->
+In the blog directory you will see the _index.md:
+
+```md
++++
+template = "index.html"
+paginate_by = 3
+sort_by = "date"
++++
+```
+
+Instead of index.html you can also specify archive.html, both templates support sections:
+
+```md
++++
+template = "archive.html"
++++
+```
diff --git a/content/overview-abridge.fr.md b/content/overview-abridge.fr.md
new file mode 100644
index 0000000..388ff69
--- /dev/null
+++ b/content/overview-abridge.fr.md
@@ -0,0 +1,65 @@
++++
+title = "Abridge Zola Thème"
+date = 2022-05-17
+updated = 2023-07-21
+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.
+
+## Pagination
+
+Vous pouvez définir le nombre d'éléments qui apparaissent sur la page d'accueil en modifiant `content\_index.md` le fichier et en ajustant `paginate_by = 3`
+
+## Sass Overrides
+
+Les variables SCSS abrégées peuvent être remplacées en modifiant `sass\abridge.scss` fichier dans le dossier sass racine de votre projet.
+
+### Page Width
+
+```scss
+$mw:75%,// largeur maximale
+```
+
+### Abridge Theme Modes
+
+```scss
+$abridgeMode: "switcher",//valeurs valides : switcher, auto, dark, light
+```
+
+### Colors and Styles
+
+Vous pouvez spécifier le modèle de couleur que vous souhaitez utiliser comme base:
+```scss
+$color: "orange",// modèle de couleur à utiliser/remplacer: orange, blue, blueshade
+```
+
+Remplacez ensuite les couleurs individuelles si nécessaire:
+```scss
+/// Dark Colors
+$f1d: #ccc,// Font Color Primary
+$f2d: #ddd,// Font Color Headers
+$c1d: #111,// Background Color Primary
+$c2d: #222,// Background Color Secondary
+...
+```
+
+### Footer Social Icons
+
+Vous devez configurer les icônes sociales que vous prévoyez d'utiliser. (rend la taille du fichier css plus petite)
+
+Pour les désactiver tous simplement, vous pouvez définir `$enable-icons: false`
+
+Sinon, activez uniquement les icônes dont vous avez besoin, par exemple pour le courrier que vous définiriez `$icon-mail: true`
+
+Vous devez ensuite désactiver toutes les icônes que vous n'utilisez pas.
diff --git a/content/overview-abridge.md b/content/overview-abridge.md
index 93e740b..e3f0b58 100644
--- a/content/overview-abridge.md
+++ b/content/overview-abridge.md
@@ -1,6 +1,7 @@
 +++
 title = "Abridge Zola Theme"
 date = 2022-05-17
+updated = 2023-07-21
 draft = false
 
 [taxonomies]
@@ -16,11 +17,49 @@ You can then edit or comment out the values in this file as necessary.
 
 You should also uncomment out the line #theme = "abridge" in your root zola config.toml file. This tells your root zola site to use the abridge theme in the themes folder.
 
-You can set the number of items that appear on the home page by editing `themes\abridge\content\_index.md` file and adjusting `paginate_by = 5`
+## Pagination
 
-You can set the overal page width by editing `themes\abridge\sass\_variables.scss` file, and adjusting these two lines:
+You can set the number of items that appear on the home page by editing `content\_index.md` file and adjusting `paginate_by = 3`
+
+## Sass Overrides
+
+Abridge SCSS variables can be overrided by editing `sass\abridge.scss` file in your project's root sass folder.
+
+### Page Width
+
+```scss
+$mw:75%,// max-width
+```
+
+### Abridge Theme Modes
 
 ```scss
-$mw:50% !default;// max-width
-$mb:1200px !default;// value at which to switch from fluid layout to using max-width
+$abridgeMode: "switcher",//valid values: switcher, auto, dark, light
 ```
+
+### Colors and Styles
+
+You can specify which color template you want to use as a base:
+```scss
+$color: "orange",// color template to use/override: orange, blue, blueshade
+```
+
+Then override individual colors as needed:
+```scss
+/// Dark Colors
+$f1d: #ccc,// Font Color Primary
+$f2d: #ddd,// Font Color Headers
+$c1d: #111,// Background Color Primary
+$c2d: #222,// Background Color Secondary
+...
+```
+
+### Footer Social Icons
+
+You should configure which social icons you plan to use. (makes the css file size smaller)
+
+To simply turn them all off you can set `$enable-icons: false`
+
+Otherwise enable only the icons you need, eg for mail you would set `$icon-mail: true`
+
+You should then disable all the icons that you do not use.
diff --git a/content/overview-code-blocks.fr.md b/content/overview-code-blocks.fr.md
new file mode 100644
index 0000000..b640069
--- /dev/null
+++ b/content/overview-code-blocks.fr.md
@@ -0,0 +1,377 @@
++++
+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
+fn main() {
+    let greetings = ["Hello", "Hola", "Bonjour",
+                     "Ciao", "こんにちは", "안녕하세요",
+                     "Cześć", "Olá", "Здравствуйте",
+                     "Chào bạn", "您好", "Hallo",
+                     "Hej", "Ahoj", "سلام",
+                     "Hej", "Hallo", "Hei",
+                     "Helló", "Hallo", "Buna ziua",
+                     "Merhaba"];
+
+    for (num, greeting) in greetings.iter().enumerate() {
+        print!("{} : ", greeting);
+        match num {
+            0 =>  println!("This code is editable and runnable!"),//en English
+            1 =>  println!("¡Este código es editable y ejecutable!"),//es Spanish
+            2 =>  println!("Ce code est modifiable et exécutable !"),//fr French
+            3 =>  println!("Questo codice è modificabile ed eseguibile!"),//it Italian
+            4 =>  println!("このコードは編集して実行出来ます！"),//jp Japanese
+            5 =>  println!("여기에서 코드를 수정하고 실행할 수 있습니다!"),//ko Korean
+            6 =>  println!("Ten kod można edytować oraz uruchomić!"),//pl Polish
+            7 =>  println!("Este código é editável e executável!"),//pt Portuguese
+            8 =>  println!("Этот код можно отредактировать и запустить!"),//ru Russian
+            9 =>  println!("Bạn có thể edit và run code trực tiếp!"),//vi Vietnamese
+            10 => println!("这段代码是可以编辑并且能够运行的！"),//zh Chinese
+            11 => println!("Dieser Code kann bearbeitet und ausgeführt werden!"),//de German
+            12 => println!("Den här koden kan redigeras och köras!"),//sv Swedish
+            13 => println!("Tento kód můžete upravit a spustit"),//cs Czech
+            14 => println!("این کد قابلیت ویرایش و اجرا دارد!"),//fa Persian
+            15 => println!("Denne kode kan redigeres og køres!"),//da Danish
+            16 => println!("Deze code is bewerkbaar en uitvoerbaar!"),//du Dutch
+            17 => println!("Tämä koodi on muokattavissa ja ajettavissa!"),//fi Finnish
+            18 => println!("Ez a kód szerkeszthető és futtatható!"),//hu Hungarian
+            19 => println!("Denne koden er redigerbar og kjørbar!"),//no Norwegian
+            20 => println!("Acest cod este editabil și rulabil!"),//ro Romanian
+            21 => println!("Bu kod düzenlenebilir ve çalıştırılabilir!"),//tr Turkish
+            _ =>  {},
+        }
+    }
+}
+```
+
+### 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>
+```
+
+### CSS
+```css
+html {
+    font-size: var(--fs);
+}
+
+.c {
+    text-align: center;
+}
+```
+
+### SCSS
+```scss
+
+$font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif !default;
+$font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe UI Mono" "DejaVu Sans Mono" "Liberation Mono" "Roboto Mono" "Oxygen Mono" "Ubuntu Monospace" "Ubuntu Mono" "Source Code Pro" "Fira Mono" "Droid Sans Mono" "Courier New" Courier monospace !default;
+
+@mixin font {
+  // convert space separated list to comma separated list
+  $font: list.join($font, "", $separator: comma);
+  $font: functions.remove($font, "");
+  $font-mono: list.join($font-mono, "", $separator: comma);
+  $font-mono: functions.remove($font-mono, "");
+
+  $font: functions.font-var($font, $fontExt-Main, $findFont-Main);
+  $font-mono: functions.font-var($font-mono, $fontExt-Code, $findFont-Code);
+
+  #{--ff}: $font;
+  #{--fm}: $font-mono;//code
+}
+```
+
+### 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)
+```
+
+### Ruby
+```ruby
+=begin
+  Ruby program to check whether the
+  year is leap year or not between range.
+=end
+
+puts "Enter the lower limit:"
+lwr = gets.chomp.to_i
+puts "Enter the upper limit:"
+upr = gets.chomp.to_i
+
+for yr in lwr..upr do
+  if yr % 400 == 0
+    puts "#{yr} is a leap year"
+  elsif yr % 4 == 0 && yr % 100 !=0
+    puts "#{yr} is a leap year"
+  else
+    puts "#{yr} is not a leap year"
+  end
+end
+```
diff --git a/content/overview-code-blocks.md b/content/overview-code-blocks.md
index 7c09e5b..46f5922 100644
--- a/content/overview-code-blocks.md
+++ b/content/overview-code-blocks.md
@@ -25,19 +25,46 @@ See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting
 If we want, we can also `specify inline code` which is useful for `the small stuff`.
 
 ### rust
-```rust,linenos,hl_lines=3
-//! jelly-actix-web-starter - A starter template for actix-web projects that feels very Django-esque. Avoid the boring stuff and move faster.
+```rust
+fn main() {
+    let greetings = ["Hello", "Hola", "Bonjour",
+                     "Ciao", "こんにちは", "안녕하세요",
+                     "Cześć", "Olá", "Здравствуйте",
+                     "Chào bạn", "您好", "Hallo",
+                     "Hej", "Ahoj", "سلام",
+                     "Hej", "Hallo", "Hei",
+                     "Helló", "Hallo", "Buna ziua",
+                     "Merhaba"];
 
-use jelly::actix_web;
-use mainlib;
-use std::io;
-
-#[actix_web::main]
-async fn main() -> io::Result<()> {
-    mainlib::main().await
+    for (num, greeting) in greetings.iter().enumerate() {
+        print!("{} : ", greeting);
+        match num {
+            0 =>  println!("This code is editable and runnable!"),//en English
+            1 =>  println!("¡Este código es editable y ejecutable!"),//es Spanish
+            2 =>  println!("Ce code est modifiable et exécutable !"),//fr French
+            3 =>  println!("Questo codice è modificabile ed eseguibile!"),//it Italian
+            4 =>  println!("このコードは編集して実行出来ます！"),//jp Japanese
+            5 =>  println!("여기에서 코드를 수정하고 실행할 수 있습니다!"),//ko Korean
+            6 =>  println!("Ten kod można edytować oraz uruchomić!"),//pl Polish
+            7 =>  println!("Este código é editável e executável!"),//pt Portuguese
+            8 =>  println!("Этот код можно отредактировать и запустить!"),//ru Russian
+            9 =>  println!("Bạn có thể edit và run code trực tiếp!"),//vi Vietnamese
+            10 => println!("这段代码是可以编辑并且能够运行的！"),//zh Chinese
+            11 => println!("Dieser Code kann bearbeitet und ausgeführt werden!"),//de German
+            12 => println!("Den här koden kan redigeras och köras!"),//sv Swedish
+            13 => println!("Tento kód můžete upravit a spustit"),//cs Czech
+            14 => println!("این کد قابلیت ویرایش و اجرا دارد!"),//fa Persian
+            15 => println!("Denne kode kan redigeres og køres!"),//da Danish
+            16 => println!("Deze code is bewerkbaar en uitvoerbaar!"),//du Dutch
+            17 => println!("Tämä koodi on muokattavissa ja ajettavissa!"),//fi Finnish
+            18 => println!("Ez a kód szerkeszthető és futtatható!"),//hu Hungarian
+            19 => println!("Denne koden er redigerbar og kjørbar!"),//no Norwegian
+            20 => println!("Acest cod este editabil și rulabil!"),//ro Romanian
+            21 => println!("Bu kod düzenlenebilir ve çalıştırılabilir!"),//tr Turkish
+            _ =>  {},
+        }
+    }
 }
-
-let context = Context::new();
 ```
 
 ### TOML
@@ -72,6 +99,38 @@ taxonomies = [
 </html>
 ```
 
+### CSS
+```css
+html {
+    font-size: var(--fs);
+}
+
+.c {
+    text-align: center;
+}
+```
+
+### SCSS
+```scss
+
+$font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif !default;
+$font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe UI Mono" "DejaVu Sans Mono" "Liberation Mono" "Roboto Mono" "Oxygen Mono" "Ubuntu Monospace" "Ubuntu Mono" "Source Code Pro" "Fira Mono" "Droid Sans Mono" "Courier New" Courier monospace !default;
+
+@mixin font {
+  // convert space separated list to comma separated list
+  $font: list.join($font, "", $separator: comma);
+  $font: functions.remove($font, "");
+  $font-mono: list.join($font-mono, "", $separator: comma);
+  $font-mono: functions.remove($font-mono, "");
+
+  $font: functions.font-var($font, $fontExt-Main, $findFont-Main);
+  $font-mono: functions.font-var($font-mono, $fontExt-Code, $findFont-Code);
+
+  #{--ff}: $font;
+  #{--fm}: $font-mono;//code
+}
+```
+
 ### javascript
 ```javascript
 function closeSearch() {//close the search displaying the regular page.
@@ -293,3 +352,26 @@ while True:
         print("Could Not Connect to SMTP server!")
     time.sleep(interval)
 ```
+
+### Ruby
+```ruby
+=begin
+  Ruby program to check whether the
+  year is leap year or not between range.
+=end
+
+puts "Enter the lower limit:"
+lwr = gets.chomp.to_i
+puts "Enter the upper limit:"
+upr = gets.chomp.to_i
+
+for yr in lwr..upr do
+  if yr % 400 == 0
+    puts "#{yr} is a leap year"
+  elsif yr % 4 == 0 && yr % 100 !=0
+    puts "#{yr} is a leap year"
+  else
+    puts "#{yr} is not a leap year"
+  end
+end
+```
diff --git a/content/overview-embed-streamable.fr.md b/content/overview-embed-streamable.fr.md
new file mode 100644
index 0000000..0a4779a
--- /dev/null
+++ b/content/overview-embed-streamable.fr.md
@@ -0,0 +1,33 @@
++++
+title = "Streamable intégrées"
+description = "Exemple d'article présentant un code abrégé Zola personnalisé pour intégrer des vidéos Streamable dans vos pages."
+date = 2021-05-06
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["shortcodes","video"]
+[extra]
+keywords = "Video, Shortcodes, Embed, Embedded, Streamable"
++++
+
+Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exemple montre streamable.
+<!-- more -->
+
+## Streamable
+
+### Usage
+
+```rs
+{{/* streamable(id="92ok4") */}}
+```
+
+- `id`: l'identifiant de la vidéo (obligatoire)
+- `class`: une classe à ajouter au &lt;div&gt; entourant l'iframe (optionnel)
+- `title` - définir le titre alt pour l'iframe (facultatif, par défaut sur "Streamable")
+
+### Output
+```html
+{{ streamable(id="92ok4") }}
+```
+{{ streamable(id="92ok4") }}
diff --git a/content/overview-embed-streamable.md b/content/overview-embed-streamable.md
new file mode 100644
index 0000000..2478d06
--- /dev/null
+++ b/content/overview-embed-streamable.md
@@ -0,0 +1,33 @@
++++
+title = "Embed Streamable Video"
+description = "Sample article showcasing a custom Zola shortcode for embedding Streamable Videos into your pages."
+date = 2021-05-06
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["shortcodes","video"]
+[extra]
+keywords = "Video, Shortcodes, Embed, Embedded, Streamable"
++++
+
+Zola has many shortcodes, and new are easily added, this example shows streamable.
+<!-- more -->
+
+## Streamable
+
+### Usage
+
+```rs
+{{/* streamable(id="92ok4") */}}
+```
+
+- `id`: the video id (mandatory)
+- `class`: a class to add to the &lt;div&gt; surrounding the iframe (optional)
+- `title` - set alt title for the iframe (optional, defaults to "Streamable")
+
+### Output
+```html
+{{ streamable(id="92ok4") }}
+```
+{{ streamable(id="92ok4") }}
diff --git a/content/overview-embed-vimeo.fr.md b/content/overview-embed-vimeo.fr.md
new file mode 100644
index 0000000..3c9ec47
--- /dev/null
+++ b/content/overview-embed-vimeo.fr.md
@@ -0,0 +1,37 @@
++++
+title = "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
+
+### Usage
+
+```rs
+{{/* vimeo(id="514402648") */}}
+```
+
+- `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.
+
+### Output
+```html
+{{ vimeo(id="514402648") }}
+```
+{{ vimeo(id="514402648") }}
diff --git a/content/overview-embedded-vimeo.md b/content/overview-embed-vimeo.md
index ed05ab7..bc8cd93 100644
--- a/content/overview-embedded-vimeo.md
+++ b/content/overview-embed-vimeo.md
@@ -1,5 +1,5 @@
 +++
-title = "Embedded Vimeo Videos"
+title = "Embed Vimeo Video"
 description = "Sample article showcasing a custom Zola shortcode for embedding Vimeo Videos into your pages."
 date = 2021-05-07
 draft = false
@@ -16,7 +16,11 @@ Zola has many shortcodes, and new are easily added, this example shows vimeo.
 
 ## Vimeo
 
-with `vm(id="id_here")`
+### Usage
+
+```rs
+{{/* vimeo(id="514402648") */}}
+```
 
 - `id`: the video id (mandatory)
 - `class`: a class to add to the &lt;div&gt; surrounding the iframe (optional)
@@ -26,4 +30,8 @@ with `vm(id="id_here")`
 - `title` - set alt title for the iframe (optional, defaults to "Vimeo")
 - `cookie` - set to "true" if you want tracking cookies, otherwise it defaults to false.
 
-{{ vm(id="514402648") }}
+### Output
+```html
+{{ vimeo(id="514402648") }}
+```
+{{ vimeo(id="514402648") }}
diff --git a/content/overview-embed-youtube.fr.md b/content/overview-embed-youtube.fr.md
new file mode 100644
index 0000000..3655b9a
--- /dev/null
+++ b/content/overview-embed-youtube.fr.md
@@ -0,0 +1,36 @@
++++
+title = "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
+
+### Usage
+
+```rs
+{{/* youtube(id="32gyFIWecuw") */}}
+```
+
+- `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.
+
+### Output
+```html
+{{ youtube(id="32gyFIWecuw") }}
+```
+{{ youtube(id="32gyFIWecuw") }}
diff --git a/content/overview-embedded-youtube.md b/content/overview-embed-youtube.md
index d364730..f247a7f 100644
--- a/content/overview-embedded-youtube.md
+++ b/content/overview-embed-youtube.md
@@ -1,5 +1,5 @@
 +++
-title = "Embedded Youtube Videos"
+title = "Embed Youtube Video"
 description = "Sample article showcasing a custom Zola shortcode for embedding Youtube Videos into your pages."
 date = 2021-05-08
 draft = false
@@ -16,7 +16,11 @@ Zola has many shortcodes, and new are easily added, this example shows youtube.
 
 ## Youtube
 
-with `yt(id="the_id_here")`
+### Usage
+
+```rs
+{{/* youtube(id="32gyFIWecuw") */}}
+```
 
 - `id`: the video id (mandatory)
 - `playlist`: the playlist id (optional)
@@ -25,4 +29,8 @@ with `yt(id="the_id_here")`
 - `title` - set alt title for the iframe (optional, defaults to "Youtube")
 - `cookie` - set to "true" if you want tracking cookies, otherwise it defaults to false.
 
-{{ yt(id="32gyFIWecuw") }}
+### Output
+```html
+{{ youtube(id="32gyFIWecuw") }}
+```
+{{ youtube(id="32gyFIWecuw") }}
diff --git a/content/overview-images/ferris-gesture.png b/content/overview-images/ferris-gesture.png
index e9c8708..67f6cd1 100644
--- a/content/overview-images/ferris-gesture.png
+++ b/content/overview-images/ferris-gesture.png
diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md
new file mode 100644
index 0000000..9a68006
--- /dev/null
+++ b/content/overview-images/index.fr.md
@@ -0,0 +1,103 @@
++++
+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, Swap"
+thumbnail = "ferris-gesture.png"
++++
+
+Cet article couvre les **shortcodes imgswap 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>
+
+
+# imgswap Shortcode
+
+Par défaut, main_src est l'image affichée, swap_src est affiché au survol de la souris.
+
+Lorsque vous passez votre souris sur l'image, l'image à comparer s'affiche.
+
+- main_src est le chemin et le nom de fichier de l'image par défaut. (obligatoire)
+- swap_src est le chemin et le nom de fichier de l'image d'échange. (obligatoire)
+- w est la largeur de l'image.
+- h est la hauteur de l'image.
+
+## Utilisation (même chemin)
+```rs
+{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) */}}
+```
+**Sortir**
+```html
+{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }}
+```
+{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }}
+
+## Utilisation (chemin relatif ./)
+```rs
+{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) */}}
+```
+**Sortir**
+```html
+{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }}
+```
+{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }}
+
+## Utilisation (chemin racine /)
+```rs
+{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) */}}
+```
+**Sortir**
+```html
+{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }}
+```
+{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }}
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..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
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..6b70666
--- /dev/null
+++ b/content/posts/_index.fr.md
@@ -0,0 +1,4 @@
++++
+transparent = true
+redirect_to = "/"
++++
diff --git a/content/posts/_index.md b/content/posts/_index.md
index e381261..6b70666 100644
--- a/content/posts/_index.md
+++ b/content/posts/_index.md
@@ -1,4 +1,4 @@
 +++
-title = "posts"
-template = "posts.html"
+transparent = true
+redirect_to = "/"
 +++
diff --git a/content/posts/posts-section.fr.md b/content/posts/posts-section.fr.md
new file mode 100644
index 0000000..63e71af
--- /dev/null
+++ b/content/posts/posts-section.fr.md
@@ -0,0 +1,20 @@
++++
+title = "Posts Transparent Section"
+date = 2021-05-04
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["config"]
++++
+
+Vous pouvez placer votre contenu dans content/posts/ au lieu de content/ cela fera des URL de publication example.com/posts/post-title
+<!-- more -->
+Dans le répertoire des articles, vous verrez le _index.md :
+
+```md
++++
+transparent = true
+redirect_to = "/"
++++
+```
diff --git a/content/posts/posts-section.md b/content/posts/posts-section.md
new file mode 100644
index 0000000..c90ec99
--- /dev/null
+++ b/content/posts/posts-section.md
@@ -0,0 +1,20 @@
++++
+title = "Posts Transparent Section"
+date = 2021-05-04
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["config"]
++++
+
+You can place your content in content/posts/ instead of content/ this will make post urls example.com/posts/post-title
+<!-- more -->
+In the posts directory you will see the _index.md:
+
+```md
++++
+transparent = true
+redirect_to = "/"
++++
+```
diff --git a/content/static/stork_toml.md b/content/static/stork_toml.md
index 0f7b8a4..e427a93 100644
--- a/content/static/stork_toml.md
+++ b/content/static/stork_toml.md
@@ -2,4 +2,4 @@
 path = "data_stork"
 template = "stork_toml.html"
 draft = true
-+++
\ No newline at end of file
++++
diff --git a/content/static/tinysearch_json.md b/content/static/tinysearch_json.md
index c0125f1..c91a639 100644
--- a/content/static/tinysearch_json.md
+++ b/content/static/tinysearch_json.md
@@ -2,4 +2,4 @@
 path = "data_tinysearch"
 template = "tinysearch_json.html"
 draft = true
-+++
\ No newline at end of file
++++