forgejo_admin/svelte-playground

Fork 0

feat: westside landing page prototype -- strip tryouts, fix practice count (#75) #6

Merged

forgejo_admin merged 2 commits from 5-feat-westside-landing-page-prototype-str into main

2026-03-26 04:35:19 +00:00

forgejo_admin commented

2026-03-26 04:16:59 +00:00

Owner

Summary

Builds the westside/ subdirectory in svelte-playground with cleaned content from westside-app#75. Strips all stale tryout content (banner, details section, Stripe payment links, nav link), corrects practice count from 3 to 2, and updates CTAs to general "Contact Us to Join" messaging across all pages.

Changes

westside/index.html -- Vite entry point linking westside style.css, mounts App.svelte
westside/App.svelte -- Main landing page: no tryout banner/section/Stripe links, hero CTA is mailto, "How to Join" replaces "How It Works", FAQ corrected
westside/Nav.svelte -- Shared nav component with no Tryouts link, Svelte 5 reactive mobile toggle
westside/Footer.svelte -- Shared footer component
westside/style.css -- Copy of west-side-basketball design system (805 lines, unchanged per issue spec)
westside/staff.html -- Staff page with fixed nav (no Tryouts), bottom CTA changed to "Join Westside" with mailto
westside/sponsors.html -- Sponsors page with fixed nav (no Tryouts)
westside/success.html -- Repurposed from tryout confirmation to general "Thanks for reaching out" page
public/westside/assets/images/ -- Coach photos, logo, favicons, OG image for static serving
vite.config.js -- Added westside + 3 static HTML pages as rollup inputs
index.html -- Added Westside Landing card to hub Projects section

Test Plan

npm run build succeeds with no errors (verified)
Zero tryout/Stripe references in all westside files (grep-verified)
Practice count says "Two 2-hour practices per week" in About card and FAQ
Nav has no Tryouts link on any page (index, staff, sponsors, success)
All pages accessible at /svelte/westside/ after deploy

Review Checklist

No tryout references in HTML/Svelte files
No Stripe payment links
Practice count corrected from 3 to 2
Nav consistent across all pages (no Tryouts link)
Meta descriptions updated
Build passes
No unrelated changes

Closes #5
Parent issue: forgejo_admin/westside-app#75
Scope boundary: schedule page is separate work (westside-app#77)

## Summary Builds the `westside/` subdirectory in svelte-playground with cleaned content from westside-app#75. Strips all stale tryout content (banner, details section, Stripe payment links, nav link), corrects practice count from 3 to 2, and updates CTAs to general "Contact Us to Join" messaging across all pages. ## Changes - `westside/index.html` -- Vite entry point linking westside style.css, mounts App.svelte - `westside/App.svelte` -- Main landing page: no tryout banner/section/Stripe links, hero CTA is mailto, "How to Join" replaces "How It Works", FAQ corrected - `westside/Nav.svelte` -- Shared nav component with no Tryouts link, Svelte 5 reactive mobile toggle - `westside/Footer.svelte` -- Shared footer component - `westside/style.css` -- Copy of west-side-basketball design system (805 lines, unchanged per issue spec) - `westside/staff.html` -- Staff page with fixed nav (no Tryouts), bottom CTA changed to "Join Westside" with mailto - `westside/sponsors.html` -- Sponsors page with fixed nav (no Tryouts) - `westside/success.html` -- Repurposed from tryout confirmation to general "Thanks for reaching out" page - `public/westside/assets/images/` -- Coach photos, logo, favicons, OG image for static serving - `vite.config.js` -- Added westside + 3 static HTML pages as rollup inputs - `index.html` -- Added Westside Landing card to hub Projects section ## Test Plan - `npm run build` succeeds with no errors (verified) - Zero tryout/Stripe references in all westside files (grep-verified) - Practice count says "Two 2-hour practices per week" in About card and FAQ - Nav has no Tryouts link on any page (index, staff, sponsors, success) - All pages accessible at /svelte/westside/ after deploy ## Review Checklist - [x] No tryout references in HTML/Svelte files - [x] No Stripe payment links - [x] Practice count corrected from 3 to 2 - [x] Nav consistent across all pages (no Tryouts link) - [x] Meta descriptions updated - [x] Build passes - [x] No unrelated changes ## Related - Closes #5 - Parent issue: forgejo_admin/westside-app#75 - Scope boundary: schedule page is separate work (westside-app#77)

forgejo_admin added 1 commit

2026-03-26 04:16:59 +00:00

feat: westside landing page prototype -- strip tryouts, fix practice count df9b626944

Build westside/ subdirectory with cleaned content per westside-app#75:
- Remove tryout banner, tryout details section, all Stripe payment links
- Hero/bottom CTA changed to "Contact Us to Join" with mailto
- "Three 2-hour practices" corrected to "Two 2-hour practices per week"
- "How It Works" renamed to "How to Join" with general steps
- FAQ updated: practice count fixed, tryout-specific Q removed
- Nav: "Tryouts" link removed from all pages
- staff.html: bottom CTA updated to general "Join Westside" messaging
- success.html: repurposed as general "Thanks for reaching out" page
- Meta descriptions cleared of tryout references
- Assets served via public/ directory for Vite static handling

Closes #5

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin added 1 commit

2026-03-26 04:19:02 +00:00

fix: resolve a11y warnings in Nav.svelte -- move onclick to anchor elements 5b8bf2e5f3

Move click handler from non-interactive <ul> to individual <a> elements
to satisfy Svelte a11y checks (no_noninteractive_element_interactions,
click_events_have_key_events). Also remove unused onMount import and
dead code.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-03-26 04:19:33 +00:00

Author

Owner

Self-Review Findings

Checked

Content accuracy: Zero tryout/Stripe references in HTML/Svelte files (grep-verified). Practice count corrected to "Two 2-hour" in both About card and FAQ.
Nav consistency: No Tryouts link on any page (index via Nav.svelte, staff.html, sponsors.html, success.html).
CTA updates: Hero and bottom CTA both use "Contact Us to Join" with mailto. staff.html CTA changed from "View Tryouts Info" to "Join Westside" with mailto.
success.html: Repurposed from tryout confirmation to general "Thanks for reaching out" -- all tryout-specific content removed.
Meta descriptions: All updated, no tryout references.
Build: npm run build passes cleanly, zero warnings.
Assets: Served via public/westside/assets/ for Vite static handling, verified in dist output.
Svelte 5: Uses $state() runes, onclick handlers, class:is-open directive -- proper Svelte 5 syntax.

Fixed in review

a11y warnings (5b8bf2e): Moved onclick from non-interactive <ul> to individual <a> elements. Removed unused onMount import and dead code. Build now produces zero Svelte warnings.

Noted (non-blocking)

style.css retains .tryout-banner CSS classes (unused). Issue spec explicitly says "CSS and JavaScript files require no modifications" so this is intentional.
Static HTML pages (staff, sponsors, success) inline the nav toggle JS rather than sharing Nav.svelte -- expected since they are plain HTML, not Svelte-compiled.

VERDICT: APPROVE

## Self-Review Findings ### Checked - **Content accuracy**: Zero tryout/Stripe references in HTML/Svelte files (grep-verified). Practice count corrected to "Two 2-hour" in both About card and FAQ. - **Nav consistency**: No Tryouts link on any page (index via Nav.svelte, staff.html, sponsors.html, success.html). - **CTA updates**: Hero and bottom CTA both use "Contact Us to Join" with mailto. staff.html CTA changed from "View Tryouts Info" to "Join Westside" with mailto. - **success.html**: Repurposed from tryout confirmation to general "Thanks for reaching out" -- all tryout-specific content removed. - **Meta descriptions**: All updated, no tryout references. - **Build**: `npm run build` passes cleanly, zero warnings. - **Assets**: Served via `public/westside/assets/` for Vite static handling, verified in dist output. - **Svelte 5**: Uses `$state()` runes, `onclick` handlers, `class:is-open` directive -- proper Svelte 5 syntax. ### Fixed in review - **a11y warnings** (5b8bf2e): Moved `onclick` from non-interactive `<ul>` to individual `<a>` elements. Removed unused `onMount` import and dead code. Build now produces zero Svelte warnings. ### Noted (non-blocking) - `style.css` retains `.tryout-banner` CSS classes (unused). Issue spec explicitly says "CSS and JavaScript files require no modifications" so this is intentional. - Static HTML pages (staff, sponsors, success) inline the nav toggle JS rather than sharing Nav.svelte -- expected since they are plain HTML, not Svelte-compiled. **VERDICT: APPROVE**

forgejo_admin commented

2026-03-26 04:25:51 +00:00

Author

Owner

PR #6 Review

DOMAIN REVIEW

Tech stack: Svelte 5 + Vite (static site, no SvelteKit). HTML pages with inline JS for mobile nav toggle. CSS design system with custom properties. This is a playground prototype -- not a production SvelteKit app.

Svelte/Component architecture:

App.svelte correctly uses Svelte 5 $state() rune via Nav.svelte for reactive mobile menu toggle. Clean component decomposition: Nav, Footer, and App are separate Svelte components for the index page.
staff.html, sponsors.html, success.html are plain HTML (not Svelte) -- appropriate for a multi-page static build via Vite rollup inputs.
Svelte mount pattern in westside/index.html uses the correct Svelte 5 mount() API (not the deprecated new App() pattern).

Accessibility:

Nav uses aria-label="Main navigation", aria-expanded, and aria-controls on the hamburger toggle -- good.
Logo <img> uses alt="" (decorative) since the brand name text follows it -- correct pattern.
Staff photos have descriptive alt text with name and role -- good.
:focus-visible styling is defined in the CSS -- good.
sr-only utility class is defined and available.

Responsive design:

Mobile-first with breakpoints at 640px (tablet) and 1024px (desktop) -- reasonable.
Nav collapses to hamburger on mobile, shows full links on desktop -- correct.
Grid system goes 1-col -> 2-col -> 3-col progressively.

CSS quality:

Design tokens are well-structured with consistent naming (--color-*, --space-*, --font-size-*).
No magic numbers -- spacing uses token vars throughout.
805 lines of CSS is large but it is a complete design system for a multi-page site.

Content correctness (per issue #75 acceptance criteria):

Practice count: "Two 2-hour practices per week" -- CORRECT (was 3, now 2).
Zero tryout/Stripe/payment references in HTML/Svelte files -- VERIFIED.
"How to Join" replaces "How It Works" -- CORRECT.
Bottom CTA is "Join Westside" with mailto -- CORRECT.
Nav has no Tryouts link on any page -- VERIFIED across all 4 pages.
success.html repurposed from tryout confirmation to general "Thanks for Reaching Out" -- CORRECT.
OG/meta descriptions reference program info, not tryouts -- CORRECT.

Performance:

Images lack explicit dimensions on some elements (coach photos have width/height -- good). OG image and favicon references are properly sized.
No lazy loading (loading="lazy") on staff photos that are below the fold. Not a blocker for a prototype.

BLOCKERS

None.

This is a static HTML/CSS/Svelte playground prototype. There is no user input handling, no API calls, no authentication, no database access, and no server-side logic. The BLOCKER criteria do not apply:

Test coverage: The issue explicitly states "No automated tests (static HTML)" and the test plan is visual verification + grep for stale content. Appropriate for a playground prototype.
User input validation: No forms, no user input. All CTAs are mailto links.
Secrets/credentials: None found. No API keys, tokens, or passwords.
DRY in auth paths: No auth paths exist.

NITS

Dead CSS: .tryout-banner classes remain in westside/style.css (lines defining .tryout-banner, .tryout-banner-date, .tryout-banner-location, .tryout-banner .btn). The issue spec says css/style.css should not be touched in the production repo, and the PR body says the CSS is "805 lines, unchanged per issue spec." This is consistent with the constraint, but when this prototype is promoted to production, the dead tryout CSS should be stripped. Not blocking for playground.
DRY: Nav + Footer + mobile toggle script duplicated across 3 HTML pages. staff.html, sponsors.html, and success.html each contain identical nav markup, footer markup, and the same ~15-line mobile toggle IIFE. This is the expected pattern for plain HTML pages (no component system available outside Svelte), but worth noting for the promotion step -- the Svelte components (Nav.svelte, Footer.svelte) exist and should be used if these pages are ever converted to Svelte.
Hub card description says "travel schedule" but no travel schedule page exists in this PR. The card reads: "Public site refresh -- cleaned content, staff page, travel schedule." Issue #77 (travel schedule) is separate future work. Minor copy inaccuracy in the hub index.
.tryout-banner + .hero CSS rule is dead code (no element with class .tryout-banner exists in any page). Same category as nit #1.
success.html has <meta name="robots" content="noindex"> -- good practice for a confirmation page. No issue, just noting it is correctly handled.

SOP COMPLIANCE

Branch named after issue (5-feat-westside-landing-page-prototype-str references svelte-playground issue #5)
PR title references parent issue (#75 in westside-app)
PR body has Summary, Changes, Test Plan sections
PR body missing ## Related section (has ## Review Checklist instead). The PR body does not reference a plan slug, which is acceptable since issue #75 states "Standalone -- no plan phase"
No secrets committed
No .env files committed
Changes are scoped to the issue -- no unrelated modifications
Commit messages are descriptive (single commit PR)

PROCESS OBSERVATIONS

Deployment frequency: This is a playground prototype gate before production promotion to the GitHub Pages site. The gate pattern (playground -> phone approval -> production copy) is being followed correctly per the constraints in issue #75.
Change failure risk: Low. Static HTML/CSS with no dynamic behavior beyond a mobile nav toggle. No API dependencies, no state management.
Scope boundary: Clean separation between issue #75 (strip tryouts, fix practice count) and issue #77 (add travel schedule). The hub card description mentioning "travel schedule" is the only bleed.
Cross-repo tracking: PR in svelte-playground correctly references parent issue in westside-app (#75). Issue #5 in svelte-playground tracks the local work.

VERDICT: APPROVED

## PR #6 Review ### DOMAIN REVIEW **Tech stack**: Svelte 5 + Vite (static site, no SvelteKit). HTML pages with inline JS for mobile nav toggle. CSS design system with custom properties. This is a playground prototype -- not a production SvelteKit app. **Svelte/Component architecture**: - `App.svelte` correctly uses Svelte 5 `$state()` rune via `Nav.svelte` for reactive mobile menu toggle. Clean component decomposition: Nav, Footer, and App are separate Svelte components for the index page. - `staff.html`, `sponsors.html`, `success.html` are plain HTML (not Svelte) -- appropriate for a multi-page static build via Vite rollup inputs. - Svelte mount pattern in `westside/index.html` uses the correct Svelte 5 `mount()` API (not the deprecated `new App()` pattern). **Accessibility**: - Nav uses `aria-label="Main navigation"`, `aria-expanded`, and `aria-controls` on the hamburger toggle -- good. - Logo `<img>` uses `alt=""` (decorative) since the brand name text follows it -- correct pattern. - Staff photos have descriptive `alt` text with name and role -- good. - `:focus-visible` styling is defined in the CSS -- good. - `sr-only` utility class is defined and available. **Responsive design**: - Mobile-first with breakpoints at 640px (tablet) and 1024px (desktop) -- reasonable. - Nav collapses to hamburger on mobile, shows full links on desktop -- correct. - Grid system goes 1-col -> 2-col -> 3-col progressively. **CSS quality**: - Design tokens are well-structured with consistent naming (`--color-*`, `--space-*`, `--font-size-*`). - No magic numbers -- spacing uses token vars throughout. - 805 lines of CSS is large but it is a complete design system for a multi-page site. **Content correctness** (per issue #75 acceptance criteria): - Practice count: "Two 2-hour practices per week" -- CORRECT (was 3, now 2). - Zero tryout/Stripe/payment references in HTML/Svelte files -- VERIFIED. - "How to Join" replaces "How It Works" -- CORRECT. - Bottom CTA is "Join Westside" with mailto -- CORRECT. - Nav has no Tryouts link on any page -- VERIFIED across all 4 pages. - `success.html` repurposed from tryout confirmation to general "Thanks for Reaching Out" -- CORRECT. - OG/meta descriptions reference program info, not tryouts -- CORRECT. **Performance**: - Images lack explicit dimensions on some elements (coach photos have width/height -- good). OG image and favicon references are properly sized. - No lazy loading (`loading="lazy"`) on staff photos that are below the fold. Not a blocker for a prototype. ### BLOCKERS None. This is a static HTML/CSS/Svelte playground prototype. There is no user input handling, no API calls, no authentication, no database access, and no server-side logic. The BLOCKER criteria do not apply: - **Test coverage**: The issue explicitly states "No automated tests (static HTML)" and the test plan is visual verification + grep for stale content. Appropriate for a playground prototype. - **User input validation**: No forms, no user input. All CTAs are mailto links. - **Secrets/credentials**: None found. No API keys, tokens, or passwords. - **DRY in auth paths**: No auth paths exist. ### NITS 1. **Dead CSS: `.tryout-banner` classes remain in `westside/style.css`** (lines defining `.tryout-banner`, `.tryout-banner-date`, `.tryout-banner-location`, `.tryout-banner .btn`). The issue spec says `css/style.css` should not be touched in the production repo, and the PR body says the CSS is "805 lines, unchanged per issue spec." This is consistent with the constraint, but when this prototype is promoted to production, the dead tryout CSS should be stripped. Not blocking for playground. 2. **DRY: Nav + Footer + mobile toggle script duplicated across 3 HTML pages**. `staff.html`, `sponsors.html`, and `success.html` each contain identical nav markup, footer markup, and the same ~15-line mobile toggle IIFE. This is the expected pattern for plain HTML pages (no component system available outside Svelte), but worth noting for the promotion step -- the Svelte components (`Nav.svelte`, `Footer.svelte`) exist and should be used if these pages are ever converted to Svelte. 3. **Hub card description says "travel schedule"** but no travel schedule page exists in this PR. The card reads: "Public site refresh -- cleaned content, staff page, travel schedule." Issue #77 (travel schedule) is separate future work. Minor copy inaccuracy in the hub index. 4. **`.tryout-banner + .hero` CSS rule** is dead code (no element with class `.tryout-banner` exists in any page). Same category as nit #1. 5. **`success.html` has `<meta name="robots" content="noindex">`** -- good practice for a confirmation page. No issue, just noting it is correctly handled. ### SOP COMPLIANCE - [x] Branch named after issue (`5-feat-westside-landing-page-prototype-str` references svelte-playground issue #5) - [x] PR title references parent issue (`#75` in westside-app) - [x] PR body has Summary, Changes, Test Plan sections - [ ] PR body missing `## Related` section (has `## Review Checklist` instead). The PR body does not reference a plan slug, which is acceptable since issue #75 states "Standalone -- no plan phase" - [x] No secrets committed - [x] No `.env` files committed - [x] Changes are scoped to the issue -- no unrelated modifications - [x] Commit messages are descriptive (single commit PR) ### PROCESS OBSERVATIONS - **Deployment frequency**: This is a playground prototype gate before production promotion to the GitHub Pages site. The gate pattern (playground -> phone approval -> production copy) is being followed correctly per the constraints in issue #75. - **Change failure risk**: Low. Static HTML/CSS with no dynamic behavior beyond a mobile nav toggle. No API dependencies, no state management. - **Scope boundary**: Clean separation between issue #75 (strip tryouts, fix practice count) and issue #77 (add travel schedule). The hub card description mentioning "travel schedule" is the only bleed. - **Cross-repo tracking**: PR in `svelte-playground` correctly references parent issue in `westside-app` (#75). Issue #5 in svelte-playground tracks the local work. ### VERDICT: APPROVED