ads' corner

With people moving away from Twitter, mostly to Mastodon, discovering the new accounts became a problem.

For people in the PostgreSQL community I created a website which lists different social media accounts. This website is part of the "PostgreSQL Person of the Week" interview project, however the data source is dynamic, and stored in a different repository. This allows me to keep the repository for the website private, but publish the data for the social media links - this data is public anyway. The interview repository is private, because who wants to see upcoming interviews anyway? ;-)

The interview website is made with Hugo, a static website generator. Normally Hugo looks for content, templates, and other data in the current directory - my private repository.

As part of compiling the website, Hugo can fetch external data, either in JSON or CSV format. This is using the getJSON() and the getCSV() functions, which can be used in Shortcodes, as example.

For the "PostgreSQL Person of the Week" interviews I'm using Hugo as static blogging engine. Part of every interview is the list of tags, which links this interview to other similar interviews. However until recently no one really knew if a tag is popular or just used in this interview. I wanted to change this, and add the tag count behind every tag.

The way I use Hugo I have the previews also online, and I don't want to count any interviews which are not published (still drafted) when counting entries for a tag.

Tags in Hugo are taxonomies, which is a user-defined grouping of content.

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.