Stupid Meta...
So there's these <meta> elements by Meta. Well not the <meta> element itself... But Open Graph. I wanted my links to look like this when I spam them in Discord:
Remember that scene from American Psycho where Christian Bale is sweating over a business card?
So anyways, I look at the HTML and see these <meta> tags. That's gotta be it, I mean I see these then some tags that say something about Twitter and I don't want Twitter since I'm really actually not a terrible person once you get to know me so I guess I'll implement these tags. The image seems easy enough, throw it in a Mojo template but what's annoying is I have my <head> entirely in the layout rather than the template itself. I first considered a partial template like I've seen in Rails before but Mojo couldn't find the partial. I think this was due to me just using a single layout for all my templates associated with different controllers. My site is pretty simple so honestly I didn't want to copy the same layout for every controller.
So I was left to hit the docs looking for some sort of feature or something that could help me out here. Finally I settled on the content_for() helper. In my layout I put the following:
<head>
<!-- Some stuff here... -->
<%= content 'open_graph' =%>
<meta property="og:url" content="<%= url_for->to_abs %>">
<meta property="og:site_name" content="Post::Text">
<meta property="og:image"
content="<%= url_for('/images/logo.png')->to_abs %>">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="1200">
<meta property="og:image:alt"
content="Post::Text logo; a small nerdy anime girl giving a V sign">
</head>
Now in my templates I simply do:
% layout 'default';
% title 'New Thread';
% content_for open_graph => begin
<meta property="og:type" content="website">
<meta property="og:title" content="<%= title %>">
<meta property="og:description" content="Start a new thread.">
% end
<h2 class="page-title"><%= title %></h2>
<!-- Begin the rest of the page here... -->
Well that oughta do it! I mean I even made my image 1200 pixels wide, this oughta look breathtaking...
That's... A URL preview but why is my image so smol? It should be 4K ultra-HD like Molly White's site! I mean yeah there's these Twitter tags but why would it use those? There's not even a 'site name' and I clearly see them in both our previews so it must be using Open Graph. Unless... It's using both. But there's no way it'd do that I mean are the Twitter tags even considered a standard? Hell, is Open Graph even a standard? Out of desperation I try...
% content_for twitter_card => begin
<meta name="twitter:title" content="<%= title %>">
<meta name="twitter:description" content="Start a new thread.">
% end
And back to the layout:
<%= content 'twitter_card' =%>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@swaggboi@eattherich.club">
<meta name="twitter:site"
content="@posttext@fedi.seriousbusiness.international">
<meta name="twitter:image"
content="<%= url_for('/images/logo.png')->to_abs %>">
<meta name="twitter:image:alt"
content="Post::Text logo; a small nerdy anime girl giving a V sign">
Well, what's it gunna be Discord? Make my day...
😳
Alright then... It's got the site title from Open Graph... And the image from the stupid Twitter tags. I guess. Cool.
Well anyways that's done and Post::Text is finally live so I'm happy. On to the next harebrained project! 🫡
P.S. I know it's been a while since I've blogged, my last prediction is partially becoming true already 💀