Dynamic README

Code powering the animated chat bubble README on my GitHub profile

Acknowledgements

This is (very heavily) developed based on the hard work of Jason Long! Seriously - most of the styling is directly from his implementation. Go give his project a ⭐

Architecture

The README is loading a specially-crafted SVG with some inlined CSS for the animations. This SVG is generated on the fly using CloudFlare Workers for lightning fast response times.

Under the hood, it's using:

• Preact for rendering
• Goober for tiny CSS-in-JS styling
• ESBuild for ridiculously fast builds

Usage

Obtain a key from Weather API (free tier allows 1,000,000 requests / month).

Copy wrangler.template.toml to a new wrangler.toml file and fill with your account_id and WEATHER_API_KEY.

Install dependencies:

pnpm i

To run this yourself locally, you'll also need to set up Wrangler from CloudFlare. This will give you a local dev server and handle deployment.

pnpm exec wrangler login

Then, start up the dev server:

pnpm run dev

To deploy to a public Worker:

pnpm run deploy

Todo:

• Map weather data to visually-friendly emoji
• Add error monitoring (Slack? Sentry?) to deployed Worker
• Fix Goober keyframes not properly injecting