Best way to share shortcodes / snippets etc.?

Meta
1

I am having a great time working with Hugo, I’ve been making various shortcodes and am wondering what is the best way to share them? A theme is way over the top, and they’re probably not generic enough to warrant being a built-in shortcode.

Would it be worth my time to create a new “Helpful Shortcodes” section of the docs, much like the Themes section? Some of the shortcodes I’d like to contribute:

Mobile

Generates HTML with a mobile-phone frame and adaptive imagery

{{< mobile src="mobile.png" class="dark responsive" alt="FlowVRP Mobile App" >}}

37
Screenshot 2019-04-19 at 16.51.37.png735×528 11.1 KB

Desktop

{{< desktop icon="fas fa-rocket" title="With title and Icon" >}}
  <h1>Any Content</h1>
{{< /desktop >}}

42
Screenshot 2019-04-19 at 17.11.42.png785×204 9.1 KB

CSV

{{< csv src="data.csv" rows="4" filename="Example Data.csv" >}}

44
Screenshot 2019-04-19 at 16.53.44.png697×246 6.95 KB

Desktop + CSV

These can be combined to good effect:

{{< desktop class="dark nopadding" color="#217246" icon="fas fa-file-excel" title="Excel Spreadsheet" >}}
  {{< csv src="data.csv" rows="4" >}}
{{< /desktop >}}

01
Screenshot 2019-04-19 at 17.08.01.png789×334 13 KB

1 Like
2

I would recommend making them into Theme Components. Here’s a nice example by @martignoni

And another nice example by @kaushalmodi

4 Likes
3

Aha, this is fantastic - a theme component answers a few questions (such as including static assets etc.). Cheers @zwbetz

4

…still, the showcase doesn’t list theme components - or if it does, not in a meaningful manner.

I’ll publish my work as theme components, but also look to see if there’s a better way to get them to a wider audience.

5

I just love the short codes you described. I would love to be able to use them. Are they on github?

6

It’s a private repo and relies on Hugo pipes to generate the SCSS - ultimately I’m not sure how to organise a theme-component that has both Shortcode, custom SCSS pipeline and a light requirement for an icon library that hijacks the <i> element… The SCSS depends on my WIP framework (flowcss.com) so needs to be decoupled before it can be shared. For my own development purposes I find it a lot quicker to work with the framework. Plus the resulting CSS is pretty damn light.

I imagine there’s a tonne of snippets, shortcodes and themes that heavily rely on Bootstrap - a coupling that I find irritating. Even the hugo built-in paginator has “bootstrap-compatible styles”. Shame. As such I don’t know how I’d feel about releasing something that forces people to use my framework…

Maybe the best approach is to have a site-wide variable that dictates the classnames used for these components, ie:

css-framework: bootstrap | flowcss | bulma | etc.

Ideas on a postcard