acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

[APP-2065] yassify app embed (#10210)

Browse Source
This commit is contained in:
Spence Pope
2026-04-10 12:08:09 -04:00
committed by GitHub
parent d8fdfddbaf
commit 13b453e506
6 changed files with 82 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bskyembed/src/components/container.tsx
+3 -5
View File
@@ -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>
)
}
bskyembed/src/components/post.tsx
+59 -63
View File
@@ -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>
)
bskyembed/src/screens/landing.tsx
+1
View File
@@ -39,6 +39,7 @@ render(<LandingPage />, root)
function LandingPage() {
const [uri, setUri] = useState('')
const [colorMode, setColorMode] = useState<ColorModeValues>('system')
const [error, setError] = useState<string | null>(null)
const [loading, setLoading] = useState(false)
const [thread, setThread] = useState<AppBskyFeedDefs.ThreadViewPost | null>(
bskyembed/src/util/nice-date.ts
+4 -4
View File
@@ -1,11 +1,11 @@
export function niceDate(date: number | string | Date) {
const d = new Date(date)
return `${d.toLocaleDateString('en-us', {
return `${d.toLocaleTimeString(undefined, {
hour: 'numeric',
minute: '2-digit',
})} · ${d.toLocaleDateString('en-us', {
year: 'numeric',
month: 'short',
day: 'numeric',
})} at ${d.toLocaleTimeString(undefined, {
hour: 'numeric',
minute: '2-digit',
})}`
}