So the opening backticks in a Markdown file look like this:

```go-html-template

It makes a huge difference when highlighting Hugo template code blocks. I was previously using html for syntax highlighting and it wasn’t as good.

For example, here is some HTML + Hugo templating stuff being highlighted with html:

{{- define "main" }}

{{- if .Title }}
<header class="page-header">
    <h1>{{ .Title }}</h1>
    {{- if .Description }}
    <div class="post-description">
        {{ .Description }}
    </div>
    {{- end }}
</header>
{{- end }}

<ul class="terms-tags">
    {{- $type := .Type }}
    {{- range $key, $value := .Data.Terms.Alphabetical }}
    {{- $name := .Name }}
    {{- $count := .Count }}
    {{- with site.GetPage (printf "/%s/%s" $type $name) }}
    <li>
        <a href="{{ .Permalink }}">{{ .Name }}<sup> {{ $count }}</sup></a>
    </li>
    {{- end }}
    {{- end }}
</ul>

{{- end }}{{/* end main */ -}}

Here’s the same code block but with go-html-template specified:

{{- define "main" }}

{{- if .Title }}
<header class="page-header">
    <h1>{{ .Title }}</h1>
    {{- if .Description }}
    <div class="post-description">
        {{ .Description }}
    </div>
    {{- end }}
</header>
{{- end }}

<ul class="terms-tags">
    {{- $type := .Type }}
    {{- range $key, $value := .Data.Terms.Alphabetical }}
    {{- $name := .Name }}
    {{- $count := .Count }}
    {{- with site.GetPage (printf "/%s/%s" $type $name) }}
    <li>
        <a href="{{ .Permalink }}">{{ .Name }}<sup> {{ $count }}</sup></a>
    </li>
    {{- end }}
    {{- end }}
</ul>

{{- end }}{{/* end main */ -}}

Big difference!

Note that I’m using Chroma for syntax highlighting so your experience may vary, but Chroma comes by default with Hugo.

References

• https://gohugo.io/content-management/syntax-highlighting/
• https://github.com/alecthomas/chroma

tl;dr:

For some reason, Hugo was rendering links with a space after them. Here’s a screenshot of what that looked like:

It’s subtle but becomes more obvious and distracting in link-heavy pages.

Here is the markdown that I was using to generate the link above. Nothing out of the ordinary:

This sentence has a [link at the end](https://example.com).

In Hugo, you can apply post-processing to links through link render hooks by editing the layouts/_default/_markup/render-link.html file. Here’s my terrible template that I use to process links. Once again, nothing stood out that would add unnecessary whitespace after links:

{{- $url := .Destination -}}
{{- $refParam := "" -}}
{{- $refDomain:= "" -}}
{{- $hasQuery := strings.Contains $url "?" -}}
{{- $hasHash := strings.Contains $url "#" -}}
{{- if $hasQuery -}}
    {{/*  taking into account existing query strings  */}}
    {{- $refParam = "&ref=" -}}
    {{- $refDomain = "nelson.cloud" -}}
{{- else if $hasHash -}}
    {{/*  ensuring that URL doesn't have a hash #  */}}
    {{/*  do nothing in this case  */}}
{{- else -}}
    {{- $refParam = "?ref=" -}}
    {{- $refDomain = "nelson.cloud" -}}
{{- end -}}

<a href="{{ .Destination | safeURL }}{{ $refParam }}{{ $refDomain }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener noreferrer"{{ end }}>{{ .Text | safeHTML }}</a>

Here is the HTML that was generated by Hugo based on the Markdown I wrote and the processing in render-link.html. This is straight from the browser dev tools:

The period was on its own line, which looks suspicious. Why is there additional space being added though? I tried modifying my CSS, my Markdown, and render-link.html to see if I could remove the whitespace but nothing worked.

Eventually, I was out of ideas and asked ChatGPT what could be going wrong. ChatGPT suggested I could add the {{- "" -}} template syntax to render-link.html to remove the whitespace. Apparently that would force the removal of both leading and trailing whitespace. And sure enough it worked!

I modified my render-link.html template to include the {{- "" -}} template syntax at the end of the <a> tag in the highlighted line:

{{- $url := .Destination -}}
{{- $refParam := "" -}}
{{- $refDomain:= "" -}}
{{- $hasQuery := strings.Contains $url "?" -}}
{{- $hasHash := strings.Contains $url "#" -}}
{{- if $hasQuery -}}
    {{/*  taking into account existing query strings  */}}
    {{- $refParam = "&ref=" -}}
    {{- $refDomain = "nelson.cloud" -}}
{{- else if $hasHash -}}
    {{/*  ensuring that URL doesn't have a hash #  */}}
    {{/*  do nothing in this case  */}}
{{- else -}}
    {{- $refParam = "?ref=" -}}
    {{- $refDomain = "nelson.cloud" -}}
{{- end -}}

<a href="{{ .Destination | safeURL }}{{ $refParam }}{{ $refDomain }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener noreferrer"{{ end }}>{{ .Text | safeHTML }}</a>{{- "" -}}

Then my links were rendering without additional space after them, and here’s a screenshot showing that:

The weird thing is that when I checked the HTML being generated, it looked identical to the original before I added the template syntax and I had no idea why:

But at least the whitespace was gone when viewing the article in a browser. That’s what matters.

This template syntax trick can probably be applied to other areas of Hugo and not just for links, but I haven’t done any additional experimenting.

References

• Wherever ChatGPT stole got this information from. I feel weird using ChatGPT as a reference but that really is how I discovered the solution.

I recently discovered that Hugo generates an HTML <meta> tag with the Hugo version in the <head> tag. This is done by default and looks like this:

<head>
    <meta name=generator content="Hugo 0.146.2">
</head>

To remove this tag, we can disable it in config.yaml or config.toml by setting the disableHugoGeneratorInject boolean to true.

In YAML:

disableHugoGeneratorInject: true

In TOML:

disableHugoGeneratorInject = true

If setting disableHugoGeneratorInject doesn’t work, do a global search in your Hugo project for {{ hugo.Generator }}. This template syntax outputs the same <meta> tag and doesn’t respect the disableHugoGeneratorInject configuration (at least as of Hugo v0.147.8).

References

• https://gohugo.io/configuration/all/#disablehugogeneratorinject
• https://gohugo.io/functions/hugo/generator/

My motivation behind this post was disabling button animations when using daisyUI on a side project.

Note:

I am not a CSS expert and there may be other ways of animating elements via CSS that I did not cover here. Also, this doesn’t help if elements are being moved around by JavaScript. But you can easily disable JavaScript for any site through your browser :)

To disable CSS animations and transitions you can try adding the following to your CSS:

* {
    animation: none;
    transition: none;
}

If that doesn’t work, try using !important:

* {
    animation: none !important;
    transition: none !important;
}

Animations may also be applied using the ::before and ::after pseudo elements. We can include those in the previous CSS:

*, *::before, *::after {
    animation: none !important;
    transition: none !important;
}

You can also put these into a CSS class and apply to HTML elements as needed if you still want animations in some places:

/* style.css */

.no-animations {
    animation: none !important;
    transition: none !important;
}

<!-- index.html -->

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
     <!-- add a class to whatever elements you want -->
     <button class="no-animations" type="button">No Animations on this Button</button>

     <button type="button">Animations are ok here</button> 
  </body>
</html>

References

• https://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily
• https://stackoverflow.com/questions/31576156/what-does-animationnone-do-exactly
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition

For example, try reloading this page with JavaScript disabled and you’ll see a new message below:

The HTML for the message above looks like this:

<noscript>
    <blockquote>This message only shows up when JavaScript is disabled!</blockquote>
</noscript>

Here’s an example where CSS styles within <noscript> tags are applied when JavaScript is disabled. Try reloading this page without JavaScript and the message below will be italicized.

The text within this blockquote element is italicized when JavaScript is disabled!

And this is what the HTML and CSS looks like for the example above:

<noscript>
    <style>
        blockquote#example {
            font-style: italic;
        }
    </style>
</noscript>

<blockquote id="example">The text within this blockquote element is italicized when JavaScript is disabled!</blockquote>

References

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/noscript

Originally I had the following ERB:

<%= link_to 'Download All Statements as JSON', statements_download_path %>

Clicking this link would show JSON in the browser, but it wouldn’t download a JSON file, which is what I wanted.

The solution was to add a download attribute to the ERB snippet:

<%= link_to 'Download All Statements as JSON', statements_download_path, download: 'statements.json' %>

Full Setup

For additional context, here is all the code required to get this to work.

First I created this method in statements_controller.rb:

def download
  render json: @user.statements
end

Then I added a new route to routes.rb:

get 'statements/download', to: 'statements#download'

And then I added the link_to helper in the view:

<%= link_to 'Download All Statements as JSON', statements_download_path, download: 'statements.json' %>

The link_to ERB helper is creating this HTML:

<a download="statements.json" href="/statements/download">Download All Statements as JSON</a>

The download attribute can be customized in ERB. For example, I can name the file based on the user’s name like so:

<%= link_to 'Download All Statements as JSON', statements_download_path, download: "#{@user.name.downcase}-statements" %>

And it will generate the following HTML:

<a download="nelson-statements" href="/statements/download">Download All Statements as JSON</a>

This link will trigger a download for nelson-statements.json in my case.

Ultimately this was a case of understanding the download HTML attribute for <a> tags and how to use it in Rails.

Further Reading and References

Note:

There are other ways of handling this, like using the send_data method in a controller. But that’s beyond the scope of this post. Read more about it here: https://api.rubyonrails.org/v7.0.1/classes/ActionController/DataStreaming.html#method-i-send_data

References:

• https://www.w3schools.com/tags/att_a_download.asp
• https://forum.upcase.com/t/download-html-file-instead-of-opening-in-browser-with-link-to/2994
• https://www.reddit.com/r/rails/comments/co0h6i/whats_the_best_way_create_a_download_image_link/