This document explains how the social media share card feature works in Gord Wame.

When links to the game are shared on social media platforms (like Bluesky, Discord, Twitter, Facebook, etc.), they display rich preview cards with:

• Game title and description
• A visual representation of the current board
• Proper Open Graph and Twitter Card meta tags

Each page includes comprehensive meta tags for social media sharing:

• Open Graph tags: Used by Facebook, Discord, and many other platforms
• Twitter Card tags: Used by Twitter/X
• Additional meta tags: For broader compatibility

The system generates SVG images of the game board for each unique board configuration:

• Route: /share-image/:boardstring
• Format: SVG (1200x630 pixels - standard social media ratio)
• Content: Game title, board visualization, and instructions
• Caching: 1 hour cache for performance

The system handles different scenarios:

• Default route (/): Uses "DEGWOARM" as the default board
• Valid board string (/play/TESTWORD): Uses the specific board configuration
• Invalid board string (/play/INVALID123): Falls back to "DEGWOARM"

The system automatically detects the current running URL to generate correct image URLs, ensuring compatibility across different deployment environments.

Edit /shared/shareConfig.ts to customize the share card text:

export const shareConfig = {
  title: "Gord Wame: A Word Game",
  description: "Use every letter inside the circle in any order to try and spell a word. Press a letter outside to circle to swap it in. Find as many words as you can!",
  siteName: "Gord Wame",
  twitterCard: "summary_large_image",
  twitterSite: "@gordwame", // Update with actual Twitter handle
  defaultBoardString: "DEGWOARM"
};

The board images are generated in /backend/svgRenderer.ts. You can customize:

• Colors and styling
• Layout and positioning
• Text content and fonts
• Image dimensions

To test the share cards:

1. Direct image access: Visit /share-image/BOARDSTRING to see the generated image
2. Meta tag validation: Use tools like:
   • Facebook Sharing Debugger
   • Twitter Card Validator
   • LinkedIn Post Inspector

The implementation is designed to work with:

• ✅ Discord: Supports SVG images and Open Graph tags
• ✅ Bluesky: Supports Open Graph tags
• ✅ Twitter/X: Uses Twitter Card tags
• ✅ Facebook: Uses Open Graph tags
• ✅ LinkedIn: Uses Open Graph tags
• ✅ Slack: Supports Open Graph tags

The system currently uses SVG images because:

• They're vector-based and scale perfectly
• Smaller file sizes
• No external dependencies for conversion
• Good support across modern platforms

If PNG compatibility is needed in the future, you could:

1. Use an external SVG-to-PNG conversion service
2. Pre-generate PNG versions for common boards
3. Use a server-side rendering solution

• Images are cached for 1 hour (Cache-Control: public, max-age=3600)
• This balances performance with the ability to update content
• Social media platforms typically cache images for longer periods

The system includes robust error handling:

• Invalid board strings fall back to the default board
• Image generation errors return a default image
• All errors are logged for debugging

Potential enhancements could include:

1. PNG conversion: For platforms that don't support SVG
2. Board state visualization: Show current game progress
3. Animated previews: For platforms that support animated images
4. Localization: Multi-language support for share text
5. Custom themes: Different visual styles for share cards