10 files changed, 226 insertions, 14 deletions
diff --git a/content/overview-code-blocks.fr.md b/content/overview-code-blocks.fr.md
index c8fbdf2..a21c15a 100644
--- a/content/overview-code-blocks.fr.md
+++ b/content/overview-code-blocks.fr.md
@@ -320,3 +320,60 @@ 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
+```
+
+### 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 root {
+  #{--ff}: $font;
+  #{--fm}: $font-mono;//code
+
+  --fs: 1rem; //font-size
+
+  // Responsive typography
+  @if $enable-responsive-typography {
+    @if map-get($breakpoints, "lg") {
+      @media (min-width: map-get($breakpoints, "lg")) {
+        --fs: 1.08rem;
+      }
+    }
+  }
+}
+```
+
+### CSS
+```css
+html {
+    font-size: var(--fs);
+}
+
+.c {
+    text-align: center;
+}
+```
diff --git a/content/overview-code-blocks.md b/content/overview-code-blocks.md
index d38ac9e..916dcc1 100644
--- a/content/overview-code-blocks.md
+++ b/content/overview-code-blocks.md
@@ -320,3 +320,60 @@ 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
+```
+
+### 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 root {
+  #{--ff}: $font;
+  #{--fm}: $font-mono;//code
+
+  --fs: 1rem; //font-size
+
+  // Responsive typography
+  @if $enable-responsive-typography {
+    @if map-get($breakpoints, "lg") {
+      @media (min-width: map-get($breakpoints, "lg")) {
+        --fs: 1.08rem;
+      }
+    }
+  }
+}
+```
+
+### CSS
+```css
+html {
+    font-size: var(--fs);
+}
+
+.c {
+    text-align: center;
+}
+```
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-embedded-vimeo.fr.md b/content/overview-embed-vimeo.fr.md
index ef29b86..3c9ec47 100644
--- a/content/overview-embedded-vimeo.fr.md
+++ b/content/overview-embed-vimeo.fr.md
@@ -1,5 +1,5 @@
 +++
-title = "Vidéos Vimeo intégrées"
+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
@@ -16,7 +16,11 @@ Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exem
 
 ## Vimeo
 
-with `vm(id="id_here")`
+### 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)
@@ -26,4 +30,8 @@ with `vm(id="id_here")`
 - `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") }}
+### 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-embedded-youtube.fr.md b/content/overview-embed-youtube.fr.md
index b1c8cab..3655b9a 100644
--- a/content/overview-embedded-youtube.fr.md
+++ b/content/overview-embed-youtube.fr.md
@@ -1,5 +1,5 @@
 +++
-title = "Vidéos Youtube intégrées"
+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
@@ -16,7 +16,11 @@ Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exem
 
 ## Youtube
 
-avec `yt(id="the_id_here")`
+### Usage
+
+```rs
+{{/* youtube(id="32gyFIWecuw") */}}
+```
 
 - `id`: l'identifiant de la vidéo (obligatoire)
 - `playlist`: l'identifiant de la playlist (optionnel)
@@ -25,4 +29,8 @@ avec `yt(id="the_id_here")`
 - `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") }}
+### 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-rich-content/index.fr.md b/content/overview-rich-content/index.fr.md
index 43425fa..819b2db 100644
--- a/content/overview-rich-content/index.fr.md
+++ b/content/overview-rich-content/index.fr.md
@@ -1,7 +1,7 @@
 +++
 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
+date = 2021-05-15
 draft = false
 
 [taxonomies]
diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md
index 6e5d1b8..8f86d3b 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]