I've been using these “bookmark cards" in Ghost https://ghost.org/help/cards/#bookmark. They expand links into a rich format, like on Slack etc. Great for making links more engaging, however they come with some caveats.
For one they look like a complete mess in RSS readers (see screenshot). Secondly this must be really annoying for screen readers as I presume all of this is announced when focusing the link.
Tempted to move this to client JS, which removes it from my RSS and allows me to control markup more 🤔
@DavidDarnes Could you do some preprocessing that generates an image of it and serves that instead (or as a placeholder & then if JS is present, populate it with something richer?), provided there’s a way to make the alt text into something that’s not equally terrible?
@DavidDarnes@eleventy I do something like that at the template level. So certain things never get rendered when the RSS feed is built.
Useful to be able to replace a crazy CSS illustration or interactive JS thingamajigger with a note that says “This content is best enjoyed on the original URL” 🤷♂️
@DavidDarnes@eleventy That fine-grained control is one of the (sadly very few!) benefits of having built your own SSG 😂
IMO client-side is the way to go for your link previews. But maybe embed the preview data as a json blob in your html template at build-time (does Ghost have a build time? I’m still thinking in terms of SSGs…). Avoids having that stuff in the RSS content, but also avoids a separate fetch for every link 🤷♂️
Either way, it’s a neat feature! I’ll enjoy seeing how you tackle it
@tomhazledine@eleventy I really need to rethink my whole setup, it’s a bit of a daisy chain of tooling and I’d like to simplify it drastically. Thanks for sharing your thoughts!
Ideally I’d turn this into a Web Component that turns a regular anchor link into a rich “card”, however you quickly bump into CORS issues. Alternative is to naively setup a whole server function to retrieve website metadata 🥴
@DavidDarnes You wouldn't happen to use a static site generator, something like #11ty? I've seen some great approaches to gathering all that data as part of the build that could be attractive in your situation.
@westbrook yep! However that causes the issue I mentioned earlier in the thread, with all that extra unwanted content appearing in my RSS feed. Also it would be nice to create something more universal
@westbrook yea! Something like that would be good, better what I was thinking with slotted elements that are still floating around in the content. Would be more consistent too
Ok so how about a Web Component that pings an API with the containing links URL, it’ll then return the metadata which populates the component. Options would be the template of the rich result and the API endpoint it uses
Add comment