diff options
Diffstat (limited to 'content/overview-rich-content/index.md')
| -rw-r--r-- | content/overview-rich-content/index.md | 98 |
1 files changed, 64 insertions, 34 deletions
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). + 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) ** -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 +**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!!") }} |