Github Shortcode Repository

[Leoj03]

So, I’ve made a repository to store potentially useful shortcodes that aren’t built into Hugo. Currently there is only one shortcode that I wrote (an audio shortcode) in the repo, but anyone is welcome to contribute. I don’t know if there is already a repo dedicated to something like this, but here’s mine.

Leoj03/Hugo-Shortcodes

[bep]

I would recommend that you put the shortcodes below layouts/shortcodes. Then people can just include your repo as a Theme Component.

[Leoj03]

@bep Done. Thanks for the suggestion.

[serg]

I have created something similar with the shortcodes. This project called as Use shortcodes. Hope this project also will be useful for people.
Here is the repository and corresponding topic:

serg/use-shortcodes

https://discourse.gohugo.io/t/useful-shortcodes-expands/

[jhabdas]

Those expands are nice. Are those using the details and summary elements? I’m on my phone and don’t see the sources output.

Also, for the OP, I just ran across this which includes some shortcode snippets and some related discussion from the tail of 2017:

Hugo snippets library

There’s one that I know about that has a few shortcode snippets - https://github.com/NimishC/hugo-utils. And here’s a simple shortcode I use for info and warning messages - https://github.com/balsamiq/docs.balsamiq.com/blob/master/themes/docs-balsamiq-com/layouts/shortcodes/alert.html. -Leon

Not a whole lot there but cross-linking for reference.

[serg]

@jhabdas,

Not sure, that I understood correctly. Could you please describe what do you mean about details and summary elements for the expand shortcode?

[kaushalmodi]

@serg

what do you mean about details and summary elements for the expand shortcode?

Probably means this

[serg]

@kaushalmodi,

Thank you for pointing out!

Unfortunately this expand doesn’t use the details and summary elements.
As I know these elements don’t work in IE10+ and Edge. Instead, my implementation supports these type of browsers also. Not a strong argument, but some people probably could have these requirements.

Also I have tried to implement the expands by using minimum of the js code. The pure-expand shortcode use only css. The main problem that I faced out it’s dealing with the correct animation effects.

[jhabdas]

Thanks for verifying. I recommend opting for semantic markup (read: W3C/WHATWG recommendations) whenever possible regardless of default UX. Leveraging progressive disclosure using details and summary elements, for example, helps ensure HTML semantics are clean, offers a usable experience to assistive technology for free, usually degrades well in older browsers and, naturally, will see improved support over time.

As corollary, using semantic markup more frequently serves as a catalyst to push vendors forward.

That said, and as mentioned, what you’ve produced is quite nice. And if it can be read by a screen reader all the better until disclosure support improves in off-spec browsers. Great job!