I’ve been using IndieWebify.Me to get this site setup to post on the indieweb and send/receive comments via webmentions. Technically the site uses webmentions.io but comments can be added to the site that way.
I think eventually it would be a good idea to have a site that can send and receive these requests but for now I am happy to use this third party service.
The header of the site now includes a completed h-card with the following block of text to add author, photo, url, and a brief description.
<div class="h-card" hidden>
<span rel="author" rel="me" class="p-name">Christopher Himes</span>
<img class="u-photo" src="https://christopherhimes.com/assets/img/new-face-120x120.webp">
<a rel="me" class="u-url" href="https://christopherhimes.com/">https://christopherhimes.com/</a>
<div class="p-note">I'm Christopher Himes (he⁠/⁠him), an accomplished tech professional living in Metro Detroit.</div>
</div>
Since this is a Jekyll site I was able to edit the post.html layout to incorporate h-entry values through out. I’ve removed extra items to highlight the areas where new classes were required. I’ve added some conditional items that allow me to make a blog post as a reply and include the necessary u-in-reply-to class.
<div class="h-entry">
<h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: date_format }}</time>
{%- if page.external_url and page.external_title -%}
<p>in reply to: <a class="u-in-reply-to" href='{{ page.external_url }}'>{{ page.external_title }}</a></p>
{% endif %}
<div itemprop="author" itemscope itemtype="http://schema.org/Person" hidden>
<a rel="author" class="u-url p-name p-author h-card" itemprop="name" href="https://christopherhimes.com/">{{ author }}</a>
<img class="u-photo" src="https://christopherhimes.com/assets/img/new-face-120x120.webp" alt="Photo of me wearing a green suit" width="40" />
</div>
<div class="e-content">
{{ content }}
</div>
<a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
</div>
Quick aside: I often forget that Jekyll will render the liquid text in the above code block. You get some lengthy results if raw and endraw are not placed around the code block.
I already have a link type post that I am expanding upon to do reply posts if the person accepts webmentions. If this has been shared on Mastodon I’ve confirmed my posts appear as a webmention. 🤞
Comments
This blog uses a Mastodon and webmentions for comments. You can comment by replying on Mastodon/ActivityPub/Fediverse account or webmention.