This webpage is responsive and will always show the current phase of the moon in the image above. It is also a static html page. This is done with a little web app I made today called moonphase.is.
Visiting the homepage will return a plaintext response with the
current phase of the moon. Visiting /image.svg
will
return a svg showing that phase.
This is inspired by a conversation I had with Joanne about responsive Notion pages where the user can’t add any javascript. Using a collection of applications like moonphase someone might realistically make a webpage that is responsive according to the time of day on Notion.
Nick put together a neat example program which when run as a cron job sets the desktop wallpaper to the current moon phase using this:
export DISPLAY=:0
curl -O https://moonphase.is/image.svg
nitrogen --set-centered image.svg
rm image.svg
You'll need to have nitrogen installed to use this verbatum.
The primary motivation behind this was that it sounded fun to build.
Waxing poetic, the concept of building responsive interactions into
traditionally static media with tools like this is an interesting
one to me. For example, imagine if you could set your Twitter
profile photo to https://moonphase.is/image.svg
and
thus make it 'responsive' or if you could embed the image into a
Google Doc that describes the phases of the moon.
The implementation being opaque to the embeder is interesting as well. From a user's perspective they are just adding a static image into their webpage. The fact that it is always the current phase of the moon is known, the behind the scenes of how this is done is opaque.
I'd be interested to explore other areas where this is possible. For example, a version of this that returned an image of what the sky looks like for the visitor. Building this on top of Cloudflare Workers would likely be reasonably trivial as the location is built into the incoming request already.
This is a very simple Cloudflare Workers project. You can find the source code here. The current phase of the moon is calculated using the method described here.