Für Opa Jupps Seite habe ich mir einen ugly Mastodon-shortcode gebastelt, um auf die Mastodon-Trööts verlinken zu können.
Hierfür habe ich die Datei /layouts/shortcodes/mastodoncard.html angelegt und ihr folgenden Inhalt gegeben:
<div class="mastodoncard" style="border: 1px;background-color: #313543;color: white; max-width:550px;border-radius:20px;">
<div class="mastodoncardheader1" style="padding: 14px; display: flex; justify-content: space-between;vertical-align:middle;">
<div class="mastodoncardheader2" style="display: flex;">
<div class="mastodonpicture" style="padding-right:10px;">
<a href="https://mastodon.social/@opajupp/"><img src="/opajupp/logos/Logo.png" width="50px"/></a>
</div>
<div class="mastodoncontact" style="color:white;">
<a style="color:white;font-size: small;" href="https://mastodon.social/@opajupp">OpaJupp</a>
<br><a style="color:white;font-size: small;" href="https://mastodon.social/@opajupp">@opajupp@mastodon.social</a>
</div>
</div>
<div class="mastodonpicture" style="padding-right:10px;">
<a href="https://mastodon.social/users/opajupp/remote_follow"><img alt="Auf Mastodon folgen" title="Auf Mastodon folgen" src="/opajupp/logos/mastodonfolgen.png" width="110px"/></a>
</div>
</div>
<div class="mastodontext" style="color:white;padding-left:14px; padding-bottom: 10px;">
<a href="https://mastodon.social/@opajupp/{{ with .Get "id" }}{{ . }}{{ end }}" style="color:white;">{{ with .Get "text" }}{{ . }}{{ end }}...</a>
</div>
</div>Auf den jeweiligen Seiten rufe ich den Shortcut wie folgt auf
{{< mastodoncard id="TROEET-ID" text="Text zum Posten" >}} wobei ich die entsprechende Trööt-Id sowie den Text zum posten manuell eintragen muss.
Das sieht dann so aus:
Jaja, ich weiss, es ist sehr ugly und funktioniert nur “von Hand”, aber immerhin, besser als nichts… ;)