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:

A link preview of an article from web3isgoinggreat.com

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:

  <!-- 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">

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...

A URL preivew of posttext.pl with a smaller image preview

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"
<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...

The same link to posttext.pl but now the image is large


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 💀

#perl #mojolicious #textboard