[Embeds] Embed for single post (#3450)
* add bskyembed vite app * create build script (temp until embedr is ready) * add build output to web build * simplify post-build step by copying everything at once * add simple post viewer * add butterfly logo * add vite plugin legacy * proper error screen * add image embed * add url embed * record embed + embedwithmedia * add list+feed embeds * add labeller embed (just to be safe) * fix curatelist and modlist being the wrong way around * Add PWI opt-out * add favicon * improve wording of PWI * remove padding I used for screenshots * add disabled state to embed * improve PWI styles by adding an icon * remove unused prop * rm open proxy * [Embeds] Add CTA and add general polish - input needed! (#3454) * add CTA, colourful icons, and bigger logo * make hover effect smaller + add to cta * more responsive + preserve whitespace * add trailing newsline to deploy script * add repost indicator * Make butterfly link to content * More consistent error text wording --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
This commit is contained in:
Samuel Newman
GitHub
parent
93731e6d6b
commit
8e29b1f633
23 changed files with 2371 additions and 1315 deletions
299
bskyembed/src/embed.tsx
Normal file
299
bskyembed/src/embed.tsx
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
import {
|
||||
AppBskyEmbedExternal,
|
||||
AppBskyEmbedImages,
|
||||
AppBskyEmbedRecord,
|
||||
AppBskyEmbedRecordWithMedia,
|
||||
AppBskyFeedDefs,
|
||||
AppBskyFeedPost,
|
||||
AppBskyGraphDefs,
|
||||
AppBskyLabelerDefs,
|
||||
} from '@atproto/api'
|
||||
import {ComponentChildren, h} from 'preact'
|
||||
|
||||
import infoIcon from '../assets/circleInfo_stroke2_corner0_rounded.svg'
|
||||
import {Link} from './link'
|
||||
import {getRkey} from './utils'
|
||||
|
||||
export function Embed({content}: {content: AppBskyFeedDefs.PostView['embed']}) {
|
||||
if (!content) return null
|
||||
|
||||
try {
|
||||
// Case 1: Image
|
||||
if (AppBskyEmbedImages.isView(content)) {
|
||||
return <ImageEmbed content={content} />
|
||||
}
|
||||
|
||||
// Case 2: External link
|
||||
if (AppBskyEmbedExternal.isView(content)) {
|
||||
return <ExternalEmbed content={content} />
|
||||
}
|
||||
|
||||
// Case 3: Record (quote or linked post)
|
||||
if (AppBskyEmbedRecord.isView(content)) {
|
||||
const record = content.record
|
||||
|
||||
// Case 3.1: Post
|
||||
if (AppBskyEmbedRecord.isViewRecord(record)) {
|
||||
const pwiOptOut = !!record.author.labels?.find(
|
||||
label => label.val === '!no-unauthenticated',
|
||||
)
|
||||
if (pwiOptOut) {
|
||||
return (
|
||||
<Info>
|
||||
The author of the quoted post has requested their posts not be
|
||||
displayed on external sites.
|
||||
</Info>
|
||||
)
|
||||
}
|
||||
|
||||
let text
|
||||
if (AppBskyFeedPost.isRecord(record.value)) {
|
||||
text = record.value.text
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
href={`/profile/${record.author.did}/post/${getRkey(record)}`}
|
||||
className="transition-colors hover:bg-neutral-100 border rounded-lg p-2 gap-1.5 w-full flex flex-col">
|
||||
<div className="flex gap-1.5 items-center">
|
||||
<img
|
||||
src={record.author.avatar}
|
||||
className="w-4 h-4 rounded-full bg-neutral-300 shrink-0"
|
||||
/>
|
||||
<p className="line-clamp-1 text-sm">
|
||||
<span className="font-bold">{record.author.displayName}</span>
|
||||
<span className="text-textLight ml-1">
|
||||
@{record.author.handle}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
{text && <p className="text-sm">{text}</p>}
|
||||
{record.embeds
|
||||
?.filter(embed => {
|
||||
if (AppBskyEmbedImages.isView(embed)) return true
|
||||
if (AppBskyEmbedExternal.isView(embed)) return true
|
||||
return false
|
||||
})
|
||||
.map(embed => (
|
||||
<Embed key={embed.$type} content={embed} />
|
||||
))}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
// Case 3.2: List
|
||||
if (AppBskyGraphDefs.isListView(record)) {
|
||||
return (
|
||||
<GenericWithImage
|
||||
image={record.avatar}
|
||||
title={record.name}
|
||||
href={`/profile/${record.creator.did}/lists/${getRkey(record)}`}
|
||||
subtitle={
|
||||
record.purpose === AppBskyGraphDefs.MODLIST
|
||||
? `Moderation list by @${record.creator.handle}`
|
||||
: `User list by @${record.creator.handle}`
|
||||
}
|
||||
description={record.description}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// Case 3.3: Feed
|
||||
if (AppBskyFeedDefs.isGeneratorView(record)) {
|
||||
return (
|
||||
<GenericWithImage
|
||||
image={record.avatar}
|
||||
title={record.displayName}
|
||||
href={`/profile/${record.creator.did}/feed/${getRkey(record)}`}
|
||||
subtitle={`Feed by @${record.creator.handle}`}
|
||||
description={`Liked by ${record.likeCount ?? 0} users`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// Case 3.4: Labeler
|
||||
if (AppBskyLabelerDefs.isLabelerView(record)) {
|
||||
return (
|
||||
<GenericWithImage
|
||||
image={record.creator.avatar}
|
||||
title={record.creator.displayName || record.creator.handle}
|
||||
href={`/profile/${record.creator.did}`}
|
||||
subtitle="Labeler"
|
||||
description={`Liked by ${record.likeCount ?? 0} users`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// Case 3.5: Post not found
|
||||
if (AppBskyEmbedRecord.isViewNotFound(record)) {
|
||||
return <Info>Quoted post not found, it may have been deleted.</Info>
|
||||
}
|
||||
|
||||
// Case 3.6: Post blocked
|
||||
if (AppBskyEmbedRecord.isViewBlocked(record)) {
|
||||
return <Info>The quoted post is blocked.</Info>
|
||||
}
|
||||
|
||||
throw new Error('Unknown embed type')
|
||||
}
|
||||
|
||||
// Case 4: Record with media
|
||||
if (AppBskyEmbedRecordWithMedia.isView(content)) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Embed content={content.media} />
|
||||
<Embed
|
||||
content={{
|
||||
$type: 'app.bsky.embed.record#view',
|
||||
record: content.record.record,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
throw new Error('Unsupported embed type')
|
||||
} catch (err) {
|
||||
return (
|
||||
<Info>{err instanceof Error ? err.message : 'An error occurred'}</Info>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function Info({children}: {children: ComponentChildren}) {
|
||||
return (
|
||||
<div className="w-full rounded-lg border py-2 px-2.5 flex-row flex gap-2 bg-neutral-50">
|
||||
<img src={infoIcon as string} className="w-4 h-4 shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-textLight">{children}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ImageEmbed({content}: {content: AppBskyEmbedImages.View}) {
|
||||
switch (content.images.length) {
|
||||
case 1:
|
||||
return (
|
||||
<img
|
||||
src={content.images[0].thumb}
|
||||
alt={content.images[0].alt}
|
||||
className="w-full rounded-lg overflow-hidden object-cover h-auto max-h-[1000px]"
|
||||
/>
|
||||
)
|
||||
case 2:
|
||||
return (
|
||||
<div className="flex gap-1 rounded-lg overflow-hidden w-full aspect-[2/1]">
|
||||
{content.images.map((image, i) => (
|
||||
<img
|
||||
key={i}
|
||||
src={image.thumb}
|
||||
alt={image.alt}
|
||||
className="w-1/2 h-full object-cover rounded-sm"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
case 3:
|
||||
return (
|
||||
<div className="flex gap-1 rounded-lg overflow-hidden w-full aspect-[2/1]">
|
||||
<img
|
||||
src={content.images[0].thumb}
|
||||
alt={content.images[0].alt}
|
||||
className="flex-[3] object-cover rounded-sm"
|
||||
/>
|
||||
<div className="flex flex-col gap-1 flex-[2]">
|
||||
{content.images.slice(1).map((image, i) => (
|
||||
<img
|
||||
key={i}
|
||||
src={image.thumb}
|
||||
alt={image.alt}
|
||||
className="w-full h-full object-cover rounded-sm"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
case 4:
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
|
||||
{content.images.map((image, i) => (
|
||||
<img
|
||||
key={i}
|
||||
src={image.thumb}
|
||||
alt={image.alt}
|
||||
className="aspect-square w-full object-cover rounded-sm"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function ExternalEmbed({content}: {content: AppBskyEmbedExternal.View}) {
|
||||
function toNiceDomain(url: string): string {
|
||||
try {
|
||||
const urlp = new URL(url)
|
||||
return urlp.host ? urlp.host : url
|
||||
} catch (e) {
|
||||
return url
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
href={content.external.uri}
|
||||
className="w-full rounded-lg overflow-hidden border flex flex-col items-stretch">
|
||||
{content.external.thumb && (
|
||||
<img
|
||||
src={content.external.thumb}
|
||||
className="aspect-[1.91/1] object-cover"
|
||||
/>
|
||||
)}
|
||||
<div className="py-3 px-4">
|
||||
<p className="text-sm text-textLight line-clamp-1">
|
||||
{toNiceDomain(content.external.uri)}
|
||||
</p>
|
||||
<p className="font-semibold line-clamp-3">{content.external.title}</p>
|
||||
<p className="text-sm text-textLight line-clamp-2 mt-0.5">
|
||||
{content.external.description}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function GenericWithImage({
|
||||
title,
|
||||
subtitle,
|
||||
href,
|
||||
image,
|
||||
description,
|
||||
}: {
|
||||
title: string
|
||||
subtitle: string
|
||||
href: string
|
||||
image?: string
|
||||
description?: string
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className="w-full rounded-lg border py-2 px-3 flex flex-col gap-2">
|
||||
<div className="flex gap-2.5 items-center">
|
||||
{image ? (
|
||||
<img
|
||||
src={image}
|
||||
alt={title}
|
||||
className="w-8 h-8 rounded-md bg-neutral-300 shrink-0"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-md bg-brand shrink-0" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="font-bold text-sm">{title}</p>
|
||||
<p className="text-textLight text-sm">{subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
{description && <p className="text-textLight text-sm">{description}</p>}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue