استخراج صور المشاركة الاجتماعية ووسوم Open Graph

يمكن استخدام واجهة برمجة تطبيقات HTMLRewriter الخاصة بـ Bun لاستخراج صور المشاركة الاجتماعية وبيانات Open Graph الوصفية من محتوى HTML بكفاءة. هذا مفيد بشكل خاص لبناء ميزات معاينة الروابط، أو بطاقات الوسائط الاجتماعية، أو كاشطات الويب. يمكننا استخدام HTMLRewriter لمطابقة محددات CSS بعناصر HTML والنصوص والسمات التي نريد معالجتها.

interface SocialMetadata {
  title?: string;
  description?: string;
  image?: string;
  url?: string;
  siteName?: string;
  type?: string;
}

async function extractSocialMetadata(url: string): Promise<SocialMetadata> {
  const metadata: SocialMetadata = {};
  const response = await fetch(url);

  const rewriter = new HTMLRewriter()
    // استخراج وسوم meta الخاصة بـ Open Graph
    .on('meta[property^="og:"]', {
      element(el) {
        const property = el.getAttribute("property");
        const content = el.getAttribute("content");
        if (property && content) {
          // تحويل "og:image" إلى "image" إلخ
          const key = property.replace("og:", "") as keyof SocialMetadata;
          metadata[key] = content;
        }
      },
    })
    // استخراج وسوم meta الخاصة بـ Twitter Card كبديل
    .on('meta[name^="twitter:"]', {
      element(el) {
        const name = el.getAttribute("name");
        const content = el.getAttribute("content");
        if (name && content) {
          const key = name.replace("twitter:", "") as keyof SocialMetadata;
          // استخدام بيانات Twitter Card فقط إذا لم تكن لدينا بيانات OG
          if (!metadata[key]) {
            metadata[key] = content;
          }
        }
      },
    })
    // العودة إلى وسوم meta العادية
    .on('meta[name="description"]', {
      element(el) {
        const content = el.getAttribute("content");
        if (content && !metadata.description) {
          metadata.description = content;
        }
      },
    })
    // العودة إلى وسم العنوان
    .on("title", {
      text(text) {
        if (!metadata.title) {
          metadata.title = text.text;
        }
      },
    });

  // معالجة الاستجابة
  await rewriter.transform(response).blob();

  // تحويل عناوين URL النسبية للصور إلى مطلقة
  if (metadata.image && !metadata.image.startsWith("http")) {
    try {
      metadata.image = new URL(metadata.image, url).href;
    } catch {
      // الاحتفاظ بعنوان URL الأصلي في حالة فشل التحليل
    }
  }

  return metadata;
}

// مثال على الاستخدام
const metadata = await extractSocialMetadata("https://bun.com");
console.log(metadata);
// {
//   title: "Bun — A fast all-in-one JavaScript runtime",
//   description: "Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a fast all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.",
//   image: "https://bun.com/share.jpg",
//   type: "website",
//   ...
// }