open-index/open-npm huggingface dataset:
npm package: @nathanld/single-spa-solid
Description: A single spa plugin for SolidJS apps
Author: Nathan Duarte
Latest version: 0.1.10
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# single-spa-solid (inspired by single-spa-preact)

https://www.npmjs.com/package/@nathanld/single-spa-solid

Generic lifecycle hooks for Solid applications that are registered as [applications](https://github.com/single-spa/single-spa/blob/master/docs/applications.md#registered-applications) of [single-spa](https://github.com/single-spa/single-spa).

[Full documentation for Preact](https://single-spa.js.org/docs/ecosystem-preact.html)

Instead of:

```
import preact from "preact";
import rootComponent from "./path-to-root-component.js";
import singleSpaPreact from "single-spa-preact";

const preactLifecycles = singleSpaPreact({
preact,
rootComponent,
domElementGetter: () => document.getElementById("main-content"),
});

export const bootstrap = preactLifecycles.bootstrap;
export const mount = preactLifecycles.mount;
export const unmount = preactLifecycles.unmount;
```

do something like:

```
import App from "./App";
import { render } from 'solid-js/web';
import singleSpaSolid from '@nathanld/single-spa-solid';

const solidLifecycles = singleSpaSolid({
    solid: {render: render},
    rootComponent: App,
    domElementGetter: () => document.getElementById('root')
});


export const bootstrap = solidLifecycles.bootstrap;
export const mount = solidLifecycles.mount;
export const unmount = solidLifecycles.unmount;
```
Disclaimer: This may or may not have been generated by a GPT... Use it at your own peril.
npm package: @nathanmdj/claude-code-usage
Description: Cross-platform Claude Code status line with usage tracking via Anthropic OAuth API
Author: opticodelab
Latest version: 1.0.3

# claude-code-usage

Cross-platform Claude Code status line with real-time usage tracking via Anthropic OAuth API.

```
project │ ⎇ main │ Usage: 7% ▓░░░░░░░░░ → Reset: 10:00 PM
```

## Why this one?

Most Claude usage trackers rely on **session keys** scraped from your browser — you have to manually copy cookies from claude.ai, paste them into config files, and refresh them when they expire. Some require a separate macOS app just to inject credentials. Others only track Claude Code CLI usage and miss activity from claude.ai, the API, or other clients.

**This package does none of that.**

It uses the **Anthropic OAuth API** — the same official API that Claude Code itself uses. Your OAuth credentials are already stored securely in your system's credential store when you log into Claude Code. No session keys, no browser cookies, no manual token management, no extra apps.

| | Session key trackers | This package |
|---|---|---|
| **Auth method** | Browser cookie (manual copy) | OAuth token (automatic) |
| **Token refresh** | Manual — breaks when expired | Handled by Claude Code |
| **Tracks all usage** | Only claude.ai OR only CLI | All platforms combined |
| **Extra apps needed** | Often yes | No |
| **Cross-platform** | Usually macOS only | macOS, Linux, Windows |
| **Dependencies** | Varies | Zero |

The usage percentage you see reflects your **total account utilization** across Claude Code CLI, claude.ai, and API — not just one client.

## Install

```bash
npm i -g @nathanmdj/claude-code-usage
```

## Setup

Add to your Claude Code settings file (`~/.claude/settings.json`):

```json
{
  "statusLine": {
    "type": "command",
    "command": "claude-code-usage"
  }
}
```

Restart Claude Code. Done.

## What it shows

- **Directory name** — current working directory
- **Git branch** — current branch (if in a git repo)
- **Usage %** — your 5-hour utilization across all Claude platforms
- **Progress bar** — 10-block visual with color gradient (green → red)
- **Reset time** — when your usage window resets (local time)

## How it works

1. Reads your Claude Code OAuth credentials from the platform credential store (already there from `claude` login)
2. Calls the Anthropic OAuth usage API (`/api/oauth/usage`)
3. Caches the result for 30 seconds to stay fast
4. Outputs a formatted, color-coded status line

No session keys. No browser cookies. No manual configuration.

## Platform support

| Platform | Credential Store |
|----------|-----------------|
| macOS | Keychain (`security` CLI) |
| Linux | libsecret (`secret-tool` CLI) |
| Windows | Windows Credential Manager |

## Requirements

- **Node.js** >= 18
- **Claude Code CLI** installed and authenticated (credentials are created automatically when you log in)

## Zero dependencies

Uses only Node.js built-ins — no native modules, no compilation, no supply chain risk.

## License

MIT
npm package: @nathanpate/gatsby-omni-font-loader
Description: Font loader optimized for maximum performance. Removes render-blocking font resources and loads them asynchronusly. Handle FOUT & FOUC with font loading status watcher. Supports both local-hosted fonts and web fonts.
Author: Adrian Bece
Latest version: 2.0.5

## Based on [codeAdrian/gatsby-omni-font-loader](https://github.com/codeAdrian/gatsby-omni-font-loader), fix Google fonts block rendering issue

I found [codeAdrian/gatsby-omni-font-loader](https://github.com/codeAdrian/gatsby-omni-font-loader) v2.0.2 caused PageSpeed complains that Google Fonts blocked rendering.

According to [this article](https://pagespeedchecklist.com/asynchronous-google-fonts) and [this article (@codeAdrian's)](https://blog.prototyp.digital/improving-website-performance-by-eliminating-render-blocking-css-and-javascript/), I fixed `generators/getFontConfig.tsx`, `components/AsyncFonts.tsx`. The problem is gone.

So I decide to publish this package for my personal use.

In case you encountered the same issue, use my package this way:

```bash
    npm i @nathanpate/gatsby-omni-font-loader react-helmet
```

The configuration in `gatsby-config.js`:
```javascript
{
  /* Include plugin */
  resolve: "@nathanpate/gatsby-omni-font-loader",

  /* Plugin options */
  options: {

    /* Font loading mode */
    mode: "async",

    /* Enable font loading listener to handle FOUT */
    enableListener: true,

    /* Preconnect URL-s. This example is for Google Fonts */
    preconnect: ["https://fonts.gstatic.com"],

    /* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
    custom: [
      {
        /* Exact name of the font as defied in @font-face CSS rule */
        name: ["Font Awesome 5 Brands", "Font Awesome 5 Free"],
        /* Path to the font CSS file inside the "static" folder with @font-face definition */
        file: "/fonts/fontAwesome/css/all.min.css",
      },
    ],

    /* Web fonts. File link should point to font CSS file. */
    web: [{
        /* Exact name of the font as defied in @font-face CSS rule */
        name: "Staatliches",
        /* URL to the font CSS file with @font-face definition */
        file: "https://fonts.googleapis.com/css2?family=Staatliches",
      },
    ],
  },
}
```

# Credits
Original repo: [codeAdrian/gatsby-omni-font-loader](https://github.com/codeAdrian/gatsby-omni-font-loader)
npm package: @nathanpaternotte/react-facebook-pixel
Description: Pixel Kit for React
Author: Zain Sajjad
Latest version: 1.0.5

# React Facebook Pixel

[![npm](https://img.shields.io/npm/dm/react-facebook-pixel.svg)](https://www.npmjs.com/package/react-facebook-pixel)

> React JS wrapper for [Facebook's Pixel](https://developers.facebook.com/docs/facebook-pixel)

## Install

```bash
npm install --save react-facebook-pixel

```

or

```bash
yarn add react-facebook-pixel

```

## Sponsors

React Facebook Pixel is being sponsored by the following tool; please help to support us by taking a look and signing up to a free trial

<a href="https://tracking.gitads.io/?repo=react-facebook-pixel" target="_blank">
 <img src="https://images.gitads.io/react-facebook-pixel" alt="GitAds"/>
</a>

## How to use

```js
import ReactPixel from 'react-facebook-pixel';

const advancedMatching = { em: 'some@email.com' }; // optional, more info: https://developers.facebook.com/docs/facebook-pixel/advanced/advanced-matching
const options = {
  autoConfig: true, // set pixel's autoConfig. More info: https://developers.facebook.com/docs/facebook-pixel/advanced/
  debug: false, // enable logs
};
ReactPixel.init('yourPixelIdGoesHere', advancedMatching, options);

ReactPixel.pageView(); // For tracking page view
ReactPixel.track(event, data); // For tracking default events. More info about standard events: https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking#standard-events
ReactPixel.trackSingle('PixelId', event, data); // For tracking default events.
ReactPixel.trackCustom(event, data); // For tracking custom events. More info about custom events: https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking#custom-events
ReactPixel.trackSingleCustom('PixelId', event, data); // For tracking custom events.
```

if you're bundling in CI

```js
  ...
  componentDidMount() {
    const ReactPixel =  require('react-facebook-pixel');
    ReactPixel.default.init('yourPixelIdGoesHere');
  }
  ...
```

otherwise CI will complain there's no `window`.

## GDPR Compliance

To be GDPR compliant, revoke the consent right after init and grant it when the user accepts to be tracked

```js
  ...
  ReactPixel.init('yourPixelIdGoesHere', advancedMatching, options);
  ReactPixel.revokeConsent();
  ...

  ...
  <button onClick={ReactPixel.grantConsent}>Accept cookies</button>.
  ...
```

## Dev Server

```bash
npm run start

```

Default dev server runs at localhost:8080 in browser.
You can set IP and PORT in webpack.config.dev.js

## Production Bundle

```bash
npm run bundle
```

### Follow me on Twitter: [@zsajjad93](https://twitter.com/zsajjad93)
npm package: @nathanpb/react-plotly
Description: Unofficial React wrapper for Plotly.js
Author: Nathan P. Bombana
Latest version: 1.0.0

# Plotly.js for React

This is a simple, dependency-free wrapper for Plotly.js to be used with React.

**This is not an official package from Plotly!**

It features a fully typesafe simple API for convenient usage with React, as well as a auto-sizing feature to make it easier to use in responsive designs.

Further documentation available at [https://react-plotly.nathanpb.dev](https://react-plotly.nathanpb.dev).

## Installation & Usage

```bash
yarn add plotly.js-dist-min @nathanpb/react-plotly # Note: at the moment only the minified version is supported
yarn add -D @types/plotly.js # If you are using TypeScript
```

```jsx
import {Plotly} from '@nathanpb/react-plotly'

export const Example = () => {
  const trace1 = { type: 'bar', x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23] }
  const layout = {
    title: { text: 'Basic Chart' },
    xaxis: {
      autorange: true,
      range: [-0.5, 2.5],
      type: 'category',
    },
    yaxis: {
      autorange: true,
      range: [0, 24.210526315789473],
      type: 'linear',
    }
  }
  
  return (
    <Plotly
      data={[trace1]}
      layout={layout}
    />
  )
}
```

## License

This package or the author of this package is **NOT** in any ways affiliated with Plotly, nor is this package endorsed by Plotly.

```
Copyright 2024 Nathan P. Bombana

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```

Do whatever you want with my code, just don't make it boring.