Making IndieWeb Friendly WordPress Themes: An IndieWebCamp Popup Session

The IndieWeb WordPress community could use some more theme options.

Let’s get together as a community and host a theme raising (a play on the idea of the old barn raising). We can all work/hack together to make some of the popular WordPress themes more IndieWeb friendly. We’ll discuss methods for adding the necessary Microformats and best ways to indieweb-ify a WordPress theme.

Either bring your own favorite theme or work from one on a list.

All levels are welcome!

Beginners and those without coding experience are welcome/encouraged to attend. We’ll try to help newcomers learn to begin tinkering with some WordPress theme code. If you don’t have a GitHub account yet, you might create one beforehand and we’ll show you how to use it for development, but even without it you can still do a lot with just a text editor.

Details

When: 2020-09-26 9:30 – 11:30 AM (Pacific) / 12:30 – 2:30 PM (Eastern)
Event page: https://events.indieweb.org/2020/09/making-indieweb-friendly-wordpress-themes-8fs9gAVX3OkV
hashtag: for social media and used to create an Etherpad for the session: #WPandMicroformats
Etherpad: https://etherpad.indieweb.org/WPandMicroformats for note taking during the session
Streaming video/audio platform: Zoom (link to come)
Demos: Yes – when we’re done, show off how well your new hacked theme works on your site.

RSVP

Newcomers can post a comment on this post below or reply yes via Twitter to https://twitter.com/ChrisAldrich/status/1300562134699393024. Or you can feel free to just show up on the morning of the event.

If you feel able, RSVP at Meetable or post an indie RSVP on your own website.

Prerequisites

Bring your own theme or a theme you’d like to make more IndieWeb friendly by adding Microformats v2 support. Ideas for possible themes can be found at https://indieweb.org/WordPress/Development#Themes

(Optional) Create a GitHub account which you can use/learn during the process. Those who don’t want a GitHub account can simply use their text editor of choice to modify the relevant theme files.

Volunteers

We’re always happy to have additional help! If you’d like to volunteer or help organize and run the session, please touch base with Chris Aldrich or David Shanske in the IndieWeb Meta chat room.

I look forward to seeing everyone there!

This post was originally published on Chris Aldrich

Displaying Webmentions on TiddlyWiki

I’ve previously written about setting up receiving Webmention for TiddlyWiki by logging into webmention.io and creating an account to delegate the receipt of the notifications.

 

Naturally, these notifications can be more fun for cross-site conversations if one has the ability to display the webmentions on the posts to which they relate. There are probably a number of ways of doing this, but following the TiddlyWiki advice of keeping Tiddlers as small as possible, it seemed like creating a tiddler for the response and then transcluding or embedding it into the original would be the best course of action.

 

At the recent Gardens and Streams: Wikis, Blogs, and UI—a pop up IndieWebCamp session there was some discussion on internal bi-directional linking in wikis, but I thought it would also be fun to show off bi-directional linking between my wiki and other websites. To do that will require displaying at least some Webmentions.
My wiki currently doesn’t have very many webmentions or incoming links, but after writing about a Bookmarklet for pasting content into TiddlyWiki, I got an email from Anne-Laure Le Cunff that she’d used some of the code to write a bookmarklet for Roam Research. Since her article didn’t send a webmention, I used Telegraph to manually force her article to send my wiki a Webmention so my account would have a record of it for the future for potential exporting or other use.
Now I’d like to display this webmention on that tiddler. Doing it automatically would be great, but I thought, since I don’t expect to receive many on my wiki that I ought to try out a manual set up to see how things might work and how I might display them if they were automated.
Since I had created that bookmarklet, I used it to copy and paste the text from Anne-Laure Le Cunff‘s website into a new tiddler. I then massaged it a bit to format it to look like a response and I’ve transcluded it into the original post under a heading of Responses.
The side benefit of doing this is that the stand alone tiddler that has the link and the context from her post also sits in my wiki as a bookmark of her post as well. As a result, I get a two-for-one deal: I get the bookmark of her post with some context I’m interested in, but my original post can now also display it as a response! Now I can also use that bookmark in other places in my website as well. If only one could do this so easily in other CMSes?!
I’ve yet to hear of another example of this in the wild, so unless I’m missing something, this may be the first displayed Webmention on a TiddlyWiki in the wild.

Next steps

Data formats

