Skip to content

feat: add nodejs noodle#2778

Open
alexdln wants to merge 4 commits into
npmx-dev:mainfrom
alexdln:feat/noodle-nodejs
Open

feat: add nodejs noodle#2778
alexdln wants to merge 4 commits into
npmx-dev:mainfrom
alexdln:feat/noodle-nodejs

Conversation

@alexdln
Copy link
Copy Markdown
Member

@alexdln alexdln commented May 21, 2026

🧭 Context

New noodle 🍜

image

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented May 21, 2026

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

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment May 21, 2026 8:49pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview May 21, 2026 8:49pm
npmx-lunaria Ignored Ignored May 21, 2026 8:49pm

Request Review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 21, 2026

Review Change Stack

📝 Walkthrough

Summary by CodeRabbit

  • New Features

    • Added a Node.js themed logo component and made it the active promotional noodle (21–28 May 2026).
    • Tooltips can now accept custom attributes, improving interactive behaviour and accessibility.
  • Tests

    • Accessibility audit updated to include the new Node.js logo.
  • Chores

    • Configuration updated to reflect component changes.

Walkthrough

Replaces the Press noodle with a Node.js noodle: adds Nodejs/Logo.vue (tooltip + SVG), updates ACTIVE_NOODLES to use the Node.js logo for 2026-05-21 → 2026-05-28, updates a11y tests to mount the Node.js logo, adds a knip ignore, and exposes tooltipAttr in Tooltip/App.

Changes

Noodle logo replacement

Layer / File(s) Summary
Node.js logo component
app/components/Noodle/Nodejs/Logo.vue
Adds a Vue SFC that renders a TooltipApp with a Node.js release note and a code-styled message, and includes the Node.js SVG logo with localized :alt text and responsive sizing classes.
Noodle registry import and active entry
app/components/Noodle/index.ts
Swaps import from the Press logo to the Node.js logo and updates ACTIVE_NOODLES to activate the Node.js noodle with key, logo reference, and date range 2026-05-21 → 2026-05-28.
Accessibility tests and tooling ignore
test/nuxt/a11y.spec.ts, knip.ts
Replaces NoodlePressLogo with NoodleNodejsLogo in the a11y audit import and mounts the Node.js logo for the axe check; adds app/components/ColorScheme/Img.vue to knip's root workspace ignoreFiles.
Tooltip prop and attrs wiring
app/components/Tooltip/App.vue
Adds optional tooltipAttr prop and merges it into the computed tooltipAttrs to allow passing arbitrary attributes onto the tooltip element.

Possibly related PRs

  • npmx-dev/npmx.dev#2666: Modifies the noodles registry and a11y tests; that PR introduced/used the Press logo while this PR replaces it with the Node.js logo.

Suggested reviewers

  • graphieros
  • patak-cat
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: adding a new Node.js-themed noodle component to the application.
Description check ✅ Passed The description provides context for the change by labelling it as a new noodle and includes a visual preview, which is related to the changeset.
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.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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
Copy link
Copy Markdown

codecov Bot commented May 21, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 `@app/components/Noodle/Nodejs/Logo.vue`:
- Around line 9-12: The external anchor element in Logo.vue that sets
target="_blank" for the Node.js release link (the <a ...
href="https://github.com/nodejs/node-v0.x-archive/releases/tag/v0.0.1"
target="_blank"> anchor) should include rel="noopener noreferrer" to prevent
reverse-tabnabbing; update that anchor element to add rel="noopener noreferrer"
alongside the existing attributes (keeping class="underline" and href intact).
🪄 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: 085ae28a-6d74-4507-ab71-880d1ce386fe

📥 Commits

Reviewing files that changed from the base of the PR and between f2be533 and 020cde6.

📒 Files selected for processing (4)
  • app/components/Noodle/Nodejs/Logo.vue
  • app/components/Noodle/Press/Logo.vue
  • app/components/Noodle/index.ts
  • test/nuxt/a11y.spec.ts
💤 Files with no reviewable changes (1)
  • app/components/Noodle/Press/Logo.vue

Comment thread app/components/Noodle/Nodejs/Logo.vue
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 `@app/components/Tooltip/App.vue`:
- Line 43: Currently attrs is built by spreading consumer props.tooltipAttr
after setting role and id, allowing consumers to override component-owned
accessibility attributes (role and id) and break aria-describedby linkage;
change construction so component-owned attributes (role: 'tooltip' and id:
tooltipId) are applied last or otherwise take precedence over props.tooltipAttr
(e.g., merge as {...props.tooltipAttr, role: 'tooltip', id: tooltipId} or assign
role/id after spreading) so that attrs, tooltipId, and role remain authoritative
and cannot be overridden by props.tooltipAttr.
🪄 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: b55f916c-ad4c-4b67-a8a9-f14a3a593804

📥 Commits

Reviewing files that changed from the base of the PR and between 666fd4a and 895753d.

📒 Files selected for processing (2)
  • app/components/Noodle/Nodejs/Logo.vue
  • app/components/Tooltip/App.vue

Comment thread app/components/Tooltip/App.vue
/** Offset distance in pixels (default: 4) */
offset?: number
/** Additional attributes to be applied to the tooltip element */
tooltipAttr?: Record<string, unknown>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can replace this prop by using Vue's attrs inheritance system:

defineOptions({
  inheritAttrs: false,
})

const attrs = useAttrs()

// Then
const tooltipAttrs = computed(() => {
  const mergedAttrs: Record<string, unknown> = {
    role: 'tooltip',
    id: tooltipId,
    ...attrs,
  }

  if (props.interactive) {
    mergedAttrs.onMouseenter = show
    mergedAttrs.onMouseleave = hide
  }

  return mergedAttrs
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants