Node's Package Magician

    node-package
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.0 • Public • Published

    <node-package>

    Version Status macOS Build Status Linux Build Status Windows Build Status Dependency Status npm bundle size (minified + gzip)

    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>
    

    Example

    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>
    

    Example with blue theme

    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>
    

    Example with red theme

    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>
    

    Example with card border

    Demo of install commands being copied.

    Example of copying install command

    License

    NodePackage is released under an MIT license.

    Built, tested, and published with Nutmeg.

    Install

    npm i node-package

    DownloadsWeekly Downloads

    435

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    802 kB

    Total Files

    46

    Last publish

    Collaborators

    • abraham