feat: simplify external link display

src/components/ExternalLink/index.tsx

@@ -1,6 +1,9 @@
 import { cn } from '@/lib/utils'
+import { useMemo } from 'react'
 
 export default function ExternalLink({ url, className }: { url: string; className?: string }) {
+  const displayUrl = useMemo(() => getDisplayUrl(url), [url])
+
   return (
     <a
       className={cn('text-primary hover:underline', className)}
@@ -8,8 +11,35 @@ export default function ExternalLink({ url, className }: { url: string; classNam
       target="_blank"
       onClick={(e) => e.stopPropagation()}
       rel="noreferrer"
+      title={url}
     >
-      {url}
+      {displayUrl}
     </a>
   )
 }
+
+const getDisplayUrl = (url: string, maxLength: number = 30) => {
+  try {
+    const urlObj = new URL(url)
+    let domain = urlObj.hostname
+    const path = urlObj.pathname
+
+    if (domain.startsWith('www.')) {
+      domain = domain.slice(4)
+    }
+
+    if (!path || path === '/') {
+      return domain
+    }
+
+    const displayUrl = domain + path
+
+    if (displayUrl.length > maxLength) {
+      return domain + path.slice(0, maxLength - domain.length - 3) + '...'
+    }
+
+    return displayUrl
+  } catch {
+    return url
+  }
+}