👍 Likes - A decentralized social network in a single HTML tag
"Everything is made up and the points don't matter."
- Drew Carey, Who's Line Is it Anyway?
Just click like:
How?
<img style="cursor:pointer;height:24px;"
referrerpolicy="no-referrer-when-downgrade"
src="https://likes.catskull.net?t=0"
onclick="fetch('https://likes.catskull.net',{method:'POST',referrerPolicy:'no-referrer-when-downgrade'}).then(()=>this.src='https://likes.catskull.net'.split('?')[0]+'?t='+Date.now())"
onmouseover="this.src='data:image/svg+xml;base64,CiAgCQkJPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSI2NCI+CiAgICAgICAgICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ3aGl0ZSI+PC9yZWN0PgogIAkJCSAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GNIExpa2UhPC90ZXh0PgogIAkJCTwvc3ZnPgogIAkJ'"
onmouseout="this.src='https://likes.catskull.net?t=0'"
/>WTF
Any GET request to https://likes.catskull.net will return an SVG with the number of likes for the URL in the Referer[sic] header. This page is rendered if no URL is present.
Any POST request to https://likes.catskull.net will increment the number of likes for the Referer URL and return an SVG with the new number of likes.
Why?
I recently played Death Stranding and was really inspired by the social mechanism where you’re encouraged to like everything from a car to a toadstool someone left on top of a mountain. You can also like things rapidily, though it does eventually limit you.
I’m very passionate about the indie web. Giant mega corporations want us to pretend that magic internet points mean something. As static site pirates we often lose out on the magic internet points and sometimes I miss them! I built this so I can have all of the points.
No, how?
When the image is requested, the worker increments the like count and generates the SVG. I like this approach because it loads immediately and doesn’t need any event listeners. It is completely self contained in a few lines of HTML.
There’s an onclick handler that does a fetch to https://likes.catskull.net and then updates the src with a timestamp to make it refresh.
An onmouseover and onmouseout event swap out the like count SVG for a base64 encoded SVG “👍 Like!”. Not totally necessary but I think it’s fun!
Additional components could easily be created and I encourage you to make your own!
It's all open source, MIT License.
100% Spyware free. No analytics, no tracking. This page has Cloudflare analytics but the workers do not log or store individual requests. The URL embedding the page is stored in a private Cloudflare D1 database and isn't published anywhere. But isnt the point to let people know you're using it?
Additionally, it is inherintly decentralized by design. All data is public and additional hosts can be implemented with no discernable difference in quality of service or user experience.
👋 Thanks for stopping by and don't forget to leave a like!
PS - Likes start at 1 because I give everyone their first like 🙂