https://github.com/scriptex/npm-maintainer
Web component which shows statistics for a user in NPM
https://github.com/scriptex/npm-maintainer
npm-stats statistics web-component
Last synced: 11 days ago
JSON representation
Web component which shows statistics for a user in NPM
- Host: GitHub
- URL: https://github.com/scriptex/npm-maintainer
- Owner: scriptex
- License: mit
- Created: 2020-11-06T13:32:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-03-06T04:21:58.000Z (4 months ago)
- Last Synced: 2025-04-04T00:12:32.677Z (3 months ago)
- Topics: npm-stats, statistics, web-component
- Language: TypeScript
- Homepage: https://npm-maintainer.atanas.info/
- Size: 116 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/scriptex/npm-maintainer/actions?query=workflow%3ABuild)
[](https://www.codacy.com/gh/scriptex/npm-maintainer/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/npm-maintainer&utm_campaign=Badge_Grade)
[](https://codebeat.co/projects/github-com-scriptex-npm-maintainer-master)
[](https://www.codefactor.io/repository/github/scriptex/npm-maintainer)
[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[](https://github.com/scriptex/npm-maintainer/)
# NPM Maintainer
> Statistics for a NPM user. See the demo [here](https://npm-maintainer.atanas.info/)
A web component which shows various statistics for a user in the NPM database.
## Visitor stats
## Code stats
## Install
```sh
npm i npm-maintainer
#or
yarn add npm-maintainer
```
## Usage
```js
// In your JS entrypoint
import 'npm-maintainer';
```
```html
```
## Attributes
| Name | Type | Required | Default | Description |
| --------- | -------- | -------- | --------------------- | ---------------------------------- |
| `user` | `string` | true | '' | The user name from NPM |
| `error` | `string` | false | 'Error loading data.' | Message shown when an error occurs |
| `loading` | `string` | false | 'Loading data...' | Message shown when loading data |
## Styling
The `npm-maintainer` Web Component utilizes the [`::part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) pseudo-element. In order to add custom styles, you should use the corresponding parts of the components:
- `error` - The element which shows the error message
- `loading` - The element which shows the loading message
- `content` - The element which shows the data table
- `table` - The <table> itself
- `thead` - The <thead> element
- `thead`-row - The <tr> inside the <thead> element
- `tbody` - The <tbody> element
- `tbody`-row - The <tr> inside the <tbody> element
- `th` - the <th> elements
- `td` - the <td> elements
Here is an example:
```css
npm-maintainer {
display: block;
}
npm-maintainer::part(error),
npm-maintainer::part(loading) {
text-align: center;
min-height: 75vh;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
npm-maintainer::part(error) {
color: red;
}
npm-maintainer::part(table) {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
npm-maintainer::part(th),
npm-maintainer::part(td) {
padding: 0.25rem;
border: 1px solid;
}
npm-maintainer::part(link) {
color: inherit;
text-decoration: underline;
}
npm-maintainer::part(link):hover {
text-decoration: none;
}
```
## LICENSE
MIT
Connect with me:
---
Support and sponsor my work:
