One of the core IndieWeb building blocks is having an h-card on your website to establish one’s identity, either for others to read or for computers and parsers to know who you are.
A valiant first attempt
To start out, I created an About Tiddler with the appropriate h-card and other microformats mark up and then put it into a tab in my right sidebar to make it easy to find.
Naturally, I ran into a problem when trying to throw this into indiewebify.me. Since TiddlyWiki websites are generated primarily by JavaScript and thus suffer from the js;dr problem, figuring out where to put and display an h-card was going to be an issue. I even tried throwing it into the Site Title in the control panel and hoped for the best, but in the end, the site title is really the shadow Tiddler $:/SiteTitle and like all the rest of the page is generated by JavaScript.
I muddled around a bit and even tried to add an h-card using a <link> in the <head>, but nothing seemed to work.
A hackable solution?
Ultimately, in frustration, I simply threw a simple h-card into the <head> just to see what would happen. It wasn’t terrible—the parser found it and displayed it as a success. Unfortunately I discovered that TiddlyWiki displayed my photo and name at the bottom of my page in the browser. I didn’t expect this, but at least it was a start.
Since this method seemed to work, I thought I’d continue the cheat and just throw in some in-line CSS so that the muddled h-card wouldn’t actually show on my page. I’d use this coded h-card in my <head> for computers and keep the somewhat more elaborate one for people in my about page.
What I did
So, for those who’d like the entirety of the solution, here’s what I did:
- I created a plugin tiddler entitled $:/plugins/indieweb/core/rawMarkup and gave it the tag $:/tags/RawMarkup
- I added the following lines of code to it and saved the Tiddler
<a style="display:none" class="h-card u-url" href="http://tw.boffosocko.com/">
<img src="https://www.boffosocko.com/logo.jpg" alt="" style="display:none" />Chris Aldrich</a>
- Profit!
Again, this works, but seems very hack-y to me. If you’ve managed to get a h-card into your TiddlyWiki in a different or more elegant way, I’d love to hear your thoughts.
Thoughts on delegated h-cards
Given the difficulty and trouble of all this, I’m sort of left wondering why–particularly since I’m using this site as a secondary one to my primary site–I couldn’t just throw in a link to the h-card for my primary site and call it a day? Unless I’m missing something, for some reason the way that representative h-cards are defined, they expect the h-card to point to the site they’re actually on.
Why couldn’t/shouldn’t I delegate my h-card on subdomains or other personal sites to point to the representative h-card on my primary site? What if parsers could follow other rel=”me” links on my site to find/intuit a representative h-card from one of those? While I could have lots of domains to better differentiate my online identity, why couldn’t I do that, but still have the same primary identity?
@Jermolene
An h-card for my TiddlyWiki
Chris has been on fire with his recent TiddlyWiki posts, I’ve been enjoying them a lot
Glad to hear it. I shall take a closer look. Hope you’re well.
Thank you, all well here, I hope you and your family are keeping safe
Nice! I hadn’t thought to use the RawMarkup tag. Might seem hacky but I think that would be how to do it in TW. Any changes to the underlying code would risk issues with upgrades. Also, easy to simply drag the one tiddler between your wikis.
TiddlyWiki is a very solid looking platform for IndieWeb use (essentially using TW as a personal website). I am having some issues with the js;dr (cURL-ability) issue, but there are some methods for using it to create a static website.
To help others out and provide some examples, I’ve started a stub page for TiddlyWiki on the IndieWeb wiki, which uses MediaWiki. (If you have the rel=”me” stuff set up in the second article about h-card linked below, you should be able to use your TiddlyWiki URL to log into the IndieWeb wiki and document yourself, changes, and ideas.)
I’ve been writing up some of my explorations using TiddlyWiki for IndieWeb on my primary website (with copies on my TiddlyWiki) for those who are interested in taking a look or experimenting for themselves.
Self-hosting TiddlyWiki with GitHub Pages
An h-card for my TiddlyWiki
Webmention for TiddlyWiki to enable website to website notifications and communication
For those interested in following my particular progress, you can find all of my related content on my site with this tag: https://boffosocko.com/tag/tiddlywiki/ or follow via RSS at https://boffosocko.com/tag/tiddlywiki/feed/.
For those who are interested in delving in further, I might suggest looking at my IndieWeb/TiddlyWiki To Do List for things that could potentially be worth working on next:
adding proper h-entry and h-feed microformats markup
adding microformats markup and/or customizing tiddlers as articles, notes, bookmarks, and other types of posts
backfeed of comments from Twitter, Flickr, Instagram, GitHub, Mastodon using Brid.gy
adding a full implementation of webmentions for core
figuring out the js;dr problem for sending webmentions
Adding set up to potentially allow posting to TiddlyWiki using Micropub (may run into js;dr problems?)
Look into using TiddlyWiki as a Micropub server
Adding header information for using TiddlyWiki with Microsub readers (this should be fairly easy)
There is a lot of open source code in a variety of languages that does a lot of this stuff already in addition to lots of examples, so do search the IndieWeb wiki or ask in the IndieWeb chat for help or pointers so that you won’t necessarily need to reinvent the wheel.