https://cekrem.github.io/tags/meta/Recent content in Meta on cekrem.github.ioHugoen-usMon, 17 Aug 2026 00:00:00 +0000https://cekrem.github.io/posts/og-images-as-elm-code/Mon, 17 Aug 2026 00:00:00 +0000https://cekrem.github.io/posts/og-images-as-elm-code/<p>Here&rsquo;s a meta post for you, if there ever was one: if someone shared this post with you and a preview image showed up, that image was generated by the thing this post describes. The post is its own demo. I find that <em>unreasonably</em> satisfying.</p> <p>It looks like this, generated live from the post&rsquo;s own title and description as you read this:</p> <img src="https://codimg.alwaysdata.net/code.svg?input=%7B-%0A&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;_&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;_&#43;_&#43;&#43;&#43;_&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;_&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;_&#43;&#43;&#43;&#43;&#43;&#43;&#43;%0A&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;%7C&#43;%7C&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;%28_%29&#43;%7C&#43;%7C&#43;%7C&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;%7C&#43;%7C&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;%28_%29&#43;&#43;&#43;&#43;&#43;&#43;%0A&#43;&#43;&#43;___&#43;___%7C&#43;%7C&#43;___&#43;__&#43;___&#43;_&#43;__&#43;___&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;__&#43;_&#43;_%7C&#43;%7C_%7C&#43;%7C__&#43;&#43;_&#43;&#43;&#43;_%7C&#43;%7C__&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;_&#43;&#43;___&#43;&#43;%0A&#43;&#43;%2F&#43;__%2F&#43;_&#43;%5C&#43;%7C%2F&#43;%2F&#43;%27__%2F&#43;_&#43;%5C&#43;%27_&#43;%60&#43;_&#43;%5C&#43;&#43;&#43;&#43;&#43;&#43;&#43;%2F&#43;_%60&#43;%7C&#43;%7C&#43;__%7C&#43;%27_&#43;%5C%7C&#43;%7C&#43;%7C&#43;%7C&#43;%27_&#43;%5C&#43;&#43;&#43;&#43;&#43;&#43;%7C&#43;%7C%2F&#43;_&#43;%5C&#43;%0A&#43;%7C&#43;%28_%7C&#43;&#43;__%2F&#43;&#43;&#43;%3C%7C&#43;%7C&#43;%7C&#43;&#43;__%2F&#43;%7C&#43;%7C&#43;%7C&#43;%7C&#43;%7C&#43;&#43;_&#43;&#43;%7C&#43;%28_%7C&#43;%7C&#43;%7C&#43;%7C_%7C&#43;%7C&#43;%7C&#43;%7C&#43;%7C_%7C&#43;%7C&#43;%7C_%29&#43;%7C&#43;&#43;_&#43;&#43;%7C&#43;%7C&#43;%28_%29&#43;%7C%0A&#43;&#43;%5C___%5C___%7C_%7C%5C_%5C_%7C&#43;&#43;%5C___%7C_%7C&#43;%7C_%7C&#43;%7C_%7C&#43;%28_%29&#43;&#43;%5C__%2C&#43;%7C_%7C%5C__%7C_%7C&#43;%7C_%7C%5C__%2C_%7C_.__%2F&#43;&#43;%28_%29&#43;%7C_%7C%5C___%2F&#43;%0A&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;__%2F&#43;%7C&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;%0A&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;%7C___%2F&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;%0A%0A&#43;&#43;&#43;cekrem.github.io%2Fposts%2Fog-images-as-elm-code%0A-%7D%0A%0Atitle&#43;%3A&#43;String%0Atitle&#43;%3D&#43;%22My&#43;social&#43;preview&#43;images&#43;are&#43;Elm&#43;code&#43;now.&#43;Rendered&#43;by&#43;Go.&#43;Into&#43;an&#43;Svg&#43;%F0%9F%98%B5%22%0A%0Adescription&#43;%3A&#43;String%0Adescription&#43;%3D%0A&#43;&#43;&#43;&#43;%22Replacing&#43;the&#43;static&#43;og%3Aimage&#43;banner&#43;with&#43;SVGs&#43;rendered&#43;%22%0A&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;%2B%2B&#43;%22on&#43;the&#43;fly&#43;by&#43;codimg.&#43;If&#43;you&#43;saw&#43;a&#43;preview&#43;image&#43;when&#43;%22%0A&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;%2B%2B&#43;%22this&#43;post&#43;was&#43;shared%2C&#43;you%27ve&#43;already&#43;seen&#43;the&#43;post&#43;%22%0A&#43;&#43;&#43;&#43;&#43;&#43;&#43;&#43;%2B%2B&#43;%22describing&#43;itself.%22&amp;lang=elm" alt="This page's og:image, rendered by codimg from its own metadata" style="max-width: 100%;" /> <p>(If I change the title, the image changes with it. There is no image file.)</p>