Mastopoet

The post screenshot tool for Mastodon. Developed by @raikas@mementomori.social

If you like Mastopoet, consider supporting the developer:

What?

Mastopoet is an open source screenshot tool for Mastodon, inspired by poet.so. It allows you to create ✨ stunning ✨ screenshots of your posts, with ability to remove stuff you don't want (bookmark button, publicity symbol, settings button...). And with a theme that's not dependent on the theme of the instance!

Demo

• mastopoet.raikas.dev (developer's instance, always on latest commit)
• poet.bolha.us

URL Query feature

Add ?url= to the end of the Mastopoet URL to generate links that immediately open the post on Mastopoet.

Embedding

You can embed a post with Mastopoet using an iframe.

<iframe
  src="https://mastopoet.raikas.dev/embed?url=<post url>"
  width="600"
  allowfullscreen="allowfullscreen"
  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"
></iframe>

You can also use the following query parameters (&key=value) to customize the embed:

• theme (bird-ui, bird-ui-light, mastodon, mastodon-light)
• interactions (feed, feed no-date, normal, normal no-replies, hidden)
• background Any valid value for CSS background (hex values, linear-gradient...)
• width The background width in pixels (0-400, default 0), also remember to modify the iframe width!
• height The background width in pixels (0-200, default 0)

Themes available

• Bird UI (Dark, Light)
• Mastodon (Dark, Dark + light interaction labels, Light)

Images/profile pictures not working?

This is due to CORS. It's a security feature of browsers, when assets (like profile pictures) are accessed from other websites. I cannot do anything about it, as the whole process is done client-side. From version 1.0.3, Mastopoet uses a proxy server if CORS is blocked, so this shouldn't happen anymore. If it does, please contact me at roni@raikas.dev. Thank you!

Help for old versions:

The images are (almost) always fetched from the instance that your link is from. So, if your link is https://instance1.social/@user@instace2.social/0000000000, the data is fetched from instance1.social, even if the post is posted originally on instance2.social.

If you want to get Mastopoet working, contact that instances admin and ask them to allow anonymous CORS (crossOrigin: "anonymous") requests for their Mastodon media server.

OR: You can try using an other instance and find the post. Here's a few working instances:

• mstdn.social
• mementomori.social
• bolha.us

For admins this means they need to add the Access-Control-Allow-Origin header to the server providing your users with images hosted on Mastodon. You can set it to '*', or allow just Mastopoet with 'https://mastopoet.raikas.dev'. There's more technical information on MDN Docs.

Deploying

You can use Docker (instructions below), or simply host the website on a static platform. Mastopoet is a React SPA, compiled by Vite, allowing it to be deployed to pretty much any hosting service. My recommendations are Cloudflare Pages, Netlify and Github Pages.

First, install dependencies with npm install and then build the app with npm run build. Simple as that! The application is in the dist directory.

Ko-fi advert

By default, the default post shows a link to my Ko-fi profile. If you want to disable it, you can customize the defaultPost in src/config.ts, or set environment value VITE_HIDE_DEVELOPER_KOFI_AD to false. I appreciate if you decide to keep it.

Building with docker

You can use docker for deploying a production ready instance of Mastopoet.

You can build with:

docker build -t mastopoet .

It will build the application and deploy in an nginx instance, when the image is built you can run using:

docker run -d -p 80:80 mastopoet

For more options, see nginx container options at dockerhub

TODO

• Customizable gradient
• Bird UI light theme port
• Mastodon theme port
• Customizable date format
• A logo (to website embed)
• Read toot URL from query
• Default toot with information
• Fix multi image image galleries
• Support for non-Mastodon links
• Alt text generator
• PDF export with link (idea)
• Detect CORS failed images and show user info box
• If toot div is not an full integer, weird bars show in image.
• Add support for Misskey/Firefish (src/instance/Misskey.ts)

Credits

• Mastodon Bird UI by Roni Laukkarinen, licensed under MIT
• Mastodon
• Tabler Icons, licensed under MIT
• The beautiful AI generated OpenGraph image, created by Roni Laukkarinen