From 302b9d7aa1a4417e7e526d9d8ce193ba0f86ed52 Mon Sep 17 00:00:00 2001 From: daudix Date: Sat, 27 Jul 2024 19:09:33 +0300 Subject: [PATCH] Support external_links_no_referrer --- content/blog/the-quill-of-duck/index.md | 3 +++ content/demo/index.md | 14 ++++++++++++-- sass/_external.scss | 3 ++- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/content/blog/the-quill-of-duck/index.md b/content/blog/the-quill-of-duck/index.md index b8ecafa..3d24575 100644 --- a/content/blog/the-quill-of-duck/index.md +++ b/content/blog/the-quill-of-duck/index.md @@ -44,8 +44,11 @@ This is the story of a man named _Stanley_. _Stanley_ worked for a company in a big building where he was Employee `#427`. +
+ ![The Office](the-office.webp)
The Office where Stanley works, it has yellow floor and beige walls
+
Employee `#427`'s job was simple: he sat at his desk in Room `427` and he pushed buttons on a keyboard. diff --git a/content/demo/index.md b/content/demo/index.md index 5a9430e..8ba36fa 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -149,11 +149,15 @@ Available variables are: {{/* image(url="image.png", alt="This is an image" no_hover=true) */}} ``` +
{{ image(url="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg", alt="Portal Gun blueprint", no_hover=true) }}
Image with an alt text and without zoom on hover
+
+
{{ image(url="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg", url_min="https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg", alt="The gravestone of J.P.G.", no_hover=true) }}
Image with compressed version, an alt text, and without zoom on hover
+
Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g such images will render normally in any Markdown editor, opposed to the Zola shortcodes. @@ -165,11 +169,15 @@ Alternatively, you can append the following URL anchors. It can be more handy in - `#transparent`: Removes rounded corners and shadow, useful for transparent images. - `#no-hover`: Removes zoom on hover. -\ +
+
+ ![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover)
Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover
+
+ +
-\ ![1966 Ford Mustang coupe white](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/1966_Ford_Mustang_coupe_white_003.jpg/320px-1966_Ford_Mustang_coupe_white_003.jpg#start) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. @@ -182,8 +190,10 @@ For videos it's all the same except for a few differences: `no_hover` and `url_m {{/* video(url="video.webm", alt="This is a video") */}} ``` +
{{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up") }}
WebM video example from MDN
+
#### CRT diff --git a/sass/_external.scss b/sass/_external.scss index b021b16..37fbce6 100644 --- a/sass/_external.scss +++ b/sass/_external.scss @@ -1,4 +1,5 @@ -.external::after { +.external::after, +a[rel~="noreferrer"]::after { $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' %3E%3Cpath d='m6 6 5-5M7 1h4v4M4 2H3a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V8' style='fill:none;stroke:black;stroke-linejoin:round;stroke-linecap:round;stroke-width:2;stroke-dasharray:none'/%3E%3C/svg%3E"); -webkit-mask-image: $icon; -webkit-mask-size: cover;