fix: enable CORS on chart embed endpoint and add missing tooltip by graphieros · Pull Request #2859 · npmx-dev/npmx.dev · GitHub

Follow up to #2833
This enables CORS on the embed downloads chart endpoint, to enable fetch and retrieve the svg string. Without it, only the image tag can be consumed with the url in its src.

I also added a tooltip, informing that startDate and endDate can be omitted from the query to dynamically get the last year of data.

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jun 6, 2026 8:31am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jun 6, 2026 8:31am
npmx-lunaria	Ignored		Jun 6, 2026 8:31am

Lost in the diff? Review this PR in Change Stack to follow the change map from intent to exact ranges.

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds an Access-Control-Allow-Origin header and uses the shared cache constant for the cached downloads SVG endpoint; replaces the embed “copy URL” label with an info-icon TooltipApp and adds a translated tip (and schema entry) that explains the default 12-month date range when startDate/endDate are omitted.

Changes

SVG Embed CORS, caching and date defaults

Layer / File(s)	Summary
CORS header and cache constant server/api/embed/downloads.svg.get.ts	Imports CACHE_MAX_AGE_ONE_HOUR and updates the cached handler to set Access-Control-Allow-Origin: '*' on the response and use the shared maxAge constant while keeping swr: true.
Chart embedding tooltip and translations app/components/Package/TrendsChart.vue, i18n/schema.json, i18n/locales/en.json, i18n/locales/fr-FR.json	Replaces the plain translated label with a TooltipApp anchored to an info icon and adds embedding.tip translations plus a tip property in the i18n schema describing the default 12-month date range when startDate/endDate are omitted. Also adds aria-controls="trends-embed-chart" to the embed toggle.

Possibly related PRs

npmx-dev/npmx.dev#2833: Main PR that introduced the downloads SVG embed feature and related embed UI; this PR refines the cached SVG handler and embed panel text/tooltip.

Suggested reviewers

ghostdevv
alexdln
gameroman

🚥 Pre-merge checks | ✅ 4 ✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The pull request description accurately describes the changeset, covering CORS enablement on the embed endpoint and the tooltip addition for date parameter guidance.
Title check	✅ Passed	The title accurately summarises the two main changes: enabling CORS on the chart embed endpoint and adding a tooltip to inform users about the default date range behaviour.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches 🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch embed-chart-cors

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/TrendsChart.vue	50.00%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

🧹 Nitpick comments (1)

server/api/embed/downloads.svg.get.ts (1)
14-15: 💤 Low value

Consider removing the Vary: Origin header.

The Vary: Origin header instructs caches to store separate copies of the response for different origins. However, since Access-Control-Allow-Origin: * is constant for all requests, the response doesn't actually vary by origin. Including Vary: Origin creates unnecessary cache fragmentation without benefit.

Vary: Origin is typically used when the CORS header value is conditionally set based on the request origin (e.g., echoing back specific origins), but with *, it's redundant.
♻️ Proposed fix
 setHeader(event, 'Access-Control-Allow-Origin', '*')
-setHeader(event, 'Vary', 'Origin')
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@server/api/embed/downloads.svg.get.ts` around lines 14 - 15, The Vary: Origin
header is redundant when Access-Control-Allow-Origin is '*'—remove the setHeader
call that sets 'Vary' on the response (the call like setHeader(event, 'Vary',
'Origin')) or change it to only set Vary when the CORS value is dynamic; leave
the setHeader(event, 'Access-Control-Allow-Origin', '*') intact and ensure no
other code reintroduces Vary for this route.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@server/api/embed/downloads.svg.get.ts`:
- Around line 14-15: The Vary: Origin header is redundant when
Access-Control-Allow-Origin is '*'—remove the setHeader call that sets 'Vary' on
the response (the call like setHeader(event, 'Vary', 'Origin')) or change it to
only set Vary when the CORS value is dynamic; leave the setHeader(event,
'Access-Control-Allow-Origin', '*') intact and ensure no other code reintroduces
Vary for this route.

