world-cup-2026-readme-widget

KO | EN

gitlite — search

#cli #java #html #docker #react-native #command-line #chatbot #automation #markdown #claude-code

world-cup-2026-readme-widget

(★ 9)

Embeddable, self-updating FIFA World Cup 2026 panels for your README, website, or dashboard - live match, group standings, and a Round-of-32 qualification tracker for the new 48-team format. Real flags, no API key.

파일 탐색기

ZIP 다운로드

- update.mjs
- bracket.ts
- countdown.ts
- group.ts
- groups.ts
- match.ts
- r32.ts
- scorers.ts
- stats.ts
- team.ts
- teams.ts
- today.ts
- mock.json
- - bracket-dark.svg
  - countdown-dark.svg
  - group-a-dark.svg
  - group-a-light.svg
  - groups-dark.svg
  - match-dark.svg
  - r32-dark.svg
  - scorers-dark.svg
  - stats-dark.svg
  - team-dark.svg
  - today-dark.svg
- update-readme.yml
- - bracket.ts
  - countdown.ts
  - group.ts
  - groups.ts
  - match.ts
  - r32.ts
  - scorers.ts
  - stats.ts
  - team.ts
  - today.ts
- data.ts
- flags-data.ts
- knockout.ts
- respond.ts
- scorers.ts
- standings.ts
- stats.ts
- svg.ts
- teams.ts
- theme.ts
- time.ts
- index.html
- build-flags.ts
- preview.ts
.gitattributes
.gitignore
action.yml
LICENSE
package-lock.json
package.json
README.md
tsconfig.json
vercel.json

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

**Self-updating FIFA World Cup 2026 panels you can drop into any GitHub README, website, or wiki, with one line of Markdown.** Countdown, live match, group standings, and the only **Round-of-32 qualification tracker** that handles the new 48-team format. Real country flags, no API key, no account, no JavaScript, just `<img>`-able SVG.

