Embedding Mastodon Toots into Hugo Posts with a Shortcode

I found a neat Hugo shortcode to embed Mastodon toots into a post. This is courtesy of Kevin Gimbel and can be found on his blog here.

The code itself can be found on his Github here.

Essentially it’s a case of creating a shortcode (I named mine mastodon.html)

{{ .Page.Scratch.Set "include_mastodon" true }}
{{ $width := .Get "width" | default "400" }}
{{ $height := .Get "height" | default "333"}}
{{ $status := .Get "status" | default "false" }}

{{ if eq ($status) "false" }}
{{ else }}
<iframe src= "{{ $status }}/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="{{ $width }}" height="{{ $height }}"></iframe>
{{ end }}

and then embedding this into the website’s footer.html

{{ if ($.Page.Scratch.Get "include_mastodon") "true" }}
<script src="https://mastodon.social/embed.js" async="async"></script>
{{ end }}

Then use the shortcode in a post like;

{{< mastodon status="https://social.cshire.xyz/@chris/103020543907360997" >}}

Which will render as;

That’s it! Pretty neat!