Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BlueskyEmbed #1756

Open
wants to merge 2 commits into
base: social-media-content
Choose a base branch
from
Open

BlueskyEmbed #1756

wants to merge 2 commits into from

Conversation

tim-evans
Copy link
Collaborator

@tim-evans tim-evans commented May 15, 2024

Adds support for detecting and rendering Bluesky posts from HTML. Bluesky's at protocol uses IPFS addressing to identify content, so we need to include both a uri, and a cid, which is the IPFS content id. A url is also included so we have a permalink to the post in the case that the post cannot be shown due to user consent not being provided.

image
<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:xrr5j2okn7ew2zvcwsxus3gb/app.bsky.feed.post/3kshwuxmy5o2y" data-bluesky-cid="bafyreicg7axsdp6b7f4uj75ggdfhrdl52cqpjah45scox3prmqflwg557i"><p lang="en">Lap time al fresco. Photo from my collection, no date/info.<br><br><a href="https://bsky.app/profile/did:plc:xrr5j2okn7ew2zvcwsxus3gb/post/3kshwuxmy5o2y?ref_src=embed">[image or embed]</a></p>&mdash; Cats of Yore (<a href="https://bsky.app/profile/did:plc:xrr5j2okn7ew2zvcwsxus3gb?ref_src=embed">@catsofyore.bsky.social</a>) <a href="https://bsky.app/profile/did:plc:xrr5j2okn7ew2zvcwsxus3gb/post/3kshwuxmy5o2y?ref_src=embed">May 14, 2024 at 3:43 PM</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
{
  "blocks": [
    {
      "attributes": {
        "cid": "bafyreicg7axsdp6b7f4uj75ggdfhrdl52cqpjah45scox3prmqflwg557i",
        "content": "M00000000",
        "uri": "at://did:plc:xrr5j2okn7ew2zvcwsxus3gb/app.bsky.feed.post/3kshwuxmy5o2y",
        "url": "https://bsky.app/profile/did:plc:xrr5j2okn7ew2zvcwsxus3gb/post/3kshwuxmy5o2y",
      },
      "id": "B00000000",
      "parents": [],
      "selfClosing": false,
      "type": "bluesky-embed",
    },
    {
      "attributes": {},
      "id": "B00000001",
      "parents": [
        "bluesky-embed",
      ],
      "selfClosing": false,
      "type": "text",
    },
    {
      "attributes": {},
      "id": "B00000002",
      "parents": [
        "bluesky-embed",
        "text",
      ],
      "selfClosing": true,
      "type": "line-break",
    },
    {
      "attributes": {},
      "id": "B00000003",
      "parents": [
        "bluesky-embed",
        "text",
      ],
      "selfClosing": true,
      "type": "line-break",
    },
    {
      "attributes": {},
      "id": "B00000004",
      "parents": [
        "bluesky-embed",
        "text",
      ],
      "selfClosing": true,
      "type": "line-break",
    },
  ],
  "marks": [
    {
      "attributes": {
        "refs": [
          "B00000000",
        ],
      },
      "id": "M00000000",
      "range": "(1..144]",
      "type": "slice",
    },
    {
      "attributes": {
        "url": "https://bsky.app/profile/did:plc:xrr5j2okn7ew2zvcwsxus3gb/post/3kshwuxmy5o2y?ref_src=embed",
      },
      "id": "M00000001",
      "range": "(63..79)",
      "type": "link",
    },
    {
      "attributes": {
        "url": "https://bsky.app/profile/did:plc:xrr5j2okn7ew2zvcwsxus3gb?ref_src=embed",
      },
      "id": "M00000002",
      "range": "(96..119)",
      "type": "link",
    },
    {
      "attributes": {
        "url": "https://bsky.app/profile/did:plc:xrr5j2okn7ew2zvcwsxus3gb/post/3kshwuxmy5o2y?ref_src=embed",
      },
      "id": "M00000003",
      "range": "(121..144)",
      "type": "link",
    },
  ],
  "text": "Lap time al fresco. Photo from my collection, no date/info.[image or embed]— Cats of Yore (@catsofyore.bsky.social) May 14, 2024 at 3:43 PM",
}

text: "Lap time al fresco. Photo from my collection, no date/info.[image or embed]— Cats of Yore (@catsofyore.bsky.social) May 14, 2024 at 3:43 PM",
})
).toMatchInlineSnapshot(
`"<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:xrr5j2okn7ew2zvcwsxus3gb/app.bsky.feed.post/3kshwuxmy5o2y" data-bluesky-cid="bafyreicg7axsdp6b7f4uj75ggdfhrdl52cqpjah45scox3prmqflwg557i">Lap time al fresco. Photo from my collection, no date/info.<br /><br /><a href="https://bsky.app/profile/did:plc:xrr5j2okn7ew2zvcwsxus3gb/post/3kshwuxmy5o2y?ref_src=embed">[image or embed]</a><br />&#x2014; Cats of Yore (<a href="https://bsky.app/profile/did:plc:xrr5j2okn7ew2zvcwsxus3gb?ref_src=embed">@catsofyore.bsky.social</a>) <a href="https://bsky.app/profile/did:plc:xrr5j2okn7ew2zvcwsxus3gb/post/3kshwuxmy5o2y?ref_src=embed">May 14, 2024 at 3:43 PM</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>"`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is nice

.as("blockquote")
.outerJoin(
doc.where({ type: "-html-script" }).as("scripts"),
function scriptRightAfterIframe(blockquote, script: Script) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor: the named functions here are nice for our performance tracing, but this kinda suggests we hoist the function definitions up to the top level

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ahh yea, that would make sense to do for these

adds detection of Bluesky embed codes
and turns them into embeds.

we cannot do URL detection on Bluesky embeds because we need the IPFS cid and uri
of the post to properly display it.
this allows for direct linking to the post
in cases where user consent was not provided
or a web link is wanted
@tim-evans tim-evans marked this pull request as ready for review June 3, 2024 13:47
@tim-evans
Copy link
Collaborator Author

@copilot-robot prerelease

@copilot-robot
Copy link

Hi, @tim-evans, a pre-release has been published:

  • @atjson/offset-annotations@0.51.2-bluesky-embed.4+ecc2de45
  • @atjson/renderer-commonmark@0.30.3-bluesky-embed.4+ecc2de45
  • @atjson/renderer-plain-text@0.24.42-bluesky-embed.4+ecc2de45
  • @atjson/source-commonmark@0.27.3-bluesky-embed.4+ecc2de45
  • @atjson/source-gdocs-paste@0.28.3-bluesky-embed.4+ecc2de45
  • @atjson/source-html@0.39.2-bluesky-embed.4+ecc2de45
  • @atjson/source-mobiledoc@0.23.30-bluesky-embed.4+ecc2de45
  • @atjson/source-prism@0.28.40-bluesky-embed.4+ecc2de45
  • @atjson/source-url@0.29.2-bluesky-embed.4+ecc2de45

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants