search

getzola / zola

A fast static site generator in a single binary with everything built-in. https://www.getzola.org
https://www.getzola.org
MIT License
13.98k stars 963 forks source link

Is there a way for a shortcode to write some of its output to the <head> section? #1885

Closed Jieiku closed 2 years ago

Jieiku commented 2 years ago

I wrote an imghover shortcode, it does not use any javascript, only CSS. When you mouse over an image, the comparison image is displayed. Functions like this can be very useful in photography and video editing.

imghover

The problem is that I had to use style-src 'unsafe-inline' in my Content Security Policy (CSP). If there was a way for the shortcode to write some of its output into the head this could be avoided.

Another useful use for writing to the head with a shortcode would be using Facades for youtube or vimeo. I tested these locally and they increase page load speed back to no delay from the iframe embed:

vimeo facade: https://github.com/slightlyoff/lite-vimeo

youtube facade: https://github.com/justinribeiro/lite-youtube

I am hoping I have just overlooked some advanced trick or usage that could get around this, appreciate any help/insight that anyone can share.

mwcz commented 2 years ago

Maybe a {% block imghover %} inside your theme's <head> could work?

Edit: I just tried this and unfortunately it didn't work.

Jieiku commented 2 years ago

darn, Thank You for the idea though, appreciate it.

Keats commented 2 years ago

The only way for that that to work would be to have the shortcode contain JS that updates <head>. Shortcodes are completely out of the template rendering so they can't interact in any way.

Jieiku commented 2 years ago

would it be possible to have a shortcode store some of its output into a variable that gets inserted right before the closing head tag </head> if I were to extend how shortcodes work in zola, am I correct in what I am thinking?

I have not looked at the rust code for zola, but I got a little free time coming up and I could take a look.

Keats commented 2 years ago

That would go against the goal of shortcodes being sandboxed so I would lean against it. Maybe wordpress or hugo does something similar to that that would work nicely?

Jieiku commented 2 years ago

Do you mean maybe we could get an idea from one of those two?

I kinda think maybe your saying that as a joke (hard to tell what people mean on the internet)

I dislike using both wordpress and hugo. (Fully intend to use Zola for the Long Haul!)

Jieiku commented 2 years ago

Update: After further investigation I have determined that even if you place the style block into the Head Section it is STILL considered unsafe-inline, so this does not work with CSP inplace:

<head>
<style>
.myBack {background-color:#191919}
</style>
</head>

I tested this by setting some style elements in the Head section and those styles were not applied and I could see the CSP violation in the developer console.

What this means is that a CSS only solution for my imghover shortcode is NOT possible unless I can somehow get that css into a stylesheet and load it that way.

What I am thinking now is that maybe there is a way to extend shortcodes so that they have the ability to generate a css file that can accompany the html for that given page.

welpo commented 1 year ago

For reference, the implementation of the specific hover shortcode was indeed possible with CSS+HTML, without unsafe-inline styles.

I added it to my theme in https://github.com/welpo/tabi/pull/104. Here's a live example.

Jieiku commented 1 year ago

Yes, for those curious the solution was to not rely on injecting style into the page at all. Instead have the shortcode load both resources and use classes from your main css file to facilitate the swapping. I implemented the same logic in Abridge after seeing the solution in Tabi.