[Embeds] Embed subdomain landing page (#3501)

* add build output to web build

* simplify post-build step by copying everything at once

* make script that converts placeholder -> iframe

* dynamically resize iframe based on inner content

Requires the iframe content to `postMessage` its height back up to the parent

* add lang to embed

* svg explicit height -> viewBox

* add build output to web build

* simplify post-build step by copying everything at once

* attempt to fix go embed issue

* rm changes to bskyweb

* remove another bskyweb change

* embed landing page

* Drop xl breakpoint, too far down

* Remove pointer enter behavior

* Avoid button width jump

* Escape HTML

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

bskyembed/src/components/container.tsx

@@ -0,0 +1,55 @@
+import {ComponentChildren, h} from 'preact'
+import {useEffect, useRef} from 'preact/hooks'
+
+import {Link} from './link'
+
+export function Container({
+  children,
+  href,
+}: {
+  children: ComponentChildren
+  href: string
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const prevHeight = useRef(0)
+
+  useEffect(() => {
+    if (ref.current) {
+      const observer = new ResizeObserver(entries => {
+        const entry = entries[0]
+        if (!entry) return
+
+        let {height} = entry.contentRect
+        height += 2 // border top and bottom
+        if (height !== prevHeight.current) {
+          prevHeight.current = height
+          window.parent.postMessage(
+            {height, id: new URLSearchParams(window.location.search).get('id')},
+            '*',
+          )
+        }
+      })
+      observer.observe(ref.current)
+      return () => observer.disconnect()
+    }
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      className="w-full bg-white hover:bg-neutral-50 relative transition-colors max-w-[600px] min-w-[300px] flex border rounded-xl"
+      onClick={() => {
+        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()
+          }
+        }
+      }}>
+      <Link href={href} />
+      <div className="flex-1 px-4 pt-3 pb-2.5">{children}</div>
+    </div>
+  )
+}

bskyembed/src/components/embed.tsx

@@ -10,9 +10,9 @@ import {
 } from '@atproto/api'
 import {ComponentChildren, h} from 'preact'
 
-import infoIcon from '../assets/circleInfo_stroke2_corner0_rounded.svg'
+import infoIcon from '../../assets/circleInfo_stroke2_corner0_rounded.svg'
+import {getRkey} from '../utils'
 import {Link} from './link'
-import {getRkey} from './utils'
 
 export function Embed({content}: {content: AppBskyFeedDefs.PostView['embed']}) {
   if (!content) return null

bskyembed/src/components/post.tsx

@@ -1,14 +1,14 @@
 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 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 {getRkey, niceDate} from '../utils'
 import {Container} from './container'
 import {Embed} from './embed'
 import {Link} from './link'
-import {getRkey, niceDate} from './utils'
 
 interface Props {
   thread: AppBskyFeedDefs.ThreadViewPost
@@ -25,7 +25,7 @@ export function Post({thread}: Props) {
   const href = `/profile/${post.author.did}/post/${getRkey(post)}`
   return (
     <Container href={href}>
-      <div className="flex-1 flex-col flex gap-2">
+      <div className="flex-1 flex-col flex gap-2" lang={record?.langs?.[0]}>
         <div className="flex gap-2.5 items-center">
           <Link href={`/profile/${post.author.did}`} className="rounded-full">
             <img
@@ -143,7 +143,7 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) {
   }
 
   return (
-    <p className="text-lg leading-6 break-word break-words whitespace-pre-wrap">
+    <p className="min-[300px]:text-lg leading-6 break-word break-words whitespace-pre-wrap">
       {richText}
     </p>
   )

bskyembed/src/container.tsx

@@ -1,32 +0,0 @@
-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<HTMLDivElement>(null)
-  return (
-    <div
-      ref={ref}
-      className="w-full bg-white hover:bg-neutral-50 relative transition-colors max-w-[550px] min-w-[300px] flex border rounded-xl px-4 pt-3 pb-2.5"
-      onClick={() => {
-        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()
-          }
-        }
-      }}>
-      <Link href={href} />
-      {children}
-    </div>
-  )
-}

bskyembed/src/screens/landing.tsx

@@ -0,0 +1,266 @@
+import '../index.css'
+
+import {AppBskyFeedDefs, AppBskyFeedPost, AtUri, BskyAgent} from '@atproto/api'
+import {Fragment, h, render} from 'preact'
+import {useEffect, useMemo, useRef, useState} from 'preact/hooks'
+
+import arrowBottom from '../../assets/arrowBottom_stroke2_corner0_rounded.svg'
+import logo from '../../assets/logo.svg'
+import {Container} from '../components/container'
+import {Link} from '../components/link'
+import {Post} from '../components/post'
+import {niceDate} from '../utils'
+
+const DEFAULT_POST = 'https://bsky.app/profile/emilyliu.me/post/3jzn6g7ixgq2y'
+const DEFAULT_URI =
+  'at://did:plc:vjug55kidv6sye7ykr5faxxn/app.bsky.feed.post/3jzn6g7ixgq2y'
+
+export const EMBED_SERVICE = 'https://embed.bsky.app'
+export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js`
+
+const root = document.getElementById('app')
+if (!root) throw new Error('No root element')
+
+const agent = new BskyAgent({
+  service: 'https://public.api.bsky.app',
+})
+
+render(<LandingPage />, root)
+
+function LandingPage() {
+  const [uri, setUri] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [thread, setThread] = useState<AppBskyFeedDefs.ThreadViewPost | null>(
+    null,
+  )
+
+  useEffect(() => {
+    void (async () => {
+      setError(null)
+      try {
+        let atUri = DEFAULT_URI
+
+        if (uri) {
+          if (uri.startsWith('at://')) {
+            atUri = uri
+          } else {
+            try {
+              const urlp = new URL(uri)
+              if (!urlp.hostname.endsWith('bsky.app')) {
+                throw new Error('Invalid hostname')
+              }
+              const split = urlp.pathname.slice(1).split('/')
+              if (split.length < 4) {
+                throw new Error('Invalid pathname')
+              }
+              const [profile, didOrHandle, type, rkey] = split
+              if (profile !== 'profile' || type !== 'post') {
+                throw new Error('Invalid profile or type')
+              }
+
+              let did = didOrHandle
+              if (!didOrHandle.startsWith('did:')) {
+                const resolution = await agent.resolveHandle({
+                  handle: didOrHandle,
+                })
+                if (!resolution.data.did) {
+                  throw new Error('No DID found')
+                }
+                did = resolution.data.did
+              }
+
+              atUri = `at://${did}/app.bsky.feed.post/${rkey}`
+            } catch (err) {
+              console.log(err)
+              throw new Error('Invalid Bluesky URL')
+            }
+          }
+        }
+
+        const {data} = await agent.getPostThread({
+          uri: atUri,
+          depth: 0,
+          parentHeight: 0,
+        })
+
+        if (!AppBskyFeedDefs.isThreadViewPost(data.thread)) {
+          throw new Error('Post not found')
+        }
+
+        setThread(data.thread)
+      } catch (err) {
+        console.error(err)
+        setError(err instanceof Error ? err.message : 'Invalid Bluesky URL')
+      }
+    })()
+  }, [uri])
+
+  return (
+    <main className="w-full min-h-screen flex flex-col items-center gap-8 py-14 px-4 md:pt-32">
+      <Link
+        href="https://bsky.social/about"
+        className="transition-transform hover:scale-110">
+        <img src={logo as string} className="h-10" />
+      </Link>
+
+      <h1 className="text-4xl font-bold">Embed a Bluesky Post</h1>
+
+      <div className="w-full max-w-[600px] flex flex-col gap-2">
+        <input
+          type="text"
+          value={uri}
+          onInput={e => setUri(e.currentTarget.value)}
+          className="border rounded-lg py-3 w-full max-w-[600px] px-4"
+          placeholder={DEFAULT_POST}
+        />
+        <p className={`text-red-500 ${error ? '' : 'invisible'}`}>{error}</p>
+      </div>
+
+      <img src={arrowBottom as string} className="w-6" />
+
+      <div className="w-full max-w-[600px] gap-8 flex flex-col">
+        {uri && !error && thread && <Snippet thread={thread} />}
+
+        {thread ? (
+          <Post thread={thread} key={thread.post.uri} />
+        ) : (
+          <Container href="https://bsky.social/about">
+            <Link
+              href="https://bsky.social/about"
+              className="transition-transform hover:scale-110 absolute top-4 right-4">
+              <img src={logo as string} className="h-8" />
+            </Link>
+            <div className="h-32" />
+          </Container>
+        )}
+      </div>
+    </main>
+  )
+}
+
+function Snippet({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
+  const ref = useRef<HTMLInputElement>(null)
+  const [copied, setCopied] = useState(false)
+
+  // reset copied state after 2 seconds
+  useEffect(() => {
+    if (copied) {
+      const timeout = setTimeout(() => {
+        setCopied(false)
+      }, 2000)
+      return () => clearTimeout(timeout)
+    }
+  }, [copied])
+
+  const snippet = useMemo(() => {
+    const record = thread.post.record
+
+    if (!AppBskyFeedPost.isRecord(record)) {
+      return ''
+    }
+
+    const profileHref = toShareUrl(
+      ['/profile', thread.post.author.did].join('/'),
+    )
+    const urip = new AtUri(thread.post.uri)
+    const href = toShareUrl(
+      ['/profile', thread.post.author.did, 'post', urip.rkey].join('/'),
+    )
+
+    const lang = record.langs ? record.langs[0] : ''
+
+    // x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x
+    // DO NOT ADD ANY NEW INTERPOLATIOONS BELOW WITHOUT ESCAPING THEM!
+    // x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x
+    return `<blockquote class="bluesky-embed" data-bluesky-uri="${escapeHtml(
+      thread.post.uri,
+    )}" data-bluesky-cid="${escapeHtml(thread.post.cid)}"><p lang="${escapeHtml(
+      lang,
+    )}">${escapeHtml(record.text)}${
+      record.embed
+        ? `<br><br><a href="${escapeHtml(href)}">[image or embed]</a>`
+        : ''
+    }</p>&mdash; ${escapeHtml(
+      thread.post.author.displayName || thread.post.author.handle,
+    )} (<a href="${escapeHtml(profileHref)}">@${escapeHtml(
+      thread.post.author.handle,
+    )}</a>) <a href="${escapeHtml(href)}">${escapeHtml(
+      niceDate(thread.post.indexedAt),
+    )}</a></blockquote><script async src="${EMBED_SCRIPT}" charset="utf-8"></script>`
+  }, [thread])
+
+  return (
+    <div className="flex gap-2 w-full">
+      <input
+        ref={ref}
+        type="text"
+        value={snippet}
+        className="border rounded-lg py-3 w-full px-4"
+        readOnly
+        autoFocus
+      />
+      <button
+        className="rounded-lg bg-brand text-white color-white py-3 px-4 whitespace-nowrap min-w-28"
+        onClick={() => {
+          ref.current?.focus()
+          ref.current?.select()
+          void navigator.clipboard.writeText(snippet)
+          setCopied(true)
+        }}>
+        {copied ? 'Copied!' : 'Copy code'}
+      </button>
+    </div>
+  )
+}
+
+function toShareUrl(path: string) {
+  return `https://bsky.app${path}`
+}
+
+/**
+ * Based on a snippet of code from React, which itself was based on the escape-html library.
+ * Copyright (c) Meta Platforms, Inc. and affiliates
+ * Copyright (c) 2012-2013 TJ Holowaychuk
+ * Copyright (c) 2015 Andreas Lubbe
+ * Copyright (c) 2015 Tiancheng "Timothy" Gu
+ * Licensed as MIT.
+ */
+const matchHtmlRegExp = /["'&<>]/
+function escapeHtml(string: string) {
+  const str = String(string)
+  const match = matchHtmlRegExp.exec(str)
+  if (!match) {
+    return str
+  }
+  let escape
+  let html = ''
+  let index
+  let lastIndex = 0
+  for (index = match.index; index < str.length; index++) {
+    switch (str.charCodeAt(index)) {
+      case 34: // "
+        escape = '&quot;'
+        break
+      case 38: // &
+        escape = '&amp;'
+        break
+      case 39: // '
+        escape = '&#x27;'
+        break
+      case 60: // <
+        escape = '&lt;'
+        break
+      case 62: // >
+        escape = '&gt;'
+        break
+      default:
+        continue
+    }
+    if (lastIndex !== index) {
+      html += str.slice(lastIndex, index)
+    }
+    lastIndex = index + 1
+    html += escape
+  }
+  return lastIndex !== index ? html + str.slice(lastIndex, index) : html
+}

bskyembed/src/screens/post.tsx

@@ -1,27 +1,27 @@
-import './index.css'
+import '../index.css'
 
 import {AppBskyFeedDefs, BskyAgent} from '@atproto/api'
 import {h, render} from 'preact'
 
-import logo from '../assets/logo.svg'
-import {Container} from './container'
-import {Link} from './link'
-import {Post} from './post'
-import {getRkey} from './utils'
+import logo from '../../assets/logo.svg'
+import {Container} from '../components/container'
+import {Link} from '../components/link'
+import {Post} from '../components/post'
+import {getRkey} from '../utils'
 
 const root = document.getElementById('app')
 if (!root) throw new Error('No root element')
 
-const searchParams = new URLSearchParams(window.location.search)
-
 const agent = new BskyAgent({
   service: 'https://public.api.bsky.app',
 })
 
-const uri = searchParams.get('uri')
+const uri = `at://${window.location.pathname.slice('/embed/'.length)}`
+
+console.log(uri)
 
 if (!uri) {
-  throw new Error('No uri in query string')
+  throw new Error('No uri in path')
 }
 
 agent

bskyembed/src/utils.ts

@@ -1,3 +1,5 @@
+import {AtUri} from '@atproto/api'
+
 export function niceDate(date: number | string | Date) {
   const d = new Date(date)
   return `${d.toLocaleDateString('en-us', {
@@ -11,5 +13,6 @@ export function niceDate(date: number | string | Date) {
 }
 
 export function getRkey({uri}: {uri: string}): string {
-  return uri.split('/').pop() as string
+  const at = new AtUri(uri)
+  return at.rkey
 }