roneoorg/hugo-shortcode-roneo-collection

A shortcode collection for Hugo

Enhancing Hugo with a Shortcode collection

Use inline SVG icons

• Use 4000+ open source SVG icons with Hugo
• Easily add your own icons and define custom CSS classes

Screenshot

Usage

As a shortcode:

{{< ico moon >}}

{{< ico icon="star" theme="solid" class="red medium" >}}

As a partial:

{{ partial "ico" "star" }}

See this release announcement to learn more

---

Embed audio files

An elegant way to insert an audio player and share local and remote audio files.

Usage:

{{< audio "https://archive.org/download/test/aufiofile.mp3" >}}

Screenshot:

Options are available. Here we define a caption

{{< audio "/audiofilename.mp3" "A custom comment" >}}

Named parameters can be used too:

{{< audio src="/audiofilename.mp3" caption="A custom comment" class="foo" preload="none" >}}

This shortcode is based on Plyr.io, see this tutorial to set up with Hugo

---

Customized notices and warning

Usage:

{{< box info >}}
  Incididunt labore eiusmod culpa eu nostrud tempor laborum consequat eiusmod excepteur.
{{< /box >}}

Screenshot:

See the demo and documentation for details.

---

Embed video file

Mission: easily embed players from local and remote video files

Usage:

{{< video "https://archive.org/download/tesfile.mp4" >}}

Options are available. Here we define a caption:

{{< video "/testfile.mp4" "A custom caption" >}}

Named parameters can be used too:

{{< video src="/test-file.mp4" caption="A custom comment"  poster="preview-image.jpg" class="foo" preload="none" >}}

This shortcode is based on Plyr.io, see the documentation to learn about the features and this tutorial to set up with Hugo

---

Show Creative Commons icons

Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights holders may use to share original works.

Authors can give selected rights to others, with optional criterias.

This Hugo Shortcode can be used to display icons depending on selected criterias.

{{< cc "by" >}}  
{{< cc "by nc" >}}
{{< cc "by-nc-sa" >}}

Will show

The linked URL is adapted to point to the right Creative Commons license.

---

Include a Markdown file into another

The same content can be relevant in several places.
Here is how to include the same Markdown file in multiple pages.

{{% include "included-file-name.md" %}}

Features:

• Markdown content and Shortcodes are properly included and rendered
• The Front Matter of included file is hidden
• The filename is enough (no fullpath is required)

Note that you may need to restart Hugo Server to see the changes in included files applied.

See these notes for details

---

Installation

See the dedicated documentation.

Found a problem?

Please open an issue on Github / Gitlab or drop me an email.

Contribute

Code contributions are welcome, and the main place for development is this Gitlab repo. You can use this Github repo too.

Please star this repo on Github or Gitlab, to help this project gain some visibility and reach new contributors.

References

• Hugo documentation about Theme Components
• Hugo documentation about Shortcodes

Related projects

• Awesome Hugo Shortcodes For Your Websites
• Darth's Hugo shortcodes
• Hugo-leaflet: insert OSM Maps, Markers and Tracks
• Hugo Attachment shortcode
• Hugo Tabs shortcode
• Hugo-cloak-email: hide email adresses from spammers
• Hugo Timeline Shortcode
• Add Plots With Hugo Shortcodes - Plotly

hugo-shortcode-roneo-collection's Issues

Whitespace on default icons in theme/layouts files

I'm trying to include an icon in a template file

<div class="book-brand">
  <h3>
    {{ partial "ico" "star" }}
    <span>{{ .Site.Title }}</span>
  </h3>
</div>

This works, but the icon included has a couple of pixels with whitespace, resulting in a somewhat off-base visual of the result:

How can I get the proper alignment?

Icons in front matter

What is the requirement for using icons in front matter?
It seems like the requirement is having at least two files to create a partials template in /layouts/partials that defines what icons will be references in the front matter and for which keys. Those files are _ico.html and ico.html.
In my case I created a folder in my project called partials in layouts, and then created a file called ico.html but I have no idea what is supposed to go in that file or in _ico.html other than MAYBE exactly whatever is in those files in this github project. I mean I have found something here that says you need to have some text along the lines of:
{{ .Params.icon | markdownify }} but I have no idea how to use that information in creating the template(s).

If you want to have front matter like this:

---
title: "This is a title preceded by an icon in the sidebar"
icon: {{< ico inbox-full>}}
---

But I do not see how these things work together to produce the desired effect.

Box shortcode title on new line and margin too large?

I couldn't see whether my personal CSS is somehow messing with it, but I'm a newbie when it comes to anything frontend.

Code:

{{< box info >}}
Test

test
{{< /box >}}

{{< box warning >}}
hello

testing
{{< /box >}}

Missing LICENSE information for the repo

Hello. You obviously mean this repository to be used by others, but we don't know what the license terms are. Could you add a LICENSE file or indicate in the README the copyright and license?

Warning: Too many open files / "Hugo Server" command

Hi.
I am just taking a look at this. Unfortunately when I run hugo server I get the following error.

Built in 3 ms
Error: error building site: failed to acquire a build lock: open /Users/aspann/Documents/Development/hugo/bas-man.dev/.hugo_build.lock: too many open files

No error when I run hugo

is there a fix for this.

My config has the following

theme = [ "hugo-shortcode-roneo-collection", "hugo-notice", "beautifulhugo" ]

I hope to remove the hugo-notice if this looks good.

Thanks