Skip to content

Commit

Permalink
Update Media Shortcodes
Browse files Browse the repository at this point in the history
  • Loading branch information
Jieiku committed Aug 25, 2024
1 parent 8765d58 commit cc91980
Show file tree
Hide file tree
Showing 7 changed files with 245 additions and 78 deletions.
87 changes: 63 additions & 24 deletions content/overview-rich-content/index.fr.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,31 +12,29 @@ toc = true
series = "Features"
+++

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/)). `video`, `image`, `gif`, et `audio` ont été créés pour vous aider à tirer parti des éléments HTML modernes dans votre écriture.
Plusieurs codes abrégés personnalisés sont inclus pour augmenter CommonMark. `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é.

- 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é.
- `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:
**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.
- `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
Expand All @@ -60,25 +58,40 @@ Cours optionnels:

## 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).
Le shortcode `image` renvoie une balise `<picture>` avec plusieurs sources.

Chaque chaîne du tableau `sources` doit être un chemin vers un fichier image d'un type différent (`avif`, `webp`, `png`, `jpg`, etc.).
La dernière image du tableau `sources` est utilisée pour créer une balise `<img>` sur laquelle le navigateur pourra s'appuyer si les autres formats ne sont pas encore pris en charge.

- `sources` sont un tableau de chemins de fichiers image. (obligatoire)
- `class` définit une classe pour l'image.
- `caption` définit le texte de la légende sous l'image.
- `w` définit la largeur de l'image.
- `h` définit la hauteur de l'image.

** 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) **

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
**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
{{/* 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", "over9000-640.webp"], w=640, h=480, alt="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", "over9000-640.webp"], w=640, h=480, alt="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.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"], w=640, h=480, alt="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`.
Le `gif` shortcode est exactement le même que le [shortcode vidéo][#video].
La seule différence est qu'il possède automatiquement les 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.

Expand All @@ -96,6 +109,22 @@ L'utilisation de la `<video>` balise à la place des gifs permet de réduire la

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.

- `sources` est un tableau de chemins de fichiers. (obligatoire)
- `class` définit une classe pour l'audio.
- `caption` définit le texte de la légende sous l'audio.
- `autoplay` lorsqu'il est défini, lit automatiquement l'audio au chargement.
- `loop` lorsqu'il est défini, lit l'audio en boucle.
- `muted` lorsqu'il est défini, définit 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
{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}}
Expand All @@ -105,3 +134,13 @@ Le `audio` shortcode prend un `sources` tableau de chaînes et renvoie une `<aud
{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}
```
{{ audio(sources=["over9000.ogg", "over9000.mp3"]) }}

### Usage
```rs
{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] muted="true" class="ci b1" caption="It's Over 9000!!") */}}
```
### Sortir
```html
{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] muted="true" class="ci b1" caption="It's Over 9000!!") }}
```
{{ audio(sources=["over9000.ogg", "over9000.mp3"] class="ci b1" caption="It's Over 9000!!") }}
98 changes: 64 additions & 34 deletions content/overview-rich-content/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,35 +12,30 @@ toc = true
series = "Features"
+++

