Skip to content

Instantly share code, notes, and snippets.

@jgarber623
Last active February 6, 2023 04:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jgarber623/881abe34a8eff92f81bcca2f1ac064ef to your computer and use it in GitHub Desktop.
Save jgarber623/881abe34a8eff92f81bcca2f1ac064ef to your computer and use it in GitHub Desktop.
Distributed, IndieWeb-friendly micro-fiction (pt. 1)

Distributed, IndieWeb-friendly micro-fiction (pt. 1)

Kevin’s website

Kevin wants to write a story on his website, https://kevin.example. His website supports receiving webmentions and he advertises this feature with this HTML in his website’s <head> element:

<link rel="webmention" href="https://kevin.example/webmention">

Kevin posts his short story on his website at https://kevin.example/stories/1. The HTML for his story uses microformats to convey additional semantic meaning:

<article class="h-entry">
  <h1 class="p-title">
    <a href="/stories/1" class="u-uid u-url">The End</a>
  </h1>
  <div class="e-content">
    <p>The end of the world was nigh and we all knew it.</p>
  <footer>
    <a href="/" class="h-card u-author">Kevin</a> published this story on <time class="dt-published" datetime="2023-02-02">2nd February, 2023</time>.
  </footer>
</article>

Additionally, on Kevin’s homepage, he includes a more robust h-card than is used on his story pages:

<div class="h-card">
  <img src="/images/avatar.jpg" class="u-photo">
  <a href="/" class="u-url p-name">Kevin Lawver</a>
  <p class="p-note">I make awesome things on the Web!</p>
</div>

Jason’s website

Jason’s website, https://jgarber.example, also supports receiving webmentions:

<link rel="webmention" href="/webmention">>

Jason, having read Kevin’s post (it showed up in his feed reader!) and loved every single word, creates a “like” post on his website at https://jgarber.example/likes/1:

<div class="h-entry">
  <p>I <em>loved</em> <a href="https://kevin.example/stories/1" class="u-like-of">Kevin's story, <cite>The End</cite></a>.</p>
</div>

Because Jason’s website uses a hilariously old publishing workflow, he manually sends Kevin a webmention using curl (after first looking at the source on Kevin’s page to get his webmention endpoint):

curl -d source="https://jgarber.example/likes/1" -d target="https://kevin.example/stroies/1" https://kevin.example/webmention

Kevin’s website receives Jason’s webmention, parses the “like” post on Jason’s website, and chooses to display an adorable ❤️ (1) on his story’s page.

Using Webmention to write a sequel

…but Jason’s not done. He wants to continue the story Kevin started. He composes a story of his own and posts it to his website at https://jgarber.example/posts/1004653:

<div class="h-entry">
  <h1 class="p-title">…or is it?</h1>
	<div class="e-content">
    <p>I mean, I use “we” in the royal sense. Some of us knew it wasn't really the _end_ the end.</p>
  </div>
  <footer>
    <p>This story is a sequel to <a href="https://kevin.example/stories/1" class="u-sequel-of">Kevin's story <cite>The End</cite></a> and was posted by <a href="/" class="h-card p-author">Jason</a> on <time class="dt-published" datetime="2023-02-04>February 4th, 2023</time>.
  </footer>
</div>

Jason again manually sends a webmention to Kevin’s website to inform him of this new “sequel” post!

curl -d source="https://jgarber.example/posts/1004653" target="https://kevin.example/stories/1" https://kevin.example/webmention

Kevin’s website again receives the webmention from Jason, parses the source page, and, upon encountering the unique-and-in-no-way-a-“standard”-microformat class value u-sequel-of, treats Jason’s post as a “sequel.” Kevin’s website handles sequel posts very specifically and displays the title, a link, and some data from Jason’s h-card on the original story’s page in a special section labelled, “Sequels.”

Technical Notes

  • Most of what’s described above is fairly typical website-to-website interaction based on the IndieWeb building blocks of the Webmention specification and related practice of using microformats2 classes for marking up posts, “likes,” comments, etc.
  • The “like” example above is to demonstrate what an existing webmention response to Kevin’s original story might look like. Other “types” of webmentions (determined by parsing the source URL for microformats2-encoded data) include replies/comments, likes, and shares/boosts.
  • The novel/unique/different bit is the proposal of u-sequel-of (and also u-prequel-of). These classes are an extension of a “reply” post with the additional semantics conveying the directional relationship between the original post (Kevin’s “story” in our very specific example) and its sequel.
  • Kevin’s website, having received a “sequel” post, may choose to display all or some details about the “sequel” post on his original story page. Or… he may choose not to display the “sequel” post publicly (though this would certainly make discovery by others more difficult).
  • This scenario represents a hypothetical but truly distributed means of writing extensible micro-fiction and generating story chains across multiple websites using IndieWeb building blocks. No new accounts on someone else’s website or anything like that.
  • It doesn’t (yet, at least) address issues of content discovery, ergonomics related to reading or navigating story chains with multiple branching prequels/sequels. I’ve got some ideas on this, probably for a “part two.”
  • This proposal also doesn’t address spam, abuse, or other common challenges with running an online community.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment