Skip to content

BloomKnights and KHix site fixes #463

Merged
Adr1an04 merged 7 commits into
mainfrom
khixSiteFix
Jun 8, 2026
Merged

BloomKnights and KHix site fixes #463
Adr1an04 merged 7 commits into
mainfrom
khixSiteFix

Conversation

@Adr1an04

@Adr1an04 Adr1an04 commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

Why

Improve the KH IX and BloomKnights user facing experience, and a smoother Blade application submission flow.

What

Closes: #462

  • Polished the KH IX landing page layout, background treatment, logo sizing, button styling, and responsive/safe-area behavior.
  • Updated BloomKnights copy and SEO language from UCF-only wording to broader university-student wording.
  • Improved the BloomKnights Blade application background performance by using the optimized Cloudflare image on mobile/tablet.
  • Added application background sources and reduced unnecessary compositor pressure on large background layers.
  • Added a visible “Submitting” loading state when users submit the hacker application.
  • Added a quick success reveal animation for the submitted screen so the confirmation feels intentional without delaying the UI.

Test Plan

  • Ran pnpm lint
  • Ran pnpm typecheck
  • Ran NODE_ENV=production pnpm build

Checklist

  • Database: No changes and enviroment too

Summary by CodeRabbit

  • New Features

    • Form submit now shows an inline "Submitting" pill with spinner and improved live/status announcements.
    • Image sources now support responsive tablet-specific assets and improved loading priority.
  • UI/Visual Improvements

    • Backgrounds and ambient layers updated for better viewport behavior and visuals.
    • Refined hero, logo, and button visuals across breakpoints.
  • Style

    • Swapped site fonts and updated global CSS variables and animations.
  • Accessibility

    • Form exposes busy state for assistive tech.
  • Content Updates

    • Wording changed to reference "university students" more broadly.

@coderabbitai

coderabbitai Bot commented Jun 8, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

Adds 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.

Changes

Blade: Responsive backgrounds and form submission improvements

Layer / File(s) Summary
Responsive background media and viewport rendering
apps/blade/src/app/_components/dashboard/hacker/hackbackgrounds/types.ts, apps/blade/src/app/_components/dashboard/hacker/hackbackgrounds/bloomknights.ts, apps/blade/src/app/_components/dashboard/hacker/hacker-application-background.tsx
ApplicationVisualLayerSource gains optional media; BloomKnights ambient layers (godrays, leaves) switch to space: "viewport"; bloomknights-meadow serves tablet-specific WEBP under (max-width: 1024px); renderer detects primary layer and sets fetchPriority/loading; <source> now emits media, srcSet, and type; willChange applied only during transitions.
Hacker form submission UX and loading states
apps/blade/src/app/_components/dashboard/hacker/hacker-application-form.tsx
New granular keyframes for submit-loading and submitted-screen, added .kh-submitted-copy wrapper, root <form aria-busy={loading}>, and final-step submit area shows conditional "Submitting" pill (spinner, aria-live="polite", role="status"); button aria-label/title reflect loading state.

BloomKnights: Content and SEO updates

Layer / File(s) Summary
Content and SEO messaging
apps/bloomknights/src/app/_components/about/about.tsx, apps/bloomknights/src/app/_components/faq/faq-data.ts, apps/bloomknights/src/app/page.tsx, apps/bloomknights/src/app/seo.ts
About and FAQ copy updated to "university students"; homepage depth-layer wrapper margins adjusted (-mt-45 sm:mt-0, -mt-15 sm:mt-0); SEO_DESCRIPTION and eventJsonLd.description revised to match wording changes.

Khix: Visual polish and font/system overhaul

Layer / File(s) Summary
Typography and font application
apps/khix/src/app/layout.tsx, apps/khix/tailwind.config.ts
Replaces Geist with Faculty_Glyphic via next/font/google, exposes font.className/font.variable on <body>, updates Tailwind fontFamily.sans to start with var(--font-khix), and adds viewportFit: "cover".
Icon migration and motion variants
apps/khix/src/app/page.tsx
Replaces lucide-react icons with react-icons/fa equivalents (social and volume icons), introduces typed Framer Motion Variants (reveal, fadeReveal), and moves stage-accent sizing/positioning to CSS custom properties.
Global styling refinements
apps/khix/src/app/globals.css
Extensive CSS updates: root sizing (min-width/min-height), safe-area offsets for MLH badge, hero sizing, expanded layer insets, reworked button primitives (primary/secondary), softened text-shadow/typography effects, enter-gate mobile touch tweaks, pointer-event adjustments, and responsive breakpoint refinements for stage accents and logo/event-date sizing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • KnightHacks/forge#458: Main PR’s updates to the BloomKnights background system (media handling and ambient-layer space changes) overlap with this change.
  • KnightHacks/forge#459: Related edits to Khix layout/page files; both PRs modify similar app skeleton pieces.

