Skip to main content

Embed Mastodon toots with Nikola

  |   Anke (encarsia)   |   Also available in: Deutsch 

Reading the post Mastodon Embed Shortcode for hugo I became envious and thought 'We Nikola users might want that, too'. The Nikola handbook plainly admits to have 'adopted' the shortcode feature from Hugo so how hard can it be?

Here are three ways of embedding toots in your Nikola site using reStructuredText.

The raw directive

This directive enables you to pass content to the output without being processed. See reStructuredText Directives documentation for details.

raw.txt (Source)

.. raw:: html

    <iframe src="https://mastodon.social/@kevingimbel/100745593232538751/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="600" height="333"</iframe>

The raw shortcode

This is part of the built-in shortcodes. It works like the directive, you only need to use shortcode tags.

raw.txt (Source)

{{% raw %}}
<iframe src="https://mastodon.social/@kevingimbel/100745593232538751/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="600" height="333"</iframe>
{{% /raw %}}

Create your own shortcode

A separate shortcode can easily be realized with a template-based shortcode.

All you have to do is create a template and save it as your_shortcode_name.tmpl in the shortcodes folder of your Nikola site. If you do not use any custom shortcodes yet you will probably have to create the folder.

Depending on the template engine used by your theme you have to provide shortcode templates for Jinja2 or Mako:

The shortcode can be used as intended, pass a status and optionally width and height.

raw.txt (Source)

{{% mastodon status=https://mastodon.social/@kevingimbel/100745593232538751 %}}
{{% mastodon status=https://mastodon.social/@kevingimbel/100745593232538751 width=300 height=600 %}}

This is working for me but if the shortcode fails you should use the shortcode role to pass the text unaltered (consult the handbook for more information):

raw.txt (Source)

:sc:`{{% mastodon status=https://mastodon.social/@kevingimbel/100745593232538751 %}}`

You can also embed Pixelfed posts.

Comments

Comments powered by Disqus