Metadata Image Generation
Published 09/05/2024
Part of making this website easy to write is the rendering engine I’ve added to it. The website documents all start off as Markdown Script. Not markdown by itself, rather it has some key changes that allow me to insert metadata into the posts.
This metadata contains the title, publish and edit dates, descriptions, and author information. These pages are then rendered into TXT, HTML, PDF and even PNG now.
The PNG is used for the open graph image - an image used for displaying the website when linked on social media, chat apps, and other situations like that.
I have a background in creating image generators as I’ve had to do it for past projects. So I knew the scope for this project would be simple:
- Use Roboto Mono font
- Draw the background
- Draw the icon
- Draw the title
- Draw the date
The goals were so simple I decided to just write everything without using any libraries. I would probably do more research into text-placement libraries if I were to revisit this project. I know there are hundreds that exist already to solve this problem, but I didn’t want to learn a new API at the time. It was late, and I wanted to finish the prototype.
The image generation is good enough for now, but I’m planning to update it eventually and make it resize everything more fluidly. Whenever I get around to doing that I’ll edit this post and include a link in the header. If you see no header, assume it’s not written yet.

