From 8e29b1f63309ef9ac2da21f62e03b66d477244e9 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Sat, 13 Apr 2024 02:07:39 +0100 Subject: [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 --- bskyembed/src/app.tsx | 18 --- bskyembed/src/container.tsx | 32 +++++ bskyembed/src/embed.tsx | 299 ++++++++++++++++++++++++++++++++++++++++++++ bskyembed/src/index.css | 34 +---- bskyembed/src/link.tsx | 21 ++++ bskyembed/src/main.tsx | 83 +++++++++++- bskyembed/src/post.tsx | 150 ++++++++++++++++++++++ bskyembed/src/utils.ts | 15 +++ 8 files changed, 604 insertions(+), 48 deletions(-) delete mode 100644 bskyembed/src/app.tsx create mode 100644 bskyembed/src/container.tsx create mode 100644 bskyembed/src/embed.tsx create mode 100644 bskyembed/src/link.tsx create mode 100644 bskyembed/src/post.tsx create mode 100644 bskyembed/src/utils.ts (limited to 'bskyembed/src') diff --git a/bskyembed/src/app.tsx b/bskyembed/src/app.tsx deleted file mode 100644 index 4fba80d59..000000000 --- a/bskyembed/src/app.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import {Fragment, h} from 'preact' - -export function App() { - return ( - <> -

Hello Vite + Preact!

-

- - Learn Preact - -

- - ) -} diff --git a/bskyembed/src/container.tsx b/bskyembed/src/container.tsx new file mode 100644 index 000000000..0d120e1b7 --- /dev/null +++ b/bskyembed/src/container.tsx @@ -0,0 +1,32 @@ +import {ComponentChildren, h} from 'preact' +import {useRef} from 'preact/hooks' + +import {Link} from './link' + +export function Container({ + children, + href, +}: { + children: ComponentChildren + href: string +}) { + const ref = useRef(null) + return ( +
{ + if (ref.current) { + // forwardRef requires preact/compat - let's keep it simple + // to keep the bundle size down + const anchor = ref.current.querySelector('a') + if (anchor) { + anchor.click() + } + } + }}> + + {children} +
+ ) +} diff --git a/bskyembed/src/embed.tsx b/bskyembed/src/embed.tsx new file mode 100644 index 000000000..0980c5e7f --- /dev/null +++ b/bskyembed/src/embed.tsx @@ -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 + } + + // Case 2: External link + if (AppBskyEmbedExternal.isView(content)) { + return + } + + // 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 ( + + The author of the quoted post has requested their posts not be + displayed on external sites. + + ) + } + + let text + if (AppBskyFeedPost.isRecord(record.value)) { + text = record.value.text + } + return ( + +
+ +

+ {record.author.displayName} + + @{record.author.handle} + +

+
+ {text &&

{text}

} + {record.embeds + ?.filter(embed => { + if (AppBskyEmbedImages.isView(embed)) return true + if (AppBskyEmbedExternal.isView(embed)) return true + return false + }) + .map(embed => ( + + ))} + + ) + } + + // Case 3.2: List + if (AppBskyGraphDefs.isListView(record)) { + return ( + + ) + } + + // Case 3.3: Feed + if (AppBskyFeedDefs.isGeneratorView(record)) { + return ( + + ) + } + + // Case 3.4: Labeler + if (AppBskyLabelerDefs.isLabelerView(record)) { + return ( + + ) + } + + // Case 3.5: Post not found + if (AppBskyEmbedRecord.isViewNotFound(record)) { + return Quoted post not found, it may have been deleted. + } + + // Case 3.6: Post blocked + if (AppBskyEmbedRecord.isViewBlocked(record)) { + return The quoted post is blocked. + } + + throw new Error('Unknown embed type') + } + + // Case 4: Record with media + if (AppBskyEmbedRecordWithMedia.isView(content)) { + return ( +
+ + +
+ ) + } + + throw new Error('Unsupported embed type') + } catch (err) { + return ( + {err instanceof Error ? err.message : 'An error occurred'} + ) + } +} + +function Info({children}: {children: ComponentChildren}) { + return ( +
+ +

{children}

+
+ ) +} + +function ImageEmbed({content}: {content: AppBskyEmbedImages.View}) { + switch (content.images.length) { + case 1: + return ( + {content.images[0].alt} + ) + case 2: + return ( +
+ {content.images.map((image, i) => ( + {image.alt} + ))} +
+ ) + case 3: + return ( +
+ {content.images[0].alt} +
+ {content.images.slice(1).map((image, i) => ( + {image.alt} + ))} +
+
+ ) + case 4: + return ( +
+ {content.images.map((image, i) => ( + {image.alt} + ))} +
+ ) + 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 ( + + {content.external.thumb && ( + + )} +
+

+ {toNiceDomain(content.external.uri)} +

+

{content.external.title}

+

+ {content.external.description} +

+
+ + ) +} + +function GenericWithImage({ + title, + subtitle, + href, + image, + description, +}: { + title: string + subtitle: string + href: string + image?: string + description?: string +}) { + return ( + +
+ {image ? ( + {title} + ) : ( +
+ )} +
+

{title}

+

{subtitle}

+
+
+ {description &&

{description}

} + + ) +} diff --git a/bskyembed/src/index.css b/bskyembed/src/index.css index b8c94dfb5..23457ec28 100644 --- a/bskyembed/src/index.css +++ b/bskyembed/src/index.css @@ -1,29 +1,7 @@ -html, body { - height: 100%; - width: 100%; - padding: 0; - margin: 0; - background: #FAFAFA; - font-family: 'Helvetica Neue', arial, sans-serif; - font-weight: 400; - color: #444; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} +@tailwind base; +@tailwind components; +@tailwind utilities; -* { - box-sizing: border-box; -} - -#app { - height: 100%; - text-align: center; - background-color: #673ab8; - color: #fff; - font-size: 1.5em; - padding-top: 100px; -} - -.link { - color: #fff; -} +.break-word { + word-break: break-word; +} \ No newline at end of file diff --git a/bskyembed/src/link.tsx b/bskyembed/src/link.tsx new file mode 100644 index 000000000..7226ecf3d --- /dev/null +++ b/bskyembed/src/link.tsx @@ -0,0 +1,21 @@ +import {h} from 'preact' + +export function Link({ + href, + className, + ...props +}: { + href: string + className?: string +} & h.JSX.HTMLAttributes) { + return ( + evt.stopPropagation()} + className={`cursor-pointer ${className || ''}`} + {...props} + /> + ) +} diff --git a/bskyembed/src/main.tsx b/bskyembed/src/main.tsx index 349f0ee78..895675434 100644 --- a/bskyembed/src/main.tsx +++ b/bskyembed/src/main.tsx @@ -1,9 +1,88 @@ import './index.css' +import {AppBskyFeedDefs, BskyAgent} from '@atproto/api' import {h, render} from 'preact' -import {App} from './app' +import logo from '../assets/logo.svg' +import {Container} from './container' +import {Link} from './link' +import {Post} from './post' +import {getRkey} from './utils' const root = document.getElementById('app') if (!root) throw new Error('No root element') -render(, root) + +const searchParams = new URLSearchParams(window.location.search) + +const agent = new BskyAgent({ + service: 'https://public.api.bsky.app', +}) + +const uri = searchParams.get('uri') + +if (!uri) { + throw new Error('No uri in query string') +} + +agent + .getPostThread({ + uri, + depth: 0, + parentHeight: 0, + }) + .then(({data}) => { + if (!AppBskyFeedDefs.isThreadViewPost(data.thread)) { + throw new Error('Expected a ThreadViewPost') + } + const pwiOptOut = !!data.thread.post.author.labels?.find( + label => label.val === '!no-unauthenticated', + ) + if (pwiOptOut) { + render(, root) + } else { + render(, root) + } + }) + .catch(err => { + console.error(err) + render(, root) + }) + +function PwiOptOut({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) { + const href = `/profile/${thread.post.author.did}/post/${getRkey(thread.post)}` + return ( + + + + +
+

+ The author of this post has requested their posts not be displayed on + external sites. +

+ + View on Bluesky + +
+ + ) +} + +function ErrorMessage() { + return ( + + + + +

+ Post not found, it may have been deleted. +

+ + ) +} diff --git a/bskyembed/src/post.tsx b/bskyembed/src/post.tsx new file mode 100644 index 000000000..e10a502d2 --- /dev/null +++ b/bskyembed/src/post.tsx @@ -0,0 +1,150 @@ +import {AppBskyFeedDefs, AppBskyFeedPost, RichText} from '@atproto/api' +import {h} from 'preact' + +import replyIcon from '../assets/bubble_filled_stroke2_corner2_rounded.svg' +import likeIcon from '../assets/heart2_filled_stroke2_corner0_rounded.svg' +import logo from '../assets/logo.svg' +import repostIcon from '../assets/repost_stroke2_corner2_rounded.svg' +import {Container} from './container' +import {Embed} from './embed' +import {Link} from './link' +import {getRkey, niceDate} from './utils' + +interface Props { + thread: AppBskyFeedDefs.ThreadViewPost +} + +export function Post({thread}: Props) { + const post = thread.post + + let record: AppBskyFeedPost.Record | null = null + if (AppBskyFeedPost.isRecord(post.record)) { + record = post.record + } + + const href = `/profile/${post.author.did}/post/${getRkey(post)}` + return ( + +
+
+ + + +
+ +

{post.author.displayName}

+ + +

@{post.author.handle}

+ +
+ + + +
+ + + +
+ {!!post.likeCount && ( +
+ +

+ {post.likeCount} +

+
+ )} + {!!post.repostCount && ( +
+ +

+ {post.repostCount} +

+
+ )} +
+ +

Reply

+
+
+

+ {post.replyCount + ? `Read ${post.replyCount} ${ + post.replyCount > 1 ? 'replies' : 'reply' + } on Bluesky` + : `View on Bluesky`} +

+

+ View on Bluesky +

+
+
+ + ) +} + +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.isLink() && segment.link) { + richText.push( + + {segment.text} + , + ) + } else if (segment.isMention() && segment.mention) { + richText.push( + + {segment.text} + , + ) + } else if (segment.isTag() && segment.tag) { + richText.push( + + {segment.text} + , + ) + } else { + richText.push(segment.text) + } + + counter++ + } + + return ( +

+ {richText} +

+ ) +} diff --git a/bskyembed/src/utils.ts b/bskyembed/src/utils.ts new file mode 100644 index 000000000..3408fcd97 --- /dev/null +++ b/bskyembed/src/utils.ts @@ -0,0 +1,15 @@ +export function niceDate(date: number | string | Date) { + const d = new Date(date) + return `${d.toLocaleDateString('en-us', { + year: 'numeric', + month: 'short', + day: 'numeric', + })} at ${d.toLocaleTimeString(undefined, { + hour: 'numeric', + minute: '2-digit', + })}` +} + +export function getRkey({uri}: {uri: string}): string { + return uri.split('/').pop() as string +} -- cgit 1.4.1