HUGO

Let's maintain a list of Hugo shortcodes

I recently asked if shortcodes can be merged into main codebase. I was encouraged to maintain a separate repo. I have put an effort to set up a repo for the same.

Add shortcodes you use. Here is a link to the repo. https://github.com/santosh/hugo-shortcodes

Feedbacks are welcome.

5 Likes

The idea is good. I would however propose a change (which might lead you to change even more): Have a look at my “reusable” shortcode repo here:

If you add it as theme component you will be able to maintain multiple repositories. The more to the right the repo is set, the higher it’s “importance” is. If you have for instance your repo, then mine, then your theme in a line and have an image code in yours, my image shortcode will overwrite yours. You could even overwrite more in the theme itself.

This is more useful than copy-pasting and hoping to not miss updates to your repo.

Regarding the CSS in your components - I understand where your components approach comes from, but I think it will lead to issues in many validators and in general page speed. Let’s assume I have four blockquotes - the css code will come up four times in my page. That’s not much in sense of bits/bytes, but it’s there. A better approach might be a header form that one should add to their themes. Or even “completely hacky” load it via Javascript once and set a marker in each of the shortcodes to not load it again.

Just my 2 cents :slight_smile:

2 Likes

Ahh! I missed the theme component thing.

Thanks for pointing out @pkollitsch. I was not sure what it was from the first mention about it on the previous thread.

I will also take your word for CSS. I gotta improve!

I have not worked with Hugo themes much and am lost with DRYing up the CSS.

If I put my css files in static/css and mark my shortcodes HTML with appropriate classes. Will it work out of the box in my theme component?

If not, what changes will be needed (I am planning to use plain CSS)?

Yes, the static directory is copied over to the public like all other static directories. The naming is important here, because the root static directory will overwrite everything else in the end. Give yourself a namespace and work with that (like static/sntshk/styles.css or anything else where you control bigger parts of the name).

I realised that I have my own css not yet in that repo. Will check how to do it.

Blockquotes should ideally be added as a render hook. I don’t know if it is available yet.

Well well well… the method you described is working like a charm. But it would be good if the copied file actually get merge with the main style.min.<somehex>.css.

Also, that file is minified. There must be some automated way. So I found out about Hugo Pipes. Here is what I already did.

  • Copied my css from static/css/style.css to assets/css/style.css.

But I had no luck finding it in that minified file. Any suggestions?

What are render hooks now. :thinking: