Fix external link icon visibility on homepage and docs pages #676
Conversation
|
WalkthroughThis change updates the external-link arrow styling in global CSS: it replaces the Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Poem
Pre-merge checks✅ Passed checks (5 passed)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (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). (6)
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 |
… restriction Co-authored-by: yamcodes <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
That’s working well in the homepage but not in every docs page, for example I can’t find the external link icon in the “Comparison” page even though some of the links are external |
MDX links rendered by fumadocs don't pass through the data-external-link attribute, so add fallback CSS selectors to also match links with rel="noopener" and target="_blank" attributes. This ensures external link icons appear consistently across all external links in both homepage and docs pages. Co-authored-by: yamcodes <[email protected]>
Fixed! External link icons now appear on all docs pages including the Comparison page. The issue was that fumadocs doesn't pass through the All external links (T3 Env, znv, envalid, etc.) now show the ↗ icon correctly on both desktop and mobile. ✅ 📦 Commit: 8e407b1 Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/www/app/globals.css (1)
45-57: Inconsistent selector scoping causes external link icons to fail outside<article>elements.The fallback selector (lines 48-51) is restricted to
articleelements, while the primary selector (lines 45-47) is not. This contradicts the PR objective of removingarticlescope and directly causes the user-reported issue where external link icons don't appear consistently across docs pages.Additionally, the
:not(:has(img))exclusion is only applied to the fallback selector, not the primary selector, creating another inconsistency. For reference, the underline styling (lines 21-32) demonstrates the correct pattern by providing both scoped and unscoped variants.🔎 Proposed fix to align both selectors
/* External links in documentation */ a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not( - [data-no-arrow] + [data-no-arrow] + ):not(:has(img)), +a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( + [class*="fd-"] + ):not([data-no-arrow]):not(:has(img)), +article + a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not( + [data-no-arrow] + ):not(:has(img)), +article + a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( + [class*="fd-"] - ), -article - a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( - [class*="fd-"] - ):not([data-no-arrow]):not(:has(img)) { + ):not([data-no-arrow]):not(:has(img)) { padding-right: 1.1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 0.9em; background-position: center right; }This provides both scoped (within
article) and unscoped variants for each selector type, adds the missing:not(:has(img))exclusion to all selectors, and follows the same pattern as the underline styling above.
| .dark | ||
| article | ||
| a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not( | ||
| [data-no-arrow] | ||
| ) { | ||
| ), | ||
| .dark | ||
| article | ||
| a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( | ||
| [class*="fd-"] | ||
| ):not([data-no-arrow]):not(:has(img)) { | ||
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); | ||
| } |
There was a problem hiding this comment.
Dark mode variant has the same selector scoping inconsistency.
The dark mode selectors exhibit the same issue as the light mode variant: the fallback selector is restricted to article elements while the primary selector is not, and the :not(:has(img)) exclusion is inconsistently applied.
🔎 Proposed fix to align dark mode selectors
.dark
a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not(
[data-no-arrow]
+ ):not(:has(img)),
+.dark
+ a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not(
+ [class*="fd-"]
+ ):not([data-no-arrow]):not(:has(img)),
+.dark
+ article
+ a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not(
+ [data-no-arrow]
+ ):not(:has(img)),
+.dark
+ article
+ a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not(
+ [class*="fd-"]
- ),
-.dark
- article
- a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not(
- [class*="fd-"]
- ):not([data-no-arrow]):not(:has(img)) {
+ ):not([data-no-arrow]):not(:has(img)) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E");
}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/www/app/globals.css around lines 59 to 69, the dark-mode rule scoping is
inconsistent: the first selector targets a[data-external-link] globally while
the second is restricted to article and the :not(:has(img)) exclusion is only on
the second selector; update the dark variant so both selectors mirror each other
(same scoping and exclusions) — i.e., make the first selector also scoped to
article (or remove article from the second to match the first) and apply
:not(:has(img)) consistently to both selectors so both selectors have identical
structure and exclusions as the light-mode counterpart.
… article content.
…oopener' target='_blank'` links.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
External link icons were only appearing within
<article>elements due to overly scoped CSS selectors. Additionally, MDX links in docs pages weren't rendering the icon because fumadocs doesn't pass through thedata-external-linkattribute.Changes
articlescope from external link icon selectors inapps/www/app/globals.cssfor both light and dark modesrel="noopener"andtarget="_blank"attributes (used by fumadocs for MDX links):not(:has(img))to prevent icons on logo/image linksBefore:
After:
Screenshots
Desktop:
Mobile (375×667):
The external link icon (↗) now appears consistently across:
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.