Dynamic OpenGraph Images in Astro

If you’ve ever shared a link on social media, you know how critical OpenGraph (OG) images are. They’re the first thing people see – often before they even click.
Static OG images are fine as a start, but what if you want custom images for every blog post or content collection item?

For Astro there is astro-og-canvas, a nice and useful Astro plugin that utilizes Canvas to create dynamic OG images.

In this post, I’ll walk you through how to generate dynamic OG images for your Astro site, inspired by Aidan Kinzett’s excellent post.
I’ll also share some odds and learned lessons.

Continue reading “Dynamic OpenGraph Images in Astro”

Astro component for DarkMode Switcher for PicoCSS

I am currently evaluating PicoCss V2 in Astro project. PicoCss is a CSS / SCSS framework I used for some of my projects because it is small and brings sufficient styling for most HTML Elements. It has integrated light and dark mode, but no theme switcher.
So i was looking for one and found this one for Pico V1:
https://github.com/RWDevelopment/theme_switch

Continue reading “Astro component for DarkMode Switcher for PicoCSS”

Obfuscate Web Component

Typically, when integrating emails into websites, I obfuscate the email address to prevent spam bots from collecting them. For React, there were already components that handled this task; however, without React, I couldn’t find a suitable solution.

Therefore, I created a web component: obfuscate-wc that now provides an HTML element capable of obfuscating your email (and some other contact data).

 <obfuscate-link id="obfuscate" email="aXZvQGxvY2FsLmRldg==">custom link</obfuscate-link>Code language: HTML, XML (xml)
Continue reading “Obfuscate Web Component”