The best “modern” way would be to create a Micropub endpoint and then you can use some of the excellent multi-platform Micropub clients like Quill, Omnibear, Micropublish.net, etc. The benefit of this is that you get way more than just bookmarks.
I don’t know if anyone has set one up to work with Eleventy or Netlify, but there is some prior art for other static site generators.
The low brow solution may be to take the route I took with TiddlyWiki, but that includes some cutting and pasting, so it may be helpful, but isn’t a completely automatic solution. You’ll note there’s a reply at the bottom of the post that modified my code for use with Roam Research which also includes code for browser extensions as well.
If you want to go crazy with some .php, there’s Parse This code for a plugin for WordPress that might be co-opted. It will parse a variety of pages for microformats, JSON-LD, schema, OGP, etc. to return rich data on a huge variety of websites to give you lots of metadata to create a bookmark, but this may be over and above anything you might want. I use it as a built-in product in the Post Kinds Plugin for WordPress to create a wide variety of post types for reply contexts.
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.
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.
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.
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.
For those who attended yesterday’s The Garden and the Stream IndieWebCamp session, thank you for participating! I honestly only expected 4 or 5 wiki fans to show up, so I was overwhelmed with the crowd that magically appeared from across multiple countries and timezones.
I’ve heard from many–both during the session and privately after–that it was a fantastic and wide-ranging conversation. (I never suspected memory palaces or my favorite 13th century Franciscan tertiary to be topics of discussion.) Several have suggested we host not only a continuation of the session, but that they’d be interested in other pop-up IndieWebCamp sessions. If you’re interested in future follow ups or sessions shoot me a quick email (you can find it on my home page) and I’ll be sure you get an invite. You can also follow future events via events.indieweb.org or find them in the IndieWeb’s weekly newsletter that is emailed out every Friday afternoon.
Our session went on far longer than I ever could have anticipated and I suspect we could have easily gone all day and still not touched on a fraction of all the topics we all outlined. Special thanks to the larger majority of those who were interested enough and had the free time to stay well past the hour mark and on to the end. I will say it’s nice to be able to cover so much ground and so many ideas without the threat of 5 more sessions following you.
If you write up any notes or posts about the session, do add a link to them in the IndieWebCamp Pop-Ups page under blog posts/articles or photos. If you can’t log into the wiki (with your own website), feel free to ping me with the URL and I’ll add them for you.
I’ll try to write up an organizer’s post-mortem with a few ideas about doing future sessions for others to consider. I hope to rewatch the session myself and add to the growing list of notes and thoughts about it.
Because this was just a single IndieWebCamp-style discussion session and we hadn’t specifically planned a traditional creator’s day or hack day, I did want to throw out a small challenge to those who either attended or who are interested in participating.
For most, the IndieWeb is more about creating something than just talking about it. So in that spirit, I’ll challenge everyone to spend a few hours today/tomorrow or sometime this week and create something on your website or wiki related to the session. It can be a summary of ideas, a blog post about wikis (or anything you like really), a small change you’ve always wanted on your site (a CSS improvement, adding bi-directional links to your wiki, Webmention support, etc.), or anything else you might have found interesting from the conversation. The best part is that you can choose what you create on your own site! Make something you’ll use or appreciate. Have fun!
My personal plan for the challenge is to continue some work to my TiddlyWiki to support bi-directional links using TiddlyBlink. I might also take a crack at doing some design and building work to show some incoming webmentions on my TiddlyWiki. (If anyone is interested in test-driving Mike Caulfield’s implementation of Wikity on WordPress in conjunction with Webmention, I could be game for that too!)
Once you’ve made your creation, post a link to your article or notes or make a quick 2-3 minute demo video of the new feature or write up a post about it and add them to the IndieWeb wiki page for Pop-up Session Demos. Again if you can’t log into the wiki with your own website yet, drop me a note and I’ll add them for you or you can ask for help on how to do it in the IndieWeb chat.
Thanks again everyone! I look forward to seeing what you come up with.
There has been some sporadic conversation about doing impromptu IndieWebCamp sessions and thus far we’ve yet to organize one. Given our physical distancing and the dearth of bigger IndieWebCamps, I thought I would propose this single topic stand alone camp session to get something rolling. I’d invite others to propose and schedule others in the future.
This is an online only event. We will provide a Zoom video conference link 30 minutes before the session here and in the IndieWeb chat.
We’ll be discussing and brainstorming ideas related to wikis and the IndieWeb, user interfaces, functionalities, examples of wikis and how they differ from blogs and other social media interfaces, and everyones’ ideas surrounding these. Bring your ideas and let’s discuss.
This is just a single one hour IndieWebCamp-like session (though we have the option to go over a bit since there isn’t a session following us) where we’ll brainstorm and discuss a particular topic. Hopefully the weekend time will be convenient for a wide range of people in Europe and North America who have previously shown interest in the topic. Everyone is welcome to attend.
To prepare for the session we’ll be using the following:
I read about IndieWeb some time ago and managed to dive into it a little the last days. As far as I can tell TW would be a perfect fit for this and since we are moving to federation it should be quite easy to integrate - at least that is what I thought... I found Hangout #52 when Jeremy mentioned IndieWeb - but unfortunately these 5 seconds is all there is about this matter.
First of I thought adding the "rel-me" to the single page version was all one had to do, but I think that was naive ;)
My next idea was that maybe I could tweak the static page generation template but that again would destroy dynamic syndication...
So my question is (please bare with me if I missed some source) does anybody has something running or some pre-release stuff in this direction?
And if not (most probably) do you have any idea/advice/hint...?
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.
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.
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!
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.
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:
Log into Webmention.io to create an account
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:
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:
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:
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.)
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
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’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.
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:
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?
I think I’ve learned more about TiddlyWiki by looking at others’ online than I have from direct documentation or search. Thanks @Jack Baty (#), @JoshSullivan (#), Sphygm.us, and h0p3 for hosting yours out in the open.
It reminds me a lot of the “view source” I used to do in the days of the early web.
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.
TiddlyWiki is most often used as a private wiki for personal note taking and creating private journals.
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.
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.
Here you may need to consult with the the instructions your specific domain name registrar or host has for pointing your domain name (or subdomain) at your new GitHub Pages website. Usually they will have step by step instructions for doing this, but they can also often do it for you via email or phone support if you prefer.
Scroll down the page to the “GitHub Pages” section
In the “Custom Domain” section enter your domain name example.com into the field and click the “Save” button.
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.
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.
I spent a chunk of the evening hacking away and I managed to get my TiddlyWiki set up and serving from a domain I own!
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.