BloomKnights and KHix site fixes #463
Conversation
📝 WalkthroughWalkthroughAdds responsive media support and prioritized loading to application backgrounds, improves hacker form submit animations and accessibility, updates BloomKnights content/SEO wording, and overhauls Khix typography, icons, and global styling. ChangesBlade: Responsive backgrounds and form submission improvements
BloomKnights: Content and SEO updates
Khix: Visual polish and font/system overhaul
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 6 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (6 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
apps/bloomknights/src/app/_components/faq/faq-data.ts (1)
58-58: 💤 Low valueConsider "hackathon at UCF" for clarity.
The phrase "UCF hackathon" could be read as location-specific or student-specific. Since the PR broadens eligibility to all university students, "beginner-friendly hackathon at UCF" would more clearly separate the host institution from the target audience.
This is a minor style point—the current wording is acceptable since other FAQ answers clarify eligibility.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/bloomknights/src/app/_components/faq/faq-data.ts` at line 58, Update the FAQ text entry in faq-data.ts to say "beginner-friendly hackathon at UCF" instead of "beginner-friendly UCF hackathon" so the host institution is separated from the target audience; locate the string inside the FAQ data structure in apps/bloomknights/src/app/_components/faq/faq-data.ts (the FAQ array/constant in that module) and replace that phrase in the relevant FAQ item's answer.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/blade/src/app/_components/dashboard/hacker/hackbackgrounds/bloomknights.ts`:
- Around line 267-269: The style block in bloomknights.ts sets contain: "paint"
together with overflow: "visible", which is ineffective; update the style in the
component (the style object that contains the contain and overflow properties)
to match intended behavior—either change overflow to "hidden" if you want
clipping, or remove/replace contain: "paint" (e.g., use contain: "layout" or
remove the contain key) if you need descendants to visually spill; apply the
change on the same style object in this file (the one with contain and
overflow).
In `@apps/khix/src/app/globals.css`:
- Around line 215-217: The commented filter blocks containing "filter:
drop-shadow(...)" violate comment-whitespace-inside; update each block (the
commented lines with the filter + drop-shadow values) to include a space after
/* and before */ (e.g., "/* filter: ... */") or convert to a multi-line block
with proper surrounding whitespace on the opening and closing markers so
Stylelint passes; apply the same change to the other occurrences noted (the
other filter comment blocks).
- Around line 620-625: The .khix-button CSS currently removes outlines making
keyboard focus invisible; restore an accessible visible focus by adding a
.khix-button:focus-visible rule (and a .khix-button:focus fallback for browsers
without focus-visible) that applies a high-contrast focus indicator (e.g.,
outline or box-shadow ring with an outline-offset) consistent with existing
transitions, keeping border: none and preserving visual design while ensuring
keyboard users can see focus.
In `@apps/khix/src/app/page.tsx`:
- Around line 7-16: The file imports multiple icons (FaDiscord, FaTwitter,
FaFacebook, FaInstagram, FaLink, FaVolumeUp, FaVolumeMute) from "react-icons/fa"
in apps/khix/src/app/page.tsx but the apps/khix package.json is missing the
react-icons dependency; add "react-icons" to apps/khix/package.json dependencies
(and install it with your package manager) so module resolution succeeds on
clean installs/builds, then verify the import statements in page.tsx still
resolve without errors.
In `@apps/khix/tailwind.config.ts`:
- Around line 79-85: Update the Tailwind "sans" font token to use the new layout
CSS variable: replace var(--font-marcellus) with var(--font-khix) in the
tailwind.config.ts "sans" array so the app-wide font (used by font-sans) matches
the --font-khix variable defined in apps/khix/src/app/layout.tsx.
---
Nitpick comments:
In `@apps/bloomknights/src/app/_components/faq/faq-data.ts`:
- Line 58: Update the FAQ text entry in faq-data.ts to say "beginner-friendly
hackathon at UCF" instead of "beginner-friendly UCF hackathon" so the host
institution is separated from the target audience; locate the string inside the
FAQ data structure in apps/bloomknights/src/app/_components/faq/faq-data.ts (the
FAQ array/constant in that module) and replace that phrase in the relevant FAQ
item's answer.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
Run ID: 3f83ca83-ad34-4fb6-b4be-378b133916fe
⛔ Files ignored due to path filters (1)
apps/khix/public/khix-logo-white.svgis excluded by!**/*.svg
📒 Files selected for processing (12)
apps/blade/src/app/_components/dashboard/hacker/hackbackgrounds/bloomknights.tsapps/blade/src/app/_components/dashboard/hacker/hackbackgrounds/types.tsapps/blade/src/app/_components/dashboard/hacker/hacker-application-background.tsxapps/blade/src/app/_components/dashboard/hacker/hacker-application-form.tsxapps/bloomknights/src/app/_components/about/about.tsxapps/bloomknights/src/app/_components/faq/faq-data.tsapps/bloomknights/src/app/page.tsxapps/bloomknights/src/app/seo.tsapps/khix/src/app/globals.cssapps/khix/src/app/layout.tsxapps/khix/src/app/page.tsxapps/khix/tailwind.config.ts
DanielJEfres
left a comment
There was a problem hiding this comment.
everything lgtm, id just recommend looking over the font changes in khix. theres some weird interactions going on there (prob just codex being weird). some css says to use geist sans but we arent loading geist in layout (only glyphic is loaded and khix font is set) so its just gonna fall back to default system text.
a similar issue might be the case within the emails @DGoel1602 made iirc? where diff browsers/apps will choose different default fonts and since our pages are attempting to use different fonts which were never loaded it fallbacks to those defaults
also make sure the diff checks pass obv, they like all failed atm
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/khix/src/app/globals.css`:
- Around line 706-709: Stylelint complains about quoted font-family names; in
both .khix-code-link and .khix-enter-gate-content change the font-family
declarations to remove the quotes around SFMono-Regular (use SFMono-Regular
instead of "SFMono-Regular") so the font-family list is unquoted for that token
while keeping the other family names and fallback order unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
Run ID: 62200b72-4eea-4565-bc80-dce71b86e1b8
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yaml
📒 Files selected for processing (7)
apps/blade/src/app/_components/dashboard/hacker/hackbackgrounds/bloomknights.tsapps/bloomknights/src/app/_components/faq/faq-data.tsapps/khix/package.jsonapps/khix/src/app/globals.cssapps/khix/src/app/layout.tsxapps/khix/src/app/page.tsxapps/khix/tailwind.config.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/khix/src/app/layout.tsx
- apps/blade/src/app/_components/dashboard/hacker/hackbackgrounds/bloomknights.ts
- apps/khix/src/app/page.tsx
| font-family: | ||
| ui-monospace, "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, | ||
| Monaco, Consolas, monospace; | ||
| font-size: 0.68rem; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify remaining offending entries
rg -n '"SFMono-Regular"' apps/khix/src/app/globals.cssRepository: KnightHacks/forge
Length of output: 227
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '690,730p' apps/khix/src/app/globals.css
echo "----"
sed -n '800,840p' apps/khix/src/app/globals.cssRepository: KnightHacks/forge
Length of output: 2092
Unquote SFMono-Regular in globals.css to satisfy Stylelint
Stylelint flags "SFMono-Regular" in font-family-name-quotes; remove the quotes in both font-family declarations (.khix-code-link and .khix-enter-gate-content).
Suggested fix
.khix-code-link {
font-family:
- ui-monospace, "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo,
+ ui-monospace, SFMono-Regular, "Cascadia Code", "Liberation Mono", Menlo,
Monaco, Consolas, monospace;
}
.khix-enter-gate-content {
font-family:
- ui-monospace, "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo,
+ ui-monospace, SFMono-Regular, "Cascadia Code", "Liberation Mono", Menlo,
Monaco, Consolas, monospace;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| font-family: | |
| ui-monospace, "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, | |
| Monaco, Consolas, monospace; | |
| font-size: 0.68rem; | |
| font-family: | |
| ui-monospace, SFMono-Regular, "Cascadia Code", "Liberation Mono", Menlo, | |
| Monaco, Consolas, monospace; | |
| font-size: 0.68rem; |
🧰 Tools
🪛 Stylelint (17.12.0)
[error] 707-707: Expected no quotes around "SFMono-Regular" (font-family-name-quotes)
(font-family-name-quotes)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/khix/src/app/globals.css` around lines 706 - 709, Stylelint complains
about quoted font-family names; in both .khix-code-link and
.khix-enter-gate-content change the font-family declarations to remove the
quotes around SFMono-Regular (use SFMono-Regular instead of "SFMono-Regular") so
the font-family list is unquoted for that token while keeping the other family
names and fallback order unchanged.
Source: Linters/SAST tools
Why
Improve the KH IX and BloomKnights user facing experience, and a smoother Blade application submission flow.
What
Closes: #462
Test Plan
pnpm lintpnpm typecheckNODE_ENV=production pnpm buildChecklist
Summary by CodeRabbit
New Features
UI/Visual Improvements
Style
Accessibility
Content Updates