feat: full site overhaul — landing, teams, schedule, gear, nav, logo #45
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "site-overhaul"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
Full visual overhaul of all 8 public playground pages, done in direct iteration with Lucas. Rebuilt landing page energy, fixed misattributed gear photos, rewrote schedule with real data from westside-contracts, transparent logo, pill toggle UX, coach anchor links, and Kings jerseys from GroupMe.
Changes
Test Plan
Review Checklist
Related Notes
Closes forgejo_admin/westside-app#93, Closes forgejo_admin/westside-app#94, Closes forgejo_admin/westside-app#95
This covers the visual overhaul done in direct iteration with Lucas. Ticket #96 (Svelte promotion prep) is the next step.
PR #45 Review
Parent issue: forgejo_admin/westside-app#93
Branch:
site-overhaulDOMAIN REVIEW
Tech stack: Static HTML/CSS/JS playground (vanilla, no framework). 11 files changed, ~9 new binary image assets. CSS changes in
shared/style.css. No JS changes.What this PR does well:
alt=""on nav logos with descriptivealt="Westside Kings & Queens"across all touched filesaria-label,aria-expanded,aria-controlscorrectlylang="en"present on all HTML filesloading="lazy"used on gear gallery imageswidth/heightattributes on images prevent layout shift (CLS)kings-away.jpegvsIMG_4164.jpeg)id="marcus-draney",id="kj-ng", etc.) on staff.html enable deep linking from teams page -- clean pattern@svelte-noteannotations in HTML comments provide clear migration guidance for SvelteKit promotionborder-radius: 100pxandoverflow: hidden-- clean segmented controlIssues found:
Nav order inconsistency across pages. The PR reorders the nav to: Home > About > Staff > Tryouts > Teams > Schedule > Gear > Sponsors. But this reorder was only applied to ~4 files (index.html, gear.html, schedule.html, teams.html). The remaining files (about.html, staff.html, tryouts.html, sponsors.html, register.html, success.html) still have the old order: Home > About > Staff > Teams > Tryouts > Gear > Sponsors > Schedule. Users navigating between pages will see the menu items shift position. This is a UX consistency issue.
og:imagechanged to relative path in index.html. The PR changedog:imagefromhttps://ldraney.github.io/west-side-basketball/assets/images/og-image.pngtoassets/images/og-image.png. Open Graph tags require absolute URLs per the OG protocol spec -- social media crawlers (Facebook, Twitter, iMessage link previews) cannot resolve relative paths. The old URL was stale (GitHub Pages), but the fix should be the correct production URL, not a relative path.Inline styles in schedule.html. Four inline
styleattributes were added:style="margin-bottom: var(--space-md);"on<h3>elementsstyle="margin-bottom: var(--space-2xl);"on a grid divstyle="color: var(--color-gray-400); text-align: center;"on a paragraphstyle="text-align: center;"on another paragraphThese should be CSS classes in
shared/style.css. The playground convention is "no inline scripts, no inline styles" -- all styles go through the unified stylesheet.Inline styles in index.html. Three
<a>card elements usestyle="text-decoration: none; color: inherit;". This should be a.card-linkor similar utility class in the shared stylesheet.Toggle buttons missing
aria-pressedstate. The.kq-toggle-btnbuttons use a visual.activeclass but have no ARIA state indicator. Screen readers cannot distinguish which program (Kings/Queens) is currently selected. TheinitKQToggle()JS function inshared/app.jsshould setaria-pressed="true"on the active button andaria-pressed="false"on the inactive one. (Note: the JS file is not modified in this PR, so this is pre-existing, but since the toggle was redesigned visually in this PR, it is in scope.)margin-bottom: 2remhardcoded in CSS. The.hero-logorule addsmargin-bottom: 2rem-- a raw value rather than a design token. Should bevar(--space-2xl)(which is2remper the token definitions) for consistency.BLOCKERS
None. This is a static HTML playground -- no user input processing, no backend, no secrets, no auth logic. The playground has no tests by design (it is a visual prototype, not a production app). The BLOCKER criteria for "new functionality with zero test coverage" does not apply to static HTML prototypes.
NITS
Nav order inconsistency (item 1 above). While not a blocker for a playground, this creates a jarring UX when clicking between pages. Should be fixed before this playground is used as the reference for SvelteKit promotion.
Stale GitHub Pages OG URLs remain in untouched files.
about.html,gear.html,staff.html,sponsors.html, andtryouts.htmlstill referencehttps://ldraney.github.io/west-side-basketball/in theirog:imageandog:urlmeta tags. The PR cleaned up some files but not all. Not introduced by this PR, but discovered scope.Inline styles (items 3 and 4 above). Should be CSS classes. Not a blocker for a playground but violates the established
shared/style.cssconvention documented in the file header.og:imagerelative path (item 2 above). Technically broken for social sharing, but this is a playground -- OG tags are aspirational here. Should be corrected when promoting to westside-app.aria-pressedon toggle (item 5 above). Pre-existing accessibility gap. Good to fix while the toggle is being redesigned.2remhardcoded (item 6 above). Minor token consistency nit.SOP COMPLIANCE
site-overhaul, not93-*. The parent issue is westside-app#93 ("Teams page with Kings/Queens toggle + profile gate"), but this PR covers landing, teams, schedule, gear, nav, and logo -- far broader than issue #93. The branch name does not reference any issue number.## Relatedsection..envfiles in the diff.PROCESS OBSERVATIONS
Scope: This PR is a "full site overhaul" mapped to a single issue about a Teams page. The changes span 8+ public pages, nav restructuring, logo replacement, toggle redesign, schedule rewrite, gear photo swap, and about page additions. This would typically be decomposed into multiple tickets (nav update, logo update, schedule content, gear content, teams content, about content). For a playground repo iterated directly with Lucas, this is likely acceptable as a batch of visual changes, but the issue-to-PR mapping is loose.
Change failure risk: Low. This is a static HTML playground with no backend, no deployment pipeline, and no production traffic. The only risk is using this as a SvelteKit promotion reference with the nav inconsistency.
Deployment frequency: N/A for playground. The changes will impact westside-app promotion velocity -- the
@svelte-noteannotations are a nice touch that will accelerate that work.VERDICT: APPROVED
The code quality is solid for a static HTML playground. No blockers. The nav order inconsistency and inline styles are nits that should be addressed before SvelteKit promotion but do not block merging the playground PR. The SOP deviations (branch naming, scope-to-issue mismatch) are noted but are acceptable given that this was an interactive visual iteration session with the project owner.
Every public page now has complete promotion annotations: - @api endpoints with signatures - @state reactive variables (or 'none' for static pages) - @svelte-notes translation guide (toggle→runes, sections→{#each}, etc.) - @data-philosophy on teams.html (render partial data gracefully) - @data-sources on schedule.html (contracts system, team config) - Nav/Footer noted as +layout.svelte on every page Static pages (index, about): documented as no-API, hardcoded copy. Dynamic pages (teams, schedule, tryouts, gear, staff, sponsors): documented with API endpoints and component patterns. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>PR #45 Review (Re-review)
DOMAIN REVIEW
Tech stack: Static HTML/CSS/JS playground (vanilla, no framework). Public-facing marketing site prototype for westside-app promotion pipeline.
Review focus (delta from previous review):
1. Nav order consistency -- PASS
All 10 pages with navigation (
index.html,about.html,staff.html,tryouts.html,teams.html,schedule.html,gear.html,sponsors.html,register.html,success.html) have identical nav order: Home, About, Staff, Tryouts, Teams, Schedule, Gear, Sponsors. This fix is confirmed clean.2. og:image absolute URL -- PARTIAL
The previous review flagged og:image needing an absolute URL. All og:image values are now absolute URLs, so that literal fix is done. However, there is an inconsistency in which absolute URL is used:
index.htmluseshttps://minio-api.tail5b443a.ts.net/assets/westside/branding/og-image.png(MinIO)about.html,staff.html,tryouts.html,gear.html,sponsors.htmlusehttps://ldraney.github.io/west-side-basketball/assets/images/og-image.png(GitHub Pages)teams.htmlandschedule.htmlhave no OG tags at allThe
ldraney.github.iodomain appears stale (issue #60 previously fixed this same dead domain in the registration confirmation). All og:image values should use the same source -- likely the MinIO URL thatindex.htmlalready uses.3. Coach Manny -- PASS
Coach Manny is added to
staff.html(lines 146-157) with:id="coach-manny"for anchor linkingcoach-photo-placeholderdiv) -- appropriate since no photo yet@svelte-notesannotation in the comment block referencing placeholder bio handling4. NanoReleaf -- PASS
NanoReleaf sponsor card in
sponsors.html(lines 94-101):<div>not a linked<a>) -- likely intentional since no logo/website yet5. Sponsorship FAQ -- PASS
"What Sponsors Get" section in
sponsors.html(lines 126-152):faq-list/faq-itemclasses (CSS defined at line 923)BLOCKERS
None. This is a static HTML/CSS playground -- no backend, no user input processing, no auth logic. The generic blocker criteria (unvalidated input, secrets, DRY auth violations) do not apply to this domain.
NITS
Stale GitHub Pages URLs (5 files):
og:urlandog:imageonabout.html,staff.html,sponsors.html,tryouts.html, andgear.htmlpoint toldraney.github.io/west-side-basketball/-- a domain that appears defunct. Theindex.htmlalready uses the correct MinIO URL. Also,staff.htmlandsponsors.htmlhave Twitter Card tags pointing to the same stale URL. Recommend unifying all OG/Twitter image URLs to the MinIO source.Missing OG tags on teams.html and schedule.html: These two new pages have no Open Graph metadata at all (no og:title, og:description, og:image). Every other public page has OG tags. These pages will show poorly when shared on social media.
Practice count inconsistency:
index.htmlline 85 says "Three 2-hour team practices per week" whileabout.htmlline 80 says "Two 2-hour team practices per week." Issue #75 specifically fixed the count to 2. The landing page still has the old number.Inline styles on explore cards:
index.htmllines 112, 116, 120 usestyle="text-decoration: none; color: inherit;"on the explore card links. These should be a CSS class (e.g.,.card-link) for consistency with the no-inline-styles pattern used everywhere else.Coach Manny missing from ALL_COACHES:
shared/app.jsline 377 definesALL_COACHESfor the admin teams draft board but does not include Coach Manny. Not blocking since this is admin-side mock data, but worth tracking for when admin pages get updated.SOP COMPLIANCE
site-overhaul-- not named after issue #93. Understandable since this PR spans multiple issues (90-95), but deviates from convention.PROCESS OBSERVATIONS
This is a large multi-issue PR covering what appears to be issues #90-#95 (landing, about, tryouts, teams, schedule, gear pages). The scope is broad but cohesive -- it's a coordinated site overhaul. The practice count inconsistency (nit #3) is a content regression that should be fixed before this reaches production, but is not a code-level blocker for the playground.
The stale GitHub Pages URLs (nit #1-2) are a pattern debt issue -- older pages carried forward
ldraney.github.ioURLs while newer pages (index.html) use the correct MinIO source. A single pass to unify all OG metadata would prevent this from propagating to westside-app during Svelte promotion.VERDICT: APPROVED
The three review focus items (nav order, og:image absolute, new content) are resolved. The remaining findings are nits -- content and metadata inconsistencies that should be tracked as discovered scope for a cleanup pass before Svelte promotion, but do not block merge of the playground prototype.