Support embed url card

Author: joyeecheung

actions/.gitignore

@@ -15,3 +15,4 @@
 node_modules
 .env*
 
+test/.tmp

actions/lib/posts.js

@@ -1,5 +1,6 @@
-import AtpAgent, { RichText } from "@atproto/api";
+import AtpAgent, { AppBskyFeedPost, BlobRef, RichText } from "@atproto/api";
 import assert from 'node:assert';
+import * as cheerio from 'cheerio';
 
 // URL format:
 // 1. https://bsky.app/profile/${handle}/post/${postId}
@@ -67,43 +68,179 @@ export async function getPostURLFromURI(agent, uri) {
 }
 
 /**
+ * TODO(joyeecheung): support 'imageFiles' field in JSON files.
  * @param {AtpAgent} agent
- * @param {object} request
+ * @param {ArrayBuffer} imgData
+ * @returns {BlobRef}
  */
-export async function post(agent, request) {
-  // TODO(joyeecheung): support images and embeds.
-  // TODO(joyeecheung): When Bluesky supports markdown or snippets, we should ideally
-  // read a relative path in the request containing those contents instead of reading from
-  // strings in a JSON.
-  const rt = new RichText({ text: request.richText });
-
-  await rt.detectFacets(agent); // automatically detects mentions and links
-
-  const record = {
-    $type: 'app.bsky.feed.post',
-    text: rt.text,
-    facets: rt.facets,
-    createdAt: new Date().toISOString(),
+async function uploadImage(agent, imgData) {
+  const res = await agent.uploadBlob(imgData, {
+    encoding: 'image/jpeg'
+  });
+  return res.data.blob;
+}
+
+// https://docs.bsky.app/docs/advanced-guides/posts#website-card-embeds
+async function fetchEmbedUrlCard(url) {
+  console.log('Fetching embed card from', url);
+
+  // The required fields for every embed card
+  const card = {
+    uri: url,
+    title: '',
+    description: '',
   };
 
-  // https://docs.bsky.app/docs/tutorials/creating-a-post#quote-posts
-  if (request.repostURL) {
-    if (!request.repostInfo) {
-      request.repostInfo = await getPostInfoFromUrl(agent, request.repostURL);
+  try {
+    // Fetch the HTML
+    const resp = await fetch(url);
+    if (!resp.ok) {
+      throw new Error(`Failed to fetch URL: ${resp.status} ${resp.statusText}`);
     }
-    record.embed = {
-      $type: 'app.bsky.embed.record',
-      record: request.repostInfo
-    };
-  } else if (request.replyURL) {
-    if (!request.replyInfo) {
-      request.replyInfo = await getPostInfoFromUrl(agent, request.replyURL);
+    const html = await resp.text();
+    const $ = cheerio.load(html);
+
+    // Parse out the "og:title" and "og:description" HTML meta tags
+    const titleTag = $('meta[property="og:title"]').attr('content');
+    if (titleTag) {
+      card.title = titleTag;
+    }
+
+    const descriptionTag = $('meta[property="og:description"]').attr('content');
+    if (descriptionTag) {
+      card.description = descriptionTag;
+    }
+
+    // If there is an "og:image" HTML meta tag, fetch and upload that image
+    const imageTag = $('meta[property="og:image"]').attr('content');
+    if (imageTag) {
+      let imgURL = imageTag;
+
+      // Naively turn a "relative" URL (just a path) into a full URL, if needed
+      if (!imgURL.includes('://')) {
+        imgURL = new URL(imgURL, url).href;
+      }
+      card.thumb = { $TO_BE_UPLOADED: imgURL };
     }
-    record.reply = {
-      root: request.replyInfo,
-      parent: request.replyInfo,
+
+    return {
+      $type: 'app.bsky.embed.external',
+      external: card,
+    };
+  } catch (error) {
+    console.error('Error generating embed URL card:', error.message);
+    throw error;
+  }
+}
+
+/**
+ * @typedef ReplyRequest
+ * @property {string} richText
+ * @property {string} replyURL
+ * @property {{cid: string, uri: string}?} replyInfo
+ */
+
+/**
+ * @typedef PostRequest
+ * @property {string} richText
+ */
+
+/**
+ * @typedef QuotePostRequest
+ * @property {string} richText
+ * @property {string} repostURL
+ * @property {{cid: string, uri: string}?} repostInfo
+ */
+
+/**
+ * It should be possible to invoked this method on the same request at least twice -
+ * once to populate the facets and the embed without uploading any files if shouldUploadImage
+ * is false, and then again uploading files if shouldUploadImage is true.
+ * @param {AtpAgent} agent
+ * @param {ReplyRequest|PostRequest|QuotePostRequest} request
+ * @param {boolean} shouldUploadImage
+ * @returns {AppBskyFeedPost.Record}
+ */
+export async function populateRecord(agent, request, shouldUploadImage = false) {
+  console.log(`Generating record, shouldUploadImage = ${shouldUploadImage}, request = `, request);
+
+  if (request.repostURL && !request.repostInfo) {
+    request.repostInfo = await getPostInfoFromUrl(agent, request.repostURL);
+  }
+  if (request.replyURL && !request.replyInfo) {
+    request.replyInfo = await getPostInfoFromUrl(agent, request.replyURL);
+  }
+
+  if (request.richText && !request.record) {
+    // TODO(joyeecheung): When Bluesky supports markdown or snippets, we should render the text
+    // as markdown.
+    const rt = new RichText({ text: request.richText });
+
+    await rt.detectFacets(agent); // automatically detects mentions and links
+  
+    const record = {
+      $type: 'app.bsky.feed.post',
+      text: rt.text,
+      facets: rt.facets,
+      createdAt: new Date().toISOString(),
     };
+  
+    // https://docs.bsky.app/docs/tutorials/creating-a-post#quote-posts
+    if (request.repostInfo) {
+      record.embed = {
+        $type: 'app.bsky.embed.record',
+        record: request.repostInfo
+      };
+    } else if (request.replyInfo) {
+      record.reply = {
+        root: request.replyInfo,
+        parent: request.replyInfo,
+      };
+    }
+
+    // If there is already another embed, don't generate the card embed.
+    if (!record.embed) {
+      // Find the first URL, match until the first whitespace or punctuation.
+      const urlMatch = request.richText.match(/https?:\/\/[^\s\]\[\"\'\<\>]+/);
+      if (urlMatch !== null) {
+        const url = urlMatch[0];
+        const card = await fetchEmbedUrlCard(url);
+        record.embed = card;
+      }
+    }
+    request.record = record;
+  }
+
+  if (shouldUploadImage && request.record?.embed?.external?.thumb?.$TO_BE_UPLOADED) {
+    const card = request.record.embed.external;
+    const imgURL = card.thumb.$TO_BE_UPLOADED;
+    try {
+      console.log('Fetching image', imgURL);
+      const imgResp = await fetch(imgURL);
+      if (!imgResp.ok) {
+        throw new Error(`Failed to fetch image ${imgURL}: ${imgResp.status} ${imgResp.statusText}`);
+      }
+      const imgData = await imgResp.arrayBuffer();
+      console.log('Uploading image', imgURL, 'size = ', imgData.byteLength);
+      card.thumb = await uploadImage(agent, imgData);
+    } catch (e) {
+      // If image upload fails, post the embed card without the image, at worst we see a
+      // link card without an image which is not a big deal.
+      console.log(`Failed to fetch or upload image ${imgURL}`, e);
+    }
   }
 
+  console.log('Generated record');
+  console.dir(request.record, { depth: 3 });
+
+  return request;
+}
+
+/**
+ * @param {AtpAgent} agent
+ * @param {object} request
+ */
+export async function post(agent, request) {
+  const { record } = await populateRecord(agent, request, true);
   return agent.post(record);
 }

actions/lib/validator.js

@@ -67,27 +67,3 @@ async function validatePostURLInRequest(agent, request, fieldName) {
   }
   return result;
 }
-
-/**
- * Validate the post URLs in the request and extend them into { uri, cid } pairs
- * if necessary.
- * @param {import('@atproto/api').AtpAgent} agent 
- * @param {object} request
- */
-export async function validateAndExtendRequestReferences(agent, request) {
-  switch(request.action) {
-    case 'repost':
-    case 'quote-post': {
-      const info = await validatePostURLInRequest(agent, request, 'repostURL');
-      request.repostInfo = info;
-      break;
-    }
-    case 'reply': {
-      const info = await validatePostURLInRequest(agent, request, 'replyURL');
-      request.replyInfo = info;
-      break;
-    }
-    default:
-      break;
-  }
-}

actions/login-and-validate.js

@@ -4,7 +4,8 @@ import fs from 'node:fs';
 import process from 'node:process';
 import path from 'node:path';
 import { login } from './lib/login.js';
-import { validateAccount, validateRequest, validateAndExtendRequestReferences } from './lib/validator.js';
+import { validateAccount, validateRequest } from './lib/validator.js';
+import { populateRecord } from './lib/posts.js';
 
 // The JSON file must contains the following fields:
 // - "account": a string field indicating the account to use to perform the action.
@@ -28,7 +29,7 @@ validateRequest(request);
 // Authenticate.
 const agent = await login(account);
 
-// Validate and extend the post URLs in the request into { cid, uri } records.
-await validateAndExtendRequestReferences(agent, request);
+// Check if the links included are reachable.
+await populateRecord(agent, request, false);
 
 export { agent, request, requestFilePath, richTextFile };

actions/package.json

@@ -7,6 +7,7 @@
   "repository": "https://github.com/nodejs/bluesky-playground",
   "packageManager": "[email protected]",
   "dependencies": {
-    "@atproto/api": "^0.13.18"
+    "@atproto/api": "^0.13.18",
+    "cheerio": "^1.0.0"
   }
 }

actions/process.js

@@ -25,7 +25,7 @@ switch(request.action) {
   };
   case 'repost': {
     console.log('Reposting...', request.repostURL);
-    assert(request.repostInfo);  // Extended by validateAndExtendRequestReferences.
+    assert(request.repostInfo);  // Extended by populateRecord in login-and-validate.js.
     result = await agent.repost(request.repostInfo.uri, request.repostInfo.cid);
     break;
   }

actions/test/examples/new/post.json.example

@@ -1,5 +1,5 @@
 {
   "action": "post",
-  "account": "PIXEL",
-  "richText": "Hello from automation!"
+  "account": "PRIMARY",
+  "richText": "Hello from automation https://github.com/nodejs/bluesky"
 }

actions/test/examples/new/quote-post.json.example

@@ -1,6 +1,6 @@
 {
   "action": "quote-post",
-  "account": "PIXEL",
-  "richText": "Quote post from automation",
+  "account": "PRIMARY",
+  "richText": "Quote post from automation https://github.com/nodejs/bluesky",
   "repostURL": "https://bsky.app/profile/pixel-voyager.bsky.social/post/3lbg7zd32an2s"
 }

actions/test/examples/new/reply.json.example

@@ -1,6 +1,6 @@
 {
   "action": "reply",
-  "account": "PIXEL",
-  "richText": "Reply from automation",
+  "account": "PRIMARY",
+  "richText": "Reply from automation https://github.com/nodejs/bluesky",
   "replyURL": "https://bsky.app/profile/pixel-voyager.bsky.social/post/3lbg7zd32an2s"
 }

actions/test/examples/new/repost.json.example

@@ -1,5 +1,5 @@
 {
   "action": "repost",
-  "account": "PIXEL",
+  "account": "PRIMARY",
   "repostURL": "https://bsky.app/profile/pixel-voyager.bsky.social/post/3lbg7zd32an2s"
 }