update extern link cards to match app

bskyogcard/src/components/Globe.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export function Globe(props: React.SVGAttributes<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M4.4 9.493C4.14 10.28 4 11.124 4 12a8 8 0 1 0 10.899-7.459l-.953 3.81a1 1 0 0 1-.726.727l-3.444.866-.772 1.533a1 1 0 0 1-1.493.35L4.4 9.493Zm.883-1.84L7.756 9.51l.44-.874a1 1 0 0 1 .649-.52l3.306-.832.807-3.227a7.99 7.99 0 0 0-7.676 3.597ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm8.43.162a1 1 0 0 1 .77-.29l1.89.121a1 1 0 0 1 .494.168l2.869 1.928a1 1 0 0 1 .336 1.277l-.973 1.946a1 1 0 0 1-.894.553h-2.92a1 1 0 0 1-.831-.445L9.225 14.5a1 1 0 0 1 .126-1.262l1.08-1.076Zm.915 1.913.177-.177 1.171.074 1.914 1.286-.303.607h-1.766l-1.194-1.79Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}

bskyogcard/src/components/LinkCard.tsx

@@ -1,7 +1,8 @@
 import {Image as ImageSource} from '../data/getPostData.js'
-import {atoms as a, theme as t} from '../theme/index.js'
-import {toShortUrl} from '../util/toShortUrl.js'
+import {atoms as a, style as s, theme as t} from '../theme/index.js'
+import {toNiceDomain} from '../util/toNiceDomain.js'
 import {Box} from './Box.js'
+import {Globe} from './Globe.js'
 import {Image} from './Image.js'
 import {Text} from './Text.js'
 
@@ -12,7 +13,7 @@ export function LinkCard({
   description,
 }: {
   image?: ImageSource
-  uri?: string
+  uri: string
   title: string
   description: string
 }) {
@@ -45,14 +46,43 @@ export function LinkCard({
           />
         </Box>
       )}
-      <Box cx={[a.p_md, t.atoms.bg]}>
-        {uri && (
-          <Text cx={[a.text_xs, a.pb_sm, t.atoms.text_contrast_medium]}>
-            {toShortUrl(uri)}
+      <Box cx={[a.px_md, a.pt_md, t.atoms.bg]}>
+        <Text cx={[a.text_md, a.font_bold, a.pb_xs, a.line_clamp_3]}>
+          {title}
+        </Text>
+        <Text
+          cx={[
+            a.text_sm,
+            a.leading_snug,
+            a.pb_sm,
+            image ? a.line_clamp_2 : a.line_clamp_4,
+          ]}>
+          {description}
+        </Text>
+        <Box
+          cx={[
+            a.border_t,
+            t.atoms.border_contrast_low,
+            a.flex_row,
+            a.align_center,
+            {paddingTop: 6},
+            a.pb_sm,
+            a.gap_2xs,
+          ]}>
+          <Globe height={12} width={12} style={t.atoms.text_contrast_medium} />
+          <Text
+            cx={[
+              a.text_xs,
+              a.pb_sm,
+              t.atoms.text_contrast_medium,
+              a.max_w_full,
+              // I don't know why, but the text element is too tall. manually set the height
+              {overflowX: 'hidden', height: 14},
+              a.line_clamp_1,
+            ]}>
+            {toNiceDomain(uri)}
           </Text>
-        )}
-        <Text cx={[a.text_md, a.font_bold, a.pb_xs]}>{title}</Text>
-        <Text cx={[a.text_sm, a.leading_snug]}>{description}</Text>
+        </Box>
       </Box>
     </Box>
   )

bskyogcard/src/theme/atoms.ts

@@ -32,6 +32,12 @@ export const atoms = {
   overflow_hidden: {
     overflow: 'hidden',
   },
+  text_overflow_ellipsis: {
+    textOverflow: 'ellipsis',
+  },
+  text_overflow_clip: {
+    textOverflow: 'clip',
+  },
   line_clamp_1: {
     display: 'block',
     lineClamp: 1,
@@ -55,12 +61,18 @@ export const atoms = {
   w_full: {
     width: '100%',
   },
+  max_w_full: {
+    maxWidth: '100%',
+  },
   h_full: {
     height: '100%',
   },
   h_full_vh: {
     height: '100vh',
   },
+  max_h_full: {
+    maxHeight: '100%',
+  },
 
   /*
    * Theme-independent bg colors
@@ -142,6 +154,9 @@ export const atoms = {
   flex_wrap: {
     flexWrap: 'wrap',
   },
+  flex_nowrap: {
+    flexWrap: 'nowrap',
+  },
   flex_0: {
     flex: '0 0 auto',
   },

bskyogcard/src/util/toNiceDomain.ts

@@ -0,0 +1,13 @@
+export const BSKY_SERVICE = 'https://bsky.social'
+
+export function toNiceDomain(url: string): string {
+  try {
+    const urlp = new URL(url)
+    if (`https://${urlp.host}` === BSKY_SERVICE) {
+      return 'Bluesky Social'
+    }
+    return urlp.host ? urlp.host : url
+  } catch (e) {
+    return url
+  }
+}