chore: launch hardening pass (official assets + visual polish) - #27
Open
jerry-shimizutech wants to merge 29 commits into
Open
chore: launch hardening pass (official assets + visual polish)#27jerry-shimizutech wants to merge 29 commits into
jerry-shimizutech wants to merge 29 commits into
Conversation
… order across locales
… name across locales
- Add official logos: mo-logo-white/black (GuamMarianasOpen), msjjf,
copa-seal, copa-logo-blue, asjjf, mo-copa-mp combined
- Add hero image: hero-podium.jpg (CDM 2026, 1920w, 524KB optimized)
- Add 6 gallery photos from 2026 CDM podium + Copa Sponsorship events
(1200w, ~100-280KB each via sips)
- Wire Header + Footer to use official mo-logo-white.png (dark nav)
- Wire HomePage hero → hero-podium.jpg; gallery fallbacks → gallery/event-photo-{1-3}.jpg
- All originals preserved in assets/source/ untouched
- Public admin link remains absent (nav-only links are public routes)
event-photo-1.jpg (bracket sheet, bright white paper) was gallery[0] which hurt readability of the $2M economic impact text overlay. Replace with event-photo-4.jpg (adult group podium with trophies) — consistent dark branded backdrop matches gallery[1] and [2], high energy, clean bottom area for stat overlays. Final gallery set: [0] event-photo-4.jpg — adult group podium (Copa 2026) [1] event-photo-2.jpg — single adult podium (Copa 2026) [2] event-photo-3.jpg — kids group podium (Copa 2026)
Shows MapPin icon + venue name + View on Google Maps link behind the iframe. The iframe renders on top in production; fallback visible in headless/offline contexts.
✅ Deploy Preview for marianas-open ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan for PR comments
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Author
|
@greptile review |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+275
to
+283
| <p className="text-text-secondary text-sm">UOG Calvo Fieldhouse · Mangilao, Guam</p> | ||
| <a | ||
| href="https://maps.google.com/?q=UOG+Calvo+Fieldhouse+Guam" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="inline-flex items-center gap-2 text-gold-500 text-xs font-heading font-semibold uppercase tracking-wider hover:text-gold-400 transition-colors" | ||
| > | ||
| View on Google Maps <ExternalLink size={12} /> | ||
| </a> |
There was a problem hiding this comment.
Fallback text not using i18n
The venue name "UOG Calvo Fieldhouse · Mangilao, Guam" and the link label "View on Google Maps" are hardcoded in English. The rest of the component uses t('event.venue'), t('event.venueAddress'), etc. for internationalisation. These hardcoded strings will show in English regardless of the user's selected language.
Consider using the existing translation keys:
<p className="text-text-secondary text-sm">{t('event.venue')} · {t('event.location')}</p>
<a
href="https://maps.google.com/?q=UOG+Calvo+Fieldhouse+Guam"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 text-gold-500 text-xs font-heading font-semibold uppercase tracking-wider hover:text-gold-400 transition-colors"
>
{t('event.viewOnGoogleMaps')} <ExternalLink size={12} />
</a>(and add viewOnGoogleMaps to all locale files accordingly)
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/pages/EventDetailPage.tsx
Line: 275-283
Comment:
**Fallback text not using i18n**
The venue name `"UOG Calvo Fieldhouse · Mangilao, Guam"` and the link label `"View on Google Maps"` are hardcoded in English. The rest of the component uses `t('event.venue')`, `t('event.venueAddress')`, etc. for internationalisation. These hardcoded strings will show in English regardless of the user's selected language.
Consider using the existing translation keys:
```tsx
<p className="text-text-secondary text-sm">{t('event.venue')} · {t('event.location')}</p>
<a
href="https://maps.google.com/?q=UOG+Calvo+Fieldhouse+Guam"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 text-gold-500 text-xs font-heading font-semibold uppercase tracking-wider hover:text-gold-400 transition-colors"
>
{t('event.viewOnGoogleMaps')} <ExternalLink size={12} />
</a>
```
(and add `viewOnGoogleMaps` to all locale files accordingly)
How can I resolve this? If you propose a fix, please make it concise.
Contributor
Author
|
Great catch — this is legit and now fixed. ✅ Fix applied
Validation:
@greptile review |
Contributor
Author
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR applies a launch-hardening pass for Marianas Open with official client-provided assets and targeted visual fixes.
What's included
/adminfooter linkdocs/launch-qa-2026-03-12.md)VITE_API_URL=http://localhost:3000Why
Validation
npm run build(web) ✅Notes
Greptile Summary
This PR applies a launch-hardening pass: swapping in official brand assets (logo, hero image, gallery photos) across the header, footer, and home page; renaming event strings to "Guam Marianas Open" consistently across all six locales; removing the public
/adminfooter link; adding aviewOnGoogleMapsi18n key in all locales; and adding a map fallback treatment on the Event Detail page.Key changes:
Header.tsx/Footer.tsx— official logo (mo-logo-white.png) replaces placeholder SVG;object-containadded for correct sizing.Footer.tsx— public/adminlink removed (security/UX improvement).HomePage.tsx— hero and gallery images updated to curated official photos.en,ja,ko,pt,tl,zh) — event name strings updated to "Guam Marianas Open";viewOnGoogleMapskey added; calendar subtitles refined.EventDetailPage.tsx— map fallback UI added, but thez-0/z-10layering means the fallback div is permanently hidden behind theiframeelement regardless of whether the embed loads — see inline comment for a state-based fix.Confidence Score: 4/5
Important Files Changed
object-contain, and removes the public/adminlink — all clean changes./images/logo.svgto/images/logos/mo-logo-white.pngand addsobject-contain— straightforward branding update.hero-podium.jpgand gallery image paths to official curated photos — straightforward asset swap.viewOnGoogleMapskey, and updates calendar subtitle — consistent and complete.Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[Browser renders EventDetailPage] --> B[Map container div rendered\nposition: relative] B --> C[Fallback div\nposition: absolute, z-0] B --> D[iframe\nposition: relative, z-10] D --> E{Embed loads?} E -->|Yes| F[iframe renders map ✅\nCovers fallback z-0 ✅] E -->|No / X-Frame-Options| G[iframe renders blank/error frame\nStill occupies z-10 layer] G --> H[Fallback at z-0 permanently hidden ❌\nUsers see blank rectangle] F --> I[User sees map ✅] style H fill:#ff4444,color:#fff style I fill:#22aa44,color:#fff style G fill:#ff8800,color:#fffComments Outside Diff (2)
web/src/pages/EventDetailPage.tsx, line 271-293 (link)Map fallback will never be shown on iframe failure
The fallback div sits at
z-0and the iframe atz-10. When a Google Maps iframe fails to load (e.g., due to browser X-Frame-Options restrictions, CSP, or network issues), the iframe element is still rendered in the DOM as an opaque blank rectangle. That blank rectangle atz-10permanently covers the fallback div atz-0, so the fallback is never visible to the user — defeating its purpose.To make the fallback functional, it should be shown by default and hidden only once the iframe successfully loads:
This way the fallback is always visible, and the iframe fades in only on a successful load, revealing itself over the fallback.
Prompt To Fix With AI
web/src/pages/EventDetailPage.tsx, line 271-292 (link)Fallback is always hidden behind the iframe
The fallback
divhasz-0and theiframehasz-10. Because aniframeelement always occupies its layout box — even when the Google Maps embed is blocked, fails, or shows a blank/error frame — thez-10iframe will permanently sit on top of thez-0fallback. Users will never see the fallback content in practice; they'll see either the loaded map or a blank/white rectangle from the failed iframe.A reliable approach is to use React state driven by the iframe's
onLoadevent to hide the fallback once the iframe has successfully loaded, then conditionally render the fallback when it hasn't loaded yet:Note:
onLoadfires when the iframe document finishes loading (including error pages fromX-Frame-Optionsrejections). If a stricter check is needed, you can inspectevent.target.contentDocumentin the handler, though that will throw a cross-origin error — which can itself be used as a signal that the embed loaded live map content successfully.Prompt To Fix All With AI
Last reviewed commit: 2194fd3