diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 7a3806c2a2..aa705b1897 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -263,7 +263,6 @@ export const Button = forwardRef( baseStyles.push(t.atoms.bg_contrast_50) } } else if (color === 'secondary_inverted') { - console.log(t) if (!disabled) { baseStyles.push({ backgroundColor: t.palette.contrast_900, diff --git a/src/components/Post/Embed/StandardSiteEmbed/PublicationMetaRow.tsx b/src/components/Post/Embed/StandardSiteEmbed/PublicationMetaRow.tsx new file mode 100644 index 0000000000..754dae436b --- /dev/null +++ b/src/components/Post/Embed/StandardSiteEmbed/PublicationMetaRow.tsx @@ -0,0 +1,87 @@ +import {Fragment, type ReactNode, useMemo} from 'react' +import {View} from 'react-native' +import {type AppBskyEmbedExternal} from '@atproto/api' +import {Trans, useLingui} from '@lingui/react/macro' + +import {makeProfileLink} from '#/lib/routes/links' +import {toNiceDomain} from '#/lib/strings/url-helpers' +import {useProfileQuery} from '#/state/queries/profile' +import {atoms as a, useTheme} from '#/alf' +import {InlineLinkText} from '#/components/Link' +import {Text} from '#/components/Typography' + +export function PublicationMetaRow({ + view, + author, +}: { + view: AppBskyEmbedExternal.ViewExternal + author: {did: string | null | undefined} +}) { + const t = useTheme() + const {t: l} = useLingui() + const profileQuery = useProfileQuery({did: author.did ?? undefined}) + const handle = author.did ? profileQuery.data?.handle : undefined + const highlightedPublisher = useMemo(() => { + try { + const u = new URL(view.source?.uri || '') + return ( + u.host.endsWith('leaflet.pub') || + u.host.endsWith('pckt.blog') || + u.host.endsWith('offprint.app') + ) + } catch (e) { + return false + } + }, [view]) + + const metaTextStyle = [ + a.text_xs, + a.leading_snug, + t.atoms.text_contrast_medium, + ] + + const items: {key: string; node: ReactNode}[] = [] + + if (!highlightedPublisher && view.source?.uri) { + items.push({ + key: 'domain', + node: ( + + {toNiceDomain(view.source.uri)} + + ), + }) + } + + if (author.did && handle) { + items.push({ + key: 'author', + node: ( + + + by{' '} + + @{handle} + + + + ), + }) + } + + if (items.length === 0) return null + + return ( + + {items.map((item, i) => ( + + {i > 0 && } + {item.node} + + ))} + + ) +} diff --git a/src/components/Post/Embed/StandardSiteEmbed/StandardSiteThemeProvider.tsx b/src/components/Post/Embed/StandardSiteEmbed/StandardSiteThemeProvider.tsx new file mode 100644 index 0000000000..0b787eddcf --- /dev/null +++ b/src/components/Post/Embed/StandardSiteEmbed/StandardSiteThemeProvider.tsx @@ -0,0 +1,90 @@ +import {useMemo} from 'react' +import {type AppBskyEmbedExternal} from '@atproto/api' + +import {ThemeProvider, useAlf, utils} from '#/alf' + +/** + * Overrides only the values needed for `secondary_inverted` buttons atm. + */ +export function StandardSiteThemeProvider({ + view, + children, +}: { + view: AppBskyEmbedExternal.ViewExternal + children: React.ReactNode +}) { + const alf = useAlf() + const themesOverride = useMemo(() => { + const {accentRGB, accentForegroundRGB} = view.source?.theme || {} + if (!accentRGB || !accentForegroundRGB) return alf.themes + + const accent = utils.rgbToHex(accentRGB.r, accentRGB.g, accentRGB.b) + const accentForeground = utils.rgbToHex( + accentForegroundRGB.r, + accentForegroundRGB.g, + accentForegroundRGB.b, + ) + const atoms = { + text_inverted: {color: accentForeground}, + } + const palette = { + contrast_975: utils.darken(accent, 5), // hover + contrast_900: accent, // bg + contrast_600: utils.lighten(accent, 5), // disabled bg + contrast_300: accentForeground, // disabled text + } + return { + lightPalette: { + ...alf.themes.lightPalette, + ...palette, + }, + darkPalette: { + ...alf.themes.darkPalette, + ...palette, + }, + dimPalette: { + ...alf.themes.dimPalette, + ...palette, + }, + light: { + ...alf.themes.light, + atoms: { + ...alf.themes.light.atoms, + ...atoms, + }, + palette: { + ...alf.themes.light.palette, + ...palette, + }, + }, + dark: { + ...alf.themes.dark, + atoms: { + ...alf.themes.dark.atoms, + ...atoms, + }, + palette: { + ...alf.themes.dark.palette, + ...palette, + }, + }, + dim: { + ...alf.themes.dim, + atoms: { + ...alf.themes.dim.atoms, + ...atoms, + }, + palette: { + ...alf.themes.dim.palette, + ...palette, + }, + }, + } + }, [alf, view]) + + return ( + + {children} + + ) +} diff --git a/src/components/Post/Embed/StandardSiteEmbed/index.tsx b/src/components/Post/Embed/StandardSiteEmbed/index.tsx index 209dd43876..6bb7a1b301 100644 --- a/src/components/Post/Embed/StandardSiteEmbed/index.tsx +++ b/src/components/Post/Embed/StandardSiteEmbed/index.tsx @@ -14,16 +14,8 @@ import { import {niceDate} from '#/lib/strings/time' import {toNiceDomain} from '#/lib/strings/url-helpers' import {useExternalEmbedsPrefs} from '#/state/preferences' -import {useProfileQuery} from '#/state/queries/profile' import {UserAvatar} from '#/view/com/util/UserAvatar' -import { - atoms as a, - ThemeProvider, - useAlf, - useBreakpoints, - useTheme, - utils, -} from '#/alf' +import {atoms as a, useBreakpoints, useTheme, utils} from '#/alf' import {ButtonIcon, ButtonText} from '#/components/Button' import {Divider} from '#/components/Divider' import {Clock_Stroke2_Corner0_Rounded as Clock} from '#/components/icons/Clock' @@ -34,6 +26,8 @@ import {StandardSite} from '#/components/icons/community/StandardSite' import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {Link} from '#/components/Link' import {MediaInsetBorder} from '#/components/MediaInsetBorder' +import {PublicationMetaRow} from '#/components/Post/Embed/StandardSiteEmbed/PublicationMetaRow' +import {StandardSiteThemeProvider} from '#/components/Post/Embed/StandardSiteEmbed/StandardSiteThemeProvider' import {Text} from '#/components/Typography' import {IS_NATIVE} from '#/env' @@ -350,9 +344,6 @@ export function PublicationCard({ const t = useTheme() const {t: l} = useLingui() const {gtPhone} = useBreakpoints() - const profileQuery = useProfileQuery({did: author.did ?? undefined}) - const handle = author.did ? profileQuery.data?.handle : undefined - const highlightedPublisher = useStandardSitePublisherConfig(view) if (!view.source) return null @@ -410,49 +401,7 @@ export function PublicationCard({ ]}> {view.source?.title} - - {[ - { - type: 'domain', - enabled: !highlightedPublisher, - value: toNiceDomain(view.source?.uri || ''), - hasPrev: false, - }, - { - type: 'author', - enabled: true, - value: handle ? l`by @${handle}` : undefined, - hasPrev: - !highlightedPublisher && Boolean(view.source?.uri), - }, - ] - .filter(item => item.enabled && item.value) - .map(item => { - return ( - <> - {item.hasPrev && ( - - • - - )} - - {item.value} - - - ) - })} - + @@ -463,7 +412,6 @@ export function PublicationCard({ style={[!gtPhone && [a.w_full, a.justify_center]]} onPress={onPress} onLongPress={onLongPress} - themeColors={themeColors} /> )} @@ -485,83 +433,21 @@ export function SubscribeButton({ view, onPress, onLongPress, - themeColors, style, }: { view: AppBskyEmbedExternal.ViewExternal onPress?: () => void onLongPress?: () => void - themeColors: ThemeColors style?: StyleProp }) { - const alf = useAlf() const {t: l} = useLingui() const highlightedPublisher = useStandardSitePublisherConfig(view) const cta = highlightedPublisher ? l`Subscribe on ${highlightedPublisher.name}` : l`View publication` - const themesOverride = useMemo(() => { - if (!themeColors.custom) return alf.themes - const atoms = { - text_inverted: {color: themeColors.accentForeground}, // text - } - const palette = { - contrast_975: utils.darken(themeColors.accent, 5), // hover - contrast_900: themeColors.accent, // bg - contrast_600: utils.lighten(themeColors.accent, 5), // disabled bg - contrast_300: themeColors.accentForeground, // disabled text - } - return { - lightPalette: { - ...alf.themes.lightPalette, - ...palette, - }, - darkPalette: { - ...alf.themes.darkPalette, - ...palette, - }, - dimPalette: { - ...alf.themes.dimPalette, - ...palette, - }, - light: { - ...alf.themes.light, - atoms: { - ...alf.themes.light.atoms, - ...atoms, - }, - palette: { - ...alf.themes.light.palette, - ...palette, - }, - }, - dark: { - ...alf.themes.dark, - atoms: { - ...alf.themes.dark.atoms, - ...atoms, - }, - palette: { - ...alf.themes.dark.palette, - ...palette, - }, - }, - dim: { - ...alf.themes.dim, - atoms: { - ...alf.themes.dim.atoms, - ...atoms, - }, - palette: { - ...alf.themes.dim.palette, - ...palette, - }, - }, - } - }, [alf, themeColors]) return ( - + {cta} )} - + ) } @@ -662,23 +548,6 @@ export function PublicationFooter({ const t = useTheme() const {t: l} = useLingui() const {gtPhone} = useBreakpoints() - const profileQuery = useProfileQuery({did: author.did ?? undefined}) - const handle = author.did ? profileQuery.data?.handle : undefined - const highlightedPublisher = useMemo(() => { - try { - const u = new URL(view.source?.uri || '') - if (u.host.endsWith('leaflet.pub')) { - return 'Leaflet' - } else if (u.host.endsWith('pckt.blog')) { - return 'pckt' - } else if (u.host.endsWith('offprint.app')) { - return 'Offprint' - } - return null - } catch (e) { - return null - } - }, [view]) if (!view.source) return null @@ -725,48 +594,7 @@ export function PublicationFooter({ ]}> {view.source?.title} - - {[ - { - type: 'domain', - enabled: !highlightedPublisher, - value: toNiceDomain(view.source?.uri || ''), - hasPrev: false, - }, - { - type: 'author', - enabled: true, - value: handle ? l`by @${handle}` : undefined, - hasPrev: !highlightedPublisher && Boolean(view.source?.uri), - }, - ] - .filter(item => item.enabled && item.value) - .map(item => { - return ( - <> - {item.hasPrev && ( - - • - - )} - - {item.value} - - - ) - })} - + )} @@ -778,7 +606,6 @@ export function PublicationFooter({ style={[!gtPhone && [a.w_full, a.justify_center]]} onPress={onPress} onLongPress={onLongPress} - themeColors={themeColors} /> )}