fix(certifications): text and URLs don't overflow the page in all templates #2275 #2323
Conversation
📝 WalkthroughWalkthroughThe updates introduce specialized rendering for certification links across multiple resume templates by adding an Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant LinkedEntity
participant Section
participant Certifications
User->UI: View Certifications section
UI->Certifications: Render certification item
Certifications->LinkedEntity: Render with isCertification=true
alt isCertification and URL valid
LinkedEntity->UI: Display issuer name + "(View Certificate)" link
else
LinkedEntity->UI: Display issuer name only
end
sequenceDiagram
participant User
participant UI
participant FileInput
participant CropModal
participant UploadService
participant ResumeStore
User->FileInput: Select image file
FileInput->UI: Validate file type/size
alt Valid image
UI->CropModal: Open crop modal with preview
User->CropModal: Adjust and confirm crop
CropModal->UI: Get cropped image data
UI->UploadService: Upload cropped image
UploadService->ResumeStore: Update picture URL
else
UI->User: Show error
end
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (2)
apps/server/project.json (1)
30-32: Document rationale for experimental flag
The--experimental-specifier-resolution=nodeflag can alter module loading semantics. Consider adding a comment or updating the README to explain why this flag is required and when it can be removed once Node.js stabilizes this feature.apps/client/src/pages/builder/sidebars/left/sections/picture/section.tsx (1)
318-324: Consider fixing prop sorting for consistencyStatic analysis indicates props should be sorted according to your project's ESLint rules.
<ReactCrop crop={crop} - aspect={1} circularCrop + aspect={1} className="max-w-full mx-auto" onChange={(newCrop) => setCrop(newCrop)} >And for the Button:
-<Button onClick={onCropComplete} disabled={isLoading}> +<Button disabled={isLoading} onClick={onCropComplete}>Also applies to: 341-341
🧰 Tools
🪛 ESLint
[error] 321-321: Shorthand props must be listed before all other props
(react/jsx-sort-props)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
libs/hooks/package-lock.jsonis excluded by!**/package-lock.jsonlibs/schema/package-lock.jsonis excluded by!**/package-lock.jsonlibs/ui/package-lock.jsonis excluded by!**/package-lock.jsonlibs/utils/package-lock.jsonis excluded by!**/package-lock.jsonpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (19)
apps/artboard/src/templates/azurill.tsx(5 hunks)apps/artboard/src/templates/bronzor.tsx(5 hunks)apps/artboard/src/templates/chikorita.tsx(5 hunks)apps/artboard/src/templates/ditto.tsx(5 hunks)apps/artboard/src/templates/gengar.tsx(5 hunks)apps/artboard/src/templates/glalie.tsx(5 hunks)apps/artboard/src/templates/kakuna.tsx(5 hunks)apps/artboard/src/templates/leafish.tsx(5 hunks)apps/artboard/src/templates/nosepass.tsx(6 hunks)apps/artboard/src/templates/onyx.tsx(5 hunks)apps/artboard/src/templates/pikachu.tsx(5 hunks)apps/artboard/src/templates/rhyhorn.tsx(5 hunks)apps/client/src/pages/builder/sidebars/left/sections/picture/section.tsx(3 hunks)apps/server/project.json(1 hunks)libs/hooks/package.json(1 hunks)libs/schema/package.json(1 hunks)libs/ui/package.json(1 hunks)libs/utils/package.json(1 hunks)package.json(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (12)
apps/artboard/src/templates/gengar.tsx (1)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)
apps/artboard/src/templates/ditto.tsx (1)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)
apps/artboard/src/templates/nosepass.tsx (1)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)
apps/artboard/src/templates/onyx.tsx (1)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)
apps/artboard/src/templates/azurill.tsx (2)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)libs/utils/src/namespaces/style.ts (1)
cn(14-14)
apps/artboard/src/templates/bronzor.tsx (2)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)libs/utils/src/namespaces/style.ts (1)
cn(14-14)
apps/artboard/src/templates/rhyhorn.tsx (2)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)libs/utils/src/namespaces/style.ts (1)
cn(14-14)
apps/artboard/src/templates/kakuna.tsx (2)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)libs/utils/src/namespaces/style.ts (1)
cn(14-14)
apps/artboard/src/templates/leafish.tsx (2)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)libs/utils/src/namespaces/style.ts (1)
cn(14-14)
apps/artboard/src/templates/glalie.tsx (2)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)libs/utils/src/namespaces/style.ts (1)
cn(14-14)
apps/artboard/src/templates/pikachu.tsx (2)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)libs/utils/src/namespaces/style.ts (1)
cn(14-14)
apps/artboard/src/templates/chikorita.tsx (2)
libs/utils/src/namespaces/string.ts (1)
isUrl(15-21)libs/utils/src/namespaces/style.ts (1)
cn(14-14)
🪛 ESLint
apps/client/src/pages/builder/sidebars/left/sections/picture/section.tsx
[error] 321-321: Shorthand props must be listed before all other props
(react/jsx-sort-props)
[error] 341-341: Callbacks must be listed after all other props
(react/jsx-sort-props)
🔇 Additional comments (63)
libs/utils/package.json (1)
12-12: Self-referential dependency added
The local"@reactive-resume/utils": "file:"entry aligns with other monorepo packages and enables internal linking during development and build.libs/ui/package.json (1)
16-18: Consistent self-dependency entry
Adding"@reactive-resume/ui": "file:"standardizes dependency declarations across the monorepo and supports local package resolution.package.json (2)
175-175: Review slugify version downgrade
The version of"@sindresorhus/slugify"was rolled back from^2.2.1to^1.1.2, which may include breaking API changes. Please verify that all existing slugify calls remain compatible with v1.x.
232-232: New image cropping dependency
Introducing"react-image-crop": "^11.0.7"supports the client-side image cropping feature. Ensure the import and tree-shaking are configured correctly in production builds.libs/schema/package.json (1)
19-21: Self-referential dependency addition
The"@reactive-resume/schema": "file:"entry follows the pattern of other library manifests, enabling local linkage without external registry publishing.apps/artboard/src/templates/leafish.tsx (1)
154-196: Well-implemented certification link handling!The
LinkedEntitycomponent changes effectively address the PR objective by providing specialized rendering for certification links. The three rendering paths are clearly defined and the "View Certificate" label provides a concise, user-friendly alternative to displaying full URLs.apps/artboard/src/templates/chikorita.tsx (6)
150-150: LGTM: Clean type definition enhancement.The addition of the optional
isCertificationprop follows TypeScript best practices and provides the necessary typing for the component enhancement.
210-210: LGTM: Proper section detection and link suppression.The certification section detection and conditional link suppression logic is correctly implemented and aligns with the PR objective of preventing duplicate links in the certifications section.
Also applies to: 232-234
365-370: LGTM: Correct certification flag implementation.The addition of
isCertification={true}properly enables the specialized rendering behavior for certification entries.
150-150: LGTM: Clean interface extensionThe addition of the optional
isCertificationprop toLinkedEntityPropsis a clean, backward-compatible interface extension that enables specialized rendering for certification links.
210-210: LGTM: Effective solution for preventing duplicate linksThe certification section detection and conditional link suppression effectively prevents duplicate or redundant links in the certifications section while maintaining separate links for other sections.
Also applies to: 232-234
365-370: LGTM: Enables certification-specific renderingThe addition of
isCertification={true}to theLinkedEntitycomponent in the certifications section correctly enables the specialized rendering behavior for certification links.apps/artboard/src/templates/onyx.tsx (7)
165-165: LGTM: Consistent type definition enhancement.The optional
isCertificationprop addition is correctly implemented and consistent with the pattern across templates.
168-196: LGTM: Clean and consistent certification link implementation.The conditional rendering logic is well-structured and uses consistent "View Certificate" text. The implementation properly handles all scenarios with appropriate security attributes.
219-219: LGTM: Consistent section detection and link suppression.The certification section detection and link suppression logic is correctly implemented and consistent with the pattern across templates.
Also applies to: 241-243
355-360: LGTM: Proper certification flag usage.The
isCertification={true}flag is correctly passed to enable specialized certification rendering.
165-165: LGTM: Specialized certification rendering with different priorityThe implementation correctly adds certification-specific rendering. Note that this template prioritizes the certification check before the
separateLinkscheck, ensuring certifications always use the specialized "(View Certificate)" format regardless of theseparateLinkssetting.Also applies to: 168-183
219-219: LGTM: Consistent duplicate link preventionThe certification section detection and conditional link suppression follows the same effective pattern used across templates to prevent duplicate links in the certifications section.
Also applies to: 241-243
355-360: LGTM: Activates certification-specific behaviorThe
isCertification={true}prop correctly enables the specialized certification rendering in the LinkedEntity component.apps/artboard/src/templates/rhyhorn.tsx (7)
146-146: LGTM: Consistent type enhancement.The
isCertificationprop addition follows the established pattern and is correctly implemented.
149-183: LGTM: Well-structured certification link handling.The implementation correctly handles all certification link scenarios with consistent "View Certificate" text and proper security attributes. The conditional logic is clear and follows the established pattern.
206-206: LGTM: Proper certification section handling.The section detection and link suppression logic is correctly implemented and consistent across templates.
Also applies to: 228-230
361-366: LGTM: Correct certification flag implementation.The certification flag is properly passed to enable specialized rendering behavior.
146-146: LGTM: Consistent certification rendering implementationThe LinkedEntity component correctly implements the certification-specific rendering logic, following the same pattern as the chikorita template with proper conditional flow and appropriate security attributes.
Also applies to: 149-182
206-206: LGTM: Effective duplicate link preventionThe certification section detection and conditional link suppression effectively prevents redundant links while maintaining the intended behavior for other sections.
Also applies to: 228-230
361-366: LGTM: Enables certification-specific renderingThe
isCertification={true}prop correctly activates the specialized certification link behavior in the LinkedEntity component.apps/artboard/src/templates/azurill.tsx (7)
154-154: LGTM: Consistent type definition.The
isCertificationprop addition is correctly implemented and follows the established pattern across all templates.
157-191: LGTM: Consistent and secure certification link implementation.The conditional rendering logic correctly handles all certification scenarios with consistent "View Certificate" text and appropriate security attributes (
rel="noopener noreferrer").
214-214: LGTM: Consistent section detection and link suppression.The certification section detection and conditional link suppression is correctly implemented and aligns with the pattern across all templates.
Also applies to: 264-264
363-368: LGTM: Proper certification flag usage.The
isCertification={true}flag is correctly passed to enable the specialized certification rendering behavior.
154-154: LGTM: Consistent certification rendering logicThe LinkedEntity component implementation follows the established pattern with proper conditional rendering for certifications and appropriate security attributes for external links.
Also applies to: 157-190
214-214: LGTM: Consistent duplicate link preventionThe certification section detection and conditional link suppression maintains consistency with other templates and effectively prevents duplicate links in the certifications section.
Also applies to: 264-264
363-368: LGTM: Activates certification-specific behaviorThe
isCertification={true}prop correctly enables the specialized certification rendering behavior in the LinkedEntity component.apps/artboard/src/templates/gengar.tsx (4)
152-152: LGTM: Clean prop addition for certification handlingThe optional
isCertificationprop is well-designed and maintains backward compatibility.
155-184: Excellent implementation of certification-specific renderingThe logic correctly handles different scenarios:
- Provides clear "(View Certificate)" text for certifications
- Maintains existing Link component behavior for non-certifications
- Includes proper security attributes (
rel="noopener noreferrer")- Uses descriptive link text for accessibility
208-208: Smart solution to prevent duplicate links in certificationsThe
isCertificationsSectionflag effectively prevents redundant separate links when theLinkedEntitycomponent already handles certification link display. This maintains clean UI without duplicate or conflicting links.Also applies to: 230-232
363-368: Correct activation of certification-specific renderingThe addition of
isCertification={true}properly enables the specialized rendering logic for certification links while maintaining all existing functionality.apps/artboard/src/templates/pikachu.tsx (3)
180-180: LGTM: Consistent prop additionThe optional
isCertificationprop addition is consistent with other templates.
240-240: LGTM: Consistent duplicate link preventionThe
isCertificationsSectionlogic correctly prevents duplicate links in the certifications section.Also applies to: 262-264
395-400: LGTM: Proper certification flag activationThe
isCertification={true}correctly enables the specialized rendering for certification items.apps/artboard/src/templates/nosepass.tsx (4)
149-149: LGTM: Consistent prop additionThe optional
isCertificationprop maintains consistency across templates.
152-181: Excellent clean implementation of certification renderingThis implementation has clear separation of concerns:
- Maintains original Link behavior when
!separateLinks- Provides specialized certification rendering when
isCertificationis true- No overlapping conditions that could cause rendering issues
- Proper security attributes and accessibility
204-204: LGTM: Comprehensive duplicate link preventionThe
isCertificationsSectionlogic is properly applied in both rendering paths (with and without dateKey) to prevent duplicate links consistently.Also applies to: 238-238, 276-276
383-388: LGTM: Proper certification activationThe
isCertification={true}correctly enables specialized rendering for certification items.apps/artboard/src/templates/ditto.tsx (4)
165-165: LGTM: Consistent prop additionThe optional
isCertificationprop maintains consistency across all templates.
168-197: Excellent implementation following best practicesThis implementation demonstrates clean separation of concerns:
- Clear conditional logic without overlapping cases
- Maintains existing Link component behavior for non-certifications
- Specialized certification rendering with descriptive text
- Proper security attributes (
rel="noopener noreferrer")- Good accessibility with clear link text
221-221: LGTM: Effective duplicate link preventionThe
isCertificationsSectionflag correctly prevents redundant separate links in the certifications section.Also applies to: 247-247
383-388: LGTM: Proper certification flag usageThe
isCertification={true}correctly activates the specialized rendering logic for certification items.apps/artboard/src/templates/bronzor.tsx (5)
145-145: LGTM! Well-typed optional prop addition.The new
isCertificationprop is properly typed as optional, ensuring backward compatibility while enabling the new certification-specific behavior.
148-182: Excellent implementation addressing certification link overflow.The three-case rendering logic effectively solves the URL overflow issue by:
- Using consistent "View Certificate" text instead of potentially long URLs
- Providing clear, readable link presentation for certifications
- Maintaining proper accessibility with security attributes
The implementation is clean, well-structured, and maintains backward compatibility.
205-206: Smart section detection for preventing duplicate links.The
isCertificationsSectionflag effectively identifies when to suppress separate link rendering, preventing UI clutter and potential confusion.
229-229: Proper conditional logic to prevent duplicate certification links.The condition
!isCertificationsSection &&ensures that separate links are not rendered in the certifications section, where the specialized LinkedEntity rendering already handles URLs appropriately.
360-365: Perfect integration enabling certification-specific rendering.The addition of
isCertification={true}activates the specialized link handling for certification items while preserving all existing functionality and styling.apps/artboard/src/templates/kakuna.tsx (5)
164-165: Consistent prop addition across templates.The
isCertificationprop is implemented identically to other templates, ensuring consistent behavior across all resume templates.
167-201: Consistent LinkedEntity implementation.The three-case rendering logic matches the implementation in other templates, providing uniform certification link handling across all resume designs.
224-225: Consistent section detection logic.The
isCertificationsSectiondetection maintains consistency with other template implementations.
261-261: Consistent link suppression logic.The conditional logic for preventing duplicate links matches the pattern established in other templates.
339-344: Consistent certification component integration.The
isCertification={true}prop is passed consistently with other template implementations.apps/artboard/src/templates/glalie.tsx (5)
160-161: Consistent prop addition across all templates.The
isCertificationprop implementation matches the other templates perfectly, ensuring uniform behavior.
163-197: Consistent LinkedEntity implementation across templates.The three-case rendering logic is implemented identically to other templates, providing consistent certification link handling.
220-221: Consistent section detection implementation.The
isCertificationsSectiondetection maintains the established pattern across templates.
244-246: Consistent link suppression logic with improved formatting.The conditional logic prevents duplicate links consistently with other templates. The multi-line formatting enhances readability while maintaining identical functionality.
377-382: Consistent certification component integration.The
isCertification={true}prop integration matches the pattern established in other templates.
| "dependencies": { | ||
| "@reactive-resume/hooks": "file:" |
There was a problem hiding this comment.
Remove the self-referential dependency
A package cannot declare itself as a dependency. This creates a circular dependency that will cause issues during package installation and build processes.
Remove the self-referential dependency:
- },
- "dependencies": {
- "@reactive-resume/hooks": "file:"
}📝 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.
| "dependencies": { | |
| "@reactive-resume/hooks": "file:" | |
| } |
🤖 Prompt for AI Agents
In libs/hooks/package.json at lines 16 to 17, remove the dependency entry
"@reactive-resume/hooks": "file:" because a package cannot depend on itself.
This self-referential dependency causes circular dependency issues during
installation and build. Simply delete this line from the dependencies section to
fix the problem.
| ctx.fillStyle = t`rgba(0, 0, 0, 0)`; | ||
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
There was a problem hiding this comment.
Fix incorrect use of the translation function
The t function is for internationalization, not for creating template literals. Use a regular string for the fillStyle color value.
- ctx.fillStyle = t`rgba(0, 0, 0, 0)`;
+ ctx.fillStyle = "rgba(0, 0, 0, 0)";📝 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.
| ctx.fillStyle = t`rgba(0, 0, 0, 0)`; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.fillStyle = "rgba(0, 0, 0, 0)"; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
🤖 Prompt for AI Agents
In apps/client/src/pages/builder/sidebars/left/sections/picture/section.tsx at
lines 155-156, the fillStyle is incorrectly set using the translation function
`t` instead of a plain string. Replace the use of `t` with a regular string
literal for the rgba color value to correctly set the fillStyle without invoking
the translation function.
| const LinkedEntity = ({ name, url, separateLinks, className, isCertification }: LinkedEntityProps) => { | ||
| if (!separateLinks && isUrl(url.href)) { | ||
| return ( | ||
| <div className={cn("flex items-center gap-x-1.5", className)}> | ||
| <i className="ph ph-bold ph-globe text-primary" /> | ||
| <a | ||
| href={url.href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="hover:underline" | ||
| > | ||
| {isCertification ? "Certification URL" : (url.label || url.href)} | ||
| </a> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if (isCertification && isUrl(url.href)) { | ||
| return ( | ||
| <div className={cn("flex items-center gap-x-1.5", className)}> | ||
| <span>{name}</span> | ||
| <a | ||
| href={url.href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="ml-1.5 hover:underline" | ||
| > | ||
| (View Certificate) | ||
| </a> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return <div className={className}>{name}</div>; | ||
| }; |
There was a problem hiding this comment.
Fix inconsistent certification link text.
The implementation logic is sound, but there's an inconsistency in the link text. Line 164 displays "Certification URL" while other templates (onyx.tsx, rhyhorn.tsx, azurill.tsx) consistently use "View Certificate". This inconsistency could confuse users and harm the user experience.
Apply this diff to standardize the link text:
- {isCertification ? "Certification URL" : (url.label || url.href)}
+ {isCertification ? "View Certificate" : (url.label || url.href)}📝 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.
| const LinkedEntity = ({ name, url, separateLinks, className, isCertification }: LinkedEntityProps) => { | |
| if (!separateLinks && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <i className="ph ph-bold ph-globe text-primary" /> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="hover:underline" | |
| > | |
| {isCertification ? "Certification URL" : (url.label || url.href)} | |
| </a> | |
| </div> | |
| ); | |
| } | |
| if (isCertification && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <span>{name}</span> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="ml-1.5 hover:underline" | |
| > | |
| (View Certificate) | |
| </a> | |
| </div> | |
| ); | |
| } | |
| return <div className={className}>{name}</div>; | |
| }; | |
| const LinkedEntity = ({ name, url, separateLinks, className, isCertification }: LinkedEntityProps) => { | |
| if (!separateLinks && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <i className="ph ph-bold ph-globe text-primary" /> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="hover:underline" | |
| > | |
| {isCertification ? "View Certificate" : (url.label || url.href)} | |
| </a> | |
| </div> | |
| ); | |
| } | |
| if (isCertification && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <span>{name}</span> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="ml-1.5 hover:underline" | |
| > | |
| (View Certificate) | |
| </a> | |
| </div> | |
| ); | |
| } | |
| return <div className={className}>{name}</div>; | |
| }; |
🤖 Prompt for AI Agents
In apps/artboard/src/templates/chikorita.tsx between lines 153 and 187, the link
text for certification URLs is inconsistent; line 164 uses "Certification URL"
whereas other templates use "View Certificate". To fix this, change the text on
line 164 from "Certification URL" to "View Certificate" to standardize the user
experience across templates.
Fix text inconsistency in certification link
The logic implementation is sound, but there's a text inconsistency on line 164. While other templates use "View Certificate", this template uses "Certification URL".
Apply this diff to maintain consistency across templates:
- {isCertification ? "Certification URL" : (url.label || url.href)}
+ {isCertification ? "View Certificate" : (url.label || url.href)}📝 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.
| const LinkedEntity = ({ name, url, separateLinks, className, isCertification }: LinkedEntityProps) => { | |
| if (!separateLinks && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <i className="ph ph-bold ph-globe text-primary" /> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="hover:underline" | |
| > | |
| {isCertification ? "Certification URL" : (url.label || url.href)} | |
| </a> | |
| </div> | |
| ); | |
| } | |
| if (isCertification && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <span>{name}</span> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="ml-1.5 hover:underline" | |
| > | |
| (View Certificate) | |
| </a> | |
| </div> | |
| ); | |
| } | |
| return <div className={className}>{name}</div>; | |
| }; | |
| const LinkedEntity = ({ name, url, separateLinks, className, isCertification }: LinkedEntityProps) => { | |
| if (!separateLinks && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <i className="ph ph-bold ph-globe text-primary" /> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="hover:underline" | |
| > | |
| {isCertification ? "View Certificate" : (url.label || url.href)} | |
| </a> | |
| </div> | |
| ); | |
| } | |
| if (isCertification && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <span>{name}</span> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="ml-1.5 hover:underline" | |
| > | |
| (View Certificate) | |
| </a> | |
| </div> | |
| ); | |
| } | |
| return <div className={className}>{name}</div>; | |
| }; |
🤖 Prompt for AI Agents
In apps/artboard/src/templates/chikorita.tsx between lines 153 and 187, the text
for the certification link is inconsistent; it uses "Certification URL" instead
of the standard "View Certificate". Update the text inside the anchor tag in the
first conditional block from "Certification URL" to "View Certificate" to align
with other templates.
| const LinkedEntity = ({ name, url, separateLinks, className, isCertification }: LinkedEntityProps) => { | ||
| if (!separateLinks && isUrl(url.href)) { | ||
| return ( | ||
| <div className={cn("flex items-center gap-x-1.5", className)}> | ||
| <i className="ph ph-bold ph-globe text-primary group-[.summary]:text-background" /> | ||
| <a | ||
| href={url.href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="hover:underline" | ||
| > | ||
| {isCertification ? "View Certificate" : (url.label || url.href)} | ||
| </a> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if (isCertification && isUrl(url.href)) { | ||
| return ( | ||
| <div className={cn("flex items-center gap-x-1.5", className)}> | ||
| <span>{name}</span> | ||
| <a | ||
| href={url.href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="ml-1.5 hover:underline" | ||
| > | ||
| (View Certificate) | ||
| </a> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return <div className={className}>{name}</div>; |
There was a problem hiding this comment.
Fix logic issue with overlapping conditions
There's a logic problem when both !separateLinks and isCertification are true. The first condition will execute and show only "View Certificate" text without the issuer name, which may not be the intended behavior.
Consider refactoring the logic to handle certification cases explicitly first:
const LinkedEntity = ({ name, url, separateLinks, className, isCertification }: LinkedEntityProps) => {
+ if (isCertification && isUrl(url.href)) {
+ return (
+ <div className={cn("flex items-center gap-x-1.5", className)}>
+ <span>{name}</span>
+ <a
+ href={url.href}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="ml-1.5 hover:underline"
+ >
+ (View Certificate)
+ </a>
+ </div>
+ );
+ }
+
if (!separateLinks && isUrl(url.href)) {
return (
<div className={cn("flex items-center gap-x-1.5", className)}>
<i className="ph ph-bold ph-globe text-primary group-[.summary]:text-background" />
<a href={url.href} target="_blank" rel="noopener noreferrer" className="hover:underline">
- {isCertification ? "View Certificate" : (url.label || url.href)}
+ {url.label || url.href}
</a>
</div>
);
}
- if (isCertification && isUrl(url.href)) {
- return (
- <div className={cn("flex items-center gap-x-1.5", className)}>
- <span>{name}</span>
- <a
- href={url.href}
- target="_blank"
- rel="noopener noreferrer"
- className="ml-1.5 hover:underline"
- >
- (View Certificate)
- </a>
- </div>
- );
- }
return <div className={className}>{name}</div>;
};📝 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.
| const LinkedEntity = ({ name, url, separateLinks, className, isCertification }: LinkedEntityProps) => { | |
| if (!separateLinks && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <i className="ph ph-bold ph-globe text-primary group-[.summary]:text-background" /> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="hover:underline" | |
| > | |
| {isCertification ? "View Certificate" : (url.label || url.href)} | |
| </a> | |
| </div> | |
| ); | |
| } | |
| if (isCertification && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <span>{name}</span> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="ml-1.5 hover:underline" | |
| > | |
| (View Certificate) | |
| </a> | |
| </div> | |
| ); | |
| } | |
| return <div className={className}>{name}</div>; | |
| const LinkedEntity = ({ name, url, separateLinks, className, isCertification }: LinkedEntityProps) => { | |
| // Handle certification links first, so we always show issuer name + "(View Certificate)" | |
| if (isCertification && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <span>{name}</span> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="ml-1.5 hover:underline" | |
| > | |
| (View Certificate) | |
| </a> | |
| </div> | |
| ); | |
| } | |
| // Then handle normal external links (when separateLinks is false) | |
| if (!separateLinks && isUrl(url.href)) { | |
| return ( | |
| <div className={cn("flex items-center gap-x-1.5", className)}> | |
| <i className="ph ph-bold ph-globe text-primary group-[.summary]:text-background" /> | |
| <a | |
| href={url.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="hover:underline" | |
| > | |
| {url.label || url.href} | |
| </a> | |
| </div> | |
| ); | |
| } | |
| // Fallback: just show the name | |
| return <div className={className}>{name}</div>; | |
| }; |
🤖 Prompt for AI Agents
In apps/artboard/src/templates/pikachu.tsx around lines 183 to 216, the current
logic causes the first condition to execute when both !separateLinks and
isCertification are true, resulting in missing the issuer name display. To fix
this, reorder the conditions to check for isCertification and isUrl(url.href)
first, rendering the certification view with the issuer name and link, then
handle the !separateLinks case afterward. This ensures certification cases are
handled explicitly and correctly before the general link rendering.
Summary by CodeRabbit
New Features
Bug Fixes
Chores