hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support external_links_no_referrer

Browse Source
This commit is contained in:
daudix
2024-07-27 19:09:33 +03:00
parent a1e6ac1d58
commit 302b9d7aa1
3 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
content/blog/the-quill-of-duck/index.md
View File

@ -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`. _Stanley_ worked for a company in a big building where he was Employee `#427`.
<figure>
![The Office](the-office.webp) ![The Office](the-office.webp)
<figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption> <figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
</figure>
Employee `#427`'s job was simple: he sat at his desk in Room `427` and he pushed buttons on a keyboard. Employee `#427`'s job was simple: he sat at his desk in Room `427` and he pushed buttons on a keyboard.

14
content/demo/index.md
View File

@ -149,11 +149,15 @@ Available variables are:
{{/* image(url="image.png", alt="This is an image" no_hover=true) */}} {{/* image(url="image.png", alt="This is an image" no_hover=true) */}}
``` ```
<figure>
{{ image(url="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg", alt="Portal Gun blueprint", no_hover=true) }} {{ image(url="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg", alt="Portal Gun blueprint", no_hover=true) }}
<figcaption>Image with an alt text and without zoom on hover</figcaption> <figcaption>Image with an alt text and without zoom on hover</figcaption>
</figure>
<figure>
{{ 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(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) }}
<figcaption>Image with compressed version, an alt text, and without zoom on hover</figcaption> <figcaption>Image with compressed version, an alt text, and without zoom on hover</figcaption>
</figure>
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. 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. - `#transparent`: Removes rounded corners and shadow, useful for transparent images.
- `#no-hover`: Removes zoom on hover. - `#no-hover`: Removes zoom on hover.
\ <br />
<figure>
![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover) ![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover)
<figcaption>Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover</figcaption> <figcaption>Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover</figcaption>
</figure>
<br />
\
![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) ![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. 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="video.webm", alt="This is a video") */}}
``` ```
<figure>
{{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up") }} {{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up") }}
<figcaption>WebM video example from MDN</figcaption> <figcaption>WebM video example from MDN</figcaption>
</figure>
#### CRT #### CRT

3
sass/_external.scss
View File

@ -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"); $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-image: $icon;
-webkit-mask-size: cover; -webkit-mask-size: cover;