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>
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.
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.
NodePackage is released under an MIT license.
Built, tested, and published with Nutmeg.