🚸 Short only paths of URLs

src/components/message/Links.test.tsx

@@ -11,6 +11,15 @@ describe('Links', () => {
     expect(document.querySelector('a')).toHaveTextContent('example.com')
   })
 
+  it('should render links without protocol', () => {
+    const message = 'example.com'
+
+    render(<Links message={message} />)
+
+    expect(document.querySelector('a')).toHaveAttribute('href', 'https://example.com')
+    expect(document.querySelector('a')).toHaveTextContent('example.com')
+  })
+
   it('should shorten long links', () => {
     const message = 'https://www.systemli.org/2024/01/11/neue-sicherheitsma%C3%9Fnahme-gegen-mitm-angriffe-eingef%C3%BChrt/'
 
@@ -20,6 +29,6 @@ describe('Links', () => {
       'href',
       'https://www.systemli.org/2024/01/11/neue-sicherheitsma%C3%9Fnahme-gegen-mitm-angriffe-eingef%C3%BChrt/'
     )
-    expect(document.querySelector('a')).toHaveTextContent('www.systemli.org/2024/01/11/neue-sicherh...')
+    expect(document.querySelector('a')).toHaveTextContent('www.systemli.org/2024/01/11/neue-sic...')
   })
 })

src/components/message/Links.tsx

@@ -5,17 +5,10 @@ interface Props {
   message: string
 }
 const Links: FC<Props> = ({ message }) => {
-  const render = ({ attributes, content }: { attributes: unknown; content: string }) => {
+  const render = ({ attributes }: { attributes: unknown }) => {
     const { href } = attributes as { href: string }
-    content = content.replace(/^(https?:\/\/)/, '')
-
-    if (content.endsWith('/')) {
-      content = content.slice(0, -1)
-    }
-
-    if (content.length > 40) {
-      content = content.slice(0, 40) + '...'
-    }
+    const url = new URL(href)
+    const content = url.hostname + url.pathname.slice(0, 20) + '...'
 
     return (
       <a href={href} target="_blank" title={href}>