[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 2024-04-13 02:07:39 +01:00 committed by GitHub
parent 93731e6d6b
commit 8e29b1f633
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 2371 additions and 1315 deletions

View file

@ -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(<App />, 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(<PwiOptOut thread={data.thread} />, root)
} else {
render(<Post thread={data.thread} />, root)
}
})
.catch(err => {
console.error(err)
render(<ErrorMessage />, root)
})
function PwiOptOut({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
const href = `/profile/${thread.post.author.did}/post/${getRkey(thread.post)}`
return (
<Container href={href}>
<Link
href={href}
className="transition-transform hover:scale-110 absolute top-4 right-4">
<img src={logo as string} className="h-6" />
</Link>
<div className="w-full py-12 gap-4 flex flex-col items-center">
<p className="max-w-80 text-center w-full text-textLight">
The author of this post has requested their posts not be displayed on
external sites.
</p>
<Link
href={href}
className="max-w-80 rounded-lg bg-brand text-white color-white text-center py-1 px-4 w-full mx-auto">
View on Bluesky
</Link>
</div>
</Container>
)
}
function ErrorMessage() {
return (
<Container href="https://bsky.app/">
<Link
href="https://bsky.app/"
className="transition-transform hover:scale-110 absolute top-4 right-4">
<img src={logo as string} className="h-6" />
</Link>
<p className="my-16 text-center w-full text-textLight">
Post not found, it may have been deleted.
</p>
</Container>
)
}