Add npmx module links#2290
Conversation
|
@Norbiros is attempting to deploy a commit to the Nuxt Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe module item context menu now splits npm-related actions into downloads, npm, and npmx links. The module page sidebar link now points to npmx.dev with a fixed npmx label. The raw module markdown route now includes an npmx link alongside the existing npm link. Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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/module/ModuleItem.vue`:
- Around line 89-104: The npm-related menu items in ModuleItem.vue are being
built unconditionally even though props.module.npm is optional, which can
produce broken undefined links. Update the menu construction in the ModuleItem
component so the “View downloads”, “View on npm”, and “View on npmx” entries are
only added when props.module.npm is present, matching the gating already used in
app/pages/modules/[slug].vue. Keep the rest of the action menu unchanged and
ensure the conditional logic is applied where the menu items array is assembled.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 52e218db-0529-4b68-8c53-cf3218ee9476
📒 Files selected for processing (3)
app/components/module/ModuleItem.vueapp/pages/modules/[slug].vueserver/routes/raw/modules.md.get.ts
There was a problem hiding this comment.
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/module/ModuleItem.vue`:
- Around line 88-107: The `props.module.npm ? [...] : []` expression in
`ModuleItem.vue` is formatted in a way that violates
`@stylistic/multiline-ternary`. Update the ternary inside the module actions
array so the `?` and `:` branches are split across separate lines, keeping the
same logic for the npm-related action items. Use the existing `props.module.npm`
conditional in the computed/actions block and preserve the three links (`View
downloads`, `View on npm`, `View on npmx`) while reformatting only.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b5a37872-4a66-453a-aa76-33de27d6ad4b
📒 Files selected for processing (1)
app/components/module/ModuleItem.vue
| ...(props.module.npm ? [ | ||
| { | ||
| label: 'View downloads', | ||
| icon: 'i-lucide-package', | ||
| to: `https://npm.chart.dev/${props.module.npm}`, | ||
| target: '_blank' | ||
| }, | ||
| { | ||
| label: 'View on npm', | ||
| icon: 'i-simple-icons-npm', | ||
| to: `https://www.npmjs.com/package/${props.module.npm}`, | ||
| target: '_blank' | ||
| }, | ||
| { | ||
| label: 'View on npmx', | ||
| icon: 'i-simple-icons-npm', | ||
| to: `https://npmx.dev/package/${props.module.npm}`, | ||
| target: '_blank' | ||
| } | ||
| ] : []) |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Fix the multiline ternary formatting.
This trips @stylistic/multiline-ternary, so the lint step will fail until the ? / : branches are split across lines.
Suggested fix
- ...(props.module.npm ? [
+ ...(props.module.npm
+ ? [
{
label: 'View downloads',
icon: 'i-lucide-package',
to: `https://npm.chart.dev/${props.module.npm}`,
target: '_blank'
@@
{
label: 'View on npmx',
icon: 'i-simple-icons-npm',
to: `https://npmx.dev/package/${props.module.npm}`,
target: '_blank'
}
- ] : [])
+ ]
+ : [])📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ...(props.module.npm ? [ | |
| { | |
| label: 'View downloads', | |
| icon: 'i-lucide-package', | |
| to: `https://npm.chart.dev/${props.module.npm}`, | |
| target: '_blank' | |
| }, | |
| { | |
| label: 'View on npm', | |
| icon: 'i-simple-icons-npm', | |
| to: `https://www.npmjs.com/package/${props.module.npm}`, | |
| target: '_blank' | |
| }, | |
| { | |
| label: 'View on npmx', | |
| icon: 'i-simple-icons-npm', | |
| to: `https://npmx.dev/package/${props.module.npm}`, | |
| target: '_blank' | |
| } | |
| ] : []) | |
| ...(props.module.npm | |
| ? [ | |
| { | |
| label: 'View downloads', | |
| icon: 'i-lucide-package', | |
| to: `https://npm.chart.dev/${props.module.npm}`, | |
| target: '_blank' | |
| }, | |
| { | |
| label: 'View on npm', | |
| icon: 'i-simple-icons-npm', | |
| to: `https://www.npmjs.com/package/${props.module.npm}`, | |
| target: '_blank' | |
| }, | |
| { | |
| label: 'View on npmx', | |
| icon: 'i-simple-icons-npm', | |
| to: `https://npmx.dev/package/${props.module.npm}`, | |
| target: '_blank' | |
| } | |
| ] | |
| : []) |
🧰 Tools
🪛 ESLint
[error] 88-88: Expected newline between test and consequent of ternary expression.
(@stylistic/multiline-ternary)
[error] 88-107: Expected newline between consequent and alternate of ternary expression.
(@stylistic/multiline-ternary)
🤖 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/module/ModuleItem.vue` around lines 88 - 107, The
`props.module.npm ? [...] : []` expression in `ModuleItem.vue` is formatted in a
way that violates `@stylistic/multiline-ternary`. Update the ternary inside the
module actions array so the `?` and `:` branches are split across separate
lines, keeping the same logic for the npm-related action items. Use the existing
`props.module.npm` conditional in the computed/actions block and preserve the
three links (`View downloads`, `View on npm`, `View on npmx`) while reformatting
only.
Source: Linters/SAST tools
1 participant
🔗 Linked issue
📚 Description
Adds links to npmx.dev, a better package explorer for npm packages used by a lot of folks in the Nuxt community.
The new links are shown for modules in the module page sidebar and in the module card context menu. I also clarified the existing downloads link and added a separate direct link to npmjs.com.
I also added an npmx link in
server/routes/raw/modules.md.get.ts, since npmx may eventually provide nicer package descriptions for LLMs: npmx-dev/npmx.dev#725