Webmention for TiddlyWiki to enable website to website notifications and communication

What is a Webmention?

Webmention is a relatively recent web standard (or W3C recommendation) that allows notifications when one website mentions a URL on another website. Think of it like @mentions on social platforms, but instead of just working within a particular website from one account to another, they work across websites. Your website can now @mention my website!

For those who are interested in delving deeper into the idea and its implications, I’ve written a primer in the past : Webmentions: Enabling Better Communication on the Internet.

The goal is for other websites to be able to reference content in my TiddlyWiki website, and if those websites support sending the notifications as either webmentions (or the older pingbacks), I’ll get a notification that my content was referenced elsewhere on the web. This is just the beginning of allowing two way communication between websites.

My exploration today is how to quickly get these up and running on a public TiddlyWiki instance. The public part is important because webmentions won’t work for non-public URLs which includes private TiddlyWikis. If you’re wondering how to self-host a TiddlyWiki on your own domain, I’ve recently written up a tutorial for doing just that. At the end of this article, I’ll make a few notes about how one might use webmentions, particularly in a TiddlyWiki ecosystem.

I’ll start out by saying that writing a full JavaScript implementation of the Webmention spec is beyond my capabilities presently, but it could be something that TiddlyWiki core might implement in the future. (Maybe something like Lazymention which is written in node.js might be leveraged?)

Here I’m going to focus on using a third party service to do all of the heavy lifting and code our behalf. It’s relatively common, especially in the static website space, for websites to rely on third party or publisher services to either send or receive Webmentions on their behalf. Given my current knowledge of TiddlyWiki and how its internals work and my knowledge of Webmention services, I thought it would be quickest and easiest to look at using the Webmention.io service to handle receiving these @mentions from other sites on my behalf.

While this article may seem long, I’m hoping it’s detailed enough for those who are code averse to follow the recipe and do this themselves. If you can create a Tiddler, cut and paste some text, and follow the tutorial you won’t need to know anything about code. I did the entire thing myself in about five minutes from start to finish.

Receiving Webmention notifications for your TiddlyWiki

As a quick overview, we’re going to cut and paste a few lines of code into a special tiddler of our TiddlyWiki based website. This will allow us to do two things:

  1. Log into Webmention.io to create an account
  2. Allow other sites that send webmentions to us to find an endpoint on our TiddlyWiki website that accepts them on our behalf.

We’ll then rely on the Webmention.io dashboard to show us our notifications or received webmentions.

Logging into Webmention.io

Webmention.io requires you to log in with your domain name/URL and relies on you being able to authenticate yourself using it. Since I’m not aware of an IndieAuth or equivalent mechanism for using TiddlyWiki to log into Webmention.io, the quickest method to accomplish this is to rely on RelMeAuth using IndieAuth.com to log into Webmention.io using either a Twitter or GitHub account. From a non-technical perspective, we’ll be using either our Twitter or GitHub account and it’s OAuth2 security to log into the service.

First we want to put a link to our public TiddlyWiki website into the website field on either Twitter or GitHub using the profile settings of one of those services. Here’s what mine looks like on GitHub:

Screenshot of my GitHub accounts details featuring a link to my website

Next we want to place a corresponding link to the relevant service into the <head> of our TiddlyWiki site using one (it’s okay to use both) of the the following lines of code:

<link rel="me" href="https://twitter.com/username" />
<link rel="me" href="https://github.com/username" />

where you will replace the username in these links with the respective usernames of your accounts. (I’ll note that you don’t need to do this for both accounts, you can use either Twitter or GitHub.)

To place these lines into the appropriate location on your TiddlyWiki, you’ll want to create a tiddler with a name like $:/plugins/indieweb/core/rawMarkup and the tag $:/tags/RawMarkup.

Then cut and paste one or both of these links as appropriate into this tiddler and save it (and your TiddlyWiki).

You should now be able to go to webmention.io and enter the URL for your TiddlyWiki into the web sign in box and click “sign in”. The service will parse your website’s page, find the link to either Twitter or GitHub and present you with the appropriate sign in button for one or both of those services. Click on the button for your chosen service. IndieAuth.com will then take you to that service to log into it, or, if you’re already logged in, it will take you back to webmention.io to your new account.

Creating your Webmention endpoint

Within webmention.io you can now go to the “settings” page which will give you two more links which are your webmention and pingback endpoints. They will look something like this:

<link rel="webmention" href="https://webmention.io/example.com/webmention" />
<link rel="pingback" href="https://webmention.io/example.com/xmlrpc" />

where example.com will be replaced with the URL for your website.

Now you should cut and paste these two <link>s into the same tiddler you created above: $:/plugins/indieweb/core/rawMarkup. Now save the Tiddler and your TiddlyWiki. (Be sure to leave the previous links in case you need to log back into webmention.io in the future.)

You’re done!

That hopefully wasn’t too hard.

But what does this do? When another website links to your website and sends you a notification, the code on your page will delegate the receipt of the webmention to webmention.io which will verify that the sending site has your URL on a publicly viewable page (this helps to cut down on spam problems that pingbacks used to have). It will then store the notification for you.

If you need a reminder to check them occasionally, maybe you could add a Tiddler with the link to your dashboard to appear on your wiki when you open it next.

Perhaps in a future tutorial I’ll delve into the specifics of actually showing these mentions directly within your TiddlyWiki on the Tiddlers to which they relate.

Optional Webmention badge

Some may notice that I’ve put a small Webmention badge into the footer of my TiddlyWiki site to visually indicate to human readers that the site accepts webmentions. You can optionally do this for fun if you’d like.

Sending Webmentions with TiddlyWiki

Sending Webmentions seems to be an issue as the fragment-based URLs that TiddlyWiki uses as permalinks using JavaScript seem to cause an issue with many receivers. They apparently have problems resolving and parsing pages due to js;dr related issues. I would send webmentions manually, but most receivers I’m aware of have this js;dr problem. I’m not sure if there is an easy way around this issue.

Hyperchats, Wikis, and Open Educational Resources

What’s interesting about supporting Webmention, particularly from a TiddlyWiki perspective, is that if my TiddlyWiki is notified of mentions of it from outside sources, I can quickly cut and paste those responses directly into my Wiki pages in a pseudo-comment section similar to the comments section on this post which could serve as a model. If those mentions of a particular Tiddler are from other TiddlyWikis, I could also choose to drag-and-drop (or import) them into my TiddlyWiki!

If I want to go a step further, I could transclude those imported Tiddlers into the Tiddler that they’re in reference to. Perhaps I might do this under a heading of “@mentions” or perhaps “Comments” and suddenly I’ve got a way of displaying two-way conversations on my own TiddlyWiki site.

As is mentioned in Kicks Condor’s post about Hyperchat Modality, one could potentially use custom theming information (cleverly named “whostyles” in that post) from imported Tiddlers (or themes from other platforms) to identify the web identities of the sites they’re received from. I’ll also mention Kicks’ post about Hypertexting which is related and forms an interesting melange of websites, blogs, wikis, and hypertext of all kinds to form a more interesting web medium.

For the broader information collecting and building or academic communities (and here I can’t help thinking about the Open Educational Resources space that uses Creative Commons licensing to build their teaching resources), one could use these webmentions as a means of notifying sites that their content has been used, changed, or updated (typically those using Creative Commons will credit their source using a link). Then the receiver of the notification could optionally add to or change their version or even just collect the changes. This becomes particularly useful when the Tiddlers can be easily dragged and dropped between TiddyWikis!

As an explicit example, imagine a professor who wanted to build a textbook anthology, but who could do so by dragging and dropping a variety of Tiddlers from one site to another to create a quick textbook or reader for their students. This idea is particularly exciting to me when combined with the idea behind TW5-powered ebooks!

