s9e / s9e.github.io

10 stars 3 forks source link

how do you use bluesky.min.html? #5

Open jadedgnome opened 3 months ago

jadedgnome commented 3 months ago

what to append after bluesky.min.html# ?

how do I view a post with this?

JoshyPHP commented 3 months ago

This is a work in progress and I haven't decided on a format yet. At the moment, it takes an AT Protocol URI but this will certainly change in the future to accommodate custom servers. I will almost definitely remove the iframe from the /2/ directory as I expect to move to the /3/ API before then.

You can experiment with the current iframe if you're curious, with the caveat that it shouldn't be relied upon as it will certainly stop working at some point in the foreseeable future.

<iframe data-s9e-mediaembed="bluesky" allowfullscreen="" loading="lazy" onload="let c=new MessageChannel;c.port1.onmessage=e=&gt;this.style.height=e.data+'px';this.contentWindow.postMessage('s9e:init','*',[c.port2])" scrolling="no" style="border:0;height:600px;max-width:600px;width:100%" src="https://s9e.github.io/iframe/2/bluesky.min.html#at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.post/3kkrqzuydho2v"></iframe>
JoshyPHP commented 3 months ago

Following up on this, I've just uploaded a new experimental iframe for Bluesky in the /3/ directory. I haven't finalized the v3 API yet, so its use is subject to change. If you wish to experiment with it, here's the current HTML for displaying a Bluesky post. The #embed.bsky.app is optional and represents the hostname from which the embed iframe is served. I haven't been able to find a custom server (PLC? can't remember the terminology) to test it out.

<iframe data-s9e-mediaembed="bluesky" allowfullscreen="" loading="lazy" onload="let b=new MessageChannel;b.port1.onmessage=a=&gt;{a=a.data;'resize'===a.method&amp;&amp;(a=+a.height)&amp;&amp;(this.style.height=a+'px')};this.contentWindow.postMessage('s9e:init:3','*',[b.port2])" scrolling="no" style="border:0;height:600px;max-width:600px;width:100%" src="https://s9e.github.io/iframe/3/bluesky.min.html#at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.post/3kkrqzuydho2v#embed.bsky.app"></iframe>