feat/added-Librarian_Dewey_Decimal_Card_Catalog#4389
Conversation
|
Someone is attempting to deploy a commit to the Anurag Mishra's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
CodeAnt AI is reviewing your PR. |
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
|
Warning Review limit reached
Next review available in: 56 seconds Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. 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: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
✨ Finishing Touches🧪 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 |
codeant-ai
Bot
added
the
size:XXL
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| (entries) => entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); }), | ||
| { rootMargin: '-30% 0px -60% 0px', threshold: 0 } | ||
| ); |
There was a problem hiding this comment.
Suggestion: The active-section observer sets state for every intersecting entry in a single callback, so when multiple sections intersect the final active tab depends on non-deterministic entry order and can highlight the wrong section. Compute one deterministic winner (e.g. highest intersection ratio or closest to viewport top) before calling setActive once. [logic error]
Severity Level: Major ⚠️
- ⚠️ Catalog navigation highlights can mismatch visible section.
- ⚠️ Mobile FAB may show wrong Dewey call number.
- ⚠️ User experience feels jittery when scrolling between sections.Steps of Reproduction ✅
1. The Librarian template defines `useActiveSection` in
`frontend/src/components/portfolio/templates/Librarian_Dewey_Decimal_Card_Catalog/index.jsx:108-120`,
creating an `IntersectionObserver` over sections
`['hero','about','skills','projects','experience','contact']` (`index.jsx:110-112`).
2. `LibraryNav` calls `useActiveSection()` to drive the active tab state
(`index.jsx:625-630`) and renders right-side navigation tabs and the mobile FAB using the
`active` id (`index.jsx:632-667).
3. When the user scrolls so that two sections overlap the viewport (e.g. the boundary
where `#about` and `#skills` are both partially visible), the observer callback receives
multiple entries. The callback implementation `entries.forEach((e) => { if
(e.isIntersecting) setActive(e.target.id); })` (`index.jsx:112-114) calls `setActive` once
per intersecting entry.
4. Because React state is set for each intersecting entry and the final `active` section
depends on the last entry in the `entries` array (whose order is
implementation-dependent), the highlighted tab in `LibraryNav` and the mobile FAB can
intermittently show `skills` when the viewport is mostly over `about`, or vice versa,
causing unstable navigation highlighting during slow scrolling.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/portfolio/templates/Librarian_Dewey_Decimal_Card_Catalog/index.jsx
**Line:** 112:114
**Comment:**
*Logic Error: The active-section observer sets state for every intersecting entry in a single callback, so when multiple sections intersect the final active tab depends on non-deterministic entry order and can highlight the wrong section. Compute one deterministic winner (e.g. highest intersection ratio or closest to viewport top) before calling `setActive` once.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| position: absolute; font-family: 'Courier Prime', 'Courier New', monospace; | ||
| font-size: 72px; font-weight: 700; color: #B8870B; opacity: var(--op, 0.04); | ||
| letter-spacing: -2px; user-select: none; |
There was a problem hiding this comment.
Suggestion: The skill bar width assumes skill.level is numeric, but portfolio data in preview flow commonly provides text levels (e.g. "Expert"), which produces invalid CSS widths like Expert% and broken progress bars. Use a numeric source (such as skill.rating) or normalize string levels to numbers before rendering. [type error]
Severity Level: Major ⚠️
- ❌ Preview skill bars render empty or with invalid widths.
- ⚠️ Dewey template preview misrepresents skill proficiency levels.
- ⚠️ AI-builder iframe previews show broken skills visualization.Steps of Reproduction ✅
1. Open the template preview route `/preview/Librarian_Dewey_Decimal_Card_Catalog` defined
in `frontend/src/App.jsx:140-143`, which renders `TemplatePreviewOnly` for the given
`templateId`.
2. Observe `TemplatePreviewOnly`'s `FALLBACK_PORTFOLIO.skills` array in
`frontend/src/pages/TemplatePreviewOnly.jsx:31-39`, where each skill has a string `level`
(e.g. "Expert") and numeric `rating`.
3. Note that `TemplatePreviewOnly` wraps the template in `PortfolioProvider`
(`TemplatePreviewOnly.jsx:27-35`), and `PortfolioProvider` normalizes data via
`normalizePortfolioData` in `frontend/src/context/PortfolioContext.jsx:9-61`. In the
skills branch (`PortfolioContext.jsx:21-31`), object skills are passed through unchanged,
so `skill.level` remains a string like "Expert" in `portfolioData.skills`.
4. In the Librarian template, `Skills` receives `skills={data.skills}`
(`index.jsx:216-227`) and renders each entry with `SkillBar` (`index.jsx:181-189).
`SkillBar` sets the bar width to ``${skill.level??75}%`` and label to
`{skill.level??75}%`. With the preview data, this produces widths like `Expert%` which are
invalid CSS, resulting in empty/incorrect progress bars and labels such as "Expert%"
instead of a numeric percentage in the preview UI.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/portfolio/templates/Librarian_Dewey_Decimal_Card_Catalog/index.jsx
**Line:** 186:188
**Comment:**
*Type Error: The skill bar width assumes `skill.level` is numeric, but portfolio data in preview flow commonly provides text levels (e.g. "Expert"), which produces invalid CSS widths like `Expert%` and broken progress bars. Use a numeric source (such as `skill.rating`) or normalize string levels to numbers before rendering.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| {project.liveUrl && <a href={project.liveUrl} target="_blank" rel="noreferrer" style={{ fontFamily: "'Courier Prime',monospace", fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: C.accent, textDecoration: 'none', borderBottom: `1px solid ${C.accent}`, paddingBottom: 1 }} onMouseEnter={e=>e.currentTarget.style.color=C.accentLight} onMouseLeave={e=>e.currentTarget.style.color=C.accent}>View Archive →</a>} | ||
| {project.githubUrl && <a href={project.githubUrl} target="_blank" rel="noreferrer" style={{ fontFamily: "'Courier Prime',monospace", fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: C.inkLight, textDecoration: 'none', borderBottom: `1px solid ${C.border}`, paddingBottom: 1 }} onMouseEnter={e=>e.currentTarget.style.color=C.brass} onMouseLeave={e=>e.currentTarget.style.color=C.inkLight}>Source Code →</a>} |
There was a problem hiding this comment.
Suggestion: User-controlled URLs are rendered directly into anchor href values, which allows javascript: links to execute script when clicked. Sanitize/validate URLs to allow only safe protocols (e.g. https:, http:, mailto:) before assigning them to href. [security]
Severity Level: Critical 🚨
- ❌ Preview links can execute arbitrary javascript: payloads on click.
- ⚠️ Shared preview iframes could expose other viewers to XSS.
- ⚠️ Inconsistent with backend URL validation for deployed portfolios.Steps of Reproduction ✅
1. Navigate to the public preview route `/preview/Librarian_Dewey_Decimal_Card_Catalog`
(`frontend/src/App.jsx:140-143`), which loads `TemplatePreviewOnly` and the Librarian
template.
2. In the portfolio builder / AI editor flow, update project links so that
`portfolioData.projects[0].liveUrl` or `.githubUrl` becomes a `javascript:` URL (e.g.
`javascript:alert(1)`); this draft state is persisted to `localStorage.ai_portfolio_draft`
and read back in `TemplatePreviewOnly` (`TemplatePreviewOnly.jsx:170-188`), then merged
into `portfolioData.projects`.
3. `TemplatePreviewOnly` wraps the template with `PortfolioProvider
portfolioData={portfolioData}` (`TemplatePreviewOnly.jsx:27-35). `normalizePortfolioData`
in `frontend/src/context/PortfolioContext.jsx:33-41` preserves arbitrary `liveUrl` and
`githubUrl` fields on projects while normalizing titles/description/techStack; no URL
sanitization is applied here.
4. The Librarian template’s `Projects` section (`index.jsx:972-979`) passes
`data.projects` into `ProjectCard`, which renders anchors with `href={project.liveUrl}`
and `href={project.githubUrl}` (`index.jsx:241-264, 962-963) without protocol checks.
Clicking "View Archive →" or "Source Code →" executes the `javascript:` payload in the
browser because React passes the string directly to the DOM `href`, enabling script URL
injection on the preview page.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/portfolio/templates/Librarian_Dewey_Decimal_Card_Catalog/index.jsx
**Line:** 962:963
**Comment:**
*Security: User-controlled URLs are rendered directly into anchor `href` values, which allows `javascript:` links to execute script when clicked. Sanitize/validate URLs to allow only safe protocols (e.g. `https:`, `http:`, `mailto:`) before assigning them to `href`.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
User description
closes #3204
#Description
Implemented the Librarian Dewey Decimal Card Catalog portfolio template for the portfolio builder.
This template transforms the portfolio into an interactive digital library archive inspired by traditional Dewey Decimal card catalogs, archival record systems, and library indexing workflows. The design presents portfolio information as classified catalog records, archive cards, and organized knowledge collections while maintaining full compatibility with the portfolio builder ecosystem.
#Changes Made
1.Template Implementation
Added new template:
frontend/src/components/portfolio/templates/Librarian_Dewey_Decimal_Card_Catalog
Followed the existing portfolio template architecture and conventions.
Ensured compatibility with the portfolio builder system.
PortfolioContext Integration
2.Strictly consumes data through the global PortfolioContext.
Uses the existing dummyData structure.
No hardcoded portfolio content.
No local JSON files or custom data sources.
Design Features
3.Dewey Decimal inspired classification system.
Library card catalog themed interface.
Archival record styling and layouts.
Catalog drawer inspired visual hierarchy.
Classification labels and metadata presentation.
Consistent library-inspired design language across all sections.
Animations & Interactions
4.Library drawer opening animations.
Catalog card reveal transitions.
Archival record entry animations.
Interactive card hover effects.
Classification label animations.
Smooth scroll-triggered section reveals.
Framer Motion powered interactions.
#Sections Included
Hero Section
About Section
Skills Section
Projects Section
Experience Section
Education Section
Achievements Section
Contact Section
Responsive Design
Screen.Recording.2026-07-09.at.5.45.38.PM.mov
Screen.Recording.2026-07-09.at.5.45.38.PM.mov
CodeAnt-AI Description
Add a new library card-catalog portfolio template
What Changed
Impact
✅ New portfolio style for users who want a library-themed showcase✅ Smoother section navigation on desktop and mobile✅ Clearer template browsing with a visible preview entry💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.