From cc91980e2a0475d2002bb7dfc8c5c65c0538d1b7 Mon Sep 17 00:00:00 2001
From: Jieiku
Date: Sun, 25 Aug 2024 02:21:07 -0700
Subject: Update Media Shortcodes

---
 content/overview-rich-content/index.md | 98 ++++++++++++++++++++++------------
 1 file changed, 64 insertions(+), 34 deletions(-)

(limited to 'content/overview-rich-content/index.md')

diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md
index 89bbcb4..9b11fb5 100644
--- a/content/overview-rich-content/index.md
+++ b/content/overview-rich-content/index.md
@@ -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
@@ -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
@@ -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"]) */}}
@@ -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!!") }}
-- 
cgit v1.3.1