feature(share): add svg download option to share sheet#108
Merged
JhaSourav07 merged 1 commit intoMay 16, 2026
Conversation
Contributor
|
@guptakaran20 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds an SVG download action to the dashboard ShareSheet so users can save their generated CommitPulse badge locally, addressing #52.
Changes:
- Added a “Download SVG” share option that fetches
/api/streak?user=...and triggers a.svgdownload. - Added (or surfaced) a “Copy Markdown” option in the ShareSheet options list alongside existing share/download actions.
Comments suppressed due to low confidence (3)
components/dashboard/ShareSheet.tsx:125
- The fetch URL interpolates
usernamedirectly into the query string. If the username contains reserved characters (e.g.&,?,#, spaces), it can break the request or inject extra query params (e.g.octo&refresh=true). UseencodeURIComponent(username)(orURLSearchParams) when building/api/streak?user=....
const response = await fetch(`/api/streak?user=${username}`);
if (!response.ok) throw new Error('Failed to fetch SVG');
const svgText = await response.text();
components/dashboard/ShareSheet.tsx:134
- After setting the SVG option state to
success, the UI’s success label logic only special-casescopy,png, andjson. As a result, the SVG action won’t show any distinct success feedback (it will keep displaying the default label). Update the success-label mapping to include thesvgkey (e.g. show “SVG Downloaded!”) to match the other download actions.
URL.revokeObjectURL(url);
setOptionState('svg', 'success');
} catch {
components/dashboard/ShareSheet.tsx:238
- The new “Copy Markdown” option uses the
FileJsonicon, which is the same icon used for “Download JSON” and is misleading for a markdown snippet action. Use a more appropriate icon (e.g. link/code/clipboard) so users can distinguish the actions.
key: 'markdown',
icon: FileJson,
label: 'Copy Markdown',
description: 'Copy markdown snippet for your README',
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+120
to
+137
| const handleDownloadSVG = async () => { | ||
| setOptionState('svg', 'loading'); | ||
| try { | ||
| const response = await fetch(`/api/streak?user=${username}`); | ||
| if (!response.ok) throw new Error('Failed to fetch SVG'); | ||
| const svgText = await response.text(); | ||
| const blob = new Blob([svgText], { type: 'image/svg+xml' }); | ||
| const url = URL.createObjectURL(blob); | ||
| const link = document.createElement('a'); | ||
| link.download = `${username}-commitpulse.svg`; | ||
| link.href = url; | ||
| link.click(); | ||
| URL.revokeObjectURL(url); | ||
| setOptionState('svg', 'success'); | ||
| } catch { | ||
| setOptionState('svg', 'error'); | ||
| } | ||
| }; |
Contributor
Author
There was a problem hiding this comment.
Implemented all review suggestions:
- Username encoded in SVG fetch URL
- Added success-state feedback for the SVG image
- Changed the markdown action icon to another one
- Added SVG download test along with ShareSheet tests already available
I maintained my pull request as a single commit only.
guptakaran20
force-pushed
the
feat/download-svg-button
branch
from
May 15, 2026 16:18
9f8c1e6 to
1f3692d
Compare
guptakaran20
force-pushed
the
feat/download-svg-button
branch
from
May 15, 2026 16:25
1f3692d to
7bcb947
Compare
Owner
|
@harxhe |
JhaSourav07
added
GSSoC 2026
level:intermediate
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
JhaSourav07
added
the
gssoc:approved
Owner
|
Thanks for contributing to CommitPulse 🚀 To make collaboration, PR reviews, issue coordination, and future contributions smoother, we highly recommend joining the CommitPulse Discord community: Inside the server you can: Most contributor coordination happens there, so joining will make the contribution experience much smoother 💜 |
github-actions
Bot
added
the
type:feature
JhaSourav07
added
gssoc:approved
MasterJi27
pushed a commit
to MasterJi27/commitpulse
that referenced
this pull request
Jul 4, 2026
## Description Fixes JhaSourav07#52 Added a **"Download SVG"** option to the ShareSheet in the dashboard. Users can now download the full-commit PNG. It fetches the SVG from the current endpoint `/api/streak?user=${username}`, converts to `image/svg+xml`, and forces a browser download of the filename `[username]-commitpulse.svg`. The new functionality is added next to the current "Copy Markdown" functionality keeping in line with the existing Tailwind CSS Styles. ## Pillar * [ ] 🎨 Pillar 1 — New Theme Design * [ ] 📐 Pillar 2 — Geometric SVG Improvement * [ ] 🕐 Pillar 3 — Timezone Logic Optimization * [x] 🛠️ Other (Bug fix, refactoring, docs) ## Visual Preview <img width="1896" height="870" alt="Screenshot 2026-05-15 212039" src="https://github.com/user-attachments/assets/95a63df4-289a-429a-a177-b5fe8473f5ea" /> <img width="808" height="100" alt="Screenshot 2026-05-15 212108" src="https://github.com/user-attachments/assets/936165e7-05ca-4ebb-acf0-1ba0dc25c38a" /> ## Checklist before requesting a review: * [x] I have read the `CONTRIBUTING.md` file. * [x] I have tested these changes locally (`localhost:3000/api/streak?user=YOUR_USERNAME`). * [x] I have run `npm run format` and `npm run lint` locally and resolved all errors (CI will fail otherwise). * [x] My commits follow the Conventional Commits format (e.g., `feat(themes): ...`, `fix(calculate): ...`). * [x] I have updated `README.md` if I added a new theme or URL parameter. * [x] I have started the repo. * [x] I have made sure that i have only one commit to merge in this PR. * [x] The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fixes #52
Added a "Download SVG" option to the ShareSheet in the dashboard.
Users can now download the full-commit PNG. It fetches the SVG from the current endpoint
/api/streak?user=${username}, converts toimage/svg+xml, and forces a browser download of the filename[username]-commitpulse.svg.The new functionality is added next to the current "Copy Markdown" functionality keeping in line with the existing Tailwind CSS Styles.
Pillar
Visual Preview
Checklist before requesting a review:
CONTRIBUTING.mdfile.localhost:3000/api/streak?user=YOUR_USERNAME).npm run formatandnpm run lintlocally and resolved all errors (CI will fail otherwise).feat(themes): ...,fix(calculate): ...).README.mdif I added a new theme or URL parameter.