open-index/open-npm huggingface dataset:
npm package: @statickit/cli
Description: The StaticKit command line interface
Author: Derrick Reimer
Latest version: 0.9.0

# StaticKit CLI [![CircleCI](https://circleci.com/gh/unstacked/statickit-cli.svg?style=svg)](https://circleci.com/gh/unstacked/statickit-cli)

The command line interface for [StaticKit](https://statickit.com).

## Installation

Run the following to install on your machine:

```bash
npm i -g @statickit/cli
```

## Releasing

Run the following to publish a new version:

```bash
npm run release
```
npm package: @statickit/core
Description: The core library for StaticKit
Author: Derrick Reimer
Latest version: 2.5.1

# StaticKit Core [![CircleCI](https://circleci.com/gh/unstacked/statickit-core.svg?style=svg)](https://circleci.com/gh/unstacked/statickit-core)

The core client library for [StaticKit](https://statickit.com/docs/core).

## Releasing

Run the following to publish a new version:

```
npm run release
```
npm package: @statickit/deploy
Description: A utility for executing StaticKit deployments
Author: Derrick Reimer
Latest version: 0.3.0

# StaticKit Deploy [![CircleCI](https://circleci.com/gh/unstacked/statickit-deploy.svg?style=svg)](https://circleci.com/gh/unstacked/statickit-deploy)

A node.js utility library for executing [StaticKit](https://statickit.com) deployments.

## Releasing

Run the following to publish a new version:

```
npm run release
```
npm package: @statickit/html
Description: The HTML client library for StaticKit
Author: Derrick Reimer
Latest version: 1.3.1

# StaticKit HTML [![CircleCI](https://circleci.com/gh/unstacked/statickit-html.svg?style=svg)](https://circleci.com/gh/unstacked/statickit-html)

The HTML library for [StaticKit](https://statickit.com).

[**Read the docs&rarr;**](https://statickit.com/docs/forms/html)
npm package: @statickit/react
Description: The React component library for StaticKit
Author: Derrick Reimer
Latest version: 2.1.1

# StaticKit React [![CircleCI](https://circleci.com/gh/unstacked/statickit-react.svg?style=svg)](https://circleci.com/gh/unstacked/statickit-react)

The React component library for [StaticKit](https://statickit.com).

[**Read the docs &rarr;**](https://statickit.com/docs/react)
npm package: @statikbe/helpers
Description: Helper functions
Latest version: 1.0.2

# @statikbe/helpers

https://www.npmjs.com/package/@statikbe/helpers

## Installation

```
npm install @statikbe/helpers
yarn add @statikbe/helpers
```

## Usage

```
import { toArray } from '@statikbe/helpers';

toArray(document.querySelector('.my-class'));
```

## Methods

| method | description | returns |
| --- | --- | --- |
| `isIterable(obj)` | Checks if `obj` is iterable. | `Boolean` |
| `toArray(obj)` | Converts iterable object to array, if not iterable creates array containing `obj`. | `Array` |
| `toggle(elements [, display])` | Shows or hides target element(s). | - |
| `trigger(elements, eventName)` | Trigger an event on element(s). | - |
npm package: @statikbe/karbon-badge
Description: Lightweight JavaScript widget that displays CO2 emissions data for web pages
Author: Karbon
Latest version: 1.0.7

# Karbon Carbon Badge

A lightweight JavaScript widget that displays CO2 emissions data for web pages.

## Features

- 🌱 Shows CO2 emissions per page view
- 📊 Displays carbon rating (A-F)
- 💾 Client-side caching (24-hour TTL)
- 🚀 Lightweight and fast (3.35 kB, 1.45 kB gzipped)
- 🎨 Customizable styling
- ⚡ Production-ready minified build

## Installation

### Production (Recommended)

Add this HTML where you want the badge to appear:

```html
<!-- Badge container -->
<div id="karbon-badge"></div>

<!-- Badge script (minified) -->
<script src="https://unpkg.com/@statikbe/karbon-badge@1.0.2/dist/karbon-badge.min.js"></script>
```

### If you want extra control over structure and layout

You can add the HTML structure yourself to the page as a template.
You can add the optional attribute `data-custom-style` if you want to take care of the styling yourself

```html
<template id="karbon-badge" data-custom-style>
  <div class="karbon-container">
    ${ data.co2_grams ? `<span id="karbon-result">${data.co2_grams}g of CO<sub>2</sub></span
    >` : '<span id="karbon-no-result">Measuring CO<sub>2</sub>&hellip;</span>' }
    <a id="karbon-link" href="https://karbon.statik.be" target="_blank" rel="noopener">Karbon</a>
  </div>
  <div id="karbon-rating">Rating: <strong>${data.co2_rating}</strong></div>
</template>
```

> ⚠️ **The link to the karbon page is mandatory**
>
> If you alter the structure of the badge, you need to provide a link to `https://karbon.statik.be` on your page.

## How It Works

1. **Fetches data** from the Karbon API (`/api/v1/carbon?url=...`)
2. **Caches results** in localStorage for 24 hours
3. **Displays badge** with CO2 emissions and rating
4. **Auto-refreshes** stale cache in background

## NPM Package

This badge is designed to be published to npm. The `dist/` folder is gitignored but will be included in the npm package.

### Package Structure

When published to npm, users can install via:

```bash
npm install @statikbe/karbon-badge
# or
yarn add @statikbe/karbon-badge
```

And reference it via:

```html
<script src="https://unpkg.com/@statikbe/karbon-badge@1.0.2/dist/karbon-badge.min.js"></script>
```