Something went wrong. Try again.
Bluesky app fork with some witchin' additions 馃挮
Something went wrong. Try again.
8.2 kB 路 220 lines
TSX
at prod
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221import { AppBskyFeedDefs, AppBskyFeedPost, AppBskyRichtextFacet, RichText,} from '@atproto/api'import {h} from 'preact'
import logo from '../../assets/logo_full_name.svg'import {Like as LikeIcon} from '../icons/Like'import {Reply as ReplyIcon} from '../icons/Reply'import {Repost as RepostIcon} from '../icons/Repost'import {Robot as RobotIcon} from '../icons/Robot'import {CONTENT_LABELS} from '../labels'import * as bsky from '../types/bsky'import {niceDate} from '../util/nice-date'import {prettyNumber} from '../util/pretty-number'import {getRkey} from '../util/rkey'import {getVerificationState} from '../util/verification-state'import {Container} from './container'import {Embed} from './embed'import {Link} from './link'import {VerificationCheck} from './verification-check'
interface Props { thread: AppBskyFeedDefs.ThreadViewPost}
export function Post({thread}: Props) { const post = thread.post
const isAuthorLabeled = post.author.labels?.some(label => CONTENT_LABELS.includes(label.val), )
let record: AppBskyFeedPost.Record | null = null if ( bsky.dangerousIsType<AppBskyFeedPost.Record>( post.record, AppBskyFeedPost.isRecord, ) ) { record = post.record }
const verification = getVerificationState({profile: post.author}) const isBot = post.author.labels?.some( l => l.val === 'bot' && l.src === post.author.did, )
const href = `/profile/${post.author.did}/post/${getRkey(post)}`
return ( <Container href={href}> <div 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 href={`/profile/${post.author.did}`} className="rounded-full shrink-0"> <div className="w-10 h-10 overflow-hidden rounded-full bg-neutral-300 dark:bg-slate-700 shrink-0"> <img src={post.author.avatar} style={isAuthorLabeled ? {filter: 'blur(2.5px)'} : undefined} /> </div> </Link> <div className="flex flex-1 flex-col min-w-0"> <div className="flex flex-1 items-center"> <Link href={`/profile/${post.author.did}`} className="block font-semibold 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 && ( <VerificationCheck className="pl-[3px] mt-px shrink-0" verifier={verification.role === 'verifier'} size={15} /> )} {isBot && ( <RobotIcon className="pl-[3px] mt-px shrink-0 text-slate-500 dark:text-slate-400" size={15} /> )} </div> <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-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} className="transition-transform hover:scale-110 shrink-0"> <img src={logo} className="h-5 min-[400px]:h-7" /> </Link> </div> </div> </Container> )}
function PostContent({record}: {record: AppBskyFeedPost.Record | null}) { if (!record) return null
const rt = new RichText({ text: record.text, facets: record.facets, })
const richText = []
let counter = 0 for (const segment of rt.segments()) { if ( segment.link && AppBskyRichtextFacet.validateLink(segment.link).success ) { richText.push( <Link key={counter} href={segment.link.uri} className="text-brand hover:underline" disableTracking={ !segment.link.uri.startsWith('https://bsky.app') && !segment.link.uri.startsWith('https://go.bsky.app') }> {segment.text} </Link>, ) } else if ( segment.mention && AppBskyRichtextFacet.validateMention(segment.mention).success ) { richText.push( <Link key={counter} href={`/profile/${segment.mention.did}`} className="text-brand hover:underline"> {segment.text} </Link>, ) } else if ( segment.tag && AppBskyRichtextFacet.validateTag(segment.tag).success ) { richText.push( <Link key={counter} href={`/hashtag/${segment.tag.tag}`} className="text-brand hover:underline"> {segment.text} </Link>, ) } else { richText.push(segment.text) }
counter++ }
return ( <p className="text-md min-[400px]:text-lg leading-snug min-[400px]:leading-snug break-word break-words whitespace-pre-wrap"> {richText} </p> )}