It's coming along nicely. So far, I've imported all existing webmentions from webmention.io and stored them locally alongside my post storage. So if my post is stored in
/2018/11/15/5/post.md then my webmentions would be stored in
/2018/11/15/5/mentions/ each webmention is stored as a
.json file with the source url being the filename. This allows for one webmention per file and if I want to load all the webmentions for a specific post, I just open up all the files in the mentions directory. So far, I'm really liking this and how well it's working.
If it's a homepage mention, it will save the webmention in
/mentions/homepage/ and if it's not a known post, right now it will collect the webmention in
/mentions/unknown. Again, all of these webmentions are stored as individual files. If I recieve an updated webmention, it overwrites the file, so I get the updated information.
Besides just downloading all existing webmentions, I have also added support so that when webmention.io receives a new webmention, it pings my server and my server will go ahead and download that webmention and save it locally. This means that I am now only relying on webmention.io to deliver my webmentions, not for any long-term storage.
Finally, I've added support for displaying webmentions on post pages. I used to have this when my website was powered by Jekyll, but when I moved to a dynamic website, I didn't bother adding that functionality back until I could do it the way I wanted it. Now that I have my local storage I was able to go back to displaying them. Below is a screenshot of the webmention displays on one of my posts:
I'm still trying to tweak exactly how I want things, but I am pretty happy with things for a first pass. I am avoiding "metrics numbers" so instead of display any totals, I am trying to just display the content. Instead of showing 5 "likes" I would just display 5 👍 and of course each reacji will display on it's own as well.
I am not currently displaying mentions for posts when they display on feed pages. I am thinking I might just display a row of emoji representing that last 10 responses. If they are reacji, it would display the reacji, for the rest I would translate the response types to the following emojis: likes 👍, replies 💬, repost ♻️, bookmark 🔖 , listen 🎧, mentions 💭. It would show a recent snapshot of activity on a post without giving in to numbers.
I also am not doing any moderation of posts currently, every webmention automatically gets added and displayed. I can delete a webmention, of course, but there are protections against spam appearing until I delete it. I outlined how I want to deal with moderation, the 2nd level connections are going to be a bit tricky so my goal is to first just start with immediate connections as always accepted, others unlisted until I moderate. Then I'll need to create a mute/block list and have incoming webmentions check that list and respond appropriately.
Finally, if someone sends a webmention delete (a HTTP 410 Gone response from a webmention source url) right now I don't think my website will do anything, in fact, I don't even know if webmention.io supports them. I would like to be able to accept and process webmention deletes. My plan is not to actually erase a webmention that is "deleted" but instead, to set the visibility to private. I can of course, manually delete any private webmentions that I don't want any more.
The first feature using this information are weather effects. Initially, I'm just starting by darkening the website background and adding snow falling if my current location's weather is said to be snowing. It looks like the image below!
I am able to do this because my iPhone logs it's current location to my own instance of a server running the Compass software. My website retrieves that location and uses it to query the Dark Sky API and save that information to my server.
I currently restrict the weather effects to the homepage, although since individual posts also contain weather data from when the post was made, it's not outside the realm of possibility that I could have posts that I make during snow could have this snow effect on the post's page. A fun little way to prepare my website for the winter!
It’s not much, but I like the addition.
Today, I ported my code that handles the highlighting and display of my code snippets to apply to code blocks within articles that I write on my site. What's the difference, you ask? Code Snippets are long segments of code that are either an entire code file or a large segment of a code file. Code Blocks are short pieces that are displayed inside of articles that are meant as tutorials or coding tips.
Regardless of if you are viewing a full code file or a short code block in a tutorial, you always want code to look the same. Syntax highlighting, monospaced and containing line numbers. I also tagged all the articles that had code blocks with a code-examples tag. This allows you to see a stream of all the articles that have code blocks.
I'm pretty excited to have rolled this out. The way it works is when I am writing a blog post in markdown, I can use the same syntax as GitHub supports (three backticks and the language name)
Here is an example:
- Then you can write code examples in here and they will get syntax highlighting... wait, is this code-block-inception?
It's nice to be able to write a regular article and then quickly and easily add code examples using a familiar markdown syntax.
The other thing I'm thinking about is about CodePen style code collections, where you can have multiple code files and also display what they look like. In the IndieWeb, we've already determined a collection is just a post that contains child posts. So I could have a post with the title of the "CodePen" and a description, then within the code collection, include child posts that are all Code Snippets.
That would be the first step, the second step would then be recognizing code collections and not only displaying the source code but allowing the person viewing it to "view it live". I read up today about how websites like CodePen do it and it seems pretty simple, mostly just involving injecting the source code into an iframe. But that's another adventure for another day.
This means I can post a code snippet, select some specific lines and then share the resulting url with fragment to someone and the code snippet will automatically highlight the specific lines to them. Also, the possibility exists that someone could include a code line fragment in the url when sending a webmention to my code snippet and like media fragment, I would then be able to consume the code line fragment and associate the webmention with the specific code snippet lines.
One more step towards owning my own data AND replacing GitHub functionality through distributed means.
The database as made a lot of things easier, one is that it is now quick and easy for me to create feeds of posts. Right now I have two types of feeds, tag feeds and channel feeds. Tag feeds show all the posts I have created with a given tag.
Channel feeds are a bit different, I have two types of Channels: static and dynamic.
A static channel isn't too much different than a tag, when I create a post I either manually add the channel to the post or I have a preset rule inside my server that attached the channel to the post. The key to a static channel is that it just shows all the posts that have been assigned to it.
The dynamic channels are really where its at. Dynamic channels allow me to provide an id (which becomes the url that you use to access it), a name (which displays at the top), a layout (currently I have 3 types of layouts: Cards, Gallery and Archives) and finally a "query". The query is where the magic is, this is essentially a set of properties that will be passed into the database query. That means I can dynamically, without writing any code (just a config file) create a new page providing it's url, name, layout and some requirements around what type of information I want to display.
One thing my new channels has allowed me to do is to create the Archives layout and set up a query that fetches all the articles I've written and display them in a list. It was super easy to set this up because of the way my database cache is working and the way I've configured my channels.
I group them by year, then by month and display each article on it's own line. I really like how it turned out. I was heavily influenced by Manu Moreale and the article archive they display on their site. I imagine mine will grow more into it's own design and style over time but everything starts somewhere and I like starting mine based on Manu's work (Thanks for the inspiration!).
You can check it out over here, or below is an example of the articles archive as of today
The other nice thing is that because my website already supports Dark Mode, on macOS Mojave with Dark Mode turned on, all the colors will automatically invert on this page with no extra work!
Last night I started working on my Media Endpoint for Micropub. It's basically a segment of my site that takes care of accepting photos and other media so that I don't have to upload it at the same time as I post actual information to my website. I left without getting it all done, but I'm excited to announce that it is officially finished!
To prove it, here are my green checkmarks from micropub.rocks a website test suite for micropub related technology tests.
Another step in my website's growth 🤗