ads' corner

Shortcodes in Hugo are a neat and poweful system to avoid repating the same piece of text over and over again. Let's say I have the following text:

Nunc in odio id magna molestie congue. Donec erat nulla, pulvinar eget volutpat non, molestie at nisi. Curabitur nec tristique felis. Cras imperdiet, ante et vestibulum iaculis, tellus ipsum pulvinar felis, at viverra est tellus et eros. In nec dignissim lectus, bibendum hendrerit ex. Praesent lobortis eget justo non vehicula.

Nulla et neque cursus libero tristique laoreet nec a ligula. Fusce sit “amet” scelerisque erat. Quisque lorem lectus, lobortis vitae mattis non, tincidunt sed felis. Donec sit “amet” erat nibh.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In et imperdiet dui. In ut enim pharetra, blandit purus vel, malesuada est. Morbi sollicitudin eget leo nec dignissim. Praesent sed leo quis purus pretium aliquet sed quis arcu. Pellentesque facilisis tellus nulla, dignissim laoreet quam maximus et.

And I want to link the "amet" word, then I can create a shortcode:

layouts/shortcodes/amet.html

And in this shortcode I place the text:

<a href="https://www.lipsum.com/feed/html">amet</a>

In the Markdown source this is:

Nulla et neque cursus libero tristique laoreet nec a ligula. Fusce sit "{{< amet >}}" scelerisque erat. Quisque lorem lectus, lobortis vitae mattis non, tincidunt sed felis. Donec sit "{{< amet >}}" erat nibh.

Pretty easy. However Hugo by default does a little bit too much: while generating the static content, it adds a line break. Which in the browser results in:

Nulla et neque cursus libero tristique laoreet nec a ligula. Fusce sit “amet ” scelerisque erat. Quisque lorem lectus, lobortis vitae mattis non, tincidunt sed felis. Donec sit “amet ” erat nibh.
                                                                            ^                                                                                                         ^

There is a nasty little space between the word and the quotation mark. The generated HTML source shows the problem:

  <p>Nunc in odio id magna molestie congue. Donec erat nulla, pulvinar eget volutpat non, molestie at nisi. Curabitur nec tristique felis. Cras imperdiet, ante et vestibulum iaculis, tellus ipsum pulvinar felis, at viverra est tellus et eros. In nec dignissim lectus, bibendum hendrerit ex. Praesent lobortis eget justo non vehicula.</p>
<p>Nulla et neque cursus libero tristique laoreet nec a ligula. Fusce sit &ldquo;<a href="https://www.lipsum.com/feed/html">amet</a>
&rdquo; scelerisque erat. Quisque lorem lectus, lobortis vitae mattis non, tincidunt sed felis. Donec sit &ldquo;<a href="https://www.lipsum.com/feed/html">amet</a>
&rdquo; erat nibh.</p>

Usually a line break in HTML is not a big deal, the browsers deal with that. But here an unnecessary space is added while rendering the content. Hugo makes it complicated to avoid this problem. There is no default setting to turn this off, however the shortcode can have an extra Hugo tag to avoid the training linebreak:

<a href="https://www.lipsum.com/feed/html">amet</a>{{- / Strip trailing newline. / -}}

By adding the {{- -}}, the training line break is not included in the final HTML output, and the quotation mark comes right after the shortcode content.

Hugo is a static templating system. It is (mainly) used to deploy websites/blogs which don't have and need dynamic content. The content of all pages is pre-generated, and the webserver delivers files from disk (or rather from cache, once files are loaded into memory). This approach allows for extremely fast websites, as no dynamic content is generated on every request.

While I know Hugo from work, I haven't really used it for private projects - until recently. I have started a new project where I present interviews with people behind the PostgreSQL Project - and this is perfect for a static website. Interviews don't change, once published.

There was just a little problem: every interview must be approved by the interviewed person. This requires a full preview, but one which does not show up on the main website, or the Sitemap, or the RSS feed. By default, even drafts show up in Sitemap and the RSS feed in Hugo.