Several custom shortcodes are included to augment CommonMark (courtesy of [d3c3nt theme](https://d3c3nt.figbert.com/posts/rich-content/)). `video`, `image`, `gif`, and `audio` were created to help you take advantage of modern HTML elements in your writing.
Several custom shortcodes are included to augment CommonMark. `video`, `image`, `gif`, and `audio` were created to help you take advantage of modern HTML elements in your writing.

<!-- more -->

## Video

The `video` shortcode takes a `sources` parameter (an array of strings)
and returns a `<video>` tag. Each string in the `sources` array should
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` 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, autoplays the video on load.
- `loop` when set, plays the video on a loop.
- `muted` when set, sets the audio muted initially.
- `playsinline` when set, plays the video embeded instead of fullscreen on mobile browsers.

** sources can be same path, relative path, or root path, like the [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) **

Optional Classes:
**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.
- `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
Expand All @@ -64,31 +59,40 @@ Optional Classes:

## Image

The `image` shortcode returns a `<picture>` tag and accepts three
parameters: `sources` (an array of strings), `fallback_path`, and
`fallback_alt` (both strings).
The `image` shortcode returns a `<picture>` tag with multiple sources.

Each string in the `sources` array should be a path to an image file of
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
Each string in the `sources` array should be a path to an image file of a different type (`avif`, `webp`, `png`, `jpg`, etc).
The last image in the `sources` array is used to create an `<img>` tag for the browser to fall back on if the other formats are not yet supported.

- `sources` is an array of image file paths. (mandatory)
- `class` sets a class for the image.
- `caption` sets the caption text below the image.
- `w` sets the width of the image.
- `h` sets the height of the image.

** 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
{{/* 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", "over9000-640.webp"], w=640, h=480, alt="ITS OVER 9000!") */}}
```
### Output
```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", "over9000-640.webp"], w=640, h=480, alt="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.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"], w=640, h=480, alt="ITS OVER 9000!") }}

## GIF

The `gif` shortcode is exactly the same as the [video shortcode](#video)
– it takes an array of strings called `sources` and returns a
`<video>` tag. The only difference is in the outermost tag, which has
four additional properties: `autoplay`, `loop`, `muted`, `playsinline`.
The `gif` shortcode is exactly the same as the [video shortcode](#video).
The only difference is it automatically has the additional properties: `autoplay`, `loop`, `muted`, `playsinline`.

Using the `<video>` tag in place of gifs allows for reduced file sizes,
which is especially important in regions where internet is slower or
Expand All @@ -111,6 +115,22 @@ The `audio` shortcode takes a `sources` array of strings and returns an
audio file of a different type (`ogg`, `mp3`, `flac`, `wav`, etc).
The browser will play the first type it supports, so placing them in order of size smallest to largest will use the least bandwidth if that is your goal.

- `sources` is an array of file paths. (mandatory)
- `class` sets a class for the audio.
- `caption` sets the caption text below the audio.
- `autoplay` when set, autoplays the audio on load.
- `loop` when set, plays the audio on a loop.
- `muted` when set, 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
{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}}
Expand All @@ -120,3 +140,13 @@ The browser will play the first type it supports, so placing them in order of si
{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}
```
{{ audio(sources=["over9000.ogg", "over9000.mp3"]) }}

### Usage
```rs
{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] muted="true" class="ci b1" caption="It's Over 9000!!") */}}
```
### Output
```html
{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] muted="true" class="ci b1" caption="It's Over 9000!!") }}
```
{{ audio(sources=["over9000.ogg", "over9000.mp3"] class="ci b1" caption="It's Over 9000!!") }}
2 changes: 1 addition & 1 deletion sass/abridge.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1437,7 +1437,7 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
.tpad {padding-top: var(--s1)}
.b {font-weight: var(--fh)}
.b1 {
video,img {
video,audio,picture,img {
border: 1px solid var(--c4);
}
}
Expand Down
30 changes: 26 additions & 4 deletions templates/shortcodes/audio.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,29 @@
<audio controls>
{% for source in sources -%}
{% set type = source | split(pat=".") | last -%}
<source src="{{ config.base_url | safe }}{{ page.path | safe }}{{ source | safe }}" type="{{ 'audio/' ~ type }}" />
{%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif -%}
<audio controls{% if class %} class="{{class}}"{% endif %}{% if autoplay %} autoplay{% endif %}{% if loop %} loop{% endif %}{% if muted %} muted{% endif %}{% if playsinline %} playsinline{% endif %}>
{% for src in sources -%}

{%- set file = 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 }}{{ file | safe }}" type="{{ 'audio/' ~ type }}" />
{% endfor -%}
Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!
</audio>
{%- if caption %}<figcaption>{{caption}}</figcaption></figure>{% endif -%}
32 changes: 27 additions & 5 deletions templates/shortcodes/gif.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,29 @@
<video autoplay loop muted playsinline>
{% 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 %} autoplay loop muted playsinline>
{% 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, which I use in place of .gifs, and/or the video formats in use here – sorry!
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 -%}
Loading

0 comments on commit cc91980

Please sign in to comment.