Improve Shortcodes, example content, page scores, fonts

10 files changed, 97 insertions, 0 deletions

diff --git a/content/overview-rich-content/ferris-gesture.svg b/content/overview-rich-content/ferris-gesture.svg
new file mode 100644
index 0000000..d819588
--- /dev/null
+++ b/content/overview-rich-content/ferris-gesture.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M327 173c-57 0-109 7-148 18v-3c-39 13-64 30-64 50l2 9-4 7s-3 4 2 13a1191 1191 0 0 0 54 67c0-1-4-16-15-34l-16-31c11 7 25 13 41 18 39 11 91 18 148 18 66 0 124-9 164-23v-86c-40-14-98-23-164-23m223 79-7-14v-1c0-16-16-31-44-42v84c13-6 24-12 31-18-2 9-10 26-16 39-9 18-13 34-13 34a1239 1239 0 0 0 46-69c6-9 3-13 3-13"/><path fill="#f74c00" d="m589 252-44-32-1-5 14-21c2-2 2-5 1-7s-3-4-6-5l-24-4-3-6 10-23v-7c-2-3-4-4-7-4l-25 1-4-5 6-25c1-3 0-5-2-7s-4-3-7-2l-24 6-5-4 1-26c0-3-1-6-3-7s-5-2-7-1l-23 11-5-3-4-26c-1-2-2-4-5-5-2-1-5-1-7 1l-20 15-6-2-8-24c-1-3-3-5-6-5-2-1-5 0-7 2l-17 19-6-1-13-22c-1-2-4-3-6-3-3 0-5 1-6 3l-13 22-7 1-16-19a7 7 0 0 0-13 3l-8 24-6 2-20-15c-3-2-5-2-8-1-2 1-4 3-4 5l-4 26-5 3-23-11c-2-1-5 0-7 1s-3 4-3 7l1 26-5 4-24-6c-3-1-6 0-7 2-2 2-3 4-2 7l5 25-3 5-25-1c-3 0-5 1-7 4v7l10 23-3 6-24 4c-3 1-5 3-6 5s-1 5 1 7l14 21v1l-41 44s-6 5 3 17a1639 1639 0 0 0 87 88c2-1-4-20-22-43-14-21-32-53-28-56 0 0 5-6 14-11 1 0 0 0 0 0s206 95 397 2c22-4 35 8 35 8 4 2-7 35-17 56a98 98 0 0 0-14 45l12-19c17-23 49-68 55-79 7-12 0-16 0-16"/><path d="m398 312 1-1-67-6c55-73 99-14 103-8v15z"/><path fill="#f74c00" d="M139 232s-55-21-65-44c0 0 65-52-13-107l-2 70s-23-23-22-62c0 0-72 35 12 96 0 0 3 33 79 73z"/><path d="M365 203s21-23 41 0c0 0 16 30 0 45 0 0-26 21-41 0 0 0-18-17 0-45"/><path fill="#fff" d="M389 211c0 9-5 16-12 16-6 0-11-7-11-16s5-16 11-16c7 0 12 7 12 16"/><path d="M273 197s35-16 45 19c0 0 10 40-29 43 0 0-50-10-16-62"/><path fill="#fff" d="M291 211c0 9-5 16-12 16s-12-7-12-16 5-17 12-17 12 8 12 17"/><path fill="#f74c00" d="M501 241s-7 29-53 60l-13 3s-41-76-100 10c0 0 18-11 67 2 0 0-22 35-68 34 0 0 44 52 110-24 0 0 70-27 76-85z"/></svg>
diff --git a/content/overview-rich-content/ferris.svg b/content/overview-rich-content/ferris.svg
new file mode 100644
index 0000000..1409b10
--- /dev/null
+++ b/content/overview-rich-content/ferris.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M299 179c-61 0-116 7-157 19v101c41 12 96 20 157 20 69 0 131-10 173-25v-91c-42-15-104-24-173-24m235 82-7-15v-1c0-17-17-32-46-45v89c13-6 24-12 32-19-2 9-10 28-16 42-11 19-14 35-14 36l9-14 40-59c5-9 2-14 2-14M75 246l1 9-4 8s-3 4 3 14a1259 1259 0 0 0 56 70c1-1-4-17-16-35l-16-33c11 7 26 13 43 19V194c-42 13-67 31-67 52"/><path fill="#f74c00" d="m576 261-47-34-1-5 15-22c2-2 2-5 1-8-1-2-3-4-6-5l-26-4-3-6 11-25c1-3 1-6-1-8-1-2-4-4-7-4l-26 1-4-5 6-27c1-2 0-5-2-7s-5-3-7-2l-26 6-5-4 1-28c0-3-1-5-3-7-3-1-5-2-8 0l-24 11-6-3-4-27c0-3-2-5-5-6-2-2-5-1-7 0l-21 16-7-2-9-25c-1-3-3-5-6-5-2-1-5 0-7 2l-18 20h-6l-14-24c-1-2-4-4-7-4-2 0-5 2-6 4l-14 24h-7l-17-20a8 8 0 0 0-13 3l-10 25-6 2-21-16c-2-1-5-2-8 0-2 1-4 3-4 6l-5 27-5 3-24-11c-3-2-6-1-8 0-2 2-3 4-3 7l1 28-5 4-26-6c-3-1-5 0-7 2s-3 5-2 7l6 27-4 5-27-1c-2 0-5 2-6 4-2 2-2 5-1 8l11 25-3 6-26 4c-3 1-5 3-6 5-1 3-1 6 1 8l15 22v1l-44 46s-6 6 4 18a1732 1732 0 0 0 92 94c1-1-4-22-24-46-15-22-34-56-29-60 0 0 5-6 15-11 0 1 0 0 0 0s218 101 420 2c23-4 37 8 37 8 4 3-8 37-18 60-14 26-16 46-15 47s6-7 13-19l58-84c7-13 0-17 0-17"/><path d="m225 325-1-1 71-5c-58-77-105-16-110-9v15zm149 0 1-1-69-5c59-80 102-17 107-10v16z"/><path fill="#f74c00" d="M483 249s-8 31-56 63l-14 3s-44-80-106 10c0 0 19-11 71 3 0 0-23 37-72 35 0 0 47 56 117-24 0 0 74-29 80-90z"/><path d="M339 209s21-24 43 0c0 0 17 32 0 47 0 0-28 23-43 0 0 0-19-17 0-47"/><path fill="#fff" d="M364 218c0 9-6 16-12 16-7 0-13-7-13-16 0-10 6-17 13-17 6 0 12 7 12 17"/><path d="M242 202s37-16 47 21c0 0 11 43-31 45 0 0-52-10-16-66"/><path fill="#fff" d="M260 217c0 10-5 18-12 18s-13-8-13-18c0-9 6-17 13-17s12 8 12 17"/><path fill="#f74c00" d="M221 331c46-6 72-6 72-6-61-81-111-8-111-8-13-4-25-22-35-38l-38-11c44 75 77 76 77 76 68 87 100 17 100 17-38-4-65-30-65-30"/></svg>
diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md
new file mode 100644
index 0000000..27c1718
--- /dev/null
+++ b/content/overview-rich-content/index.md
@@ -0,0 +1,95 @@
++++
+title = "Rich Content"
+description = "A brief description of Zola Shortcodes"
+date = 2021-05-18
+
+[taxonomies]
+categories = ["Features"]
+tags = ["video", "audio", "images", "shortcodes"]
+[extra]
+toc = true
++++
+
+Several custom shortcodes are included to augment CommonMark (courtesy of [d3c3nt theme](https://d3c3nt.figbert.com/posts/rich-content/)), 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 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
+{{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
+```
+### Output
+```html
+{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+```
+{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+
+## Image
+
+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). `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
+
+### Usage
+```rs
+{{/* image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
+```
+### Output
+```html
+{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+```
+{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="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`.
+
+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
+{{/* gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
+```
+### Output
+```html
+{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+```
+{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+
+## Audio
+
+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 (`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.
+
+### Usage
+```rs
+{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}}
+```
+### Output
+```html
+{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}
+```
+{{ audio(sources=["over9000.ogg", "over9000.mp3"]) }}
+
+[built-in]: https://www.getzola.org/documentation/content/shortcodes/#built-in-shortcodes
+[video]: @/overview-rich-content/index.md#video
diff --git a/content/overview-rich-content/over9000-400.webp b/content/overview-rich-content/over9000-400.webp
new file mode 100644
index 0000000..1b2876f
--- /dev/null
+++ b/content/overview-rich-content/over9000-400.webp
diff --git a/content/overview-rich-content/over9000-640.webp b/content/overview-rich-content/over9000-640.webp
new file mode 100644
index 0000000..7ce3c43
--- /dev/null
+++ b/content/overview-rich-content/over9000-640.webp
diff --git a/content/overview-rich-content/over9000-960.webp b/content/overview-rich-content/over9000-960.webp
new file mode 100644
index 0000000..28fba9c
--- /dev/null
+++ b/content/overview-rich-content/over9000-960.webp
diff --git a/content/overview-rich-content/over9000.mp3 b/content/overview-rich-content/over9000.mp3
new file mode 100644
index 0000000..6b08f54
--- /dev/null
+++ b/content/overview-rich-content/over9000.mp3
diff --git a/content/overview-rich-content/over9000.ogg b/content/overview-rich-content/over9000.ogg
new file mode 100644
index 0000000..1eb0a5a
--- /dev/null
+++ b/content/overview-rich-content/over9000.ogg
diff --git a/content/overview-rich-content/over9000_av1.mp4 b/content/overview-rich-content/over9000_av1.mp4
new file mode 100644
index 0000000..24ade41
--- /dev/null
+++ b/content/overview-rich-content/over9000_av1.mp4
diff --git a/content/overview-rich-content/over9000_vp9.webm b/content/overview-rich-content/over9000_vp9.webm
new file mode 100644
index 0000000..2999e6c
--- /dev/null
+++ b/content/overview-rich-content/over9000_vp9.webm