social components inlay.at
atproto components sdui
86
fork

Configure Feed

Select the types of activity you want to include in your feed.

change embed api to take type

+28 -25
+13 -18
app/embed/page.tsx
··· 1 1 import { createElement } from "react"; 2 - import { renderNode, createContext } from "@/app/sandbox/render/render"; 3 - import { $ } from "@inlay/core"; 4 - import { fetchComponentByUri } from "@/data/queries"; 5 - import { parseAtUri } from "@/data/uri"; 2 + import { renderNode, toHostContext } from "@/app/sandbox/render/render"; 3 + import { $, deserializeTree } from "@inlay/core"; 6 4 import { EmbedResize } from "./resize"; 7 5 import { BrowseProvider } from "@/app/sandbox/render/client"; 6 + import type { RenderContext } from "@inlay/render"; 7 + import type { DidString } from "@atproto/syntax"; 8 8 9 9 export default async function EmbedPage({ 10 10 searchParams, ··· 12 12 searchParams: Promise<Record<string, string | undefined>>; 13 13 }) { 14 14 const sp = await searchParams; 15 - const componentUri = sp.component; 15 + const type = sp.type; 16 16 const propsParam = sp.props; 17 + const importsParam = sp.imports; 17 18 18 - if (!componentUri) { 19 - return <div style={{ padding: 16, color: "#888" }}>Missing component</div>; 19 + if (!type) { 20 + return <div style={{ padding: 16, color: "#888" }}>Missing type</div>; 20 21 } 21 22 22 - const component = await fetchComponentByUri(decodeURIComponent(componentUri)); 23 - if (!component) { 24 - return ( 25 - <div style={{ padding: 16, color: "#888" }}>Component not found</div> 26 - ); 27 - } 23 + const imports = (importsParam ? importsParam.split(",") : []) as DidString[]; 24 + const props = propsParam ? deserializeTree(JSON.parse(atob(propsParam))) : {}; 25 + const element = $(type, props); 28 26 29 - const props = propsParam ? JSON.parse(atob(propsParam)) : {}; 30 - const decodedUri = decodeURIComponent(componentUri); 31 - const nsid = parseAtUri(decodedUri)!.rkey!; 32 - const element = $(nsid, props); 33 - const ctx = createContext(component, decodedUri); 27 + const context: RenderContext = { imports }; 28 + const ctx = toHostContext(context); 34 29 const rendered = renderNode(element, ctx); 35 30 36 31 return (
+8 -2
app/sandbox/ui/embed-button.tsx
··· 2 2 3 3 import { useState, useRef } from "react"; 4 4 import { Dropdown } from "@/app/ui/dropdown"; 5 + import { parseAtUri } from "@/data/uri"; 5 6 import s from "./preview.module.css"; 6 7 7 8 export function EmbedButton({ ··· 14 15 const [copied, setCopied] = useState(false); 15 16 const preRef = useRef<HTMLPreElement>(null); 16 17 18 + const parsed = parseAtUri(componentUri)!; 19 + const did = parsed.did; 20 + const nsid = parsed.rkey!; 21 + 17 22 const snippet = `<inlay-at 18 - component="${componentUri}" 19 - props='${JSON.stringify({ uri: recordUri })}'> 23 + type="${nsid}" 24 + props='${JSON.stringify({ uri: recordUri })}' 25 + imports='${JSON.stringify([did])}'> 20 26 </inlay-at> 21 27 <script src="https://inlay.at/inlay.js"><\/script>`; 22 28
+7 -5
public/inlay.js
··· 1 1 // <inlay-at> web component 2 - // Usage: <inlay-at component="at://..." props='{"uri":"at://..."}'> 2 + // Usage: <inlay-at type="com.example.Post" imports='["did:..."]' props='{"uri":"at://..."}'> 3 3 (function () { 4 4 const EMBED_ORIGIN = (() => { 5 5 const script = document.currentScript; ··· 11 11 })(); 12 12 13 13 class InlayEmbed extends HTMLElement { 14 - static observedAttributes = ["component", "props"]; 14 + static observedAttributes = ["type", "imports", "props"]; 15 15 16 16 #iframe = null; 17 17 #props = null; ··· 40 40 } 41 41 42 42 #update() { 43 - const component = this.getAttribute("component"); 44 - if (!component) return; 43 + const type = this.getAttribute("type"); 44 + if (!type) return; 45 45 46 + const imports = JSON.parse(this.getAttribute("imports") || "[]"); 46 47 const props = 47 48 this.#props ?? JSON.parse(this.getAttribute("props") || "{}"); 48 49 const url = new URL("/embed", EMBED_ORIGIN); 49 - url.searchParams.set("component", component); 50 + url.searchParams.set("type", type); 51 + url.searchParams.set("imports", imports.join(",")); 50 52 url.searchParams.set("props", btoa(JSON.stringify(props))); 51 53 52 54 if (!this.#iframe) {