feat: add Minecraft-style fonts and apply site-wide - #74
Conversation
- register Minecraftia and Minecraft Seven @font-face rules - add font-minecraftia/font-mojangles utilities - apply new fonts to brand, headings, and labels - align brand text with leading-none and gap spacing
|
@Coder-soft is attempting to deploy a commit to the yamura3's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Review limit reached
Next review available in: 36 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe PR adds Minecraft font definitions and utility classes. It applies Minecraft typography to several headings and nametag text. It updates branding spacing, utilities page layout, and the default background pattern spacing. ChangesMinecraft UI styling
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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 `@src/components/generators/MinecraftNametagGenerator.tsx`:
- Line 63: Update the export flow in MinecraftNametagGenerator so the Minecraft
Seven font is loaded before invoking html2canvas. Await document.fonts.load for
the 28px “Minecraft Seven” font using playerName, or await document.fonts.ready,
immediately before the capture call while preserving the existing nametag
rendering behavior.
In `@src/index.css`:
- Around line 5-8: Update the Minecraftia font-family declarations in the
`@font-face` block and the corresponding declaration around line 185 by removing
the quotes from the single-token family name, while leaving the font source and
other styling unchanged.
- Around line 5-14: Update the `@font-face` declarations for Minecraftia and
Minecraft Seven to use immutable commit-pinned URLs or self-hosted in-repository
font assets instead of the mutable raw.githubusercontent.com main-branch
sources; remove the declarations if neither guarantee is available, while
preserving valid font loading and fallback behavior.
🪄 Autofix
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: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 111562fc-f630-4f3c-87df-2e4349d9b70f
📒 Files selected for processing (9)
src/components/Footer.tsxsrc/components/Navbar.tsxsrc/components/generators/MinecraftNametagGenerator.tsxsrc/index.csssrc/pages/BackgroundGenerator.tsxsrc/pages/Community.tsxsrc/pages/PlayerRenderer.tsxsrc/pages/Utilities.tsxsrc/pages/YouTubeDownloader.tsx
Greptile SummaryThis update adds Minecraft-style typography across branding, headings, labels, and nametag rendering. The font URLs are pinned to an immutable commit and the interface remains usable with fallback fonts if those requests fail. One user-visible regression remains: the Background Generator now starts with seamless tiles instead of the previously separated tile layout. Confidence Score: 4/5The Background Generator’s first-use output no longer preserves the expected gap between repeated texture tiles. One verified non-security defect remains in the default background-generation behavior. Files Needing Attention: src/pages/BackgroundGenerator.tsx
 T-Rex LogsWhat T-Rex did
Reviews (2): Last reviewed commit: "fix: wait for Minecraft fonts before PNG..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| const [color, setColor] = useState("#9b87f5"); | ||
| const [size, setSize] = useState("1920x1080"); | ||
| const [spacing, setSpacing] = useState([10]); | ||
| const [spacing, setSpacing] = useState([0]); |
There was a problem hiding this comment.
New backgrounds now initialize with zero spacing rather than the previous 10px gap. The generation path passes this value directly into the tile step, so both the preview and downloaded image default to edge-to-edge texture tiling. Restore [10] unless this visible generator behavior change is intentional and documented.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Artifacts
Focused background spacing verification script
- This executable script loads the base or current component source and exercises its tile-position calculation, showing whether the initialized spacing reaches generation.
Base version background spacing execution output
- Executed `node trex-artifacts/background-spacing-check.mjs before` in `/home/user/repo` with exit code 0; it shows a 10px initialized gap and 110px tile step.
PR version background spacing execution output
- Executed `node trex-artifacts/background-spacing-check.mjs after` in `/home/user/repo` with exit code 0; it shows a 0px initialized gap and 100px edge-to-edge tile step.
| @font-face { | ||
| font-family: 'Minecraftia'; | ||
| src: url('https://raw.githubusercontent.com/Yxmura/resources_renderdragon/main/fonts/minecraftia.ttf') format('truetype'); | ||
| font-display: swap; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: 'Minecraft Seven'; | ||
| src: url('https://raw.githubusercontent.com/Yxmura/resources_renderdragon/main/fonts/minecraft.ttf') format('truetype'); | ||
| font-display: swap; | ||
| } |
There was a problem hiding this comment.
The site-wide font faces load from raw.githubusercontent.com/.../main/..., which is both an externally available runtime dependency and a mutable branch path. In a rendered browser run, blocking only those two requests made the custom faces unavailable and changed the navbar brand width from 230px to 188px and the nametag width from 221px to 236px as the declared monospace fallback took over. Bundle the licensed fonts with the application, or serve immutable versioned assets from a controlled origin.
Artifacts
▶ Normal custom-font rendering before remote font requests are blocked
- Chromium recording of the normal `/utilities` then `/generators` route flow with the branch-hosted fonts available, establishing the intended branded rendering.
Normal Minecraft nametag rendering with remote fonts available
- Poster frame from the normal Chromium recording after entering CreativeDragon in the Minecraft Nametag generator, showing the available-font condition.
▶ Fallback rendering after the two remote font requests are blocked
- Chromium recording of the same route flow with the exact raw GitHub font requests aborted, showing the unavailable-font condition and its rendered impact.
Minecraft nametag rendering after remote fonts are blocked
- Poster frame from the blocked-request Chromium recording after entering CreativeDragon, showing the changed fallback-rendered condition.
Observed Chromium normal-versus-blocked font test output
- Actual successful command output records HTTP 200 responses, the exact intercepted URLs, font availability checks, and normal-versus-blocked dimensions; it establishes the concrete fallback impact.
Playwright Chromium font fallback review script source
- Full source of the review-authored script that loads the two real routes, records videos, blocks only the exact font URLs, and captures browser font and layout observations.
- Full source of the review-authored script that loads the two real routes, records videos, blocks only the exact font URLs, and captures browser font and layout observations.
- Actual successful command output records HTTP 200 responses, the exact intercepted URLs, font availability checks, and normal-versus-blocked dimensions; it establishes the concrete fallback impact.
- Chromium recording of the normal `/utilities` then `/generators` route flow with the branch-hosted fonts available, establishing the intended branded rendering.
Normal Minecraft nametag rendering with remote fonts available
- Poster frame from the normal Chromium recording after entering CreativeDragon in the Minecraft Nametag generator, showing the available-font condition.
- Chromium recording of the same route flow with the exact raw GitHub font requests aborted, showing the unavailable-font condition and its rendered impact.
Minecraft nametag rendering after remote fonts are blocked
- Poster frame from the blocked-request Chromium recording after entering CreativeDragon, showing the changed fallback-rendered condition.
- Load Minecraft Seven font in exportAsPNG before html2canvas capture - Pin font asset URLs to a commit hash to prevent future breakage - Remove quotes from font-family declarations
| const [color, setColor] = useState("#9b87f5"); | ||
| const [size, setSize] = useState("1920x1080"); | ||
| const [spacing, setSpacing] = useState([10]); | ||
| const [spacing, setSpacing] = useState([0]); |
There was a problem hiding this comment.
New backgrounds initialize at 0px spacing, replacing the prior 10px default. The generator passes this value directly into tile placement, so first-use previews and downloads are seamless rather than retaining the expected gap. Restore the 10px default unless edge-to-edge tiling is the intended product behavior.
Artifacts
▶ Pre-PR Background Generator recording
- Chromium recorded the parent version generating the shared fixture with its displayed 10px default spacing, confirming the expected separated-tile baseline.
Pre-PR Background Generator poster frame
- The parent-version poster frame shows the 10px spacing control and generated preview, confirming the original default separation.
- The executed capture output records the parent URL, 10px spacing label, and generated preview count of one, confirming successful baseline behavior.
▶ Current Background Generator recording
- Chromium recorded current code generating the same fixture with its displayed 0px default spacing, confirming the tile separation regression.
Current Background Generator poster frame
- The current-version poster frame shows the 0px spacing control and generated preview, confirming the initial tile gap is removed.
Current browser capture output
- The executed capture output records the current URL, 0px spacing label, and generated preview count of one, confirming the changed runtime default.
Executed browser comparison script source
- The Playwright source uploads the shared fixture and captures spacing labels and generated previews for both revisions, confirming the comparison used the same interaction scope.
2 participants
Summary by CodeRabbit
Style
Bug Fixes