From bd3dc894c41dbf09261b7c2dffa5e688f1cbf9c2 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sat, 18 Oct 2025 23:39:13 +0800
Subject: [PATCH] feat: format highlight source url

---
 src/components/ExternalLink/index.tsx | 29 ++------------------------
 src/components/Note/Highlight.tsx     | 14 +++++--------
 src/lib/url.ts                        | 30 +++++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/src/components/ExternalLink/index.tsx b/src/components/ExternalLink/index.tsx
index 259f3a97..5b334853 100644
--- a/src/components/ExternalLink/index.tsx
+++ b/src/components/ExternalLink/index.tsx
@@ -1,8 +1,9 @@
+import { truncateUrl } from '@/lib/url'
 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])
+  const displayUrl = useMemo(() => truncateUrl(url), [url])
 
   return (
     <a
@@ -17,29 +18,3 @@ export default function ExternalLink({ url, className }: { url: string; classNam
     </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
-  }
-}
diff --git a/src/components/Note/Highlight.tsx b/src/components/Note/Highlight.tsx
index eca44c6d..09def090 100644
--- a/src/components/Note/Highlight.tsx
+++ b/src/components/Note/Highlight.tsx
@@ -10,6 +10,7 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Content from '../Content'
 import ContentPreview from '../ContentPreview'
+import ExternalLink from '../ExternalLink'
 import UserAvatar from '../UserAvatar'
 
 export default function Highlight({ event, className }: { event: Event; className?: string }) {
@@ -99,15 +100,10 @@ function HighlightSource({ event }: { event: Event }) {
     return (
       <div className="truncate text-muted-foreground">
         {t('From')}{' '}
-        <a
-          href={sourceTag[1]}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="underline text-muted-foreground hover:text-foreground"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {sourceTag[1]}
-        </a>
+        <ExternalLink
+          url={sourceTag[1]}
+          className="underline italic text-muted-foreground hover:text-foreground"
+        />
       </div>
     )
   }
diff --git a/src/lib/url.ts b/src/lib/url.ts
index bc723096..92bcf85a 100644
--- a/src/lib/url.ts
+++ b/src/lib/url.ts
@@ -137,3 +137,33 @@ export function isMedia(url: string) {
     return false
   }
 }
+
+export const truncateUrl = (url: string, maxLength: number = 40) => {
+  try {
+    const urlObj = new URL(url)
+    let domain = urlObj.hostname
+    let path = urlObj.pathname
+
+    if (domain.startsWith('www.')) {
+      domain = domain.slice(4)
+    }
+
+    if (!path || path === '/') {
+      return domain
+    }
+
+    if (path.endsWith('/')) {
+      path = path.slice(0, -1)
+    }
+
+    const u = domain + path
+
+    if (u.length > maxLength) {
+      return domain + path.slice(0, maxLength - domain.length - 3) + '...'
+    }
+
+    return u
+  } catch {
+    return url
+  }
+}