Suggested labels

Blade, Bug, Major

Suggested reviewers

  • cataladev
  • kwaiidev
  • DVidal1205
🚥 Pre-merge checks | ✅ 6 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Title check ⚠️ Warning Title does not start with issue number in brackets as required; '[#462]' prefix is missing. Update title to '[#462] BloomKnights and KHix site fixes' to meet the requirement format.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (6 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check ✅ Passed Code changes align with #462 objectives: KH IX site polish (layout, background, logo, buttons, responsive behavior), BloomKnights copy updates (UCF→university), and Blade application optimization (images, loading states).
Out of Scope Changes check ✅ Passed All changes are directly scoped to #462 objectives; no unrelated refactoring, dependency upgrades, or unrelated fixes detected.
No Hardcoded Secrets ✅ Passed Comprehensive scan of all modified files found no hardcoded API keys, passwords, tokens, or secrets. All sensitive values properly reference environment variables.
Validated Env Access ✅ Passed No direct process.env usage found in any PR-modified source files. All 11 modified files comply with the codebase convention of using validated env imports.
No Typescript Escape Hatches ✅ Passed No TypeScript escape hatches ('any', '@ts-ignore', '@ts-expect-error', '!') found in any of the 11 modified TypeScript/TSX files. All type safety practices are followed.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch khixSiteFix

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🧹 Nitpick comments (1)
apps/bloomknights/src/app/_components/faq/faq-data.ts (1)

58-58: 💤 Low value

Consider "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

📥 Commits

Reviewing files that changed from the base of the PR and between 74399cd and 08957d3.

⛔ Files ignored due to path filters (1)
  • apps/khix/public/khix-logo-white.svg is excluded by !**/*.svg
📒 Files selected for processing (12)
  • apps/blade/src/app/_components/dashboard/hacker/hackbackgrounds/bloomknights.ts
  • apps/blade/src/app/_components/dashboard/hacker/hackbackgrounds/types.ts
  • apps/blade/src/app/_components/dashboard/hacker/hacker-application-background.tsx
  • apps/blade/src/app/_components/dashboard/hacker/hacker-application-form.tsx
  • apps/bloomknights/src/app/_components/about/about.tsx
  • apps/bloomknights/src/app/_components/faq/faq-data.ts
  • apps/bloomknights/src/app/page.tsx
  • apps/bloomknights/src/app/seo.ts
  • apps/khix/src/app/globals.css
  • apps/khix/src/app/layout.tsx
  • apps/khix/src/app/page.tsx
  • apps/khix/tailwind.config.ts

Comment thread apps/khix/src/app/globals.css Outdated
Comment thread apps/khix/src/app/globals.css
Comment thread apps/khix/src/app/page.tsx
Comment thread apps/khix/tailwind.config.ts Outdated
@Adr1an04 Adr1an04 requested a review from a team as a code owner June 8, 2026 01:19
Comment thread apps/bloomknights/src/app/_components/faq/faq-data.ts Outdated

@DanielJEfres DanielJEfres left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 08957d3 and f0626ce.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml
📒 Files selected for processing (7)
  • apps/blade/src/app/_components/dashboard/hacker/hackbackgrounds/bloomknights.ts
  • apps/bloomknights/src/app/_components/faq/faq-data.ts
  • apps/khix/package.json
  • apps/khix/src/app/globals.css
  • apps/khix/src/app/layout.tsx
  • apps/khix/src/app/page.tsx
  • apps/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

Comment on lines +706 to 709
font-family:
ui-monospace, "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo,
Monaco, Consolas, monospace;
font-size: 0.68rem;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify remaining offending entries
rg -n '"SFMono-Regular"' apps/khix/src/app/globals.css

Repository: 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.css

Repository: 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.

Suggested change
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

@Adr1an04 Adr1an04 merged commit 30c7a62 into main Jun 8, 2026
11 checks passed
@Adr1an04 Adr1an04 deleted the khixSiteFix branch June 8, 2026 02:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Khix temp site and bloom bug fixes

4 participants