Skip to main content

Project Info & Documentation

Everything about how Whatchan Snooker was built, what auto-updates, and how to manage it.

Site: Live GitHub Actions: Active Repo: Private Rankings: Manual update required after events
📄
Total Pages
50
HTML files including 24 player profiles
🤖
Auto-Updates
2
GitHub Actions workflows running on schedule
📊
Data Files
3
news.json · rankings.json · tv-schedule.json
🎬
Video Embeds
70+
Click-to-load thumbnails, zero broken iframes
GitHub Repository
⚙️
Dj4beat / snooker-hub
Whatchan Snooker — player profiles, TV schedule, rankings, and comprehensive snooker coverage. Sister site to whatchan.co.uk.
🔒 Private 🌿 Branch: master 📁 61 files ⚡ 2 workflows
View on GitHub ↗
Sibling repos: boxing-hub · darts-hub · whatchan-daily
Auto-Update Schedule
Daily · 06:00 UTC
News feed updated
Fetches Google News RSS for "snooker world snooker" → writes data/snooker-news.json → commits only if changed → page loads JS to display latest articles in #news-grid
Monday · 07:00 UTC
Rankings timestamp updated
Stamps updated field in data/rankings.json. Rankings data itself is seeded manually — edit the JSON after each ranking event.
Manual (as needed)
TV schedule updated
Edit data/tv-schedule.json directly when tournament status changes (upcoming → completed) or new events are added. Changes go live on next page load.
Trigger workflows manually: Go to github.com/Dj4beat/snooker-hub/actions → select workflow → "Run workflow" to force an immediate run. Useful after first deploy or when you want fresh news immediately.
Dynamic Update Hook Points

These IDs and classes in the HTML are where js/app.js injects live data from the JSON files.

Hook Page(s) What it does
id="news-grid" index.html Renders latest 6 news articles from snooker-news.json as article cards
id="tv-schedule-body" index.html, tv-schedule.html Fills <tbody> rows from tv-schedule.json with broadcaster badges and status badges
id="rankings-table-body" rankings.html Fills <tbody> rows from rankings.json with movement arrows and prize money
class="rankings-updated" rankings.html, player pages Injects "Rankings updated: DD Month YYYY" text from rankings.json updated field
class="tv-schedule-updated" tv-schedule.html Injects "Last updated: DD Month YYYY" from tv-schedule.json updated field
data-player-rank="Name" All 24 player profile pages Injects "#N" current world ranking — name must exactly match rankings.json player field
How to Update Rankings Manually

After a major ranking event, update the JSON file directly — the site will reflect changes immediately on next page load.

1. Edit data/rankings.json

Move players up/down, update their rank values, set old rank in prev_rank, update prize_money. Update the updated timestamp at the top.

2. Commit and push

GitHub will detect the change and the updated JSON becomes live immediately (static file serving — no build step needed).

3. Rankings table and all player pages update automatically

The JS overlay reads the JSON on every page load — rankings.html table, all data-player-rank spans on player profiles, movement arrows and prize money all update without touching any HTML.

