Fix/readme images and hydration#3
Merged
Merged
Conversation
- Add default_branch field to GitHubRepository interface - Register raw.githubusercontent.com in images.remotePatterns
rehype-raw allows react-markdown to parse and render raw HTML tags found in GitHub READMEs (e.g. <img>, <p align="center">).
Add rehype-raw plugin to parse raw HTML in markdown and a custom img component override that resolves relative image src paths to absolute raw.githubusercontent.com URLs using the repo's default branch.
Replace undefined locale with 'en-US' in toLocaleDateString calls across ViewRepo, ViewUser, and ViewSearch to ensure server and client render identical date strings.
…match Base UI's ButtonPrimitive strips the native disabled attribute during SSR but adds it on the client, causing a hydration mismatch. Using a native <button> element renders disabled consistently across server and client.
Missed in the previous hydration fix pass — the commit timeline date also needs an explicit locale to avoid SSR/CSR mismatch.
- Bump version badge to v0.3.2 in README - Add rehype-raw to the markdown stack entry - Fix env var name from NEXT_PUBLIC_GITHUB_TOKEN to GITHUB_TOKEN - Add version bump instructions to AGENTS.md
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughAdds ChangesREADME Image Rendering, Locale Fixes, and v0.3.2 Release
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/ViewRepo.tsx (1)
74-86:⚠️ Potential issue | 🟠 Major | ⚡ Quick winPin the timezone too, not just the locale.
These still use the server/client default timezone, so SSR in UTC and hydration in a user timezone can produce different dates/times. Add a fixed
timeZoneto each formatter used during render.🐛 Proposed fix
const createdDate = new Date(activeRepo.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', - day: 'numeric' + day: 'numeric', + timeZone: 'UTC' }); const pushedDate = new Date(activeRepo.pushed_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', - minute: '2-digit' + minute: '2-digit', + timeZone: 'UTC' });const commitDate = new Date(item.commit.author.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', - minute: '2-digit' + minute: '2-digit', + timeZone: 'UTC' });Also applies to: 272-277
🤖 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 `@src/components/ViewRepo.tsx` around lines 74 - 86, The toLocaleDateString() calls for createdDate and pushedDate formatting are missing a fixed timeZone option, which can cause date/time mismatches between server-side rendering and client-side hydration. Add a timeZone property (such as 'UTC') to the options object in both the createdDate and pushedDate formatters, and also apply the same fix to the similar date formatting code mentioned at lines 272-277 to ensure consistent timezone handling across all renders.
🤖 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 `@README.md`:
- Line 35: Update the Node.js version requirement in README.md at line 35 from
"Node.js 20+" to "Node.js >=22.0.0" to align with the actual minimum version
requirement that is documented in AGENTS.md (line 50) and enforced via the
engines field in package.json. This will eliminate the cross-file inconsistency
and ensure users understand the correct minimum Node.js version needed.
In `@src/components/ViewRepo.tsx`:
- Line 21: Add the `rehype-sanitize` plugin to protect against XSS
vulnerabilities when rendering untrusted user content like activeRepoReadme.
Import rehype-sanitize at the top of the ViewRepo.tsx file alongside the
existing rehypeRaw import, then add rehype-sanitize to the rehypePlugins array
in the markdown rendering configuration (around lines 240-243) to sanitize any
HTML produced by rehypeRaw before it reaches the DOM. Finally, run npm install
rehype-sanitize to add the dependency to your project.
In `@src/components/ViewSearch.tsx`:
- Around line 109-119: The submit button in ViewSearch.tsx that displays only an
icon (either the Send icon or loading spinner) lacks accessible labeling for
screen readers. Add an aria-label attribute with a descriptive action name (such
as "Search") to the button element, and optionally add aria-busy={loading} to
indicate the loading state to assistive technologies. These attributes should be
added directly to the button element alongside the existing type, disabled, and
className attributes.
---
Outside diff comments:
In `@src/components/ViewRepo.tsx`:
- Around line 74-86: The toLocaleDateString() calls for createdDate and
pushedDate formatting are missing a fixed timeZone option, which can cause
date/time mismatches between server-side rendering and client-side hydration.
Add a timeZone property (such as 'UTC') to the options object in both the
createdDate and pushedDate formatters, and also apply the same fix to the
similar date formatting code mentioned at lines 272-277 to ensure consistent
timezone handling across all renders.
🪄 Autofix (Beta)
✅ Autofix completed
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 80ee9010-7776-4c69-bbc0-6cc8993c5055
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (8)
AGENTS.mdREADME.mdnext.config.tspackage.jsonsrc/components/ViewRepo.tsxsrc/components/ViewSearch.tsxsrc/components/ViewUser.tsxsrc/lib/github.ts
Contributor
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. The branch was updated while autofix was in progress. Please try again. |
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Contributor
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. Fixes Applied SuccessfullyFixed 3 file(s) based on 1 unresolved review comment. Files modified:
Commit: The changes have been pushed to the Time taken: |
Fixed 3 file(s) based on 1 unresolved review comment. Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
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.
Fixes two issues: README images not rendering on the repository dashboard, and React hydration mismatches causing console errors.
Changes
README image rendering
Hydration error fixes
Documentation
Summary by CodeRabbit
en-US)rehype-raw, raised Node to >=22.0.0)GITHUB_TOKENAGENTS.md