[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>

1 files changed, 81 insertions, 2 deletions

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(<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>
+  )
+}