feat: more badges

docs/content/2.guide/1.features.md

@@ -92,19 +92,89 @@ Quick access to online development environments detected from package READMEs:
 
 ### Custom badges
 
-You can add custom npmx badges to your markdown files using the following syntax: `[![Open on npmx.dev](https://npmx.dev/api/registry/badge/YOUR_PACKAGE)](https://npmx.dev/package/YOUR_PACKAGE)`
+You can add custom npmx badges to your markdown files using the following syntax:
+`[![Open on npmx.dev](https://npmx.dev/api/registry/badge/TYPE/YOUR_PACKAGE)](https://npmx.dev/package/YOUR_PACKAGE)`
 
-Do not forget to replace `YOUR_PACKAGE` with the actual package name.
+> [!IMPORTANT]
+> 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`).
 
-Here are some examples:
+#### Available Badge Types
 
-```
-# Default
-[![Open on npmx.dev](https://npmx.dev/api/registry/badge/nuxt)](https://npmx.dev/package/nuxt)
+- **version**: Shows the latest or specific version of the package. ![](https://img.shields.io/badge/%233b82f6-3b82f6)
+- **license**: Displays the package license (e.g., MIT, Apache-2.0). ![](https://img.shields.io/badge/%2322c55e-22c55e)
+- **size**: Shows the install size (via Bundlephobia) or unpacked size. ![](https://img.shields.io/badge/%23a855f7-a855f7)
+- **downloads**: Displays monthly download statistics. ![](https://img.shields.io/badge/%23f97316-f97316)
+- **downloads-day**: Displays daily download statistics. ![](https://img.shields.io/badge/%23f97316-f97316)
+- **downloads-week**: Displays weekly download statistics. ![](https://img.shields.io/badge/%23f97316-f97316)
+- **downloads-month**: Alias for monthly download statistics. ![](https://img.shields.io/badge/%23f97316-f97316)
+- **downloads-year**: Displays yearly download statistics. ![](https://img.shields.io/badge/%23f97316-f97316)
+- **vulnerabilities**: Shows the number of vulnerabilities found via OSV. ![](https://img.shields.io/badge/%2322c55e-22c55e) / ![](https://img.shields.io/badge/%23ef4444-ef4444)
+- **dependencies**: Lists the total count of package dependencies. ![](https://img.shields.io/badge/%2306b6d4-06b6d4)
+- **created**: Displays the date the package was first published. ![](https://img.shields.io/badge/%2364748b-64748b)
+- **updated**: Displays the date of the most recent modification. ![](https://img.shields.io/badge/%2364748b-64748b)
+- **engines**: Shows the supported Node.js version range. ![](https://img.shields.io/badge/%23eab308-eab308)
+- **types**: Indicates if TypeScript types are included. ![](https://img.shields.io/badge/%233b82f6-3b82f6) / ![](https://img.shields.io/badge/%2364748b-64748b)
+- **maintainers**: Displays the total count of package maintainers. ![](https://img.shields.io/badge/%2306b6d4-06b6d4)
+- **deprecated**: Shows if the package is active or deprecated. ![](https://img.shields.io/badge/%2322c55e-22c55e) / ![](https://img.shields.io/badge/%23ef4444-ef4444)
+- **quality**: NPMS.io quality score based on linting and tests. ![](https://img.shields.io/badge/%23a855f7-a855f7)
+- **popularity**: NPMS.io popularity score based on downloads and stars. ![](https://img.shields.io/badge/%2306b6d4-06b6d4)
+- **maintenance**: NPMS.io maintenance score based on activity. ![](https://img.shields.io/badge/%23eab308-eab308)
+- **score**: The overall NPMS.io combined score. ![](https://img.shields.io/badge/%233b82f6-3b82f6)
+- **name**: Simple badge displaying the package name. ![](https://img.shields.io/badge/%2364748b-64748b)
+
+#### Examples
+
+```markdown
+# Version Badge
+
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/nuxt)](https://npmx.dev/package/nuxt)
+
+# License Badge
+
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/license/vue)](https://npmx.dev/package/vue)
+
+# Monthly Downloads
+
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/downloads/lodash)](https://npmx.dev/package/lodash)
+
+# Scoped Package (Install Size)
+
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/size/@nuxt/kit)](https://npmx.dev/package/@nuxt/kit)
+
+# Specific Version
 
-# Organization packages
-[![Open on npmx.dev](https://npmx.dev/api/registry/badge/@nuxt/kit)](https://npmx.dev/package/@nuxt/kit)
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/react/v/18.0.0)](https://npmx.dev/package/react)
 
-# Version-specific badges
-[![Open on npmx.dev](https://npmx.dev/api/registry/badge/nuxt/v/3.12.0)](https://npmx.dev/package/nuxt/v/3.12.0)
+# Quality Score
+
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/quality/pinia)](https://npmx.dev/package/pinia)
 ```
+
+#### Customization Parameters
+
+You can further customize your badges by appending query parameters to the badge URL.
+
+##### `color`
+
+Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix).
+
+- **Default**: Depends on the badge type (e.g., version is blue, downloads are orange).
+- **Usage**: `?color=HEX_CODE`
+
+| Example        | URL                                   |
+| :------------- | :------------------------------------ |
+| **Hot Pink**   | `.../badge/version/nuxt?color=ff69b4` |
+| **Pure Black** | `.../badge/version/nuxt?color=000000` |
+| **Brand Blue** | `.../badge/version/nuxt?color=3b82f6` |
+
+##### `name`
+
+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.
+
+- **Default**: `false`
+- **Usage**: `?name=true`
+
+| Type          | Default Label | With `name=true` |
+| :------------ | :------------ | :--------------- | ------- | ------- |
+| **Version**   | `version      | 3.12.0`          | `nuxt   | 3.12.0` |
+| **Downloads** | `downloads/mo | 2M`              | `lodash | 2M`     |