https://github.com/scriptex/npm-maintainer

Web component which shows statistics for a user in NPM

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

○
CITATION.cff file
✓
codemeta.json file
Found codemeta.json file
✓
.zenodo.json file
Found .zenodo.json file
○
DOI references
○
Academic publication links
○
Committers with academic emails
○
Institutional organization owner
○
JOSS paper metadata
○
Scientific vocabulary similarity
Low similarity (8.9%) to scientific vocabulary

Keywords

npm-stats statistics web-component

Keywords from Contributors

documents zsh-plugin communication

Last synced: 6 months ago · JSON representation

Repository

Web component which shows statistics for a user in NPM

Basic Info

Host: GitHub
Owner: scriptex
License: mit
Language: TypeScript
Default Branch: master
Homepage: https://npm-maintainer.atanas.info/
Size: 115 KB

Statistics

Stars: 6
Watchers: 2
Forks: 1
Open Issues: 0
Releases: 2

Topics

npm-stats statistics web-component

Created over 5 years ago · Last pushed 6 months ago

Metadata Files

Readme Funding License

NPM Maintainer

Statistics for a NPM user. See the demo here

A web component which shows various statistics for a user in the NPM database.

Visitor stats

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit

Install

```sh npm i npm-maintainer

or

yarn add npm-maintainer ```

Usage

js // In your JS entrypoint import 'npm-maintainer';

```html

<npm-maintainer user="scriptex" error="An unknown error occurred. Please try again later." loading="Loading data from NPM..."

```

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() 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; } ```