IndieWeb Implementation Test

Life is about fiddling around with things, I guess…

AI-generated summary

The author describes their journey of modifying their blog to engage with the IndieWeb community. They implemented technologies like IndieAuth, RelMeAuth, microformats, and Webmention, despite facing challenges with their theme's CSS. They successfully integrated these features and plan to parse and display Webmentions using webmention.js. They acknowledge the need to balance this work with their graduation project.

After making a multilingual modification to my blog, I started a new journey fiddling around with it.

This website uses tags forked from Kristof Zerbe ’s hexo-tag-plugins repository. Through Kristof’s articles, I learned about the IndieWeb community, which led me to other technologies that associated with it, like microformats , IndieAuth , RelMeAuth , Webmention , etc. It turns out that there is a bunch of people in the world who use their indie websites as primary online identities, and also use a set of open technologies and standards to communicate and interact with each other on their websites.

不觉得这很酷吗？作为一名理工男我觉得这太酷了，很符合我对未来生活的想象，科技并带着趣味。 ^[1]

I’d like to try to be part of that community. I have already got an indie website and my personal domain. The implementation of IndieAuth and RelMeAuth support is also easy. The next thing is to implement microformats and Webmention. So I referred to Kristof’s three tutorials: “Hexo and the IndieWeb” , “Hexo and the IndieWeb (Sending Webmentions)” , and “Hexo and the IndieWeb (Receiving Webmentions)” , along with other resources such as “webmention 实现参考” by Runye , “透過 webmention 來搜集 blog 的社群迴響” by Jason Chen , to make some modifications to my blog.

There were some hiccups during the modification. Redefine , the Hexo theme I use, uses Tailwind CSS to write some of its styles, which leaves many class names that start with h- in the HTML structure, causing some microformats parsers to generate incorrect results. So I had to use a filter to make some changes to the theme by replacing class names that start with h-, with other class names. After the replacement, the h2l-patched-h-entry I made seems to be parsed correctly. For interactive links that require special class names like u-in-reply-to, u-like-of, I would write them in the front-matter, insert them into the page with a filter and hide them. After testing, I found that it is better to insert only one interactive link in an article, and once the interactive link is inserted, it is better not to have other links in the text, or there may be parsing error . Also, I am not sure if I can provide the h2l-patched-h-entry and the links it contains in a correct format. Webmentioin Rocks! told me that I had not provide u-in-reply-to links appropriately during previous tests, though this seems like a bug . Having just talked about Webmentions, on my end of this website, the work that needs to be done is to parse the Webmentions and display them on the page. I chose webmention.js by PlaidWeb to get the work done, and made some adaptations to let the script use my own simple i18n system. In addition, I have also added the ability to switch between Comments and Webmentions, and added a manual send feature to the Webmentions interaction system.

After all these operations, my website has obtained a lot of terrible codes, again…It’s time for me to keep doing my graduation project.

The End

“Not think this is cool? As a STEM guy, I find it extremely cool. It aligns perfectly with my vision of future life, where technology comes with a touch of amusement.” — The “STEM guy” meme of vlogger “老师好我叫何同学” ↩︎