Outdoor Embeds

Dependency-free, keyless widgets for outdoor conditions. One script tag and one div. No build step, no framework, no API key, no account.

MIT~16KB eachShadow DOMzero dependencies

Everything below is live, fetched in your browser right now. Source and docs on GitHub.

---

River gauge

Live streamflow for any USGS gauge, with a 7-day sparkline. Talks straight to USGS Water Services from the visitor's browser, so no backend is involved.

<div class="goh-river-gauge"
     data-site="04292201"
     data-name="Lamoille River"
     data-href="https://your-site.example/rivers/lamoille"
     data-brand="Your Site"></div>
<script async src="https://cdn.jsdelivr.net/gh/Great-Outdoor-Hubs/outdoor-embeds@1/src/river-gauge.js"></script>

Surf and marine forecast

Seven-day wave forecast for any coordinate over water, from the Open-Meteo Marine API. Also keyless, also no backend.

<div class="goh-surf-forecast"
     data-lat="37.76" data-lng="-122.51"
     data-name="Ocean Beach"
     data-href="https://your-site.example/surf/ocean-beach"
     data-brand="Your Site"></div>
<script async src="https://cdn.jsdelivr.net/gh/Great-Outdoor-Hubs/outdoor-embeds@1/src/surf-forecast.js"></script>

Compact badges

Both widgets ship a one-line variant with data-variant="now".

A third widget, and an honest caveat

The repo also carries a Go/No-Go conditions card. Unlike the two above it reads an endpoint on the host serving it, so it only works from a Great Outdoor Hubs origin and cannot be demonstrated here. It is included because the rendering, theming and fallback logic are worth reading, not because it is standalone.

Why the fallback link matters

Each example in the docs pairs the div with a plain anchor. If the script is blocked, fails, or has not run yet, the visitor still gets a working link instead of an empty box. The widget replaces the div and leaves the anchor alone, so it costs nothing when things work.