From 9543caf10ffdbcc2cea462a8bcb64cee29d406d5 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Mon, 22 May 2023 23:09:27 -0700 Subject: Syntax Highlighting Variables --- content/overview-rich-content/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 6e5d1b8..8f86d3b 100644 --- a/content/overview-rich-content/index.md +++ b/content/overview-rich-content/index.md @@ -1,7 +1,7 @@ +++ title = "Rich Content" description = "A brief description of custom Shortcodes for Zola that implement modern html elements: video, image, gif, audio." -date = 2021-05-18 +date = 2021-05-15 draft = false [taxonomies] -- cgit v1.3.1 From 0983915e23793c28dd0bee149fd2ec05a7e96a94 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Tue, 15 Aug 2023 21:10:25 -0700 Subject: Lighthouse and YellowLabTools optimizations --- README.md | 7 +++++++ content/overview-images/ferris-gesture.png | Bin 18429 -> 6741 bytes content/overview-rich-content/index.fr.md | 8 ++++---- content/overview-rich-content/index.md | 8 ++++---- content/overview-rich-content/over9000-400.avif | Bin 0 -> 20795 bytes content/overview-rich-content/over9000-400.webp | Bin 24322 -> 0 bytes content/overview-rich-content/over9000-640.avif | Bin 0 -> 31511 bytes content/overview-rich-content/over9000-960.avif | Bin 0 -> 43170 bytes content/overview-rich-content/over9000-960.webp | Bin 39488 -> 0 bytes sass/abridge.scss | 20 +------------------- screenshot.png | Bin 122329 -> 53621 bytes static/android-chrome-192x192.png | Bin 2535 -> 1609 bytes static/android-chrome-192x192m.png | Bin 2273 -> 1170 bytes static/android-chrome-512x512.png | Bin 5377 -> 3937 bytes static/apple-touch-icon.png | Bin 2606 -> 1542 bytes static/banner.png | Bin 13241 -> 4582 bytes static/favicon-32x32.png | Bin 663 -> 559 bytes static/mstile-150x150.png | Bin 2251 -> 1202 bytes templates/base.html | 2 +- templates/macros/social.html | 4 ++-- templates/shortcodes/image.html | 2 +- templates/shortcodes/img.html | 7 +++++-- templates/shortcodes/imgswap.html | 14 ++++++++++---- 23 files changed, 35 insertions(+), 37 deletions(-) create mode 100644 content/overview-rich-content/over9000-400.avif delete mode 100644 content/overview-rich-content/over9000-400.webp create mode 100644 content/overview-rich-content/over9000-640.avif create mode 100644 content/overview-rich-content/over9000-960.avif delete mode 100644 content/overview-rich-content/over9000-960.webp (limited to 'content/overview-rich-content/index.md') diff --git a/README.md b/README.md index 0db22ce..be9f552 100644 --- a/README.md +++ b/README.md @@ -356,6 +356,13 @@ leanify -i 7777 *.png leanify -i 7777 *.ico ``` +With larger displays and greater pixel density becoming common it is probably a good idea to use atleast a littly bit of lossy compression. For example you can use pngquant with a 93% quality and you will often get images around 1/2 the size. Understand that pngquant is cumulative, so you should keep your original images somewhere, and only ever use pngquant once per image, if you use it again and again on the same image then you will lower the image quality each time. Always use oxipng afterwards, oxipng is lossless. + +```bash +pngquant --skip-if-larger --strip --quality=93-93 --speed 1 *.png +oxipng -o max --strip all -a -Z *.png +``` + ### Pre gzip/brotli content to serve with nginx: If you are serving your site with nginx, you can pre gzip your content. diff --git a/content/overview-images/ferris-gesture.png b/content/overview-images/ferris-gesture.png index e9c8708..67f6cd1 100644 Binary files a/content/overview-images/ferris-gesture.png and b/content/overview-images/ferris-gesture.png differ diff --git a/content/overview-rich-content/index.fr.md b/content/overview-rich-content/index.fr.md index 819b2db..e768252 100644 --- a/content/overview-rich-content/index.fr.md +++ b/content/overview-rich-content/index.fr.md @@ -34,18 +34,18 @@ Le `video` shortcode prend un `sources` paramètre (un tableau de chaînes) et r Le `image` shortcode renvoie une `` balise et accepte trois paramètres : `sources` (un tableau de chaînes), `fallback_path`, et `fallback_alt` (les deux chaînes). -Chaque chaîne du `sources` tableau doit être un chemin vers un fichier image d'un type différent (`webp`, `png`, `jpg`, etc). `fpath` et +Chaque chaîne du `sources` tableau doit être un chemin vers un fichier image d'un type différent (`avif`, `webp`, `png`, `jpg`, etc). `fpath` et `falt` sont utilisés pour créer une `` balise sur laquelle le navigateur peut se replier si les autres formats ne sont pas encore pris en charge, fw et fh définissent la largeur et la hauteur de la solution de repli ### 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!") */}} +{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}} ``` ### Sortir ```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.avif", "over9000-640.avif", "over9000-400.avif"], 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!") }} +{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }} ## GIF diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md index 8f86d3b..4dc2285 100644 --- a/content/overview-rich-content/index.md +++ b/content/overview-rich-content/index.md @@ -41,19 +41,19 @@ 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 +a different type (`avif`, `webp`, `png`, `jpg`, etc). `fpath` and `falt` are used to create an `` 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!") */}} +{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], 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.avif", "over9000-640.avif", "over9000-400.avif"], 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!") }} +{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }} ## GIF diff --git a/content/overview-rich-content/over9000-400.avif b/content/overview-rich-content/over9000-400.avif new file mode 100644 index 0000000..e4c6b1d Binary files /dev/null and b/content/overview-rich-content/over9000-400.avif differ diff --git a/content/overview-rich-content/over9000-400.webp b/content/overview-rich-content/over9000-400.webp deleted file mode 100644 index 1b2876f..0000000 Binary files a/content/overview-rich-content/over9000-400.webp and /dev/null differ diff --git a/content/overview-rich-content/over9000-640.avif b/content/overview-rich-content/over9000-640.avif new file mode 100644 index 0000000..38d314b Binary files /dev/null and b/content/overview-rich-content/over9000-640.avif differ diff --git a/content/overview-rich-content/over9000-960.avif b/content/overview-rich-content/over9000-960.avif new file mode 100644 index 0000000..ae3584d Binary files /dev/null and b/content/overview-rich-content/over9000-960.avif differ diff --git a/content/overview-rich-content/over9000-960.webp b/content/overview-rich-content/over9000-960.webp deleted file mode 100644 index 28fba9c..0000000 Binary files a/content/overview-rich-content/over9000-960.webp and /dev/null differ diff --git a/sass/abridge.scss b/sass/abridge.scss index 5573482..2cde0d3 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -711,23 +711,9 @@ $syntax: true !default;//syntax highlighting for code blocks margin-bottom: 0; margin-top: 0.2rem; } - li { - display: inline-block; - margin: 0 .2rem; - } } main nav { - ul { - display: flex; - padding-left: 0; - } margin-top: var(--s2);//pagination margin - li { - margin: .2rem; - } - li.inp { - padding-top: .1rem; - } } .outp { padding: 0 .26rem .2rem; @@ -751,11 +737,7 @@ $syntax: true !default;//syntax highlighting for code blocks color: var(--a1);//pagination color current page } footer nav { - ul { - margin: 0; - padding: 0; - } - li { + i { margin: 0 .2rem .4rem; } } diff --git a/screenshot.png b/screenshot.png index cd3a293..ec8d65f 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png index 4eba45e..3a075c3 100644 Binary files a/static/android-chrome-192x192.png and b/static/android-chrome-192x192.png differ diff --git a/static/android-chrome-192x192m.png b/static/android-chrome-192x192m.png index f7e37a2..f1e485d 100644 Binary files a/static/android-chrome-192x192m.png and b/static/android-chrome-192x192m.png differ diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png index 371daf4..b671d86 100644 Binary files a/static/android-chrome-512x512.png and b/static/android-chrome-512x512.png differ diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png index b872d32..2923e41 100644 Binary files a/static/apple-touch-icon.png and b/static/apple-touch-icon.png differ diff --git a/static/banner.png b/static/banner.png index 775bff2..a4a46d5 100644 Binary files a/static/banner.png and b/static/banner.png differ diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png index e68ac3c..df1736f 100644 Binary files a/static/favicon-32x32.png and b/static/favicon-32x32.png differ diff --git a/static/mstile-150x150.png b/static/mstile-150x150.png index 41ce573..7a18d2b 100644 Binary files a/static/mstile-150x150.png and b/static/mstile-150x150.png differ diff --git a/templates/base.html b/templates/base.html index 2ab46f8..fd3c553 100644 --- a/templates/base.html +++ b/templates/base.html @@ -9,7 +9,7 @@ {{- macros_head::stylesheets(config=config) }} - + {{- macros_head::stylesheets_preload(config=config) }} {{- macros_head::js(config=config) }} diff --git a/templates/macros/social.html b/templates/macros/social.html index 6ad83de..1221ce7 100644 --- a/templates/macros/social.html +++ b/templates/macros/social.html @@ -1,5 +1,5 @@ {%- macro social_links(config) %} - {%- endmacro %} diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html index 8452ce9..4f9d3de 100644 --- a/templates/shortcodes/image.html +++ b/templates/shortcodes/image.html @@ -3,5 +3,5 @@ {% set type = source | split(pat=".") | last -%} {% endfor -%} - {{ falt | default(value='Image') }} + {{ falt | default(value='Image') }} diff --git a/templates/shortcodes/img.html b/templates/shortcodes/img.html index cf2a562..f23f783 100644 --- a/templates/shortcodes/img.html +++ b/templates/shortcodes/img.html @@ -24,5 +24,8 @@ {%- endif %} {%- set img = src | split(pat="/") | last %} -{%- set name = img | split(pat=".") | first %} - + +{%- if not alt %} + {%- set alt = img | split(pat=".") | first %} +{%- endif %} + diff --git a/templates/shortcodes/imgswap.html b/templates/shortcodes/imgswap.html index f8c983c..4397b29 100644 --- a/templates/shortcodes/imgswap.html +++ b/templates/shortcodes/imgswap.html @@ -25,8 +25,11 @@ {%- endif %} {%- set img = main_src | split(pat="/") | last %} - {%- set name = img | split(pat=".") | first %} - + + {%- if not alt %} + {%- set alt = img | split(pat=".") | first %} + {%- endif %} + {%- set dirtest = swap_src | trim_start_matches(pat="./") %} {%- if dirtest is containing("/") %} @@ -54,6 +57,9 @@ {%- endif %} {%- set img = swap_src | split(pat="/") | last %} - {%- set name = img | split(pat=".") | first %} - + + {%- if not alt %} + {%- set alt = img | split(pat=".") | first %} + {%- endif %} + -- cgit v1.3.1