@rmdes/indiekit-syndicator-bluesky 1.0.3 → 1.0.5

package/lib/bluesky.js

@@ -10,6 +10,7 @@ import {
   uriToPostUrl,
   fetchOpenGraphData,
   getExternalUrl,
+  generateDefaultOgImage,
 } from "./utils.js";
 
 export class Bluesky {
@@ -168,17 +169,39 @@ export class Bluesky {
   /**
    * Create external link embed
    * @param {string} url - External URL
+   * @param {object} [options] - Options
+   * @param {boolean} [options.generateDefaultImage] - Generate default image if no OG image
+   * @param {string} [options.siteName] - Site name for default image
    * @returns {Promise<object|null>} External embed or null
    */
-  async createExternalEmbed(url) {
+  async createExternalEmbed(url, options = {}) {
     if (!url) return null;
 
+    const { generateDefaultImage = true, siteName } = options;
+
     try {
       const ogData = await fetchOpenGraphData(url);
       let thumb = null;
 
       if (ogData.imageUrl) {
+        // Use the OG image from the URL
         thumb = await this.uploadImageFromUrl(ogData.imageUrl);
+      } else if (generateDefaultImage && ogData.title && ogData.title !== url) {
+        // Generate a default image with the title
+        try {
+          const defaultImageBuffer = await generateDefaultOgImage(ogData.title, {
+            siteName: siteName || new URL(url).hostname,
+          });
+          const client = await this.#client();
+          const uploadResponse = await client.com.atproto.repo.uploadBlob(
+            new Blob([new Uint8Array(defaultImageBuffer)], { type: "image/png" }),
+            { encoding: "image/png" }
+          );
+          thumb = uploadResponse.data.blob;
+        } catch (imageError) {
+          console.error(`Failed to generate default OG image: ${imageError.message}`);
+          // Continue without thumb
+        }
       }
 
       return {

package/lib/utils.js

@@ -3,8 +3,143 @@ import { htmlToText } from "html-to-text";
 import sharp from "sharp";
 import { JSDOM } from "jsdom";
 
+/**
+ * Default OG image configuration
+ */
+const DEFAULT_OG_CONFIG = {
+  width: 1200,
+  height: 630,
+  backgroundColor: "#1a1a2e", // Dark blue-purple
+  textColor: "#ffffff",
+  accentColor: "#e94560", // Coral/red accent
+  fontFamily: "sans-serif",
+  siteName: "rmendes.net",
+};
+
 const AT_URI = /at:\/\/(?<did>did:[^/]+)\/(?<type>[^/]+)\/(?<rkey>[^/]+)/;
 
+/**
+ * Escape XML special characters for SVG
+ * @param {string} text - Text to escape
+ * @returns {string} Escaped text
+ */
+function escapeXml(text) {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+/**
+ * Wrap text into lines that fit within a width
+ * @param {string} text - Text to wrap
+ * @param {number} maxCharsPerLine - Maximum characters per line
+ * @param {number} maxLines - Maximum number of lines
+ * @returns {string[]} Array of lines
+ */
+function wrapText(text, maxCharsPerLine = 35, maxLines = 4) {
+  const words = text.split(/\s+/);
+  const lines = [];
+  let currentLine = "";
+
+  for (const word of words) {
+    if (lines.length >= maxLines) break;
+
+    const testLine = currentLine ? `${currentLine} ${word}` : word;
+
+    if (testLine.length <= maxCharsPerLine) {
+      currentLine = testLine;
+    } else {
+      if (currentLine) {
+        lines.push(currentLine);
+        currentLine = word;
+      } else {
+        // Word is longer than max, truncate it
+        lines.push(word.slice(0, maxCharsPerLine - 3) + "...");
+        currentLine = "";
+      }
+    }
+  }
+
+  if (currentLine && lines.length < maxLines) {
+    lines.push(currentLine);
+  }
+
+  // Add ellipsis to last line if we truncated
+  if (lines.length === maxLines && words.length > lines.join(" ").split(/\s+/).length) {
+    const lastLine = lines[maxLines - 1];
+    if (lastLine.length > maxCharsPerLine - 3) {
+      lines[maxLines - 1] = lastLine.slice(0, maxCharsPerLine - 3) + "...";
+    } else if (!lastLine.endsWith("...")) {
+      lines[maxLines - 1] = lastLine + "...";
+    }
+  }
+
+  return lines;
+}
+
+/**
+ * Generate a default OG image with title text
+ * @param {string} title - Title text to display
+ * @param {object} [options] - Configuration options
+ * @param {string} [options.siteName] - Site name to display
+ * @param {string} [options.backgroundColor] - Background color
+ * @param {string} [options.textColor] - Text color
+ * @param {string} [options.accentColor] - Accent color for decorations
+ * @returns {Promise<Buffer>} PNG image buffer
+ */
+export async function generateDefaultOgImage(title, options = {}) {
+  const config = { ...DEFAULT_OG_CONFIG, ...options };
+  const { width, height, backgroundColor, textColor, accentColor, siteName } = config;
+
+  // Wrap title into multiple lines
+  const titleLines = wrapText(title, 35, 4);
+  const fontSize = titleLines.length > 2 ? 48 : 56;
+  const lineHeight = fontSize * 1.3;
+
+  // Calculate vertical position to center the text block
+  const textBlockHeight = titleLines.length * lineHeight;
+  const startY = (height - textBlockHeight) / 2 + fontSize * 0.8;
+
+  // Generate title text elements
+  const titleElements = titleLines
+    .map((line, i) => {
+      const y = startY + i * lineHeight;
+      return `<text x="${width / 2}" y="${y}" text-anchor="middle" font-size="${fontSize}" font-weight="bold" fill="${textColor}" font-family="${config.fontFamily}">${escapeXml(line)}</text>`;
+    })
+    .join("\n    ");
+
+  // Create SVG
+  const svg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="${width}" height="${height}" fill="${backgroundColor}"/>
+
+  <!-- Decorative elements -->
+  <rect x="0" y="0" width="${width}" height="8" fill="${accentColor}"/>
+  <rect x="0" y="${height - 80}" width="${width}" height="80" fill="${accentColor}" opacity="0.1"/>
+
+  <!-- Decorative circles -->
+  <circle cx="100" cy="100" r="200" fill="${accentColor}" opacity="0.05"/>
+  <circle cx="${width - 100}" cy="${height - 100}" r="150" fill="${accentColor}" opacity="0.05"/>
+
+  <!-- Title -->
+  ${titleElements}
+
+  <!-- Site name -->
+  <text x="${width / 2}" y="${height - 30}" text-anchor="middle" font-size="24" fill="${textColor}" opacity="0.7" font-family="${config.fontFamily}">${escapeXml(siteName)}</text>
+</svg>`;
+
+  // Convert SVG to PNG using sharp
+  const pngBuffer = await sharp(Buffer.from(svg))
+    .png({ quality: 90 })
+    .toBuffer();
+
+  return pngBuffer;
+}
+
 /**
  * Convert plain text to rich text
  * @param {import("@atproto/api").Agent} client - AT Protocol agent
@@ -62,8 +197,9 @@ export const getPostText = (properties, includePermalink) => {
   }
 
   // Truncate status if longer than 300 characters
+  // ALWAYS include permalink when truncating so readers can see full post
   if (text.length > 300) {
-    const suffix = includePermalink ? `\n\n${properties.url}` : "";
+    const suffix = `\n\n${properties.url}`;
     const maxLen = 300 - suffix.length - 3;
     text = text.slice(0, maxLen).trim() + "..." + suffix;
   } else if (includePermalink && !text.includes(properties.url)) {
@@ -222,12 +358,30 @@ export async function fetchOpenGraphData(url) {
   }
 }
 
+/**
+ * Extract URLs from text using a comprehensive regex
+ * @param {string} text - Text to search for URLs
+ * @returns {Array<string>} Array of URLs found
+ */
+function extractUrlsFromText(text) {
+  if (!text) return [];
+  // Match URLs starting with http:// or https://
+  // This regex is more permissive to catch URLs in plain text
+  const urlRegex = /https?:\/\/[^\s<>"')\]]+/gi;
+  const matches = text.match(urlRegex) || [];
+  // Clean up trailing punctuation that might have been captured
+  return matches.map((url) =>
+    url.replace(/[.,;:!?)]+$/, "").replace(/\)+$/, "")
+  );
+}
+
 /**
  * Extract the primary URL from post properties
  * @param {object} properties - JF2 properties
+ * @param {string} [ownDomain] - Own domain to deprioritize (e.g., "rmendes.net")
  * @returns {string|null} Primary URL to create card for
  */
-export function getExternalUrl(properties) {
+export function getExternalUrl(properties, ownDomain) {
   // For likes, use the liked URL
   if (properties["like-of"]) {
     return properties["like-of"];
@@ -243,13 +397,53 @@ export function getExternalUrl(properties) {
     return properties["in-reply-to"];
   }
 
-  // For regular posts with content, try to extract URL from content
+  // Collect all URLs from content
+  let urls = [];
+
+  // Extract from HTML href attributes (both single and double quotes)
   if (properties.content?.html) {
-    const hrefs = [...properties.content.html.matchAll(/href="(https?:\/\/[^"]+)"/g)];
-    if (hrefs.length > 0) {
-      return hrefs.at(-1)[1];
+    const hrefMatches = [
+      ...properties.content.html.matchAll(/href=["'](https?:\/\/[^"']+)["']/gi),
+    ];
+    urls.push(...hrefMatches.map((m) => m[1]));
+  }
+
+  // Extract plain text URLs from HTML content (for URLs not in anchors)
+  if (properties.content?.html) {
+    const plainUrls = extractUrlsFromText(properties.content.html);
+    urls.push(...plainUrls);
+  }
+
+  // Extract from plain text content
+  if (properties.content?.text) {
+    const textUrls = extractUrlsFromText(properties.content.text);
+    urls.push(...textUrls);
+  }
+
+  // Deduplicate URLs
+  urls = [...new Set(urls)];
+
+  if (urls.length === 0) {
+    return null;
+  }
+
+  // If we have an ownDomain, try to find a URL that's NOT our own site first
+  // but if all URLs are our own site, still return one (for OG cards of own content)
+  if (ownDomain) {
+    const externalUrls = urls.filter((url) => {
+      try {
+        const hostname = new URL(url).hostname;
+        return !hostname.includes(ownDomain);
+      } catch {
+        return true;
+      }
+    });
+    // Prefer external URLs, but fall back to own domain URLs
+    if (externalUrls.length > 0) {
+      return externalUrls.at(-1);
     }
   }
 
-  return null;
+  // Return the last URL found (most likely to be the main link)
+  return urls.at(-1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-syndicator-bluesky",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Bluesky syndicator for Indiekit with external like support",
   "type": "module",
   "main": "index.js",