Can you please provide me with feedback on my shortcode for displaying admonitions?

support
1

Hello, I use the Org mode format for markup, and I don’t think I can use the admonition feature that was added in newer versions of Hugo. I noticed there’s also hugo-notice, which isn’t bad but offers more than I need. I decided to create a simple shortcode that looks like this, inspired from hugo-notice:

{{- $admonitionType := .Get 0 | default "note" -}}
{{- $raw := (markdownify .Inner | chomp) -}}

<div class="admonition {{ $admonitionType }}">
  <p class="admonition-title">{{ $admonitionType }}</p>
  <p>{{ $raw }}</p>
</div>

Then use the following CSS:

.admonition {
  padding: .5em 1.5em;
  border-left-width: .4em;
  border-left-style: solid;
}

.admonition-title {
  text-transform: uppercase;
  margin-top: .5em;
  font-weight: 700;
}

.admonition.note {
  background: #fef8e7;
  border-left-color: #f1bb16;
}

.admonition.important {
  background: #ffe6e6;
  border-left-color: #bf0000;
}

.admonition.tip {
  background: #edfaea;
  border-left-color: #43b929;
}

Resulting in this:

admonition
admonition938×875 102 KB

I only need these three admonitions, icons are not necessary, and there’s no need for i18n translation of titles. What do you suggest. Should I go with my custom shortcode then?

I’m not sure if I did things right in the shortcode as I’m not very familiar with the Hugo syntax. I would be grateful for any feedback, especially about these two lines:

{{- $admonitionType := .Get 0 | default "note" -}}
{{- $raw := (markdownify .Inner | chomp) -}}
2

Although I can’t envision a need to “chomp” the text between the opening an closing shortcode tags, if you chomp you should chomp before passing .Inner to markdownify.

Also, there’s no need to initialize a $raw variable.

{{- $admonitionType := .Get 0 | default "note" -}}
<div class="admonition {{ $admonitionType }}">
  <p class="admonition-title">{{ $admonitionType }}</p>
  <p>{{ .Inner | chomp | markdownify }}</p>
</div>

Other than that, looks great.

1 Like
3

Thank you. I appreciate it. Without using chomp, would you recommend at least using trim? or not needed? If it’s not needed, I’ll simply go with:

<p>{{ .Inner | markdownify }}</p>
4

Not needed.

5

Thank you. I changed the term ‘admonition’ to ‘callout’ because ‘admonition’ sounds too formal and more like a warning than just an information box. I could be wrong, though.

I’m using the upper function to make all letters uppercase, which I could also do with CSS using text-transform. But since Hugo supports capitalization, I thought, why not use it?

{{- $calloutType := .Get 0 | default "note" -}}
<aside class="callout {{ $calloutType }}">
  <header>{{ $calloutType | upper }}</header>
  <p>{{ .Inner | markdownify }}</p>
</aside>

I’ve noticed there are two ways to use the upper function: one is by piping the result into the upper function, and the other is by placing upper before the text output.

<header>{{ upper $calloutType }}</header>
<header>{{ $calloutType | upper }}</header>

I don’t think it matters which one I use, right?

6

There are two ways to call any function or method that takes one or more arguments.

https://gohugo.io/templates/introduction/#pipes

Piping arguments can make template actions easier to read/understand, but using them is a matter of preference.

1 Like
7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.