Reblogging posts with h-entry

Natalie wrote:

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:

Liz wrote:

there is a very specific feeling of relief upon realizing I don’t need to hurry to finish a library book before it’s due, because I definitely will want to buy a copy for future reference and cross-checking.

(the book in question is Gossip Men: J. Edgar Hoover, Joe McCarthy, Roy Cohn, and the Politics of Insinuation by Christopher M. Elias)

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/",
    time: "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="u-url">
      Posted
      <time datetime="2024-09-20T07:06:00Z" class="dt-published">
        20 September 2024
      </time>
      by
      <span class="p-author h-card">
        <span class="p-name">Natalie</span>
        <data class="u-url" value="/"></data>
        <data class="p-logo" value="/assets/avatar.webp"></data>
      </span>
    </a>
  </p>

  <div class="e-content">
    <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>
  </div>

  <ol class="tags"><li><a href="/tag/meta" class="p-category">meta</a></li></ol>
</article>

Here are the special class names I'm using:

• h-entry wraps the entire thing, indicating that it's a post.
• u-url goes on a link and indicates the post's canonical URL.
• dt-published goes on a <time> element and indicates when the post was made.
• p-author can just be the author's name, but I've made it into a whole h-card with the following metadata:
  • p-name is my name.
  • u-url is my personal URL, which is to say this website.
  • p-logo is the URL of my avatar, so people reblogging me have something to show by my posts.
• p-name isn't used here because this post is untitled, but if it had a title that would be the class for it.
• e-content is the HTML content of the post itself.
• p-category is the name of a tag associated with the post.

Of these, only h-entry, u-url, and e-content are really critical. There are a handful of other features defined in the spec, including a way to indicate which post you're replying to, that you should check out if you're interested. But these are the most critical.

Make your posts rebloggable!

You should do this too! If you can edit your blog's post layout, it's extremely easy. Just add those classes to the appropriate places, and you're off to go. If you don't already have an HTML element for some piece of information, you can add invisible <data> tags like I did above to provide the info to consumers without changing the way your post looks to readers.

Even if your blog doesn't allow you to edit the layout, if you can add HTML to the posts you can do this by hand. There's no need to use the specific <article> or <p> tags I do above... just divs will work. You can even make your rebloggable content different than the original, which I'm planning to do to avoid having my embeds look too weird if they get reblogged.

If you end up adding h-entry support, or even better if you end up making use of mine, drop me a comment and let me know!