What could you imagine doing with webmention notifications on your TiddlyWiki site?

I ran across Roam Research in late 2019, and in exploring TiddlyWiki lately I’m seeing a lot about people adding Roam-based functionality to TW5. What I’m not seeing is any conversation about how the same sort of backlinking could be done in MediaWiki. 

Of course I did mention something related the other day, but the functionality could be better surfaced:

One of my favorite “hidden” features of the IndieWeb wiki is the sidebar link for “What links here” that often provides some deeper and richer information than is found in the See Also sections.

Self-hosting TiddlyWiki with GitHub Pages

TiddlyWiki is most often used as a private wiki for personal note taking and creating private journals.

Because it is a single text file usually named index.html written in HTML, CSS and some JavaScript, I thought it would make an ideal candidate for a simple-to-use personal website that can be hosted on one’s own domain. As a researcher who appreciates the IndieWeb and Domain of One’s Own philosophies and uses my personal website as a commonplace book for both work and personal reasons, how could I resist?

TiddlyWiki

TiddlyWiki is easy to use, highly flexible, modifiable, and can be easily copied, backed up, and shared. There’s an active community of users and developers for the platform which dates back to 2004. There are a variety of examples and documentation online and plugins are literally as simple as dragging and dropping some files from one source directly into your own Wiki. For those interested in the OER movement, individual Tiddlers (TiddlyWiki’s name for cards or discrete entries within the wiki) can be easily dragged and dropped from other TiddlyWikis to copy them!

There are some useful instructions for hosting it almost everywhere–except on one’s own domain name.

The few easy options I’ve found for hosting a TiddlyWiki publicly online as a website were rely on someone else’s service as a subdomain. As much as I like the idea of TiddlySpot I really wanted to use my own domain name (not to mention that it’s non-obvious how to host a newer TiddlyWiki version 5 (TW5) instance there). I’d also seen TiddlySpace shut down a few years ago and didn’t want to deal with that potentiality—though I will admit that exporting would be as simple as downloading and moving a single file!

So after a month or so at tinkering around at several complicated solutions that always seemed beyond my grasp, I went back to IndieWeb basics. What is their recommendation for the easiest way to get a website up and running? The fact that an empty TiddlyWiki file is named index.html gave me my answer: set up a GitHub Pages-based website and simply connect it to my domain!

However, as simple as this pathway may seem to some, I thought I’d briefly document the process I took so others can do the same for themselves.

