mirror of
https://github.com/jbowdre/capsule.git
synced 2024-12-27 10:22:18 +00:00
30 lines
2.3 KiB
Text
30 lines
2.3 KiB
Text
|
I recently saw Kris's omg.lol profile page with integrated live local weather conditions, and I thought that was exceptionally neat. I immediately wanted to do the same with data from my Weatherflow Tempest weather station, but wasn't sure how I could do that without putting my API token in the browser. So I promptly abandoned the idea and moved on to other things.
|
||
|
|
|
||
|
|
=> https://kris.omg.lol/ @kris on omg.lol
|
||
|
|
=> https://shop.tempest.earth/products/tempest Tempest Weather System
|
||
|
|
|
||
|
|
I later realized that I could use another system to grab data from the authenticated API, and post that somewhere world-readable for the profile page to retrieve it.
|
||
|
|
|
||
|
|
So I cobbled together a sort of API proxy: a simple GitHub Actions workflow that runs every ~5 minutes. It uses secrets stored securely in my GitHub repo to fetch the weather data from the Weatherflow Tempest API, filters for just the current conditions data (not the giant mess of future-forecast details), and posts that to my paste.lol pastebin.
|
||
|
|
|
||
|
|
=> https://github.com/jbowdre/lolz/blob/main/.github/workflows/tempest.yml Tempest Update GitHub Workflow
|
||
|
|
=> https://weatherflow.github.io/Tempest/api/ WeatherFlow Tempest API & Developer Platform
|
||
|
|
=> https://paste.jbowdre.lol/tempest.json My Tempest pastebin
|
||
|
|
|
||
|
|
I could then use JavaScript to retrieve the weather details from the pastebin. I cobbled together a quick local HTML page for testing as I worked through how to get the data displayed and formatted correctly.
|
||
|
|
|
||
|
|
=> https://github.com/jbowdre/lolz/blob/main/tempest.html Tempest Test HTML
|
||
|
|
=> /res/2024-02-08-tempest-test-page.png Image: A plain, unstyled web page for testing the weather display
|
||
|
|
|
||
|
|
Once I got the scripting sorted out, I was able to easily transfer the script block and relevant spans to my omg.lol profile page - where I think it looks quite dope, if I do say so myself.
|
||
|
|
|
||
|
|
=> https://jbowdre.lol/ @jbowdre on omg.lol
|
||
|
|
=> /res/2024-02-08-omg-profile-page.png Image: Weather details in a glowing green terminal font
|
||
|
|
|
||
|
|
Big thanks to Kris for the inspiration and the examples I needed to get this working.
|
||
|
|
|
||
|
|
> Update: I've shared more details on how this all works over at the bigger blog, and the code is available on GitHub.
|
||
|
|
|
||
|
|
=> gemini://gmi.runtimeterror.dev/display-tempest-weather-static-site/ runtimeterror: Displaying Data from a Tempest Weather Station on a Static Site
|
||
|
|
=> https://github.com/jbowdre/lolz John's lolz on GitHub
|