bluesky-social · gaearon · Apr 13, 2024 · Apr 8, 2024 · Apr 12, 2024 · Apr 8, 2024
diff --git a/assets/icons/bubble_filled_stroke2_corner2_rounded.svg b/assets/icons/bubble_filled_stroke2_corner2_rounded.svg
diff --git a/assets/icons/bubble_stroke2_corner2_rounded.svg b/assets/icons/bubble_stroke2_corner2_rounded.svg
diff --git a/assets/icons/repost_stroke2_corner2_rounded.svg b/assets/icons/repost_stroke2_corner2_rounded.svg
diff --git a/bskyembed/assets/bubble_filled_stroke2_corner2_rounded.svg b/bskyembed/assets/bubble_filled_stroke2_corner2_rounded.svg
diff --git a/bskyembed/assets/circleInfo_stroke2_corner0_rounded.svg b/bskyembed/assets/circleInfo_stroke2_corner0_rounded.svg
diff --git a/bskyembed/assets/heart2_filled_stroke2_corner0_rounded.svg b/bskyembed/assets/heart2_filled_stroke2_corner0_rounded.svg
diff --git a/bskyembed/assets/logo.svg b/bskyembed/assets/logo.svg
diff --git a/bskyembed/assets/repost_stroke2_corner2_rounded.svg b/bskyembed/assets/repost_stroke2_corner2_rounded.svg
diff --git a/bskyembed/index.html b/bskyembed/index.html
@@ -3,7 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vite App</title>
+  <title>Bluesky Embed</title>
+  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
+  <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#1185fe">
+  <meta name="theme-color">
+  <meta name="application-name" content="Bluesky">
+  <meta name="generator" content="bskyweb">
 </head>
 <body>
   <div id="app"></div>

diff --git a/bskyembed/package.json b/bskyembed/package.json
@@ -1,21 +1,28 @@
 {
   "name": "bskyembed",
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx src"
   },
   "dependencies": {
-    "preact": "^10.4.8"
+    "@atproto/api": "^0.12.2",
+    "@preact/preset-vite": "^2.8.2",
+    "@vitejs/plugin-legacy": "^5.3.2",
+    "preact": "^10.4.8",
+    "terser": "^5.30.3"
   },
   "devDependencies": {
-    "@prefresh/vite": "^1.2.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.19.0",
     "eslint-config-preact": "^1.3.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "typescript": "^4.0.5",
-    "vite": "^1.0.0-rc.13",
+    "vite": "^5.2.8",
     "vite-tsconfig-paths": "^4.3.2"
   }
 }
diff --git a/bskyembed/postcss.config.cjs b/bskyembed/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/bskyembed/src/app.tsx b/bskyembed/src/app.tsx
diff --git a/bskyembed/src/container.tsx 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<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>
+  )
+}