In IndieWeb's webmentions system, you are expected to mark up your links appropriately. This tells the target website what kind of a mention it is. Is it a comment/reply, a like, a repost, a quotation, a bookmark, or just a generic mention?

For example, I recently added Amber Wilson's post to my list of links about the IndieWeb. I did not explicitly mark that link as a bookmark (using u-bookmark-of class). As a result, my note was incorrectly classified as a comment. This caused the entirety of my post's contents to appear there as a comment. (Sorry 😢)

By the way, take a look at webmention.io's test directory to see an example of each type of markup. Once the link has been properly marked up as a correct kind, the result appears correctly.

This can cause some inconvenience when authoring contents using a Markdown file as Markdown links don't support classes.

One solution is to just write the HTML manually.

<a href="..." class="u-bookmark-of">Author (year), "Title"</a>

But that is just too cumbersome. Instead, I decided to use an emoji to designate the type of link.

[🔖 Author (year), "Title"](...)

The notes server is using markdown-it to render Markdown, like VuePress. So, I created a simple plugin to add class="u-bookmark-of" to links with 🔖 emoji.

markdown.use((markdown) => {
  markdown.renderer.rules.link_open = ((original) =>
    function (tokens, idx, options, env, self) {
      const token = tokens[idx]
      const nextToken = tokens[idx + 1]
      if (nextToken && nextToken.type === 'text') {
        if (String(nextToken.content).startsWith('🔖')) {
          // https://github.com/aaronpk/webmention.io/blob/main/test/data/source.example.org/bookmark-of.html
          token.attrPush(['class', 'u-bookmark-of'])
        }
      }
      return original(tokens, idx, options, env, self)
    })(markdown.renderer.rules.link_open)
})