diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
index f1adc885..3769d857 100644
--- a/src/components/Content/index.tsx
+++ b/src/components/Content/index.tsx
@@ -20,11 +20,11 @@ import {
EmbeddedHashtag,
EmbeddedLNInvoice,
EmbeddedMention,
- EmbeddedNormalUrl,
EmbeddedNote,
EmbeddedWebsocketUrl
} from '../Embedded'
import Emoji from '../Emoji'
+import ExternalLink from '../ExternalLink'
import ImageGallery from '../ImageGallery'
import MediaPlayer from '../MediaPlayer'
import WebPreview from '../WebPreview'
@@ -122,7 +122,7 @@ export default function Content({
)
}
if (node.type === 'url') {
- return
+ return
}
if (node.type === 'invoice') {
return
diff --git a/src/components/Embedded/EmbeddedNormalUrl.tsx b/src/components/Embedded/EmbeddedNormalUrl.tsx
deleted file mode 100644
index 7d43b82b..00000000
--- a/src/components/Embedded/EmbeddedNormalUrl.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-export function EmbeddedNormalUrl({ url }: { url: string }) {
- return (
- e.stopPropagation()}
- rel="noreferrer"
- >
- {url}
-
- )
-}
diff --git a/src/components/Embedded/index.tsx b/src/components/Embedded/index.tsx
index f3f8a43d..947357af 100644
--- a/src/components/Embedded/index.tsx
+++ b/src/components/Embedded/index.tsx
@@ -1,6 +1,5 @@
export * from './EmbeddedHashtag'
export * from './EmbeddedLNInvoice'
export * from './EmbeddedMention'
-export * from './EmbeddedNormalUrl'
export * from './EmbeddedNote'
export * from './EmbeddedWebsocketUrl'
diff --git a/src/components/ExternalLink/index.tsx b/src/components/ExternalLink/index.tsx
index 731504bb..259f3a97 100644
--- a/src/components/ExternalLink/index.tsx
+++ b/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 (
e.stopPropagation()}
rel="noreferrer"
+ title={url}
>
- {url}
+ {displayUrl}
)
}
+
+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/ProfileAbout/index.tsx b/src/components/ProfileAbout/index.tsx
index 8d14cf87..395fb3a9 100644
--- a/src/components/ProfileAbout/index.tsx
+++ b/src/components/ProfileAbout/index.tsx
@@ -10,12 +10,8 @@ import { useTranslationService } from '@/providers/TranslationServiceProvider'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
-import {
- EmbeddedHashtag,
- EmbeddedMention,
- EmbeddedNormalUrl,
- EmbeddedWebsocketUrl
-} from '../Embedded'
+import { EmbeddedHashtag, EmbeddedMention, EmbeddedWebsocketUrl } from '../Embedded'
+import ExternalLink from '../ExternalLink'
export default function ProfileAbout({ about, className }: { about?: string; className?: string }) {
const { t, i18n } = useTranslation()
@@ -39,7 +35,7 @@ export default function ProfileAbout({ about, className }: { about?: string; cla
])
return nodes.map((node, index) => {
if (node.type === 'url') {
- return
+ return
}
if (node.type === 'websocket-url') {
return