TiddlyWiki has lots of ways to display data in Tiddlers, so perhaps one might use various fields in a bookmark tiddler to create the necessary comment display. This could give a more standardized method of displaying them as well. It could be particularly useful if someone was using a microformats parser to import the data of such mentions. If this were the case, then the tiddler that is being commented on could do a filter/search for all tiddlers in the wiki that mention it and transclude the appropriate pieces in a list format with the appropriate mark up as well as links back to the individual tiddlers and/or the links to the sending site.
I’m curious if others have ideas about how to best/easiest implement the display portion of webmentions on a public TiddlyWiki? Since I’m also hosting my entire TiddlyWiki on GitHub pages, there might be other potential considerations if I were to be hosting it statically instead. This may require some experimentation.
I’ve got a few mental models about how one might implement showing Webmentions in TiddlyWiki, but it may take some more thinking to figure out which way may be the best or most efficient.

Automation

I don’t anticipate a lot of incoming webmentions to my wiki at present, but if they become more prevalent, I’ll want to automate the display of these notifications somehow. This will take some thought and coding as well as more knowledge of the internals of TiddlyWiki than I’ve currently got. If someone with the coding chops is interested, I could probably brainstorm a set up fairly quickly.

Microformats

It would also be nice to be able to have full microformats support in TiddlyWiki so that the stand alone “bookmark” mention works properly, but also so that the transcluded version might have the correct mark up. This may rely on the two things to be properly nested to make them work in both contexts.

This post was originally published on Chris Aldrich

An h-card for my TiddlyWiki

I’m still spending lots of time trying to figure out how TiddlyWiki works, so some of this may seem hack-y, but it seems to get the job done. I’d love it if others who are using their TiddlyWikis as their primary website (and who have more experience than I) weighed in with their expertise or experience.

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:

1. I created a plugin tiddler entitled $:/plugins/indieweb/core/rawMarkup and gave it the tag $:/tags/RawMarkup
2. I added the following lines of code to it and saved the Tiddler
   1. <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>
3. 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?

This post was originally published on Chris Aldrich

Next we’ll want an account on Brid.gy for Twitter. This will allow us to publish from our website to Twitter; it will also allow us to reverse syndicate reactions  from #PressEdConf20 on Twitter back to our posts using Webmention.

(Publishing this way will require Microformats: Your theme will need the proper microformats support to use this method, but again other methods are available.)

This post was originally published on Chris Aldrich

Exploring Pine.blog

I’d noticed Pine.blog before at a previous IndieWebCamp, but not had time to delve into it very deeply. Seeing some of what Brian Schrader has been working on while following IndieWebCamp Austin remotely this weekend has reminded about the project. As a result, I’ve been spending some time tonight to check out some of the functionality that it’s offering. In part, I’m curious how similar, or not, it is to what Micro.blog is offering specifically with respect to the idea of IndieWeb as a Service which I’ve recently begun documenting. It’s always great to see the growing diversity and plurality of solutions in the space.

My brief prior experience with the platform was simply adding my website to their discovery service. Tonight I’ve found that Pine.blog has got a very pretty little feed reader experience with some fun discovery functionality. You can apparently create multiple timelines to follow content, but one needs a paid account for more than one timeline. It allows both following sites as well as recommending them to others. It also appears that Brian is supporting the rel=”payment” microformat as I see at least one feed that has a “$ Support” button in the Pine.blog interface to allow me to go to the site’s payment page to support it. I think this may be one of the first times I’ve seen this functionality in an app in the wild outside of the Overcast podcast app which added it a couple of years ago.

It has webmention support, so I can “like” things within the reader and notify others. Without a paid account I don’t see the ability to reply to or mention other sites though. It also looks like it allows for import/export of OPML too, though I haven’t tried it out yet–I can only test drive so many feed readers at a time and Indigenous is taking up all of my bandwidth at present.

I do wonder a bit about potentially importing/exporting my content if I were to go all-in on Pine.blog. I’d bet the idea is on the product map, but that’s a huge bit of work to build without a paid user base to support it. I’d personally want at least an export function if I were to change over, though I’m more likely to want to dovetail my own site with it much the way I’m currently doing with Micro.blog.

It looks like it should be able to post to my website, but I’m finding the “publish” and “preview” buttons don’t work–perhaps I need a paid account for this functionality? Of course, I only see UI to provide pine.blog with my URL and my account name, but it hasn’t authenticated using a password or other method, so perhaps that portion isn’t finished? I’ll circle back around to it later when I do a free trial. I do notice that Brian, the developer of the project, has an account on pine.blog which is mirrored on one of his subdomains running WordPress. Quirkily I’ve noticed that the header on his main website changes to alternately serve the pine.blog version and the WordPress version!

More to come as I continue exploring… Later on I’ll take a look at some of their paid functionality, but for now, it’s a pretty compelling set of features and some well-laid out user interface to start. I look forward to seeing how it continues to evolve.

This post was originally published on Chris Aldrich