Add interactive Leaflet map component for blog posts

[khou22]

Summary

Introduces a new interactive Leaflet map component that can be embedded in blog posts via a custom <leaflet-map> HTML tag or used directly in React components. The map supports fully customizable markers (emoji, colored dots, text labels, or built-in vector icons) with optional hover tooltips and click popups.

Key Changes

• New LeafletMap component (LeafletMap.tsx): Core interactive map using react-leaflet with support for custom pins, auto-fitting to pin bounds, and configurable tile layers
• Icon system (icons.ts): Creates Leaflet DivIcons for four marker types:
  • Emoji glyphs with drop shadows
  • Colored dots with customizable size
  • Text labels rendered as pills
  • Built-in vector icons (pin, star, home, heart, flag, camera, food, coffee)
• SSR-safe wrapper (LeafletMapEmbed.tsx): Dynamically loads the map with ssr: false since Leaflet accesses window at import time. Parses HTML attributes from markdown <leaflet-map> tags and converts them to typed props
• Type definitions (types.ts): Serializable types for MapPin, PinIcon, and LeafletMapProps to support both React and HTML attribute-based configuration
• Markdown integration: Registered LeafletMapEmbed as a custom component handler in CustomMarkdown to support embedded maps in blog posts
• Documentation (README.md): Comprehensive guide with examples for both markdown embedding and direct React usage

Notable Implementation Details

• All marker HTML is built with inline SVG and styled divs, eliminating dependency on Leaflet's image assets (which break under bundlers)
• HTML content is properly escaped to prevent injection vulnerabilities
• When no explicit center is provided, the map automatically fits its viewport to show all pins
• Single pins are centered at zoom level 13; multiple pins trigger bounds fitting with padding
• The component gracefully handles edge cases (no pins, invalid JSON, missing attributes) with sensible defaults

https://claude.ai/code/session_018vFehYnKPKTShwxwWsV4PR