[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>
2024-04-13 03:58:40 +01:00
parent 8e29b1f633
commit 4b3ec55732
19 changed files with 482 additions and 57 deletions
@@ -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>
+  )
+}