[APP-2065] yassify app embed (#10210)
This commit is contained in:
Spence Pope
@@ -20,7 +20,7 @@ export function Container({
|
||||
if (!entry) return
|
||||
|
||||
let {height} = entry.contentRect
|
||||
height += 2 // border top and bottom
|
||||
height += 4 // border-2 = 2px top + 2px bottom
|
||||
if (height !== prevHeight.current) {
|
||||
prevHeight.current = height
|
||||
window.parent.postMessage(
|
||||
@@ -37,7 +37,7 @@ export function Container({
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="w-full bg-brand text-black dark:bg-brand relative transition-colors max-w-[600px] min-w-[300px] flex items-center dark:text-slate-200 rounded-[20px] cursor-pointer hover:bg-opacity-90"
|
||||
className="w-full border-2 border-brand text-black relative transition-colors max-w-[600px] min-w-[300px] flex items-center dark:text-slate-200 rounded-[32px] overflow-hidden cursor-pointer"
|
||||
onClick={() => {
|
||||
if (ref.current && href) {
|
||||
// forwardRef requires preact/compat - let's keep it simple
|
||||
@@ -49,9 +49,7 @@ export function Container({
|
||||
}
|
||||
}}>
|
||||
{href && <Link href={href} />}
|
||||
<div className="flex-1 px-[6px] pt-[6px] pb-2.5 max-w-full">
|
||||
{children}
|
||||
</div>
|
||||
<div className="flex-1 max-w-full">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@ export function Post({thread}: Props) {
|
||||
return (
|
||||
<Container href={href}>
|
||||
<div
|
||||
className="flex-1 flex-col flex gap-2 bg-neutral-50 dark:bg-black dark:hover:bg-slate-900 hover:bg-blue-50 rounded-[14px] p-4"
|
||||
className="flex-1 flex-col flex gap-4 bg-white dark:bg-black hover:bg-brandHover dark:hover:bg-brandHoverDark rounded-[30px] p-5"
|
||||
lang={record?.langs?.[0]}>
|
||||
<div className="flex gap-2.5 items-center cursor-pointer w-full max-w-full ">
|
||||
<Link
|
||||
@@ -70,7 +70,7 @@ export function Post({thread}: Props) {
|
||||
<div className="flex flex-1 items-center">
|
||||
<Link
|
||||
href={`/profile/${post.author.did}`}
|
||||
className="block font-bold text-[17px] leading-5 line-clamp-1 hover:underline underline-offset-2 text-ellipsis decoration-2">
|
||||
className="block font-bold text-[15px] min-[400px]:text-[17px] leading-5 line-clamp-1 hover:underline underline-offset-2 text-ellipsis decoration-2">
|
||||
{post.author.displayName?.trim() || post.author.handle}
|
||||
</Link>
|
||||
{verification.isVerified && (
|
||||
@@ -87,72 +87,68 @@ export function Post({thread}: Props) {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
href={`/profile/${post.author.did}`}
|
||||
className="block text-[15px] text-textLight dark:text-textDimmed hover:underline line-clamp-1">
|
||||
@{post.author.handle}
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 text-[13px] min-[400px]:text-[15px] min-w-0">
|
||||
<Link
|
||||
href={`/profile/${post.author.did}`}
|
||||
className="text-textNeutral hover:underline line-clamp-1">
|
||||
@{post.author.handle}
|
||||
</Link>
|
||||
<span className="text-textNeutral shrink-0">·</span>
|
||||
<Link
|
||||
href={`/profile/${post.author.did}`}
|
||||
className="text-brand hover:underline shrink-0">
|
||||
Follow
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PostContent record={record} />
|
||||
<Embed content={post.embed} labels={post.labels} />
|
||||
|
||||
<div className="flex items-center justify-between w-full pt-2.5 text-sm">
|
||||
<div className="flex items-center gap-3 text-sm cursor-pointer">
|
||||
{!!post.likeCount && (
|
||||
<div className="flex items-center gap-1 cursor-pointer group">
|
||||
<LikeIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-slate-600 dark:text-slate-400 group-hover:text-neutral-800 dark:group-hover:text-white transition-colors"
|
||||
/>
|
||||
<p className="font-medium text-slate-600 text-neutral-600 dark:text-neutral-300 mb-px group-hover:text-neutral-800 dark:group-hover:text-white transition-colors dark:text-slate-400">
|
||||
{prettyNumber(post.likeCount)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{!!post.replyCount && (
|
||||
<div className="flex items-center gap-1 cursor-pointer group">
|
||||
<ReplyIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-slate-600 dark:text-slate-400 group-hover:text-neutral-800 dark:group-hover:text-white transition-colors"
|
||||
/>
|
||||
<p className="font-medium text-slate-600 text-neutral-600 dark:text-neutral-300 mb-px group-hover:text-neutral-800 dark:group-hover:text-white transition-colors dark:text-slate-400">
|
||||
{prettyNumber(post.replyCount)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!!post.repostCount && (
|
||||
<div className="flex items-center gap-1 cursor-pointer group">
|
||||
<RepostIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-slate-600 dark:text-slate-400 group-hover:text-neutral-800 dark:group-hover:text-white transition-colors"
|
||||
/>
|
||||
<p className="font-medium text-slate-600 dark:text-slate-400 mb-px group-hover:text-neutral-800 dark:group-hover:text-white transition-colors">
|
||||
{prettyNumber(post.repostCount)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-end justify-between w-full">
|
||||
<div className="flex flex-col min-[400px]:gap-0.5">
|
||||
<div className="flex items-center gap-3 text-sm cursor-pointer ml-[-2px]">
|
||||
{!!post.likeCount && (
|
||||
<div className="flex items-center gap-0.5 min-[400px]:gap-1 cursor-pointer group">
|
||||
<LikeIcon className="w-5 h-5 min-[400px]:w-[22px] min-[400px]:h-[22px] text-textLight dark:text-textDimmed group-hover:text-neutral-800 dark:group-hover:text-white transition-colors" />
|
||||
<p className="text-[11px] min-[400px]:text-[15px] font-semibold text-textLight dark:text-textDimmed mb-px group-hover:text-neutral-800 dark:group-hover:text-white transition-colors">
|
||||
{prettyNumber(post.likeCount)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{!!post.replyCount && (
|
||||
<div className="flex items-center gap-0.5 min-[400px]:gap-1 cursor-pointer group">
|
||||
<ReplyIcon className="w-5 h-5 min-[400px]:w-[22px] min-[400px]:h-[22px] text-textLight dark:text-textDimmed group-hover:text-neutral-800 dark:group-hover:text-white transition-colors" />
|
||||
<p className="text-[11px] min-[400px]:text-[15px] font-semibold text-textLight dark:text-textDimmed mb-px group-hover:text-neutral-800 dark:group-hover:text-white transition-colors">
|
||||
{prettyNumber(post.replyCount)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{!!post.repostCount && (
|
||||
<div className="flex items-center gap-0.5 min-[400px]:gap-1 cursor-pointer group">
|
||||
<RepostIcon className="w-5 h-5 min-[400px]:w-[22px] min-[400px]:h-[22px] text-textLight dark:text-textDimmed group-hover:text-neutral-800 dark:group-hover:text-white transition-colors" />
|
||||
<p className="text-[11px] min-[400px]:text-[15px] font-semibold text-textLight dark:text-textDimmed mb-px group-hover:text-neutral-800 dark:group-hover:text-white transition-colors">
|
||||
{prettyNumber(post.repostCount)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Link href={href}>
|
||||
<time
|
||||
datetime={new Date(post.indexedAt).toISOString()}
|
||||
className="text-[11px] min-[400px]:text-[15px] text-textNeutral hover:underline">
|
||||
{niceDate(post.indexedAt)}
|
||||
</time>
|
||||
</Link>
|
||||
</div>
|
||||
<Link href={href}>
|
||||
<time
|
||||
datetime={new Date(post.indexedAt).toISOString()}
|
||||
className="text-slate-500 dark:text-textDimmed text-sm hover:underline dark:text-slate-500">
|
||||
{niceDate(post.indexedAt)}
|
||||
</time>
|
||||
<Link
|
||||
href={href}
|
||||
className="transition-transform hover:scale-110 shrink-0">
|
||||
<img src={logo} className="h-5 min-[400px]:h-7" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end pt-2">
|
||||
<Link
|
||||
href={href}
|
||||
className="transition-transform hover:scale-110 shrink-0">
|
||||
<img src={logo} className="h-8" />
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
@@ -177,7 +173,7 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) {
|
||||
<Link
|
||||
key={counter}
|
||||
href={segment.link.uri}
|
||||
className="text-blue-500 hover:underline"
|
||||
className="text-brand hover:underline"
|
||||
disableTracking={
|
||||
!segment.link.uri.startsWith('https://bsky.app') &&
|
||||
!segment.link.uri.startsWith('https://go.bsky.app')
|
||||
@@ -193,7 +189,7 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) {
|
||||
<Link
|
||||
key={counter}
|
||||
href={`/profile/${segment.mention.did}`}
|
||||
className="text-blue-500 hover:underline">
|
||||
className="text-brand hover:underline">
|
||||
{segment.text}
|
||||
</Link>,
|
||||
)
|
||||
@@ -205,7 +201,7 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) {
|
||||
<Link
|
||||
key={counter}
|
||||
href={`/hashtag/${segment.tag.tag}`}
|
||||
className="text-blue-500 hover:underline">
|
||||
className="text-brand hover:underline">
|
||||
{segment.text}
|
||||
</Link>,
|
||||
)
|
||||
@@ -217,7 +213,7 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) {
|
||||
}
|
||||
|
||||
return (
|
||||
<p className="min-[300px]:text-lg leading-6 min-[300px]:leading-6 break-word break-words whitespace-pre-wrap">
|
||||
<p className="text-md min-[400px]:text-lg leading-6 min-[300px]:leading-6 break-word break-words whitespace-pre-wrap">
|
||||
{richText}
|
||||
</p>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user