react-bluesky-embed
Version:
React Bluesky Embed allows you to embed post threads, profiles, and comments in your React application when using Next.js, Create React App, Vite, and more.
1 lines • 5.49 kB
JavaScript
import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{AppBskyFeedPost,AppBskyRichtextFacet,RichText}from"@atproto/api";import{CommentSection}from"./comments.js";import{Container}from"./container.js";import{Embed}from"./embed.js";import{BlueskyLogo,LikeIcon,ReplyIcon,RepostIcon}from"./icons.js";import{CONTENT_LABELS}from"./labels.js";import{Link}from"./link.js";import{getRkey,niceDate,prettyNumber}from"./utils.js";export function Post({thread,theme,hidePost=false}){var _post_author_labels,_record_langs;const post=thread.post;const isAuthorLabeled=(_post_author_labels=post.author.labels)==null?void 0:_post_author_labels.some(label=>CONTENT_LABELS.includes(label.val));let record=null;if(AppBskyFeedPost.isRecord(post.record)){record=post.record}const href=`/profile/${post.author.did}/post/${getRkey(post)}`;return /*#__PURE__*/_jsx(Container,{theme:theme,href:href,children:/*#__PURE__*/_jsxs("div",{className:"flex-1 flex-col flex gap-2",children:[!hidePost&&/*#__PURE__*/_jsxs("div",{className:"flex-1 flex-col flex gap-2",lang:record==null?void 0:(_record_langs=record.langs)==null?void 0:_record_langs[0],children:[/*#__PURE__*/_jsxs("div",{className:"flex gap-2.5 items-center",children:[/*#__PURE__*/_jsx(Link,{href:`/profile/${post.author.did}`,className:"rounded-full",children:/*#__PURE__*/_jsx("div",{className:"w-10 h-10 overflow-hidden rounded-full bg-neutral-300 shrink-0",children:/*#__PURE__*/_jsx("img",{loading:"lazy",src:post.author.avatar,style:isAuthorLabeled?{filter:"blur(2.5px)"}:undefined,alt:"author"})})}),/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Link,{href:`/profile/${post.author.did}`,className:"font-bold text-[17px] leading-5 line-clamp-1 hover:underline underline-offset-2 decoration-2",children:/*#__PURE__*/_jsx("p",{children:post.author.displayName})}),/*#__PURE__*/_jsx(Link,{href:`/profile/${post.author.did}`,className:"text-[15px] text-textLight dark:text-textDark hover:underline line-clamp-1",children:/*#__PURE__*/_jsxs("p",{children:["@",post.author.handle]})})]}),/*#__PURE__*/_jsx("div",{className:"flex-1"}),/*#__PURE__*/_jsx(Link,{href:href,className:"transition-transform hover:scale-110 shrink-0 self-start","aria-label":"See on Bluesky",children:/*#__PURE__*/_jsx(BlueskyLogo,{className:"h-7"})})]}),/*#__PURE__*/_jsx(PostContent,{record:record}),/*#__PURE__*/_jsx(Embed,{content:post.embed,labels:post.labels}),/*#__PURE__*/_jsx(Link,{href:href,children:/*#__PURE__*/_jsx("time",{dateTime:new Date(post.indexedAt).toISOString(),className:"text-textLight dark:text-textDark mt-1 text-sm hover:underline",children:niceDate(post.indexedAt)})}),/*#__PURE__*/_jsxs(Link,{href:href,className:"border-t w-full pt-2.5 flex items-center gap-5 text-sm cursor-pointer",children:[!!post.likeCount&&/*#__PURE__*/_jsxs("div",{className:"flex items-center gap-2 cursor-pointer",children:[/*#__PURE__*/_jsx(LikeIcon,{className:"w-5 h-5"}),/*#__PURE__*/_jsx("p",{className:"font-semibold text-neutral-500 dark:text-neutral-400",children:prettyNumber(post.likeCount)})]}),!!post.repostCount&&/*#__PURE__*/_jsxs("div",{className:"flex items-center gap-2 cursor-pointer",children:[/*#__PURE__*/_jsx(RepostIcon,{className:"w-5 h-5"}),/*#__PURE__*/_jsx("p",{className:"font-semibold text-neutral-500 dark:text-neutral-400",children:prettyNumber(post.repostCount)})]}),/*#__PURE__*/_jsxs("div",{className:"flex items-center gap-2 cursor-pointer",children:[/*#__PURE__*/_jsx(ReplyIcon,{className:"w-5 h-5"}),/*#__PURE__*/_jsx("p",{className:"font-semibold text-neutral-500 dark:text-neutral-400",children:"Reply"})]}),/*#__PURE__*/_jsx("div",{className:"flex-1"}),/*#__PURE__*/_jsx("p",{className:"cursor-pointer text-brand dark:text-brandDark font-bold hover:underline hidden min-[450px]:inline",children:post.replyCount?`Read ${prettyNumber(post.replyCount)} ${post.replyCount>1?"replies":"reply"} on Bluesky`:`View on Bluesky`}),/*#__PURE__*/_jsxs("p",{className:"cursor-pointer text-brand dark:text-brandDark font-bold hover:underline min-[450px]:hidden",children:[/*#__PURE__*/_jsx("span",{className:"hidden min-[380px]:inline",children:"View on "}),"Bluesky"]})]})]}),/*#__PURE__*/_jsx(CommentSection,{thread:thread})]})})}export function PostContent({record,isComment=false}){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(/*#__PURE__*/_jsx(Link,{href:segment.link.uri,className:"text-blue-600 hover:underline",disableTracking:!segment.link.uri.startsWith("https://bsky.app")&&!segment.link.uri.startsWith("https://go.bsky.app"),children:segment.text},counter))}else if(segment.mention&&AppBskyRichtextFacet.validateMention(segment.mention).success){richText.push(/*#__PURE__*/_jsx(Link,{href:`/profile/${segment.mention.did}`,className:"text-blue-600 hover:underline",children:segment.text},counter))}else if(segment.tag&&AppBskyRichtextFacet.validateTag(segment.tag).success){richText.push(/*#__PURE__*/_jsx(Link,{href:`/tag/${segment.tag.tag}`,className:"text-blue-600 hover:underline",children:segment.text},counter))}else{richText.push(segment.text)}counter++}if(isComment)return /*#__PURE__*/_jsx("p",{className:"leading-6 break-word break-words whitespace-pre-wrap",children:richText});return /*#__PURE__*/_jsx("p",{className:"min-[300px]:text-lg leading-6 break-word break-words whitespace-pre-wrap",children:richText})}