Tune up the link card to look nicer, show more info, and layout horizontally on web to user space more nicely (#1190)

zio/stable
Paul Frazee 2023-08-16 10:02:41 -07:00 committed by GitHub
parent 884e5c9294
commit 79a6819769
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 17 deletions

View File

@ -30,7 +30,7 @@ export function toNiceDomain(url: string): string {
if (`https://${urlp.host}` === PROD_SERVICE) {
return 'Bluesky Social'
}
return urlp.host
return urlp.host ? urlp.host : url
} catch (e) {
return url
}

View File

@ -4,6 +4,8 @@ import {Text} from '../text/Text'
import {StyleSheet, View} from 'react-native'
import {usePalette} from 'lib/hooks/usePalette'
import {AppBskyEmbedExternal} from '@atproto/api'
import {isDesktopWeb} from 'platform/detection'
import {toNiceDomain} from 'lib/strings/url-helpers'
export const ExternalLinkEmbed = ({
link,
@ -14,7 +16,7 @@ export const ExternalLinkEmbed = ({
}) => {
const pal = usePalette('default')
return (
<>
<View style={styles.extContainer}>
{link.thumb ? (
<View style={styles.extImageContainer}>
<Image
@ -26,39 +28,56 @@ export const ExternalLinkEmbed = ({
</View>
) : undefined}
<View style={styles.extInner}>
<Text type="md-bold" numberOfLines={2} style={[pal.text]}>
{link.title || link.uri}
</Text>
<Text
type="sm"
numberOfLines={1}
style={[pal.textLight, styles.extUri]}>
{link.uri}
{toNiceDomain(link.uri)}
</Text>
<Text
type={isDesktopWeb ? 'xl-bold' : 'lg-bold'}
numberOfLines={isDesktopWeb ? 2 : 4}
style={[pal.text]}>
{link.title || link.uri}
</Text>
{link.description ? (
<Text
type="sm"
numberOfLines={2}
type={isDesktopWeb ? 'lg' : 'md'}
numberOfLines={isDesktopWeb ? 2 : 4}
style={[pal.text, styles.extDescription]}>
{link.description}
</Text>
) : undefined}
</View>
</>
</View>
)
}
const styles = StyleSheet.create({
extContainer: {
flexDirection: isDesktopWeb ? 'row' : 'column',
},
extInner: {
padding: 10,
},
extImageContainer: {
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
width: '100%',
height: 200,
overflow: 'hidden',
paddingHorizontal: isDesktopWeb ? 14 : 10,
paddingTop: 8,
paddingBottom: 10,
flex: isDesktopWeb ? 1 : undefined,
},
extImageContainer: isDesktopWeb
? {
borderTopLeftRadius: 6,
borderBottomLeftRadius: 6,
width: 120,
aspectRatio: 1,
overflow: 'hidden',
}
: {
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
width: '100%',
height: 200,
overflow: 'hidden',
},
extImage: {
width: '100%',
height: 200,