One less card for stoot

Stoot now has an option that will remove the Open Graph / Meta Tags card associated with the first link in a mastodon post. If you are interested in the tags that Mastodon sees, you can go to OpenGraph XYZ to put in your favorite URLs. Here a direct link to your fifth favorite. Mastodon takes the information meta tags from the first URL and makes them look nice when you post. For example, I posted a toot¹ with a link to a post that created. I will get something like the following.

Summary

You can now add a toot to your blog without including the Open Graph tag.

{{< stoot instance="$InstanceTLD" id="$ID" enableOGCard="true" >}}

The new enableOGCard option defaults to true so that it doesn’t unexpectedly change on people who have an older version of this plugin.

Details about the HTML and CSS structure

About a week ago, I got a message asking why stoot would render the image twice for the same mastodon toot.

Honestly, I had no idea it was doing this and haven’t looked at the code since I had packaged it up two weeks ago.

But, I didn’t want to leave this person without any help so I started to look into the issue and was able to reproduce the problem with a toot from someone I was already following.

Pratik @pratik@writing.exchange

Plumage https://glass.photo/pratik/3UFkV2LUQ1wR8VwJa7Vv7j

2:00 PM • October 13, 2024 (UTC)

Here is the code to embed it if you are using the stoot plugin

{{< stoot instance="writing.exchange" id="113300475439404467" >}}

A very pretty picture, but I don’t know if seeing it twice in succession.

For me to understand something better, I like to diagram it as I step through the code. I’ve included this diagram that shows you what div tags are created when using stoot. If you can always check out the code on GitHub.

Toot-block

This is the CSS class in the blockquote element that contains the entire mastodon post.

Toot-header

The div contains the information about the account that created the toot.

Toot-profile

This is the profile image of the account that made the toot. I included this CSS from the original project to establish a baseline for styling.

Toot-author

This is a div that contains the two links toot-author-name and toot-author-name that go to the same account page.

Toot-author-name

The name that toot author is going by at the time of rendering. The names sometimes changes as decided by the person in charge of the account.

Toot-author-handle

This is the account name in the @name@server format that mastodon likes to use.

Content

This is the main text of your toot.

Toot-img-grid

Stoot includes CSS and logic to handle 1, 2, 3, or 4 images in a grid and render them properly.

Toot-video-wrapper

Behind the scenes, there are two possible wrappers that render depending on what kind of video media is included with the toot.

Toot-card

This the div that contains the Open Graph card of the first link in the toot. This will include an image, title, and description from the website in the URL.

Toot-poll-wrapper

This is the div that containers HTML <meter> elements to convey the

Toot-footer

Contains date and time of the toot.

The problem is coming from the toot-card and I didn’t want to change all the cards, because someone might have become reliant on this behaviour or worse - never noticed it.

Further CSS Details

I didn’t want to make people work hard to style the included card, so I removed some styling from the CSS.

There are two div tags in the toot card that you can use to make things work to your satisfaction.

Controlling the Card

The problem is coming from the toot-card and I didn’t want to change all the cards, because someone might have become reliant on this behaviour or worse - never noticed it.

After idenifying the part of the code that controlled the cards, I set a conditional around it.

{{ if eq $enableOGCard "true"}}
{{ with $json.card }}
  {{- $cardData := . -}}
  {{- with $cardData.image -}}
  
  <a href="{{ $cardData.url }}" rel="'noopener">
    <div class="toot-card">
      <div class="toot-card-image">
        <img src="{{ $cardData.image }}" 
          alt="Card image from {{ $masIns }} toot {{ $id }}" 
          loading="lazy" class="toot-card-image-image" />
      </div>
      <div class="toot-card-content">
        <p class="card-title">{{ $cardData.title }}</p>
        <p class="card-description">{{ $cardData.description }}</p>
      </div>
    </div>
  </a> 
  {{- end -}}
{{ end }}
{{ end }}

At the top of the file, we have the following line that sets the value to a default in case it is isn’t specified.

{{ $enableOGCard := .Get "enableOGCard" | default "true" }}

What is next?

Time to close all the tabs and call it a night.

I would like to change the alt text for the incoming images, but I think I would have to learn more about what is offered from mastodon using this API.

I want to that @lmika for giving me some advice about the go programming language. I also want to thank @DaveyCraney for giving me some feedback about stoot.

And I want to thank you for making it to the end of this article.