ckolderup / postmarks

a single-user bookmarking website designed to live on the Fediverse
https://postmarks.glitch.me
MIT License
452 stars 38 forks source link

Add Microformats to bookmarks #171

Open bouncepaw opened 5 months ago

bouncepaw commented 5 months ago

Microformats are a way to mark up some parts of the web page so they can be handled programmatically nicely. IndieWeb uses them a lot.

I am actually a developer of a project similar to Postmarks, Betula, and it supports reposting of arbitrary bookmarking websites if they support bookmark-related microformats. Turned out, Postmarks doesn't have them! At least, I didn't see them on the two instances I checked.

I suggest introducing microformats2 to the project. Betula and IndieWeb compatibility with just a few CSS classes!

For reference, you can see what microformats I used: https://git.sr.ht/~bouncepaw/betula/tree/master/item/web/views/post.gohtml https://git.sr.ht/~bouncepaw/betula/tree/master/item/web/views/post-fragment.gohtml

See also what Aaron Parecki is doing: https://aaronparecki.com/bookmarks

See Microformats and IndieWeb wikis: http://microformats.org/wiki/Main_Page https://indieweb.org

ckolderup commented 5 months ago

Thanks! I agree, this would be great.

andypiper commented 5 months ago

Unfortunately I'm not able to acces either your repo or the Betula site you linked to for some kind of DNS or routing reason, but I took a look at Aaron's page and the Microformats wiki. I've attempted to add useful microformat markup to my Postmarks site. Are you able to verify that this is useful for the sorts of cases you're describing, @bouncepaw? Is there anything obvious I'm missing?

If this is useful, I'd be happy to submit a PR for support to Postmarks.

bouncepaw commented 5 months ago

Thank you Andy!

Betula website is hosted on Sourcehut, which is currently under a heavy orchestrated DDoS that's been going on for several days now (https://outage.sr.ht), though it should be working by now. Your DNS probably hasn't propagated yet. I have mirrors on Codeberg and Github of the source code for those willing to take a look, but Codeberg is currently under the same attack, so I'll link GitHub only: https://github.com/bouncepaw/betula

You might also want to see my personal Betula instance which is running the latest development version: https://links.bouncepaw.com

I tried to repost https://pipesmarks.glitch.me/bookmark/112, and Betula gave me an error. Looking at the markup, I only see an h-entry, which doesn't cover the whole post, i.e. the title is not part of it, and the URL, title, tags and the description are lacking the appropriate tags.

Try to copy what Betula is doing from here: https://links.bouncepaw.com/840

Ah wait, then I looked how does your Postmarks look like on /. Yeah, I see more microformats there, which is quite useful for some readers. For example, here's how it looks like in X-Ray, an analyzer of microformats: https://xray.p3k.app/parse?url=https%3A%2F%2Fpipesmarks.glitch.me&pretty=true

To be repostable by Betula (and other IndieWeb software in general), individual post pages should also have all the necessary microformats.

andypiper commented 5 months ago

Got it, thanks for the assistance in understanding the format here - I'll have another go. I just also came back here to comment that I realised that sr.ht is in fact Sourcehut, so I should have been more understanding of what was happening with that.

Will have a tinker and see where we get to!

andypiper commented 5 months ago

I think I've got the individual pages in a better state. I'm having some... "fun" with handlebars and getting the root to work.

For example https://pipesmarks.glitch.me/bookmarks/109 (etc) seems happier if I use X-Ray.

Working on the main feed.

andypiper commented 5 months ago

OK I have individual bookmarks and the main feed in a pretty good shape, and you're welcome to have a look at that and see if it's working as you might expect. On the Postmarks side there are still some other things I need to look into though, for example the tag category pages are more tricky due to the way the +/- tag option is built (this puts a "+" character in the microformat-parsed category name at the moment, which is not wanted); and for an individual bookmark page it is now rendering the title twice, due to handlebars and ordering.

I'm happy to leave my instance in the state it is in for now and do some more work to try to get Indieweb compatibility into place sometime soon.

bouncepaw commented 5 months ago

Thank you!

I tried to repost https://pipesmarks.glitch.me/bookmark/112 Got this: https://links.bouncepaw.com/1051

The description wasn't fetched too, but that's very expected and not a bug at all.

I'll get back when I fix the bug.

bouncepaw commented 5 months ago

Took down the old repost. Now here's a new one!: https://links.bouncepaw.com/1054

As you can see, the tags were fetched with # prefixes. You should move them outside the <a> tag or instead of including them in HTML insert them with CSS (with ::before) to be p-category compliant. After doing that, the PR would be ready to be submitted!

andypiper commented 5 months ago

nice, thanks - I will have a look at the CSS option here. Stay tuned for progress over the coming days.

andypiper commented 5 months ago

I've now twiddled with the handlebars and CSS some more so that the hash prefix is added by CSS as you suggested. I think I still have another issue to iron out (the search results page is dropping the date information, for some reason).

bouncepaw commented 5 months ago

It worked: https://links.bouncepaw.com/1075

I suggest you make a pull request.

andypiper commented 5 months ago

FWIW @bouncepaw I'm also looking at something else you may be interested in -> https://github.com/ckolderup/postmarks/issues/185

I'll probably be a few days before I do a PR for microformats, but it is definitely a contribution I want to make - thank you for working with me on this!

bouncepaw commented 5 months ago

Awesome, thank you. Working on interoperability is great!