💾 Archived View for gemini.onedimension.net › thought › page-previews.gmi captured on 2022-01-08 at 13:39:29. Gemini links have been rewritten to link to archived content

View Raw

More Information

⬅️ Previous capture (2021-12-17)

➡️ Next capture (2022-03-01)

-=-=-=-=-=-=-

Page previews

I really like Wikipedia page previews[1]. I think that this particular piece of interactivity should be everywhere; it helps avoid the mystery that comes with clicking on a link and a full context switch. Just that little bit of primed context can help a lot.

Today I worked on building a system that allows for just that.

I was inspired to do this after building the previews for this site and I ran into an interesting challenge: how to get previews for external pages?

Internal vs. External

This difference becomes relevant because of CORS, which prevents making requests from different domains client-side. So it becomes impossible to dynamically load an external page, meaning creating a preview is impossible.

I initially solved this on One Dimension[2] by fetching the preview data when the site is generated. I still think this is a decent solution, but it means building takes a very long time--it increases linearly as the number of links goes up. It also obviously doesn't work for sites that don't have a build step.

Fetching preview data from a worker

I figured the best way to overcome this challenge would be to write a small worker function that could fetch the pages' preview data remotely, not from the browser. I opted for trying out Cloudflare Workers[3] because I've always wanted to give it a shot, and it's super simple compared to the alternatives.

The experience was really nice. I think I'll explore more serverless approaches in the future. It seems like you could write a full API, especially with Cloudflare's key value store[4], which seems able to replace a database in some applications.

Try them out

I built a little site[5] to try them out.

Last updated Fri Oct 01 2021 in Berkeley, CA

Links

1: https://diff.wikimedia.org/2018/04/18/how-we-designed-page-previews-for-wikipedia/

2: /thought/one-dimension.gmi

3: https://workers.cloudflare.com/

4: https://www.cloudflare.com/products/workers-kv/

5: https://previews.hyperfov.com

Backlinks

/thought/twelve-websites.gmi

/thought/what-im-working-on-now.gmi

/thought/hyperfov.gmi

/thought/progressive-enhancement.gmi