web: implement GitHub README badge generation widget

[ShantKhatri]

Summary

Product doc section 5.7 specifies an embeddable GitHub README badge for DevCard. Create a badge generator page in the web app where users can copy-paste a Markdown snippet to embed in their GitHub README.

Context

This is a high-leverage growth feature — every developer who adds the badge to their README passively distributes DevCard to their GitHub visitors.

Tasks

• create apps/web/src/routes/devcard/badge/+page.svelte — a settings-adjacent page titled 'GitHub Badge'.
• render a live preview of the badge using SVG (design: 'Connect with me on DevCard' with DevCard logo icon and user's avatar URL).
• provide Markdown snippet:

  [![DevCard](https://devcard.dev/badge/<username>.svg)](https://devcard.dev/<username>)
  

• add backend route GET /badge/:username.svg in a new apps/backend/src/routes/badge.ts that generates SVG dynamically:
  • fetch user's displayName and avatarUrl from DB.
  • render SVG string with inline base64 avatar, user name, and platform count.
  • cache response for 5 minutes with Cache-Control.
• add HTML embed snippet option too.
• one-click copy for both snippets.
• add a 'Shields.io compatible' JSON endpoint GET /api/badge/:username/shields returning { schemaVersion: 1, label: 'devcard', message: '<N> platforms', color: 'blue' }.

Acceptance Criteria

• badge SVG renders correctly and is accessible (has aria-label).
• copying snippet is one-click.
• SVG response has correct MIME type and is cacheable.
• shields.io endpoint returns valid schema.

Difficulty

advanced — requires server-side SVG generation, image embedding, caching, and web font rendering considerations.

[rohtheroos-84]

hey @ShantKhatri, id like to work on adding this functionality to DevCard, could you assign it to me so i can get started asap?

[ShantKhatri]

Warm welcome. But it's have dependencies, so could you please pick any other issue?

[rohtheroos-84]

sure @ShantKhatri