Magnetize arrow to last word in external links#668
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
yamcodes
changed the title
WalkthroughReplaces the external-link visual indicator: CSS now uses a background-image SVG (light/dark stroke variants, padding, sizing) applied via Changes
Sequence Diagram(s)(omitted — change is styling + small component update; no multi-component sequential flow) Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used📓 Path-based instructions (5)**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Files:
**/*.tsx📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Files:
**/*.test.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Files:
apps/www/**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (apps/www/.cursor/rules/posthog-integration.mdc)
Files:
**/*.{test,integration.test}.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
🧠 Learnings (10)📚 Learning: 2025-12-12T13:20:01.954ZApplied to files:
📚 Learning: 2025-12-12T13:20:01.954ZApplied to files:
📚 Learning: 2025-12-12T13:20:01.954ZApplied to files:
📚 Learning: 2025-12-12T13:20:01.954ZApplied to files:
📚 Learning: 2025-12-12T13:20:01.954ZApplied to files:
📚 Learning: 2025-12-12T13:20:01.954ZApplied to files:
📚 Learning: 2025-12-12T13:20:01.954ZApplied to files:
📚 Learning: 2025-12-23T07:09:57.130ZApplied to files:
📚 Learning: 2025-12-23T07:09:57.130ZApplied to files:
📚 Learning: 2025-12-12T13:20:01.954ZApplied to files:
🧬 Code graph analysis (1)apps/www/components/ui/external-link.test.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
🔇 Additional comments (2)
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 |
yamcodes
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
apps/www/app/globals.css (1)
58-64: Dark mode inherits URL matching concerns.This rule has the same imprecise substring matching issue as the light mode variant (lines 44-56). Address the URL matching concern in both rules together.
🧹 Nitpick comments (1)
apps/www/app/globals.css (1)
149-149: Consider removing manual timestamp comment.Git already tracks file modification history. Manual timestamp comments add maintenance burden and can become stale.
🔎 Proposed change
-/* Last modified: Mon Dec 29 11:45:01 +05 2025 */To check the last modification time, use:
git log -1 --format="%ai" -- apps/www/app/globals.css
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/www/app/globals.cssapps/www/components/ui/external-link.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx}: Prefertypeoverinterfacefor type definitions in TypeScript
Use TypeScript 5.1+ features when appropriate
Leverageconsttype parameters for better inference in TypeScript
Use JSDoc comments for public APIs
Use tabs for indentation (configured in Biome)
Use double quotes for strings (configured in Biome)
Organize imports automatically (Biome handles this)
Avoid explicit types when TypeScript can infer them (noInferrableTypeserror)
Useas constwhere appropriate for immutable values (useAsConstAssertionerror)
Don't reassign function parameters (noParameterAssignerror)
Place default parameters last in function signatures (useDefaultParameterLasterror)
Always initialize enum values (useEnumInitializerserror)
Declare one variable per statement (useSingleVarDeclaratorerror)
Avoid unnecessary template literals (noUnusedTemplateLiteralerror)
PreferNumber.parseIntover globalparseInt(useNumberNamespaceerror)
Use kebab-case for TypeScript filenames (e.g.,create-env.ts)
Use camelCase for function names (e.g.,createEnv)
Use PascalCase for type names (e.g.,ArkEnvError)
Use UPPER_SNAKE_CASE for environment variables and constants
Include examples in JSDoc comments when helpful for public APIs
Document complex type logic with JSDoc comments
UseArkEnvErrorfor environment variable validation errors
Provide clear, actionable error messages that include the variable name and expected type
**/*.{ts,tsx}: UsecreateEnv(schema)function (or default import asarkenv) to create validated environment objects in TypeScript
Use built-in validators (host, port, url, email) from ArkEnv when available instead of custom ArkType schemas
Provide default values for optional environment variables using ArkType syntax (e.g., 'boolean = false')
Use ArkEnvError for environment variable errors instead of generic Error types
For environment schema definition, use ArkType string literal syntax for enumerated values (e.g., "'deve...
Files:
apps/www/components/ui/external-link.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Use self-closing JSX elements (
useSelfClosingElementserror)
Files:
apps/www/components/ui/external-link.tsx
apps/www/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (apps/www/.cursor/rules/posthog-integration.mdc)
apps/www/**/*.{ts,tsx,js,jsx}: If using TypeScript, use an enum to store feature flag names. If using JavaScript, store feature flag names as strings to an object declared as a constant to simulate an enum. Use UPPERCASE_WITH_UNDERSCORE naming convention for enum/const object members.
If a custom property for a person or event is referenced in two or more files or two or more callsites in the same file, use an enum or const object with UPPERCASE_WITH_UNDERSCORE naming convention, similar to feature flags.
Files:
apps/www/components/ui/external-link.tsx
🧠 Learnings (3)
📚 Learning: 2025-12-12T13:20:01.954Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-12-12T13:20:01.954Z
Learning: Applies to **/*.test.{ts,tsx} : Test component public API (props, events, and component contract), user behavior (clicks, typing, focus, keyboard, ARIA), state transitions, accessibility, and side effects in component tests
Applied to files:
apps/www/components/ui/external-link.tsx
📚 Learning: 2025-12-12T13:20:01.954Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-12-12T13:20:01.954Z
Learning: Applies to **/*.test.{ts,tsx} : Do not test pure styling or CSS classes, library internals (Radix/shadcn), implementation details (hooks, setState, private variables), or visual variants in component tests
Applied to files:
apps/www/components/ui/external-link.tsx
📚 Learning: 2025-12-12T13:20:01.954Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-12-12T13:20:01.954Z
Learning: Applies to **/*.test.{ts,tsx} : Test component behavior, not aesthetics, and focus on what users can do and what the component guarantees through its API
Applied to files:
apps/www/components/ui/external-link.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: test-e2e (a11y)
- GitHub Check: test-e2e (e2e)
🔇 Additional comments (3)
apps/www/components/ui/external-link.tsx (3)
23-29: LGTM! Clean early return optimization.The early return for non-external links simplifies the component logic and avoids unnecessary attribute/icon rendering for internal links.
34-35: LGTM! Arrow magnetization implemented correctly.The non-breaking space (
\u00A0) combined withwhitespace-nowrapensures the arrow icon stays attached to the last word when text wraps, which directly addresses the PR objective.
37-37: LGTM! Margin removal aligns with new spacing approach.Removing
ml-0.5is correct since the non-breaking space (\u00A0) now handles spacing between text and icon.
…SS using `data-external-link` attribute.
…` by reformatting.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/www/app/globals.css (1)
44-58: The URL matching issue from the previous review remains unresolved.The selector on line 46 still uses substring matching (
[href*="arkenv.js.org"]and[href*="localhost"]) which can incorrectly match malicious URLs like:
fake-arkenv.js.orgarkenv.js.org.evil.comhttps://evil.com?redirect=arkenv.js.orgThis was flagged in the previous review and should be addressed before merging.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/www/app/globals.cssapps/www/components/ui/external-link.tsx
💤 Files with no reviewable changes (1)
- apps/www/components/ui/external-link.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-12T13:20:01.954Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-12-12T13:20:01.954Z
Learning: Applies to **/*.test.{ts,tsx} : Do not test pure styling or CSS classes, library internals (Radix/shadcn), implementation details (hooks, setState, private variables), or visual variants in component tests
Applied to files:
apps/www/app/globals.css
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: test-e2e (a11y)
- GitHub Check: test-e2e (e2e)
- GitHub Check: test-typesafety
- GitHub Check: test-build (latest)
- GitHub Check: test-build (lts/*)
…`a[href^="http"]` rules.
…ibute on the anchor tag.
github-actions
bot
added
the
tests
1 participant
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.