Once I add the ability to embed arbitrary blog posts
from other blogs on here it's over. I'm gonna be
reblogging like a wild animal. Y'all are gonna have
your eyes blown clean outta your heads.
Thrilled to announce that I now have this up and running, at
least in its most basic aspect. The embed above is
automatically generated and pulled down directly from
the source post. Nothing in this is specific to my blog; I can
also do it with someone else's. By way of example, please
enjoy this post from my beautiful wife:
Injecting embeds
Here's what the embed looks like in my blog source right now:
{% genericPost "https://nex-3.com/blog/once-i-add-the/",
date: "2024-09-20T07:06:00Z",
tags: "#meta",
author: "Natalie",
authorUrl: "/",
authorAvatar: "/assets/avatar.webp" %}
<p>
Once I add the ability to embed arbitrary blog posts from other blogs on
here it's over. I'm gonna be reblogging like a wild animal. Y'all are gonna
have your eyes blown clean outta your heads.
</p>
{% endgenericPost %}
I have a template for the embed, some CSS to style it, and a
little custom Liquid tag to bring it all together. But the
real magic is in how I generate the
genericPost
in the first place. Here's what the
original source looks like before I run my
embed injector
on it:
https://nex-3.com/blog/once-i-add-the/
That's it! Just a URL surrounded by empty lines. The injector
pulls down the webpage, extracts critical information about
the blog post, and replaces the URL with a call to
genericPost
. My Letterboxd and Cohost embeds work
the same way, with their own custom templates and metadata
that let me match the style of the original websites.
Structured post data with h-entry
But I did say that this wasn't specific to my blog. With
Letterboxd and Cohost, I've just hard-coded their HTML
structure. I can't rely on that if I want to get information
from any old blog, though. They all use different HTML
structures!
So instead, I'm making use of the
h-entry microformat. This is a tiny little specification that defines a way to
mark up an existing post to indicate metadata in the existing
HTML structure. At its simplest, it's just a few class names
annotated with the HTML. Here's the simplified HTML for the
post above:
<article class="h-entry">
<p class="attribution">
<a href="/blog/once-i-add-the/" rel="canonical" class="…