From 103ff01d0ece0f3c0112b48015750300d907d8fa Mon Sep 17 00:00:00 2001 From: Jieiku Date: Tue, 31 May 2022 02:09:53 -0700 Subject: Improve Shortcodes, example content, page scores, fonts --- content/overview-abridge.md | 2 +- .../overview-fonts-imagehover-shortcode/Arimo.png | Bin 84665 -> 0 bytes .../DroidSans.png | Bin 80887 -> 0 bytes .../overview-fonts-imagehover-shortcode/Lato.png | Bin 80011 -> 0 bytes .../overview-fonts-imagehover-shortcode/Roboto.png | Bin 82785 -> 0 bytes .../overview-fonts-imagehover-shortcode/System.png | Bin 82778 -> 0 bytes .../overview-fonts-imagehover-shortcode/Ubuntu.png | Bin 82349 -> 0 bytes .../overview-fonts-imagehover-shortcode/index.md | 27 ------ content/overview-images/corro.svg | 1 + content/overview-images/ferris-gesture.svg | 1 + content/overview-images/ferris-happy.svg | 1 + content/overview-images/ferris.svg | 1 + content/overview-images/image.jpg | Bin 123922 -> 0 bytes content/overview-images/img/ferris-gesture.svg | 1 + content/overview-images/img/ferris.svg | 1 + content/overview-images/index.md | 104 ++++++++++++++++++--- content/overview-images/rust.png | Bin 14303 -> 0 bytes content/overview-markdown-syntax.md | 22 ++++- content/overview-math.md | 52 +++++++---- content/overview-rich-content.md | 90 ------------------ content/overview-rich-content/ferris-gesture.svg | 1 + content/overview-rich-content/ferris.svg | 1 + content/overview-rich-content/index.md | 95 +++++++++++++++++++ content/overview-rich-content/over9000-400.webp | Bin 0 -> 24322 bytes content/overview-rich-content/over9000-640.webp | Bin 0 -> 31190 bytes content/overview-rich-content/over9000-960.webp | Bin 0 -> 39488 bytes content/overview-rich-content/over9000.mp3 | Bin 0 -> 16677 bytes content/overview-rich-content/over9000.ogg | Bin 0 -> 12601 bytes content/overview-rich-content/over9000_av1.mp4 | Bin 0 -> 102199 bytes content/overview-rich-content/over9000_vp9.webm | Bin 0 -> 97600 bytes 30 files changed, 249 insertions(+), 151 deletions(-) delete mode 100644 content/overview-fonts-imagehover-shortcode/Arimo.png delete mode 100644 content/overview-fonts-imagehover-shortcode/DroidSans.png delete mode 100644 content/overview-fonts-imagehover-shortcode/Lato.png delete mode 100644 content/overview-fonts-imagehover-shortcode/Roboto.png delete mode 100644 content/overview-fonts-imagehover-shortcode/System.png delete mode 100644 content/overview-fonts-imagehover-shortcode/Ubuntu.png delete mode 100644 content/overview-fonts-imagehover-shortcode/index.md create mode 100644 content/overview-images/corro.svg create mode 100644 content/overview-images/ferris-gesture.svg create mode 100644 content/overview-images/ferris-happy.svg create mode 100644 content/overview-images/ferris.svg delete mode 100644 content/overview-images/image.jpg create mode 100644 content/overview-images/img/ferris-gesture.svg create mode 100644 content/overview-images/img/ferris.svg delete mode 100644 content/overview-images/rust.png delete mode 100644 content/overview-rich-content.md create mode 100644 content/overview-rich-content/ferris-gesture.svg create mode 100644 content/overview-rich-content/ferris.svg create mode 100644 content/overview-rich-content/index.md create mode 100644 content/overview-rich-content/over9000-400.webp create mode 100644 content/overview-rich-content/over9000-640.webp create mode 100644 content/overview-rich-content/over9000-960.webp create mode 100644 content/overview-rich-content/over9000.mp3 create mode 100644 content/overview-rich-content/over9000.ogg create mode 100644 content/overview-rich-content/over9000_av1.mp4 create mode 100644 content/overview-rich-content/over9000_vp9.webm (limited to 'content') diff --git a/content/overview-abridge.md b/content/overview-abridge.md index b5c2a05..0d5d675 100644 --- a/content/overview-abridge.md +++ b/content/overview-abridge.md @@ -4,7 +4,7 @@ date = 2022-05-17 [taxonomies] categories = ["Features"] -tags = ["theme","config"] +tags = ["config"] +++ For quick setup copy the config.toml from the abridge theme into the root of your zola site, this will give you a base configuration with all config values used. diff --git a/content/overview-fonts-imagehover-shortcode/Arimo.png b/content/overview-fonts-imagehover-shortcode/Arimo.png deleted file mode 100644 index ceff44d..0000000 Binary files a/content/overview-fonts-imagehover-shortcode/Arimo.png and /dev/null differ diff --git a/content/overview-fonts-imagehover-shortcode/DroidSans.png b/content/overview-fonts-imagehover-shortcode/DroidSans.png deleted file mode 100644 index d6cb2a1..0000000 Binary files a/content/overview-fonts-imagehover-shortcode/DroidSans.png and /dev/null differ diff --git a/content/overview-fonts-imagehover-shortcode/Lato.png b/content/overview-fonts-imagehover-shortcode/Lato.png deleted file mode 100644 index 2401bb0..0000000 Binary files a/content/overview-fonts-imagehover-shortcode/Lato.png and /dev/null differ diff --git a/content/overview-fonts-imagehover-shortcode/Roboto.png b/content/overview-fonts-imagehover-shortcode/Roboto.png deleted file mode 100644 index ea2f7d9..0000000 Binary files a/content/overview-fonts-imagehover-shortcode/Roboto.png and /dev/null differ diff --git a/content/overview-fonts-imagehover-shortcode/System.png b/content/overview-fonts-imagehover-shortcode/System.png deleted file mode 100644 index e01bdea..0000000 Binary files a/content/overview-fonts-imagehover-shortcode/System.png and /dev/null differ diff --git a/content/overview-fonts-imagehover-shortcode/Ubuntu.png b/content/overview-fonts-imagehover-shortcode/Ubuntu.png deleted file mode 100644 index 807c21a..0000000 Binary files a/content/overview-fonts-imagehover-shortcode/Ubuntu.png and /dev/null differ diff --git a/content/overview-fonts-imagehover-shortcode/index.md b/content/overview-fonts-imagehover-shortcode/index.md deleted file mode 100644 index 448c7f0..0000000 --- a/content/overview-fonts-imagehover-shortcode/index.md +++ /dev/null @@ -1,27 +0,0 @@ -+++ -title = "Image Comparison imagehover Shortcode" -date = 2021-05-04 - -[taxonomies] -categories = ["Features"] -tags = ["shortcodes","image"] -+++ - -This shortcode accepts an array of images, the first element is the one you are comparing to all the others. - -The first image in the array is displayed, hover you mouse over the image to display the one your comparing to. - - -This can also be used to compare just one picture with another by passing only two files in the array: - -`imagehover(sources=["regular.png", "hover.png"] w=560 h=650 p=45` - -To Compare many images just add more images to the array: - -`imagehover(sources=["System.png", "DroidSans.png", "Roboto.png", "Arimo.png", "Lato.png", "Ubuntu.png"] w=560 h=650 p=45` - -- w is the width of the image. -- h is the height of the image. -- p is the percent size that you want the image to use on the page.(50 is the default) - -{{ imagehover(sources=["System.png", "DroidSans.png", "Roboto.png", "Arimo.png", "Lato.png", "Ubuntu.png"] w=560 h=650 p=45) }} diff --git a/content/overview-images/corro.svg b/content/overview-images/corro.svg new file mode 100644 index 0000000..959dbf8 --- /dev/null +++ b/content/overview-images/corro.svg @@ -0,0 +1 @@ + diff --git a/content/overview-images/ferris-gesture.svg b/content/overview-images/ferris-gesture.svg new file mode 100644 index 0000000..d819588 --- /dev/null +++ b/content/overview-images/ferris-gesture.svg @@ -0,0 +1 @@ + diff --git a/content/overview-images/ferris-happy.svg b/content/overview-images/ferris-happy.svg new file mode 100644 index 0000000..5e2f904 --- /dev/null +++ b/content/overview-images/ferris-happy.svg @@ -0,0 +1 @@ + diff --git a/content/overview-images/ferris.svg b/content/overview-images/ferris.svg new file mode 100644 index 0000000..1409b10 --- /dev/null +++ b/content/overview-images/ferris.svg @@ -0,0 +1 @@ + diff --git a/content/overview-images/image.jpg b/content/overview-images/image.jpg deleted file mode 100644 index 7b9e98d..0000000 Binary files a/content/overview-images/image.jpg and /dev/null differ diff --git a/content/overview-images/img/ferris-gesture.svg b/content/overview-images/img/ferris-gesture.svg new file mode 100644 index 0000000..d819588 --- /dev/null +++ b/content/overview-images/img/ferris-gesture.svg @@ -0,0 +1 @@ + diff --git a/content/overview-images/img/ferris.svg b/content/overview-images/img/ferris.svg new file mode 100644 index 0000000..1409b10 --- /dev/null +++ b/content/overview-images/img/ferris.svg @@ -0,0 +1 @@ + diff --git a/content/overview-images/index.md b/content/overview-images/index.md index d253932..22e1f92 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -1,28 +1,104 @@ +++ -title = "Image Examples" -date = 2021-05-09 +title = "Image Shortcodes" +date = 2021-05-19 [taxonomies] categories = ["Features"] -tags = ["images"] +tags = ["shortcodes","images"] +[extra] +toc = true +++ -Images can be embed using direct or relative paths. +This post covers the **imghover and img shortcodes**. Images can also be embeded directly using markdown `![Ferris](ferris.svg)`, but it is better to use a shortcode so you can explicitly set the width and height, this will help prevent content layout shift which improves user experience and the google lighthouse score. -Use `img(path="./image.jpg", alt="Papaya")` to specify the relative path of image: -{{ img(path="./image.jpg", alt="Papaya") }} +# img Shortcode -This is an example note with direct image, without using shortcode: +- src is the path and filename of the image. (mandatory) +- class sets a class for the image. (optional) +- alt sets the alt note for the image. (recommended for google lighthouse) +- w is the width of the image. (recommended for google lighthouse) +- h is the height of the image. (recommended for google lighthouse) -`![Rust](rust.png)` +## Usage (same path) +```rs +{{/* img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) */}} +``` +**Output** +```html +{{ img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) }} +``` +{{ img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) }} -![Rust](rust.png) +## Usage (relative path ./) +```rs +{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) */}} +``` +**Output** +```html +{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) }} +``` +{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) }} -This is an svg image: +## Usage (root path /) +```rs +{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) */}} +``` +**Output** +```html +{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) }} +``` +{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) }} - +# SVG image directly in code: +```html + +``` + + + +# imghover Shortcode + +The first image in the src array is the one compared to all the others. + +When you hover your mouse over an image it will display the image to compare. + +This can be used to compare only one image with another by passing only two src in the array. + +- src is an array of paths and filenames for the images. (mandatory) +- w is the width of the image. +- h is the height of the image. +- p is the percent size that you want the image to use on the page. (50 is the default) + +*w and h are used only to calculate the aspect ratio, overall size is set by p* + +## Usage (same path) +```rs +{{/* imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) */}} +``` +**Output** +```html +{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +``` +{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} + +## Usage (relative path ./) +```rs +{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}} +``` +**Output** +```html +{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +``` +{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} + +## Usage (root path /) +```rs +{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}} +``` +**Output** +```html +{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +``` +{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} - diff --git a/content/overview-images/rust.png b/content/overview-images/rust.png deleted file mode 100644 index 38cbc4f..0000000 Binary files a/content/overview-images/rust.png and /dev/null differ diff --git a/content/overview-markdown-syntax.md b/content/overview-markdown-syntax.md index add1d58..1dc7e11 100644 --- a/content/overview-markdown-syntax.md +++ b/content/overview-markdown-syntax.md @@ -46,7 +46,7 @@ The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. -## Blockquote without attribution +## Blockquote no attribution > Tiam, ad mint andaepu dandae nostion secatur sequo quae. > **Note** that you can use *Markdown syntax* within a blockquote. @@ -59,6 +59,11 @@ and optionally with in-line changes such as annotations and abbreviations. > All men by nature desire to know.
> ― Aristotle[^2] +## Blockquote with author + +> Power comes in response to a need, not a desire.
+> — *Goku* + # Tables Tables aren't part of the core Markdown spec, but Zola supports them @@ -72,12 +77,25 @@ out-of-the-box. John | 59 Kerry | 23 -## Inline Markdown within tables +## Table with Inline Markdown | Italics | Bold | Code | StrikeThrough | | -------- | -------- | ------ | ----------------- | | *italics* | **bold** | `code` | ~~strikethrough~~ | + +## Large table within figure tag + +Surround very Large tables with `
` so they can scroll horizontally. +
+ +| **Manufacturer** | Volkswagen | Toyota | Ford | Honda | Chevrolet | BMW | Hyundai | Audi | Nissan | Kia | Mercedes | Tesla | Mitsubishi | Suzuki | Volvo | Subaru | Mazda | Jaguar | Buick | Lexus | GMC | Porsche | Cadillac | +| ---------- | ---- | ---- | ---- | ---- | ---- | ---- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | +| **Revenue $B** | $254 | $249 | $127 | $124 | $123 | $113 | $88 | $83 | $74 | $61 | $55 | $54 | $38 | $31 | $30 | $28 | $27 | $22 | $21 | $19 | $17 | $16 | $12 | + +
+*revenue values found on search engine and not verified, for figure scroller table demonstration purposes only.* + # Foldable Text
diff --git a/content/overview-math.md b/content/overview-math.md index d8f50da..a759cac 100644 --- a/content/overview-math.md +++ b/content/overview-math.md @@ -4,31 +4,35 @@ date = 2021-05-05 updated = 2022-01-01 [taxonomies] categories = ["Features"] -tags = ["KaTeX", "Mathematics"] +tags = ["shortcodes","Mathematics"] [extra] math = true +math_auto_render = true +++ -You can use [$\KaTeX$](https://katex.org) to render mathematical notations. +You can use [KaTeX](https://katex.org) to render mathematical notations. You can enable the $\KaTeX$ support globally, per-section or per-page basis. ## Enable Globally To enable the $\KaTeX$ support globally, add `math = true` under `[extra]` of the `config.toml` -at your site root. Now every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). +at your site root. Now the katex shortcode will be rendered, you can also add `math_auto_render = true` +and every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). ```toml [extra] math = true +math_auto_render = true ``` ## Per-section Basis -To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`. Now every page under this section will load the KaTeX -[autorender extension](https://katex.org/docs/autorender.html). +To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`. +Now the katex shortcode will be rendered, you can also add `math_auto_render = true` +and the section of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). -```md +```toml +++ [extra] math = true @@ -38,12 +42,14 @@ math = true ## Per-page Basis To enable the $\KaTeX$ support in a particular page, add `math = true` under `[extra]` in the page's -frontmatter. Now this page will load the $\KaTeX$ [autorender extension](https://katex.org/docs/autorender.html). +frontmatter. Now the katex shortcode will be rendered, you can also add `math_auto_render = true` +and the page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). -```markdown +```toml +++ [extra] math = true +math_auto_render = true +++ ``` @@ -60,26 +66,38 @@ Mathematics and `$$...$$` for block Mathematics. This is the most beautiful equation I've ever seen: +### Usage +```rs +{%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%} ``` -$e^{i\pi}+1=0$ +### Output +```html +{% katex(block=false) %} e^{i\pi}+1=0 {% end %} ``` -$e^{i\pi}+1=0$ +{% katex(block=false) %} e^{i\pi}+1=0 {% end %} ### Block Mathematics Some Mathematics in display mode is fair enough: +### Usage +```rs +{%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%} ``` -$$ -\int_0^1 x^2 dx -$$ +### Output +```html +{% katex(block=true) %} \int_0^1 x^2 dx {% end %} +``` +{% katex(block=true) %} \int_0^1 x^2 dx {% end %} + +### Auto Render Inline Example +``` +$ e^{i\pi}+1=0 $ ``` -$$ -\int_0^1 x^2 dx -$$ -### Another Example +$ e^{i\pi}+1=0 $ +### Auto Render Block Example ``` $$ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi diff --git a/content/overview-rich-content.md b/content/overview-rich-content.md deleted file mode 100644 index b511713..0000000 --- a/content/overview-rich-content.md +++ /dev/null @@ -1,90 +0,0 @@ -+++ -title = "Rich Content" -description = "A brief description of Zola Shortcodes" -date = 2021-05-06 - -[taxonomies] -categories = ["Features"] -tags = ["video", "audio", "images", "shortcodes"] -[extra] -toc = true -+++ - -Several custom shortcodes are included to augment CommonMark (courtesy of d3c3nt theme), 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. - - - -## Video - -The `video` shortcode takes a `sources` parameter (an array of strings) -and returns a `