Skip to content

💬 Code powering the animated chat bubble README on my GitHub profile

Notifications You must be signed in to change notification settings

chrissantamaria/dynamic-readme

Repository files navigation

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:

Usage

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

yarn global add @cloudflare/wrangler
wrangler login

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:

yarn

Then, start up the dev server:

wrangler dev

To deploy to a public Worker:

wrangler publish

Todo:

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

About

💬 Code powering the animated chat bubble README on my GitHub profile

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published