feat: Open Graph & Social Card Preview — see how your link looks on Twitter, Slack, Discord

[ajithakdev]

Summary

Add an Open Graph & Social Card Preview tool. Every modern web app needs social share cards, but debugging broken previews after deploying to production is frustrating. This tool lets developers preview exact card rendering across platforms before deploying.

Proposed Implementation

• Location: src/tools/og-preview/OgPreviewTool.tsx
• Zero dependencies — HTML template rendering
• Features:
  • Input form for:
    • og:title (with character limit indicator — 60 chars optimal)
    • og:description (with char limit — 160 chars optimal)
    • og:image (URL or drag-drop preview)
    • og:url, og:type, og:site_name
    • Twitter card type (summary vs summary_large_image)
    • Author, canonical URL
  • Live previews rendered as pixel-accurate mockups:
    • 🔍 Google Search result
    • 🐦 X (Twitter) card
    • 📘 Facebook / LinkedIn share
    • 💬 Discord / Slack embed
  • Generate HTML <meta> tags — copy to clipboard
  • Generate Next.js metadata export object
  • Generate Nuxt useHead() snippet
  • Validation warnings (title too long, missing image, description truncated)

Acceptance Criteria

• All 4 platform previews render correctly
• Character limits shown with visual indicators
• Generated meta tags are valid HTML
• Next.js and Nuxt export formats work
• Image preview renders from URL input
• Registry entry