Shorten rendered URLs in posts

src/lib/strings.ts

@@ -141,6 +141,23 @@ export function toNiceDomain(url: string): string {
   }
 }
 
+export function toShortUrl(url: string): string {
+  try {
+    const urlp = new URL(url)
+    const shortened =
+      urlp.host +
+      (urlp.pathname === '/' ? '' : urlp.pathname) +
+      urlp.search +
+      urlp.hash
+    if (shortened.length > 20) {
+      return shortened.slice(0, 17) + '...'
+    }
+    return shortened
+  } catch (e) {
+    return url
+  }
+}
+
 export function toShareUrl(url: string) {
   if (!url.startsWith('https')) {
     const urlp = new URL('https://bsky.app')

src/view/com/util/RichText.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import {Text, TextStyle, StyleProp, View} from 'react-native'
+import {Text, TextStyle, StyleProp} from 'react-native'
 import {TextLink} from './Link'
 import {s} from '../../lib/styles'
+import {toShortUrl} from '../../../lib/strings'
 
 type TextSlice = {start: number; end: number}
 type Entity = {
@@ -45,7 +46,7 @@ export function RichText({
         els.push(
           <TextLink
             key={key}
-            text={segment.text}
+            text={toShortUrl(segment.text)}
             href={segment.entity.value}
             style={[style, s.blue3]}
           />,