better sp embed

src/lib/link-meta/link-meta.ts

@@ -1,8 +1,13 @@
 import {BskyAgent} from '@atproto/api'
-import {isBskyAppUrl} from '../strings/url-helpers'
-import {extractBskyMeta} from './bsky'
+
 import {LINK_META_PROXY} from 'lib/constants'
 import {getGiphyMetaUri} from 'lib/strings/embed-player'
+import {
+  isBskyAppUrl,
+  isBskyStarterPackUrl,
+  isBskyStartUrl,
+} from '../strings/url-helpers'
+import {extractBskyMeta} from './bsky'
 
 export enum LikelyType {
   HTML,
@@ -28,7 +33,7 @@ export async function getLinkMeta(
   url: string,
   timeout = 15e3,
 ): Promise<LinkMeta> {
-  if (isBskyAppUrl(url)) {
+  if (isBskyAppUrl(url) && !isBskyStartUrl(url) && !isBskyStarterPackUrl(url)) {
     return extractBskyMeta(agent, url)
   }
 

src/lib/strings/starter-pack.ts

@@ -83,6 +83,13 @@ export function getStarterPackOgCard(
   rkey?: string,
 ) {
   if (typeof didOrStarterPack === 'string') {
+    // Used for link embeds so that we always keep the image up to date rather than using the uploaded one.
+    if (didOrStarterPack.startsWith('https://')) {
+      const parsed = parseStarterPackUri(didOrStarterPack)
+      if (!parsed) return null
+      return getStarterPackOgCard(parsed?.name, parsed?.rkey)
+    }
+
     return `https://ogcard.cdn.bsky.app/start/${didOrStarterPack}/${rkey}`
   } else {
     const rkey = new AtUri(didOrStarterPack.uri).rkey

src/lib/strings/url-helpers.ts

@@ -151,6 +151,30 @@ export function isBskyListUrl(url: string): boolean {
   return false
 }
 
+export function isBskyStartUrl(url: string): boolean {
+  if (isBskyAppUrl(url)) {
+    try {
+      const urlp = new URL(url)
+      return /start\/(?<name>[^/]+)\/(?<rkey>[^/]+)/i.test(urlp.pathname)
+    } catch {
+      console.error('Unexpected error in isBskyListUrl()', url)
+    }
+  }
+  return false
+}
+
+export function isBskyStarterPackUrl(url: string): boolean {
+  if (isBskyAppUrl(url)) {
+    try {
+      const urlp = new URL(url)
+      return /starter-pack\/(?<name>[^/]+)\/(?<rkey>[^/]+)/i.test(urlp.pathname)
+    } catch {
+      console.error('Unexpected error in isBskyListUrl()', url)
+    }
+  }
+  return false
+}
+
 export function isBskyDownloadUrl(url: string): boolean {
   if (isExternalUrl(url)) {
     return false

src/view/com/util/post-embeds/ExternalLinkEmbed.tsx

@@ -2,12 +2,19 @@ import React, {useCallback} from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
 import {Image} from 'expo-image'
 import {AppBskyEmbedExternal} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {shareUrl} from 'lib/sharing'
 import {parseEmbedPlayerFromUrl} from 'lib/strings/embed-player'
-import {toNiceDomain} from 'lib/strings/url-helpers'
+import {getStarterPackOgCard} from 'lib/strings/starter-pack'
+import {
+  isBskyStarterPackUrl,
+  isBskyStartUrl,
+  toNiceDomain,
+} from 'lib/strings/url-helpers'
 import {isNative} from 'platform/detection'
 import {useExternalEmbedsPrefs} from 'state/preferences'
 import {Link} from 'view/com/util/Link'
@@ -28,10 +35,15 @@ export const ExternalLinkEmbed = ({
   style?: StyleProp<ViewStyle>
   hideAlt?: boolean
 }) => {
+  const {_} = useLingui()
   const pal = usePalette('default')
   const {isMobile} = useWebMediaQueries()
   const externalEmbedPrefs = useExternalEmbedsPrefs()
 
+  const isStarterPack =
+    isBskyStartUrl(link.uri) || isBskyStarterPackUrl(link.uri)
+  const imageUri = isStarterPack ? getStarterPackOgCard(link.uri) : link.thumb
+
   const embedPlayerParams = React.useMemo(() => {
     const params = parseEmbedPlayerFromUrl(link.uri)
 
@@ -47,15 +59,19 @@ export const ExternalLinkEmbed = ({
   return (
     <View style={[a.flex_col, a.rounded_sm, a.overflow_hidden, a.mt_sm]}>
       <LinkWrapper link={link} onOpen={onOpen} style={style}>
-        {link.thumb && !embedPlayerParams ? (
+        {imageUri && !embedPlayerParams ? (
           <Image
             style={{
               aspectRatio: 1.91,
               borderTopRightRadius: 6,
               borderTopLeftRadius: 6,
             }}
-            source={{uri: link.thumb}}
+            source={{uri: imageUri}}
             accessibilityIgnoresInvertColors
+            accessibilityLabel={isStarterPack ? link.title : undefined}
+            accessibilityHint={
+              isStarterPack ? _(msg`Navigate to starter pack`) : undefined
+            }
           />
         ) : undefined}
         {embedPlayerParams?.isGif ? (
@@ -63,35 +79,37 @@ export const ExternalLinkEmbed = ({
         ) : embedPlayerParams ? (
           <ExternalPlayer link={link} params={embedPlayerParams} />
         ) : undefined}
-        <View
-          style={[
-            a.flex_1,
-            a.py_sm,
-            {
-              paddingHorizontal: isMobile ? 10 : 14,
-            },
-          ]}>
-          <Text
-            type="sm"
-            numberOfLines={1}
-            style={[pal.textLight, {marginVertical: 2}]}>
-            {toNiceDomain(link.uri)}
-          </Text>
-
-          {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && (
-            <Text type="lg-bold" numberOfLines={3} style={[pal.text]}>
-              {link.title || link.uri}
-            </Text>
-          )}
-          {link.description ? (
+        {!isStarterPack ? (
+          <View
+            style={[
+              a.flex_1,
+              a.py_sm,
+              {
+                paddingHorizontal: isMobile ? 10 : 14,
+              },
+            ]}>
             <Text
-              type="md"
-              numberOfLines={link.thumb ? 2 : 4}
-              style={[pal.text, a.mt_xs]}>
-              {link.description}
+              type="sm"
+              numberOfLines={1}
+              style={[pal.textLight, {marginVertical: 2}]}>
+              {toNiceDomain(link.uri)}
             </Text>
-          ) : undefined}
-        </View>
+
+            {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && (
+              <Text type="lg-bold" numberOfLines={3} style={[pal.text]}>
+                {link.title || link.uri}
+              </Text>
+            )}
+            {link.description ? (
+              <Text
+                type="md"
+                numberOfLines={link.thumb ? 2 : 4}
+                style={[pal.text, a.mt_xs]}>
+                {link.description}
+              </Text>
+            ) : undefined}
+          </View>
+        ) : null}
       </LinkWrapper>
     </View>
   )