Some shortcode magic for embedding toots in Hugo posts.

After a bit of work with Hugo’s templating functions, namely the exceedingly useful getJSON I can now embed Mastodon posts directly in my page!

pieceofthepie

@pieceofthepie@n8e.dev

I've created a shortcode for #GoHugoIo (a static site generator) that lets me embed Toots on my blog posts!

https://realmenweardress.es/2022/11/2022-11-30-s3-hugo-toot-embeds/

#Mastodon #Fediverse #SelfHost #Blog #Hugo #HugoBlog

Nov 30, 2022, 16:34 · 5 · 4

If you’ve looked at this before you might be thinking “Gee, this is easy, you just use the Oembed API”. Well, I didn’t want to use that so this does it properly, with building actual content out of JSON responses. It does mean I’m in way more control of the behaviour.

Things it does

1. Looks quite a lot like a Mastodon post
2. Custom server emoji’s
3. Link’s to all the right places
4. Works for any post your instance is aware of

Things it doesn’t do (yet?)

1. Images or image galleries
2. Content Warnings (it just straight up shows the content)

Things you may want to know

1. It pulls the data at build time, so if anything changes it’s not updated till the next time the Hugo site is rebuilt.
2. The CSS is pretty custom to this theme, you can find it on github if you really want a look

You can find the shortcode template on github and to use it on my pages I just have to add {{< toot id="long_numeric_id_of_post" >}}