File Structure
Snooker/
├── index.html ← Homepage · #news-grid · #tv-schedule-body
├── css/
│ └── style.css ← Full design system · --red: #16a34a (snooker green)
├── js/
│ └── app.js ← Loaders: news · rankings · TV schedule · video embeds
├── data/
│ ├── snooker-news.json ← Updated daily by GitHub Actions
│ ├── rankings.json ← Updated manually after events
│ ├── tv-schedule.json ← Updated manually as schedule changes
│ └── README.md ← Hook points docs
├── scripts/
│ ├── update-snooker-news.py ← Google News RSS → snooker-news.json
│ └── update-rankings.py ← Stamps rankings.json updated timestamp
├── .github/workflows/
│ ├── daily-update.yml ← 06:00 UTC daily · news update
│ └── weekly-update.yml ← 07:00 UTC Monday · rankings timestamp
└── pages/
├── tv-schedule.html ← PRIMARY SEO PAGE · #tv-schedule-body · FAQPage schema
├── rankings.html ← #rankings-table-body · .rankings-updated
├── players.html ← Player hub grid
├── player-judd-trump.html ← data-player-rank="Judd Trump"
├── player-ronnie-osullivan.html ← ... (×24 total)
├── goat.html ← Greatest of All Time · filter/search JS
├── best-british.html ← Nation tabs · England · Scotland · Wales · NI
├── tournaments.html ← Tournament calendar
├── world-championship.html ← Individual tournament pages ×6
├── guides.html ← Guides hub
├── guide-rules.html ← Rules · formats · scoring · betting ×4
├── glossary.html
├── centuries.html
├── maximum-breaks.html ← 147s page
├── break-builder.html ← Interactive tool
├── average-calculator.html
├── about.html · contact.html · privacy.html
└── project-info.html ← This page · noindex
Video Embeds — How They Work
Boxing lesson learned: Auto-selecting YouTube videos from any channel causes broken embeds — many uploaders disable embedding on their videos, producing blank black boxes that can't be fixed without touching the HTML.
Fix used throughout this site: Click-to-load thumbnail pattern. The <img> thumbnail loads from img.youtube.com/vi/{ID}/hqdefault.jpg — this CDN always works regardless of embed settings. The iframe only loads when the user clicks play. A "Watch on YouTube ↗" fallback link is always visible. Only WST official channel video IDs are used.
Lessons Learned & Pain Points

Critical issues encountered during the build. Read before starting any new sport microsite.

1. AI Agents Fabricate YouTube Video IDs: All 60 video IDs generated by AI agents were fake (100% failure rate). Every ID must be verified via the YouTube oEmbed API (https://www.youtube.com/oembed?url=...&format=json) — HTTP 200 = valid, anything else = broken. Use the Chrome browser tool to search YouTube directly and extract real IDs from the DOM.
2. GitHub Push Rejected: After initial push, GitHub Actions auto-ran and created commits on the remote. Next local push was rejected. Fix: git pull --rebase origin master && git push. Always check git status before pushing.
3. Workflow Paths Wrong: Workflows had cd Snooker and git add Snooker/data/... — but the GitHub repo root IS the sport folder. All paths must be relative to repo root, not local filesystem.
4. Git Author Not Set: First git commit failed. Run git config user.name "Dj4beat" and git config user.email "bot@whatchan.co.uk" before first commit.
5. Homepage Links Wrong: All player cards linked to players.html (hub) instead of individual profiles. Manually test every link after building the homepage.
6. Countdown Showing "Loading...": JS in app.js fires on DOMContentLoaded (end of page). Above-the-fold dynamic content needs inline <script> immediately after its HTML, not deferred external JS.
7. Duplicate Nav Links: Bulk nav-update script added links that already existed in a different format. Check for existing content before inserting.
8. python3 Not Found on Windows: Use python not python3 on Windows.
9. Background Agent Permission Denials: Spawned agents can be denied tool access. Use Chrome browser MCP for YouTube research. For large multi-file transforms, build a Node.js script from template pages rather than having agents edit files individually.
10. Factual Errors: The 147s page incorrectly stated 147 was "the highest possible score". Free ball rule allows up to 155; O'Sullivan scored 153 at the 2026 World Open. Always cross-reference key facts against official sources.
Key takeaway: Never trust AI-generated YouTube IDs, file paths, or sport-specific facts without independent verification. The playbook's checklist now includes verification steps for all of these.
Playbook for Other Sports

A full reusable playbook covering the entire build process is saved at:

C:\Users\Dj4be\Desktop\Whatchan2.0\SPORTS-MICROSITE-PLAYBOOK.md

Covers: folder structure · CSS recolouring · auto-update architecture · Python scripts · GitHub Actions · video embed pattern · player profile template · SEO strategy · bulk nav update script · full new-sport checklist.