abraham / node-package

Node Package Web Component

<node-package>

Install

Polyfill tags if you need them. This will include ShadowDOM and Custom Elements support.

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/bundles/webcomponents-sd-ce.js"></script>

Loading this component. It would be a good idea to use a specific version instead of latest.

<script src="https://unpkg.com/node-package@latest/dist/node-package.min.js"></script>

Example

Live demo

Usage

Set the name attribute to the name of an NPM package.

<node-package name="lodash"></node-package>

Add the global attribute to add --global to the NPM install command.

<node-package name="@angular/cli" global></node-package>

Will result in npm install @angular/cli --global.

Theming

For advanced theming you can set the following CSS custom properties:

• --node-package-background-color
• --node-package-color
• --node-package-link-color

Blue theme

<style>
  node-package.blue {
    --node-package-background-color: #03A9F4;
    --node-package-color: #FAFAFA;
    --node-package-link-color: #dadce0;
  }
</style>
<node-package name="bluebird" class="blue"></node-package>

Red theme

<style>
  node-package.red {
    --node-package-background-color: #CB3837;
    --node-package-color: #FAFAFA;
    --node-package-link-color: #dadce0;
  }
</style>
<node-package name="@nutmeg/cli" class="red"></node-package>

Card border

You can also apply custom edge designs to look more like a card.

<style>
  node-package.card {
    box-shadow: 0 3px 4px 1px rgba(0, 0, 0, .08), 0 1px 1px 1px rgba(0, 0, 0, .05);
    border-radius: 2px;
    border-width: 0;
  }
</style>
<node-package name="lite-server" class="card"></node-package>

Demo of install commands being copied.

License

NodePackage is released under an MIT license.

Built, tested, and published with Nutmeg.