Add additional video shortcode options

content/overview-images/index.fr.md

@@ -31,18 +31,19 @@ Cours optionnels:
 - ci peut être utilisé pour centrer l'image.
 - fr peut être utilisé pour faire flotter l'image à droite.
 - fl peut être utilisé pour faire flotter l'image vers la gauche.
+- b1 peut être utilisé pour ajouter une bordure de 1px.
 
 ** google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs. **
 
 ## Utilisation (même chemin)
 ```rs
-{{/* img(src="ferris-happy.svg" class="ci" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") */}}
+{{/* img(src="ferris-happy.svg" class="ci b1" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") */}}
 ```
 **Output**
 ```html
-{{ img(src="ferris-happy.svg" class="ci" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") }}
+{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") }}
 ```
-{{ img(src="ferris-happy.svg" class="ci" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") }}
+{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") }}
 
 ## Utilisation (chemin relatif ./)
 ```rs

content/overview-images/index.md

@@ -31,18 +31,19 @@ Optional Classes:
 - ci can be used to center the image.
 - fr can be used to float the image right.
 - fl can be used to float the image left.
+- b1 can be used to add a 1px border.
 
 ** google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values. **
 
 ## Usage (same path)
 ```rs
-{{/* img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") */}}
+{{/* img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") */}}
 ```
 **Output**
 ```html
-{{ img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }}
+{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }}
 ```
-{{ img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }}
+{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }}
 
 ## Usage (relative path ./)
 ```rs

content/overview-rich-content/index.fr.md

@@ -20,6 +20,24 @@ Plusieurs codes abrégés personnalisés sont inclus pour augmenter CommonMark (
 
 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é.
 
+- sources sont un tableau de chemins de fichiers vidéo. (obligatoire)
+- class définit une classe pour la vidéo.
+- caption définit le texte de la légende sous la vidéo.
+- w définit la largeur de la vidéo.
+- h définit la hauteur de la vidéo.
+- autoplay lorsqu'il est défini sur "true", lit automatiquement la vidéo au chargement.
+- loop lorsqu'il est défini sur "true", lit la vidéo en boucle.
+- muted lorsqu'il est défini sur "true", règle le son initialement coupé.
+
+** les sources peuvent être le même chemin, un chemin relatif ou un chemin racine, comme le [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) **
+
+Cours optionnels:
+
+- ci peut être utilisé pour centrer l'image.
+- fr peut être utilisé pour faire flotter l'image à droite.
+- fl peut être utilisé pour faire flotter l'image vers la gauche.
+- b1 peut être utilisé pour ajouter une bordure de 1px.
+
 ### Usage
 ```rs
 {{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
@@ -30,6 +48,16 @@ Le `video` shortcode prend un `sources` paramètre (un tableau de chaînes) et r
 ```
 {{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
 
+### Usage
+```rs
+{{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") */}}
+```
+### Sortir
+```html
+{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") }}
+```
+{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") }}
+
 ## 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).

content/overview-rich-content/index.md

@@ -24,6 +24,24 @@ be a path to a video file of a different type (`webm`, `mp4`, etc). Each
 individual source is then converted into a `<source>` tag, and the
 element is returned.
 
+- sources is an array of video file paths. (mandatory)
+- class sets a class for the video.
+- caption sets the caption text below the video.
+- w sets the width of the video.
+- h sets the height of the video.
+- autoplay when set to "true", autoplays the video on load.
+- loop when set to "true", plays the video on a loop.
+- muted when set to "true", sets the audio muted initially.
+
+** sources can be same path, relative path, or root path, like the [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) **
+
+Optional Classes:
+
+- ci can be used to center the image.
+- fr can be used to float the image right.
+- fl can be used to float the image left.
+- b1 can be used to add a 1px border.
+
 ### Usage
 ```rs
 {{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
@@ -34,6 +52,16 @@ element is returned.
 ```
 {{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
 
+### Usage
+```rs
+{{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") */}}
+```
+### Output
+```html
+{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") }}
+```
+{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") }}
+
 ## Image
 
 The `image` shortcode returns a `<picture>` tag and accepts three

sass/abridge.scss

@@ -851,8 +851,7 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
   }
   .fi {//figure for images
     display: inline-block;
-    img {
-      border: 1px solid var(--c4);
+    img,video {
       vertical-align: top;
     }
     figcaption {
@@ -1437,6 +1436,11 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
   .vpad {padding: var(--s1) 0}
   .tpad {padding-top: var(--s1)}
   .b {font-weight: var(--fh)}
+  .b1 {
+    video,img {
+      border: 1px solid var(--c4);
+    }
+  }
   .c {text-align: center}// <center> does not pass validation, use: <div class="c"></div>
   .fl {float: left}
   .fr {float: right}

templates/shortcodes/video.html

@@ -1,7 +1,29 @@
-<video controls>
-  {% for source in sources -%}
-    {% set type = source | split(pat=".") | last -%}
-    <source src="{{ config.base_url | safe }}{{ page.path | safe }}{{ source | safe }}" type="{{ 'video/' ~ type }}" />
+{%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif -%}
+<video controls{% if class %} class="{{class}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %}{% if autoplay %} autoplay{% endif %}{% if loop %} loop=true{% endif %}{% if muted %} muted=true{% endif %}>
+  {% for src in sources -%}
+
+  {%- set video = src | split(pat="/") | last %}
+  {%- set dirtest = src | trim_start_matches(pat="./") %}
+  {%- if dirtest is containing("/") %} {%- set reldir = true %} {%- endif %}
+  {%- if page.path %}{%- set pagepath = page.path %}{%- elif section.path %}{%- set pagepath = section.path %}{%- endif %}
+
+  {%- if src is starting_with("./") and reldir %} {# Relative Path #}
+    {%- set path = src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
+    {%- set path = path ~ "/" %}
+
+  {%- elif src is starting_with("/") %} {# Root Path #}
+    {%- set rootpath = src | split(pat="/") | slice(end=-1) | join(sep="/") %}
+    {%- set path = config.base_url ~ rootpath ~ "/"  %}
+
+  {%- else %} {# Same Directory Path #}
+    {%- set path = "" %}
+
+  {%- endif %}
+
+  {%- set type = src | split(pat=".") | last -%}
+  {%- if type is matching("^mov$") %}{% set type = "quicktime" %}{% endif -%}
+  <source src="{{ path | safe }}{{ video | safe }}" type="{{ 'video/' ~ type }}" />
   {% endfor -%}
   Your browser doesn't support the video tag and/or the video formats in use here – sorry!
 </video>
+{%- if caption %}<figcaption>{{caption}}</figcaption></figure>{% endif -%}