d3c3nt

[DORMANT] a fairly decent theme for the zola static site engine
git clone git://git.figbert.com/d3c3nt.git
Log | Files | Refs | README | LICENSE

commit ecb455ccc2c336443409f086fa6df990eac14df6
parent e864ef832e524b4604ff9ec193214f7710d09123
Author: FIGBERT <figbert@figbert.com>
Date:   Sat, 25 Dec 2021 15:12:09 -0800

Update Rich Content text

Diffstat:
Mcontent/posts/rich-content.md | 42++++++++++++++++++++++++++++++------------
1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/content/posts/rich-content.md b/content/posts/rich-content.md @@ -4,13 +4,20 @@ description = "A brief description of Hugo Shortcodes" date = 2020-08-26 +++ -d3c3nt ships with several custom shortcodes to augment CommonMark and add additional functionality to your posts, in addition to those [already provided by Zola][built-in]. -`video`, `image`, `gif`, and `audio` were created as simple, privacy-friendly tools for you to use in your markdown.<!-- more --> +d3c3nt ships with several custom shortcodes to augment CommonMark, in +addition to those [already provided by Zola][built-in]. `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 an array of strings called `sources` 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. +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. ### Usage ```rs @@ -23,9 +30,14 @@ type (`webm`, `mp4`, etc). Each individual source is then converted into a `<sou ## Image -The `image` shortcode returns a `<picture>` tag and takes an array of strings called `sources`, and two strings called `fallback_path` and `fallback_alt`. Each string in the -`sources` array should be a path to an image file of a different type (`webp`, `png`, `jpg`, etc), which is then converted into a `<source>` tag. `fallback_path` and -`fallback_alt` are used to create an `<img>` tag for the browser to fall back on if the other formats aren't yet supported. +The `image` shortcode returns a `<picture>` tag and accepts three +parameters: `sources` (an array of strings), `fallback_path`, and +`fallback_alt` (both strings). + +Each string in the `sources` array should be a path to an image file of +a different type (`webp`, `png`, `jpg`, etc). `fallback_path` and +`fallback_alt` are used to create an `<img>` tag for the browser to fall +back on if the other formats aren't yet supported. ### Usage ```rs @@ -38,9 +50,14 @@ The `image` shortcode returns a `<picture>` tag and takes an array of strings ca ## 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 exterior tag, which has four additional properties: `autoplay`, `loop`, `muted`, `playsinline`. Using the `<video>` tag in place of gifs allows for reduced file sizes, which -is important to optimize UX, especially in regions where internet is slower or less reliable. +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`. + +Using the `<video>` tag in place of gifs allows for reduced file sizes, +which is especially important in regions where internet is slower or +less reliable. ### Usage ```rs @@ -53,8 +70,9 @@ is important to optimize UX, especially in regions where internet is slower or l ## Audio -The `audio` shortcode – similarly to the [video shortcode][video] – takes an array of strings called `sources` and returns an `<audio>` tag. Each string in the `sources` array -should be a path to an audio file of a different type (`wav`, `ogg`, `mp3`, etc). Each individual source is then converted into a `<source>` tag, and the element is returned. +The `audio` shortcode takes a `sources` array of strings and returns an +`<audio>` tag. Each string in the `sources` array should be a path to an +audio file of a different type (`wav`, `ogg`, `mp3`, etc). ### Usage ```rs