You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/content/2.guide/1.features.md
+80-10Lines changed: 80 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -92,19 +92,89 @@ Quick access to online development environments detected from package READMEs:
92
92
93
93
### Custom badges
94
94
95
-
You can add custom npmx badges to your markdown files using the following syntax: `[](https://npmx.dev/YOUR_PACKAGE)`
95
+
You can add custom npmx badges to your markdown files using the following syntax:
96
+
`[](https://npmx.dev/package/YOUR_PACKAGE)`
96
97
97
-
Do not forget to replace `YOUR_PACKAGE` with the actual package name.
98
+
> [!IMPORTANT]
99
+
> Make sure to replace `TYPE` with one of the options listed below and `YOUR_PACKAGE` with the actual package name (e.g., `vue`, `lodash`, or `@nuxt/kit`).
98
100
99
-
Here are some examples:
101
+
#### Available Badge Types
100
102
101
-
```
102
-
# Default
103
-
[](https://npmx.dev/nuxt)
103
+
-**version**: Shows the latest or specific version of the package. 
104
+
-**license**: Displays the package license (e.g., MIT, Apache-2.0). 
105
+
-**size**: Shows the install size (via Bundlephobia) or unpacked size. 
-**vulnerabilities**: Shows the number of vulnerabilities found via OSV.  / 
112
+
-**dependencies**: Lists the total count of package dependencies. 
113
+
-**created**: Displays the date the package was first published. 
114
+
-**updated**: Displays the date of the most recent modification. 
115
+
-**engines**: Shows the supported Node.js version range. 
116
+
-**types**: Indicates if TypeScript types are included.  / 
117
+
-**maintainers**: Displays the total count of package maintainers. 
118
+
-**deprecated**: Shows if the package is active or deprecated.  / 
119
+
-**quality**: NPMS.io quality score based on linting and tests. 
120
+
-**popularity**: NPMS.io popularity score based on downloads and stars. 
121
+
-**maintenance**: NPMS.io maintenance score based on activity. 
122
+
-**score**: The overall NPMS.io combined score. 
123
+
-**name**: Simple badge displaying the package name. 
124
+
125
+
#### Examples
126
+
127
+
```markdown
128
+
# Version Badge
129
+
130
+
[](https://npmx.dev/package/nuxt)
131
+
132
+
# License Badge
133
+
134
+
[](https://npmx.dev/package/vue)
135
+
136
+
# Monthly Downloads
137
+
138
+
[](https://npmx.dev/package/lodash)
139
+
140
+
# Scoped Package (Install Size)
141
+
142
+
[](https://npmx.dev/package/@nuxt/kit)
143
+
144
+
# Specific Version
104
145
105
-
# Organization packages
106
-
[](https://npmx.dev/@nuxt/kit)
146
+
[](https://npmx.dev/package/react)
107
147
108
-
# Version-specific badges
109
-
[](https://npmx.dev/nuxt/v/3.12.0)
148
+
# Quality Score
149
+
150
+
[](https://npmx.dev/package/pinia)
110
151
```
152
+
153
+
#### Customization Parameters
154
+
155
+
You can further customize your badges by appending query parameters to the badge URL.
156
+
157
+
##### `color`
158
+
159
+
Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix).
160
+
161
+
-**Default**: Depends on the badge type (e.g., version is blue, downloads are orange).
When set to `true`, this parameter replaces the static category label (like "version" or "downloads/mo") with the actual name of the package. This is useful for brand-focused READMEs.
0 commit comments