> Built on the free, public-domain [openfootball](https://github.com/openfootball/worldcup.json) dataset. Kickoff times convert to **your** timezone. Light and dark themes included.
>
> **▶ [Live demo + embed builder](https://wc26-widget.vercel.app):** pick a panel, team, and timezone, then copy the snippet.
>
> ⚠️ **The hosted `wc26-widget.vercel.app` is a limited demo** — heavily cached and rate-limited, so it can lag and may pause under load. To get the full tool (always-fresh panels that won't go down), **[deploy your own free copy](#deploy)** in ~2 minutes and embed that URL. It's the intended way to use the widget.

---

## Add it to your README

**Host it on your own free account, it takes ~2 minutes** and keeps your panels fast and always-on. Pick one:

- **[Deploy your own Vercel project](#deploy)** and embed `https://<your-project>.vercel.app/…` — one click, the free tier is plenty.
- **[Use the GitHub Action](#github-action-commit-the-panels-into-your-repo)** to commit the SVGs straight into your repo on a schedule — no live server at view time at all.

The snippets below use the public demo host (`wc26-widget.vercel.app`) so they render here, but it's **heavily cached and meant for trying things out, not permanent embeds** — swap in your own deployment URL for anything you'll keep.

```markdown

![World Cup countdown](https://wc26-widget.vercel.app/countdown?tz=America/New_York)

![World Cup](https://wc26-widget.vercel.app/match?tz=America/New_York)

![Today](https://wc26-widget.vercel.app/today?tz=America/New_York)

![USA](https://wc26-widget.vercel.app/team?id=USA&tz=America/New_York)

![Group E](https://wc26-widget.vercel.app/group?id=E)

![Round of 32](https://wc26-widget.vercel.app/r32)

![Bracket](https://wc26-widget.vercel.app/bracket)
```

There's also `/groups` (all 12 tables), `/scorers` (golden boot), and `/stats`. Build any of them with the **[live embed builder](https://wc26-widget.vercel.app)**.

## Panels

### `/countdown`: days to kickoff
Counts down to the opener, then flips to a “day _X_ of 39” counter once the tournament is underway, and a done state after the final.

### `/match`: live / next / latest
Shows the in-progress match, or the next kickoff in your timezone, or the most recent result, whichever is relevant right now.

### `/today`: today's fixtures
Every match on the current calendar day in your timezone, with kickoff times (or scores once games are under way).

### `/group?id=A…L`: standings with the qualification cut
Full table (P · GD · Pts) with color-coded status and a dashed line marking the top-two cut.

### `/r32`: Round-of-32 qualification tracker ⭐
The 2026 World Cup is the first with **12 groups**, where the top 2 of each group **plus the 8 best third-placed teams** advance to a new Round of 32. Ranking those third-placed teams against each other is genuinely confusing, and no other README tool does it. This panel ranks all 12 and draws the line where the cut falls.

### `/team?id=USA`: track a team
Your team's group, position, qualification status, and next fixture (or latest result) in your timezone. Accepts a 3-letter code (`USA`), alpha-2 (`us`), or full name.

### `/bracket`: knockout bracket
A connected R32 → Final tree built from the official knockout topology. Slots fill in as the group stage finishes and knockout results land.

### `/groups`: all 12 groups at once

### `/scorers` & `/stats`: golden boot and tournament totals

> _Gallery images use simulated results so you can see the panels populated. Live panels show fixtures/placeholders until matches are played, then fill in automatically._

## Parameters

| Param | Panels | Values | Default |
|-------|--------|--------|---------|
| `tz`  | `/match`, `/countdown`, `/team`, `/today` | Any [IANA timezone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) (e.g. `Europe/London`, `Asia/Tokyo`) | `UTC` |
| `theme` | all | `dark`, `light` | `dark` |
| `bg` | all | `transparent` (or a hex like `1c1c1c` / `#1c1c1c`) | theme default |
| `id` | `/group` | Group letter `A`–`L` | `A` |
| `id` | `/team` | Team code/name (e.g. `USA`, `ESP`, `Brazil`) | `USA` |

> **Transparent background.** Embedding a panel in a dashboard or page (e.g. via
> an `<iframe>`) can show a white frame around the card, because the SVG's rounded
> corners reveal the host page behind it. Add `?bg=transparent` to drop the panel
> background so the host shows through, or `?bg=1c1c1c` to match a specific color.
> Example: `…/countdown?theme=dark&bg=transparent`.

## GitHub Action: commit the panels into your repo

Prefer not to depend on the live server at view time? This repo doubles as a GitHub Action that fetches the panels on a schedule and commits them into your repo as SVG files, so they keep updating on their own. Drop the markers in your README and point a workflow at it:

```markdown


```

```yaml
- uses: moose25/world-cup-2026-readme-widget@v1.0.0
  with:
    panels: "countdown,match,r32,bracket,team?id=USA"
    tz: "America/New_York"
```

A full, copy-paste workflow lives in [examples/update-readme.yml](examples/update-readme.yml).

> The Action fetches from the public demo by default. If you've [deployed your own](#deploy), add `base-url: https://<your-project>.vercel.app` so even the scheduled fetches run on your account.

## How it works

- **Data:** the public-domain [openfootball/worldcup.json](https://github.com/openfootball/worldcup.json) feed, no API key, no rate limits. Results land after each match; a `~5 min` in-process cache plus per-panel HTTP `Cache-Control` (live panels short, time-based panels like the countdown longer) keeps it fresh without hammering the source or the renderer.
- **Rendering:** each endpoint is a tiny Vercel serverless function that returns an SVG string. Zero client JS; renders identically in a README, a webpage, or an `<img>` tag.
- **"Near-live", not real-time:** GitHub proxies README images through its camo cache, so updates land within minutes, not seconds, which is perfect for a tournament, and it means true in-match second-by-second scores need a keyed API (on the roadmap).
- **Qualification math:** tiebreakers implemented are points → goal difference → goals scored → name. FIFA's full ladder then adds head-to-head, fair-play, and drawing of lots; those edge cases are a known [TODO](#roadmap).

## Run locally

```bash
npm install
npm run preview      # renders every panel to preview/*.svg + an index.html gallery
npm run build:flags  # re-bake flag PNGs into lib/flags-data.ts (after editing the team table)
npm run typecheck
```

`npm run preview` pulls the real fixtures, simulates mid-tournament results, and writes a gallery you can open in a browser. It falls back to `data/mock.json` when offline.

## Deploy

The recommended way to use the widget: your own free Vercel project, so your panels run on your account, not a shared demo. One click —

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/moose25/world-cup-2026-readme-widget)

— or from the CLI:

```bash
npm i -g vercel
vercel            # follow the prompts; your panels are live at <project>.vercel.app/match
```

No environment variables required. (Optional: `WC26_DATA_URL` to point at a dataset mirror.)

> The public `wc26-widget.vercel.app` demo runs with **`WC26_DEMO=1`**, which pins every panel to a long cache so the shared instance stays inside the free tier. Leave that variable **unset** on your own deployment to get per-panel freshness — live panels (scores, standings) update within ~5 minutes.

## Features

- **Countdown:** days to kickoff, then a day-of-39 counter once underway
- **Live / next / latest match**, with kickoff in any timezone
- **Today's fixtures:** every match on the current day, in your timezone
- **Track-a-team:** a team's group, position, status, and next fixture
- **Group standings** and an **all-groups overview**, with the qualification cut drawn in
- **Round-of-32 tracker** built for the 48-team format (8 best third-placed teams)
- **Knockout bracket:** a connected R32 → Final tree that resolves group winners, the third-place allocation, and penalty-shootout results
- **Top scorers** and **tournament stats** (goals, clean sheets, penalties, biggest win)
- **Real country flags** for all 48 teams, inlined so embeds need no network
- **Head-to-head tiebreaker** in the standings sort
- **Light and dark themes**, a **live demo + embed builder**, and a **GitHub Action** delivery mode

### Planned features

- **Per-minute match timeline** (goals, cards) on the match panel
- **Remaining FIFA tiebreakers** (fair play, drawing of lots) in the standings sort

### Considered but not planned

- **Live in-match scores / minutes.** Tempting, but GitHub serves README images through a cache (camo), so an embed can't update in real time no matter the backend; it refreshes every few minutes at most, which the current post-match data already achieves. True live would also require a keyed third-party API (extra setup, rate limits) for value that mostly lands *outside* READMEs (landing page, Discord). Not worth the trade-off for what this tool is for.

Contributions and panel ideas welcome. Open an issue.

## Credits

- Match data: [openfootball](https://github.com/openfootball/worldcup.json) (public domain)
- Colors follow [GitHub Primer](https://primer.style/) so panels blend into READMEs

## License

[MIT](LICENSE)

world-cup-2026-readme-widget

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

Download README