refactor: use css for external readme link

Co-authored-by: Alex Savelyev <91429106+alexdln@users.noreply.github.com>

Author: essenmitsosse

app/components/Readme.vue

@@ -126,6 +126,11 @@ function handleClick(event: MouseEvent) {
   @apply decoration-accent text-accent;
 }
 
+.readme :deep(a[target='_blank']::after) {
+  content: '';
+  @apply i-carbon:launch rtl-flip ms-1 size-[1em] opacity-50;
+}
+
 .readme :deep(code) {
   @apply font-mono;
   font-size: 0.875em;

server/utils/readme.ts

@@ -399,12 +399,6 @@ ${html}
     const isExternal = resolvedHref.startsWith('http://') || resolvedHref.startsWith('https://')
     const relAttr = isExternal ? ' rel="nofollow noreferrer noopener"' : ''
     const targetAttr = isExternal ? ' target="_blank"' : ''
-    const isExternalIcon = isExternal
-      ? `<span
-      class="i-carbon:launch inline-block rtl-flip ms-1 size-[1em] opacity-50"
-      aria-hidden="true"
-    ></span>`
-      : ''
 
     // Check if this is a playground link
     const provider = matchPlaygroundProvider(resolvedHref)
@@ -424,7 +418,7 @@ ${html}
 
     const hrefValue = resolvedHref.startsWith('#') ? resolvedHref.toLowerCase() : resolvedHref
 
-    return `<a href="${hrefValue}"${titleAttr}${relAttr}${targetAttr}>${text}${isExternalIcon}</a>`
+    return `<a href="${hrefValue}"${titleAttr}${relAttr}${targetAttr}>${text}</a>`
   }
 
   // GitHub-style callouts: > [!NOTE], > [!TIP], etc.

test/unit/server/utils/readme.spec.ts

@@ -346,7 +346,7 @@ describe('Markdown Content Extraction', () => {
       const result = await renderReadmeHtml(markdown, 'test-pkg')
 
       expect(result.html).toBe(`<h3 id="user-content-title" data-level="1">Title</h3>
-<p>Some <strong>bold</strong> text and a <a href="https://example.com" rel="nofollow noreferrer noopener" target="_blank">link<span class="i-carbon:launch inline-block rtl-flip ms-1 size-[1em] opacity-50"></span></a>.</p>
+<p>Some <strong>bold</strong> text and a <a href="https://example.com" rel="nofollow noreferrer noopener" target="_blank">link</a>.</p>
 `)
     })
   })