First I’ll presume you’ve got a domain name and a host that will allow you to change the CNAME for where your domain name is pointed. (If you don’t, check out https://indieweb.org/personal-domain for details.)

In short, you’re going to upload a single file to your GitHub account and then point your domain name at it.

The idea of GitHub may scare a lot of people, but you won’t need to use git, know any git commands, or even know how git works since I’ll describe steps that entirely use the graphical user interface and don’t come anywhere near using the command line or any complicated GitHub applications. It’ll be as easy as dragging and dropping.

Let’s start!

Step-by-Step Tutorial

Get TiddlyWiki

  • Go to https://tiddlywiki.com/ and click on the “Download Empty” button on their homepage. This will allow you to save a file called index.html to a convenient place on your computer.
  • This one file is the entirety of your future website! Guard it well.

GitHub

  • If you don’t already have one, create an account at https://github.com/
    • You’ll use this account and their free GitHub Pages service to host your website for free as long as the project folder (also known as a repository) you are hosting is public.
  • At GitHub create a new repository.
    • Name it username.github.io, where username is your username (or organization name if you’re doing it for your organization) on GitHub.
    • Give your repository an optional descriptive name. I named mine “A TiddlyWiki commonplace book”
    • Choose the “Public” option, otherwise no one will be able to visit your new website.
    • Click “Create Repository”
  • Upload your TiddlyWiki to your new repository
    • In the Quick Set Up box click on the link for “uploading an existing file”.
    • On the subsequent page you can either drag and drop the empty TiddlyWiki index.html file you saved on your computer or you can click “choose your files” to find and upload the file.
    • If you like, you can optionally add any additional README, License, or gitignore files as necessary. If you don’t know what these are you can safely skip them or revisit doing this later.
    • Under “Commit changes” give your upload a short title; the suggested “Add files via upload” is fine. You can add an optional extended description if you like.
    • Click on the “Commit Changes” button.
      • P.S.: If you haven’t done so before you’ve just made your first Git commit. Congratulations!!
    • Your https://github.com/username/username.github.io repository folder should now be ready and have your index.html file in it.

Setting up your domain

Setting up your website

  • It may take a while for the DNS system to propagate the changes from your host, but you should be able to visit your website and see your empty TiddlyWiki online. Congrations! You’ve got a new website.
  • You’ll notice in the TiddlyWiki documentation that the first rule of TiddlyWiki is to always save or back up your wiki!
    • (The second rule, in true Fight Club fashion, is–let’s say it together–to always save or back up your wiki!)
    • Since our wiki is on GitHub, we’ll want to use the Save to a Git Service instructions. Once set up, the changes to our TiddlyWiki should automatically self-save (this can be changed within your wiki’s Control Panel too) or they can be saved manually using the TiddlyWiki checkmark save functionality.
    • I’ll note that you can presently use your GitHub password in these settings, but this isn’t quite as secure as generating a custom token (or password), and sometime in late 2020, GitHub won’t allow you to use your basic account password this way, so you may as well set up the personal access token now.
  • Setting up Personal Access Tokens
    • You will need a Personal Access Token (essentially a password that will be specific to your TiddlyWiki account) in order to save your TiddlyWiki file.
    • On GitHub, click on your user icon, select “Settings”, then “Developer Settings”
    • Next click on the “Personal Access Tokens” tab and then click “Generate new token”
    • Give your token a descriptive name like “TiddlyWiki”
    • Under scopes, select “repo” (and all of its sub-scopes)
    • Click the “Generate Token” button at the bottom of the page.
    • Once created, immediately copy this string somewhere safe since navigating away from the page will not allow you to recover it. (If you do, you’ll need to regenerate a new token.)
    • Finally copy the text of your token into the Tiddler noted above in place of your password. There’s no explicit save button, just ‘X’ out of the settings control panel and click your TiddlyWiki’s main save button.
    • Your token value should be stored in browser local storage.
    • Now you can edit any Tiddler and save it.
      • After edits to your wiki, you’ll see that the checkmark icon on the page is red (depending on your theme), indicating changes to save. You can click on it to force a save.
      • I’ve found it convenient to wait for the TiddlyWiki to schedule the save on its own, however, make sure you’ve saved any changes you want before closing your browser tab.
      • Sometimes saves aren’t always successful and you’ll see error warnings, but usually they’ll clear themselves up on subsequent auto saves.
      • If necessary, you can visit your GitHub repository for your wiki and it will indicate the interval of time since the last save.

We’re done!

  • Everything after this you may be able to either handle yourself by poking around your new wiki or you can find lots of help in the two Google Groups listed above or by searching around online, in fora, or even step-by-step videos on YouTube.
  • If you’ve done this as part of the IndieWeb or A Domain of One’s Own, be sure to log yourself into the IndieWeb wiki and add yourself to the examples on their TiddlyWiki page where you might also find some other useful ideas.
  • If you like, you can delve deeper into GitHub and use one of their apps or command line functionality to regularly back up your website to your desktop, or you can make branches of your site on your local computer and then push those changes up to the cloud.
  • If you find problems or encounter issues, feel free to drop me a line or catch me or others in the IndieWeb chat.
Annotated edit (indieweb.org)
An edit (AKA diff, change) is a special type of reply that indicates a set of suggested changes to the post it is replying to. A collection of (presumably related) suggested edits in open source is often called a patch or pull request.
In part out of laziness and lack of an easy way to implement a workflow and mark up, I will post content (bookmarks or notes) to my website and (pseudo-)syndicate all or portions of it to the IndieWeb wiki as either edits or as links to See Also sections of pages. “Pseudo” because the content isn’t always a 1 to 1 match.

To document the change, I’ll include a syndication link on my website to the permalink for the edit on the wiki. Having subscribed to feeds of wiki changes/edits before the user interfaces are far less than useful/ideal, so having a better contextual bookmark on my website makes more sense for readers while somewhat reformatting things for the readers of the wiki (a related but somewhat different context) works better for that, but still provides bi-directional links and references.

Perhaps I’ll create an edit post kind in the future? For the moment I’ll just post some (like this one) as an annotation? Small steps…

Example bookmark of a commonplace book: https://boffosocko.com/2020/03/14/neils-noodlemaps/
with a syndication link to the diff of the addition to the example on the IndieWeb wiki: https://indieweb.org/wiki/index.php?title=commonplace_book&oldid=69042

Read 23 2019.06.25 - TWGGF: The Future of Large Tiddlywikis by h0p3 (philosopher.life)
What does the future hold for large Tiddlywikis? What can I do right now to start optimizing my TW to be usable while still huge. I am grateful to the TW contributors and those who made one of my browser engines. This has to be one of the best FOSS communities I've ever had the privilege of participating in. I need the advice of experts.
If h0p3 is worrying about this just a few years in, I’m worried that I’ll be terrified. I’d end up posting to my person wiki even more often than my personal website… hmmm.
Replied to a tweet by James BernardJames Bernard (Twitter)
James, I’ve been watching a few people use public-facing TiddlyWikis for “hyperchat“. One of them also has it set up with Webmention functionality so that other sites can send it notifications (though they’re not yet displaying them). To me this looks like the beginning of a different sort of social network and online communication.

I ran across an example yesterday of someone using a private local TiddlyWiki as a static site web generator, which is quite different from people hosting them directly on web servers.

I’m interested in off-label use cases for wikis (particularly in the vein of commonplace books), so do let us know when your article comes out.

I’ve started a TiddlyWiki stub on the IndieWeb wiki for those who are using it as a personal website. I’m working toward using it as a commonplace book for myself, and it would be cool to see it add Microformats v2, an h-card set up for author identity. I’ve noticed that Sphygm.us has hers set up with at least incoming Webmention support, which is awesome!

 

Replied to Questions (Reclaim Hosting Community)
Everyone has questions and most likely someone here has an answer for you. Whether it be about hosting, domains, or anything else you need help with, this is the place to ask.
I’ve been looking closer at wikis, online commonplace books, and similar personal/work/lab/research notebooks recently and have come across TiddlyWiki as a useful, simple, but very flexible possibility.

While most of its ecosystem revolves around methods for running the program locally (and often privately) or in Google or Dropbox storage, I’ve come across a growing number of people hosting their instances on their own servers and using them publicly as a melange of personal websites, blogs, and wikis.

Has anyone tried hosting one (particularly the newer TW5) through Reclaim before? Of the many methods, I’m curious which may be the easiest/simplest from a set up perspective?

Here are some interesting examples I’ve come across:
* “A Thesis Notebook” by Alberto Molina
* PESpot Lesson Planner by Patrick Detzner (this one seems to be heavily modified)
* sphygm.us

Bookmarked TiddlyBlink — TiddlyWiki with bi-directional linking (giffmex.org)

TiddlyBlink is an adaptation of TiddlyWiki with the goal of helping you see connections between your ideas, and move quickly from one idea to another. It was inspired by the bi-directional linking found in Roam (https://roamresearch.com/), but built with capabilities already available in TiddlyWiki (https://tiddlywiki.com). See my example file here.

If he hasn’t seen this, it seems like the sort of thing that Jack Baty would appreciate.

I wonder if he’s considered using webmention.io to work with his TiddlyWiki? I’ve set it up with my MediaWiki set up, but still need to tinker with it on a public TiddlyWiki.

I’ve been working on making some significant back-end tweaks to my wiki today. Among other things I’ve fixed, it should now be set up to accept incoming webmentions. Hooray! I’ve always wanted an IndieWeb wiki to go with my IndieWeb website; it looks like I’m well on my way.

Special thanks to Aaron Parecki for leaving some breadcrumbs to follow to make it possible.

Small progress in my wiki explorations and a fix to my MediaWiki administrative user email address

I’d looking into maintaining a wiki a while back and have recently been determined to get back to it. As a result, I’ve been looking at TiddlyWiki since that’s what some of Kicks Condor‘s group has been using. (Yep, I’ve still got that tab opened and am tinkering away slowly on the ideas–but mostly the technology.)

I’ve been having some issues in self-hosting a TiddlyWiki the way I’d like to. If anyone has any clear cut documentation on how to host a TiddlyWiki on one’s own domain name, I’d appreciate it. The documentation doesn’t seem as clear as I would expect (or perhaps more likely my server is having issues propagating/connecting?). If anything it’s muddled by the fact that they can seemingly be hosted in dozens of places one might not otherwise expect. My primary reservation is that it looks to me like they’re designed as single user instances, so I’m not exactly sure how Kicks et al. are effectuating their hyperconversations. Part of my issue is my mental model of some of the wikis involved in addition to the busy-ness of the sites’ themes, not to mention some of the non-standard conversational style on some. (I’ll get there eventually.)

I’ve also been using the IndieWeb’s MediaWiki for several years, so I’ve become much better at how it works as well as the ins-and-outs of the markup and how to do some slightly more advanced things using it. I’d set one up nearly a year ago this month and used it sporadically at best.

One of the bigger problems with my MediaWiki install was that somehow I wasn’t able to log into the primary account to do some of the necessary administrative functions. Today I got fed up with being hampered a bit and went spelunking into my install to see where things went wrong, suspecting that it was a one button install issue.

After digging through some documentation, I dug into the mySQL database and found a daunting looking [Blob] in the user_email field. Why couldn’t it be an easy-to-edit field? I not knowing anything better to do, I downloaded it, opened it up in my text editor, and discovered that I’d managed to leave a letter out of my own name in the email address! No wonder it wouldn’t work and the system wouldn’t let me reset my email address or password. A quick text edit later, the email was fixed, I uploaded the (now less intimidating) [Blob], and did a reset of the password in the admin interface, and we’re back in business! I’m always glad not to have borked the entire database and site.

If nothing else, it’ll help me in my explorations. Onward.

Bookmarked TiddlyWiki — a non-linear personal web notebook (tiddlywiki.com)

Have you ever had the feeling that your head is not quite big enough to hold everything you need to remember?

Welcome to TiddlyWiki, a unique non-linear notebook for capturingorganising and sharing complex information.

Use it to keep your to-do list, to plan an essay or novel, or to organise your wedding. Record every thought that crosses your brain, or build a flexible and responsive website.

Unlike conventional online services, TiddlyWiki lets you choose where to keep your data, guaranteeing that in the decades to come you will still be able to use the notes you take today.

Some sketch thoughts about OER to come back and revisit

Does anyone/organization maintain a wiki or centralized repository of OER textbooks? (Especially a consortium of institutions which provide financial support).

It should contain a list of people/departments who’ve adopted (an indicator of quality).

It could maintain lists of people with technical expertise that can help to reshuffle pieces or allow customization? Maybe create easier methods for customization with related UI.

How to best curate resources and put them into a searchable repository for easy later use?

Can we create an organization that somewhat models the instutionalization of traditional textbook publishers that organize and track their assets? This institution should be supported by a broad array of colleges and universities as a means of supporting the otherwise invisible labor that is otherwise going on.

How can we flip the script to allow students to choose their own materials instead of allowing professors to do this? Their economic pressure alone will dramatically help the system. (Especially the hidden labor issues.)