# Github Shortcode Repository

**URL:** <https://discourse.gohugo.io/t/github-shortcode-repository/13673>\
**Category:** tips & tricks\
**Created:** [August 18, 2018, 2:05am UTC](https://discourse.gohugo.io/t/github-shortcode-repository/13673 "2018-08-18T02:05:22Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Leoj03](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/leoj03/32/6734_2.png) [@Leoj03](https://discourse.gohugo.io/u/Leoj03)\
**Post date:** [August 18, 2018, 2:05am UTC](https://discourse.gohugo.io/t/github-shortcode-repository/13673/1 "2018-08-18T02:05:23Z")

</div>

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](https://github.com/Leoj03/Hugo-Shortcodes)**
>
> Various shortcodes for Hugo. Contribute to Leoj03/Hugo-Shortcodes development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [August 18, 2018, 9:19am UTC](https://discourse.gohugo.io/t/github-shortcode-repository/13673/2 "2018-08-18T09:19:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Leoj03](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/leoj03/32/6734_2.png) [@Leoj03](https://discourse.gohugo.io/u/Leoj03)\
**Post date:** [August 18, 2018, 1:24pm UTC](https://discourse.gohugo.io/t/github-shortcode-repository/13673/3 "2018-08-18T13:24:43Z")

</div>

@bep Done. Thanks for the suggestion.

---

<div class="post-metadata">

**Author:** ![serg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/serg/32/4722_2.png) [@serg](https://discourse.gohugo.io/u/serg)\
**Post date:** [August 19, 2018, 7:51am UTC](https://discourse.gohugo.io/t/github-shortcode-repository/13673/4 "2018-08-19T07:51:41Z")

</div>

I have created something similar with the shortcodes. This project called as [Use shortcodes](https://useshortcodes.netlify.com/). Hope this project also will be useful for people.  
Here is the repository and corresponding topic:

> **[serg/use-shortcodes](https://github.com/serg/use-shortcodes)**
>
> 🔧 Useful shortcodes for your next Hugo website. Contribute to serg/use-shortcodes development by creating an account on GitHub.

  
[https://discourse.gohugo.io/t/useful-shortcodes-expands/](https://discourse.gohugo.io/t/useful-shortcodes-expands/)

---

<div class="post-metadata">

**Author:** ![jhabdas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jhabdas/32/6579_2.png) [@jhabdas](https://discourse.gohugo.io/u/jhabdas)\
**Post date:** [August 19, 2018, 12:59pm UTC](https://discourse.gohugo.io/t/github-shortcode-repository/13673/5 "2018-08-19T12:59:50Z")

</div>

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](https://discourse.gohugo.io/t/hugo-snippets-library/8313/11):
>
> There’s one that I know about that has a few shortcode snippets - [https://github.com/NimishC/hugo-utils](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](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.

---

<div class="post-metadata">

**Author:** ![serg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/serg/32/4722_2.png) [@serg](https://discourse.gohugo.io/u/serg)\
**Post date:** [August 19, 2018, 7:07pm UTC](https://discourse.gohugo.io/t/github-shortcode-repository/13673/6 "2018-08-19T19:07:53Z")

</div>

@jhabdas,

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

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [August 20, 2018, 12:52am UTC](https://discourse.gohugo.io/t/github-shortcode-repository/13673/7 "2018-08-20T00:52:57Z")

</div>

> [@serg](#):
>
> what do you mean about `details` and `summary` elements for the expand shortcode?

Probably means [this](https://ox-hugo.scripter.co/doc/details-and-summary/) 🙂

---

<div class="post-metadata">

**Author:** ![serg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/serg/32/4722_2.png) [@serg](https://discourse.gohugo.io/u/serg)\
**Post date:** [August 20, 2018, 7:50am UTC](https://discourse.gohugo.io/t/github-shortcode-repository/13673/8 "2018-08-20T07:50:33Z")

</div>

@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](https://caniuse.com/#feat=details) 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.

---

<div class="post-metadata">

**Author:** ![jhabdas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jhabdas/32/6579_2.png) [@jhabdas](https://discourse.gohugo.io/u/jhabdas)\
**Post date:** [August 20, 2018, 10:57am UTC](https://discourse.gohugo.io/t/github-shortcode-repository/13673/9 "2018-08-20T10:57:14Z")

</div>

Thanks for verifying. I recommend opting for semantic markup (read: W3C/WHATWG recommendations) whenever possible regardless of default UX. Leveraging progressive disclosure using [`details`](https://devdocs.io/html/element/details) and [`summary`](https://devdocs.io/html/element/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!