ℹ️ Review info ⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6baa83d6-9eb5-4fd6-97d1-8ccbfd19440d

📥 Commits

Reviewing files that changed from the base of the PR and between 396b17f and 0bac49c.

📒 Files selected for processing (1)

server/api/embed/downloads.svg.get.ts

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@server/utils/embed-downloads-svg.ts`:
- Around line 145-154: The date math around effectiveEndDate/effectiveStartDate
is timezone-unsafe because it mixes parsing a UTC date string with local-time
mutators (new Date(...), setDate, setFullYear, getFullYear); change the
computations to use UTC-based constructors and accessors: build defaultEndDate
and defaultStartDate using Date.UTC (or new Date(Date.UTC(...))) and use
getUTCDate/setUTCDate and getUTCFullYear/setUTCFullYear (or operate on UTC
milliseconds) so that effectiveEndDate and effectiveStartDate (and the default*
variables) are computed in UTC consistently with parseDateQuery and the
toISOString().split('T')[0] formatting. Ensure the logic still falls back to
requestedEndDate and parseDateQuery(query.startDate ?? query.start) but uses the
UTC-safe date objects for the -1 day and -1 year adjustments.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info ⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: de3da5ad-6e37-46ee-a3b8-1b509adbe3c3

📥 Commits

Reviewing files that changed from the base of the PR and between 3e108d0 and 89d389f.

📒 Files selected for processing (1)

server/utils/embed-downloads-svg.ts

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.
i18n/locales/fr-FR.json	Localization changed, will be marked as complete.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/Package/TrendsChart.vue (1)

1976-1976: ⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Remove the stray + token in the button tag.

Line 1976 introduces invalid template syntax inside the <button> start tag, which will break SFC compilation.

Suggested fix

         <button
           type="button"
           :aria-expanded="showEmbedFields"
-          +
           aria-controls="trends-embed-chart"
           class="self-start flex items-center gap-1 text-2xs font-mono text-fg-subtle hover:text-fg transition-colors"
           `@click`="showEmbedFields = !showEmbedFields"
         >

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/components/Package/TrendsChart.vue` at line 1976, Remove the stray '+'
character inside the malformed <button> start tag in the TrendsChart.vue
template (that stray token at the start of the button element is causing invalid
SFC syntax); edit the template to delete the '+' so the button tag is a valid
opening tag (e.g., <button ...>), then save and verify the component compiles
and the surrounding markup remains correctly formed.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@app/components/Package/TrendsChart.vue`:
- Line 1976: Remove the stray '+' character inside the malformed <button> start
tag in the TrendsChart.vue template (that stray token at the start of the button
element is causing invalid SFC syntax); edit the template to delete the '+' so
the button tag is a valid opening tag (e.g., <button ...>), then save and verify
the component compiles and the surrounding markup remains correctly formed.

ℹ️ Review info ⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4bb16329-5098-4f27-a87f-34b6c1dcdf0c

📥 Commits

Reviewing files that changed from the base of the PR and between 89d389f and 3df7aae.

📒 Files selected for processing (4)

app/components/Package/TrendsChart.vue
i18n/locales/en.json
i18n/locales/fr-FR.json
i18n/schema.json

✅ Files skipped from review due to trivial changes (2)

i18n/locales/en.json
i18n/locales/fr-FR.json

…x-dev#2859)

fix: enable CORS on chart embed endpoint

0bac49c

vercel Bot deployed to Preview – npmx.dev June 6, 2026 06:59 View deployment

graphieros marked this pull request as ready for review June 6, 2026 07:05

coderabbitai Bot reviewed Jun 6, 2026

View reviewed changes

Fix: remove vary:origin

3e108d0

vercel Bot deployed to Preview – npmx.dev June 6, 2026 07:14 View deployment

fix: default to 1 year span if no date range in query

89d389f

graphieros marked this pull request as draft June 6, 2026 07:43

vercel Bot deployed to Preview – npmx.dev June 6, 2026 07:43 View deployment

coderabbitai Bot reviewed Jun 6, 2026

View reviewed changes

Comment thread server/utils/embed-downloads-svg.ts Outdated

fix: revert range default (already the case)

8a8d7e0

vercel Bot deployed to Preview – npmx.dev June 6, 2026 08:01 View deployment

fix: add tooltip

7badb01

vercel Bot deployed to Preview – npmx.dev June 6, 2026 08:19 View deployment

fix: conditional tooltip teleport target

3df7aae

vercel Bot deployed to Preview – npmx.dev June 6, 2026 08:23 View deployment

graphieros marked this pull request as ready for review June 6, 2026 08:25

coderabbitai Bot reviewed Jun 6, 2026

View reviewed changes

fix: remove typo

317324e

vercel Bot deployed to Preview – npmx.dev June 6, 2026 08:31 View deployment

graphieros requested a review from a team June 6, 2026 08:34

graphieros marked this pull request as draft June 6, 2026 09:12

graphieros removed the request for review from a team June 6, 2026 09:12

graphieros marked this pull request as ready for review June 6, 2026 09:14

graphieros requested a review from a team June 6, 2026 09:18

ghostdevv changed the title fix: enable CORS on chart embed endpoint fix: enable CORS on chart embed endpoint and add missing tooltip Jun 6, 2026

ghostdevv approved these changes Jun 6, 2026

View reviewed changes

ghostdevv added this pull request to the merge queue Jun 6, 2026

Merged via the queue into main with commit f6ad24d Jun 6, 2026
33 checks passed

ghostdevv deleted the embed-chart-cors branch June 6, 2026 15:31

github-actions Bot mentioned this pull request Jun 6, 2026

chore: release v0.16.0 #2856

Merged

ayo-run pushed a commit to ayo-run/npmx.dev that referenced this pull request Aug 5, 2026

fix: enable CORS on chart embed endpoint and add missing tooltip (npm…

413f079

…x-dev#2859)

fix: enable CORS on chart embed endpoint and add missing tooltip by graphieros · Pull Request #2859 · npmx-dev/npmx.dev · GitHub

Uh oh!

Uh oh!

fix: enable CORS on chart embed endpoint and add missing tooltip - #2859

fix: enable CORS on chart embed endpoint and add missing tooltip#2859
ghostdevv merged 7 commits into
mainfrom
embed-chart-cors

graphieros commented Jun 6, 2026 •
edited
Loading

Uh oh!

Uh oh!

vercel Bot commented Jun 6, 2026 •
edited
Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 6, 2026 •
edited
Loading

Uh oh!

Uh oh!

codecov Bot commented Jun 6, 2026 •
edited
Loading

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Jun 6, 2026 •
edited
Loading

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix: enable CORS on chart embed endpoint and add missing tooltip by graphieros · Pull Request #2859 · npmx-dev/npmx.dev · GitHub

Uh oh!

Uh oh!

fix: enable CORS on chart embed endpoint and add missing tooltip - #2859

fix: enable CORS on chart embed endpoint and add missing tooltip#2859ghostdevv merged 7 commits intomainnpmx-dev/npmx.dev:mainfrom embed-chart-corsnpmx-dev/npmx.dev:embed-chart-corsCopy head branch name to clipboard

Conversation

graphieros commented Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Possibly related PRs

Suggested reviewers

Uh oh!

codecov Bot commented Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix: enable CORS on chart embed endpoint and add missing tooltip#2859
ghostdevv merged 7 commits into
mainfrom
embed-chart-cors

graphieros commented Jun 6, 2026 •
edited
Loading

vercel Bot commented Jun 6, 2026 •
edited
Loading

coderabbitai Bot commented Jun 6, 2026 •
edited
Loading

codecov Bot commented Jun 6, 2026 •
edited
Loading

github-actions Bot commented Jun 6, 2026 •
edited
Loading