Add custom social preview (OpenGraph) image

[jasoneplumb]

Parent Epic

#104

Problem

usesCustomOpenGraphImage: false. When someone shares the repo link on Slack, Twitter/X, or LinkedIn, it shows GitHub's generic preview with just the repo name. A custom image with a map screenshot + logo would look much more polished.

Current State

Default GitHub OpenGraph image (gray card with repo name).

Desired State

Custom 1280×640px social preview image showing:

• App screenshot (map with blue dot, controls, trail line)
• webmap.dev logo/wordmark
• Brief tagline: "Privacy-first GPS mapping"
• Clean, professional layout

Implementation Details

Image Requirements (GitHub specs)

• Size: 1280×640px (2:1 aspect ratio)
• Format: PNG or JPG
• Max file size: 1MB
• Set via: GitHub repo Settings → General → Social preview

Design Approach

• Left side: phone mockup showing the app (map + controls + trail)
• Right side: logo + tagline + key features (3-4 bullet points)
• Background: dark or map-themed
• Colors: match the app's theme (#4CAF50 green, #4287f5 blue)

Setting the Image

This must be done manually in GitHub Settings (no CLI command available):

1. Go to https://github.com/jasoneplumb/webmap.dev/settings
2. Scroll to "Social preview"
3. Upload the image
4. Save

Suggested Prompt

This issue requires manual work — the social preview image must be:
1. Designed (using Figma, Canva, or similar)
2. Uploaded manually in GitHub Settings → Social preview

Help me plan the image:
- Take a screenshot of webmap.dev showing the map with GPS dot, 
  controls, and ideally a trail line
- Create a 1280×640px composition with the screenshot on the left 
  and branding on the right
- Use the app's color palette (#4CAF50, #4287f5, #fff)
- Include tagline "Privacy-first GPS mapping"

Save the source file so it can be updated for future versions.

Acceptance Criteria

• Custom social preview image uploaded in GitHub Settings
• Image shows app screenshot with recognizable map + controls
• Image includes webmap.dev branding and tagline
• Link previews render correctly on Slack, Twitter, LinkedIn