fix: use PNG for d2 diagrams to fix GitHub icon rendering

[markphelps]

Summary

• Mintlify's CDN sanitizes SVGs and strips href attributes from <image> elements, which causes embedded base64 icons (like the GitHub octocat) to not render on the production site
• Regenerated d2 diagrams as PNG (light + dark themes) so the icons are preserved through CDN processing
• Updated environments.mdx and storage.mdx to reference .png instead of .svg
• Removed the old unused SVG files

[claude]

Pull Request Review

This PR successfully addresses the issue of GitHub icons not rendering in production due to Mintlify's CDN sanitization of SVG files. The solution is clean, well-executed, and follows the repository's conventions.

✅ Strengths

1. Code Quality & Best Practices

• Follows Conventional Commits format correctly (fix: and chore: prefixes)
• Clean separation of concerns: one commit for the fix, one for cleanup
• Proper signed-off commits
• All references to old SVG files have been updated - no orphaned references found

2. Documentation Changes

• MDX files updated correctly with proper light/dark theme image handling
• Image paths follow the existing pattern: /v2/images/configuration/...
• Changes are minimal and focused (only 4 lines changed across 2 files)
• Maintains consistency with existing documentation structure

3. File Management

• Old SVG files properly removed (4 files deleted)
• New PNG files correctly added for both light and dark themes
• No leftover references to deleted SVG files in the codebase

4. Technical Approach

• Root cause clearly identified in the commit message (CDN stripping href attributes from SVG <image> elements)
• Solution is pragmatic: PNG format avoids the CDN sanitization issue while preserving visual content
• The fix addresses the actual rendering problem rather than trying to work around CDN limitations

🔍 Observations

Image File Size
While not shown in the diff, PNG files are typically larger than SVG files. For diagrams, this trade-off is acceptable given:

• Diagrams are relatively simple (not photographs)
• User experience is prioritized (working icons vs. smaller files)
• CDN caching will mitigate repeated download costs

No Regression Risk

• Changes are isolated to 2 documentation pages
• Image format change is transparent to users
• Light/dark theme switching mechanism remains unchanged

✅ Security, Performance & Testing

Security: No concerns. This is a documentation-only change with image format conversion.

Performance: Minimal impact. PNG files may be slightly larger, but:

• Served through CDN with caching
• Only 4 images affected
• No runtime code changes

Testing: The PR description indicates this fixes the production rendering issue. Recommend verifying:

• PNG images render correctly in local dev (mint dev)
• GitHub icons appear correctly in both light and dark themes
• Images render properly on the production site after deployment

📋 Recommendations

Optional Enhancement (not blocking):

• Consider documenting this CDN limitation in the project's development notes if similar diagrams are created in the future (to avoid regenerating SVGs that will need conversion)

Summary

This is a high-quality PR that solves a production issue with a straightforward, well-documented solution. The changes are minimal, focused, and follow all repository conventions outlined in CLAUDE.md.

Recommendation: Approve and merge ✅

The fix is production-ready and addresses the root cause effectively.