Skip to content

jimmisavage/homepage-league-standings

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⚽ Football Standings Viewer

This is a lightweight HTML+JavaScript widget that displays the current League Standings with interactive popups for each team — designed specifically to integrate beautifully with Homepage dashboards or any self-hosted portal via iFrame. This is a personal project that fits to my needs. It's a 'set and forget' which would follow your team though relegations and promotions and will update logos and input without any tinkering.

Default view: Screenshot Popup view: Screenshot

Features

Clean, scrollable league table Clickable rows with popups for each team Fast-loading, zero dependencies Designed for Homepage or iframe embeds

Popup Details

When you click a team: Team logo + name Table position, matches played, W/D/L, goals, goal difference, and points Recent form (color-coded) Next fixture Last season’s league + final rank (e.g. 8th in Championship)

How to use

  1. clone the repo

  2. Sign up to https://rapidapi.com/ with the free tier. Add an app (Apps in the top right) for api-football and get your API key.

  3. In your github repo go to settings > Secrets and variables > Actions > New repository secret > name: RAPIDAPI_KEY > Key: your api key from step 2.

  4. In your github repo go to settings > Pages > Choose you main branch and deploy/save the page. Your page URL will appear at the top of this page (you might need to refresh a couple of times).

  5. Back in your repo files go to assets > teamid.txt and edit it to your teams ID. You can find ID's here: https://dashboard.api-football.com/soccer/ids/teams (seperate account/sign in required but it is free).

  6. Run actions. Actions > Update Renkings > Rub workflow (wait for the run to finish). Repeat Actions > Update Standings > Rub workflow (wait for the run to finish)

  7. In your homepage config file (I have 4 colums) use the following iFrame config:

  8. Clone this repo

  9. Sign up at RapidAPI Subscribe to the api-football API (free tier is fine)

  10. Add your API key to GitHub secrets Go to your repo → Settings → Secrets and variables → Actions Add a new secret: Name: RAPIDAPI_KEY Value: your API key from RapidAPI

  11. Enable GitHub Pages Go to Settings → Pages, choose your branch (e.g., main) and save GitHub will provide a URL (refresh if it doesn’t show right away)

  12. Set your team Edit assets/teamid.txt and enter your team’s ID from api-football (You can find this ID at https://dashboard.api-football.com/soccer/ids/teams)

  13. Run the GitHub Actions Go to Actions → Update Rankings → Run workflow Then do the same for Update Standings Wait for each one to finish before running the next

  14. Embed in Homepage (example with 4-column layout):

  - League Table:
      icon: https://github.com/YOU/homepage-league-standings/blob/main/league-icon.png?raw=true
      widget:
        type: iframe
        name: myIframe
        src: https://YOU.github.io/homepage-league-standings
        classes: h-35

*Replace YOU with your GitHub username.

Notes

Built for speed, simplicity, and a touch of style. Designed to be low maintenance: just set your team and let it ride. API rate limits are respected by default — so it won’t burn through your quota.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages