diff options
| -rw-r--r-- | content/overview-images/index.fr.md | 7 | ||||
| -rw-r--r-- | content/overview-images/index.md | 7 | ||||
| -rw-r--r-- | content/overview-rich-content/index.fr.md | 28 | ||||
| -rw-r--r-- | content/overview-rich-content/index.md | 28 | ||||
| -rw-r--r-- | sass/abridge.scss | 8 | ||||
| -rw-r--r-- | templates/shortcodes/video.html | 30 |
6 files changed, 96 insertions, 12 deletions
diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md index a2f014b..3a68080 100644 --- a/content/overview-images/index.fr.md +++ b/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 diff --git a/content/overview-images/index.md b/content/overview-images/index.md index 2ebfabb..00e25bf 100644 --- a/content/overview-images/index.md +++ b/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 diff --git a/content/overview-rich-content/index.fr.md b/content/overview-rich-content/index.fr.md index 2ffd76e..9c2047f 100644 --- a/content/overview-rich-content/index.fr.md +++ b/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). diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md index c42fe98..89bbcb4 100644 --- a/content/overview-rich-content/index.md +++ b/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 diff --git a/sass/abridge.scss b/sass/abridge.scss index 0f968c3..3709b92 100644 --- a/sass/abridge.scss +++ b/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} diff --git a/templates/shortcodes/video.html b/templates/shortcodes/video.html index c6bd867..1839376 100644 --- a/templates/shortcodes/video.html +++ b/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 -%} |