open-index/open-npm huggingface dataset:
npm package: @fanhefeng/dark-mode-toggle-component
Description: A flashlight-style dark mode toggle web component
Author: fanhefeng
Latest version: 1.0.1

# Dark Mode Toggle Web Component

A flashlight-style dark mode toggle web component built with Vanilla JS. This component allows users to toggle dark mode on and off by clicking a button that animates like a flashlight. It's designed to be easy to integrate into your web projects as a custom HTML element.

## Table of Contents

- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
  - [Basic Usage](#basic-usage)
  - [Customizing the Component](#customizing-the-component)
- [License](#license)

## Features

- 🌑 **Dark Mode Toggle**: Switch between dark mode and light mode with a single click.
- 💡 **Flashlight Effect**: Adds a flashlight effect when the toggle button is clicked in dark mode.
- 🚀 **Web Component**: Native web component, can be used in any framework or vanilla JS.
- 🛠 **Customizable**: Easily change primary color and other properties.
- 📦 **Lightweight**: Minimal JavaScript, only adds the functionality you need.
- 🔧 **Vite-powered**: Built using Vite for fast bundling and hot-reloading during development.

## Installation

### 1. Install via npm

You can install the component via npm if you are using a package manager:

```bash
npm install @fanhefeng/dark-mode-toggle-component
```

### 2. Importing and Using the Component

After installing, you can import the component and use it in your HTML.

```html
<dark-mode-toggle primary-color="#6155f5"></dark-mode-toggle>
```

You can optionally customize the primary color using the `primary-color` attribute. If not provided, the default color is `#6155f5`.

## Usage

### Basic Usage

To use the `dark-mode-toggle` component, simply include the following HTML tag in your page:

```html
<dark-mode-toggle></dark-mode-toggle>
```

This will render the toggle button with the default primary color (`#6155f5`). Clicking the button will toggle the dark mode on the page.

### Customizing the Component

You can customize the component by passing different attributes:

- `primary-color`: Change the color of the toggle button.
- `dark-mode`: Pre-set dark mode on page load.

#### Example with Customization:

```html
<dark-mode-toggle
	primary-color="#ff6347"
	dark-mode
></dark-mode-toggle>
```

This will set the toggle button color to tomato (`#ff6347`) and enable dark mode by default.

#### Dynamically Control Dark Mode:

You can also control dark mode using JavaScript by adding or removing the `dark` class on the `body` element:

```js
const darkModeToggle = document.querySelector("dark-mode-toggle");
document.body.classList.toggle("dark"); // Toggles dark mode programmatically
```

## License

MIT
npm package: @fanion/preset-react
Description: React preset for Fanion
Author: Alexandre Breteau
Latest version: 1.2.1

# @fanion/preset-react

> React preset for Fanion

## Usage

```javascript
const fanion = require("@fanion/webpack");

module.exports = fanion({
  dashboard: {
    use: require("@fanion/preset-react"),
  },
});
```

## Author

Alexandre Breteau - [@0xSeldszar](https://twitter.com/0xSeldszar)

## License

MIT © [Alexandre Breteau](https://seldszar.fr)
npm package: @fanion/preset-vue
Description: Vue preset for Fanion
Author: Alexandre Breteau
Latest version: 1.2.2

# @fanion/preset-vue

> Vue preset for Fanion

## Usage

```javascript
const fanion = require("@fanion/webpack");

module.exports = fanion({
  dashboard: {
    use: require("@fanion/preset-vue"),
  },
});
```

## Author

Alexandre Breteau - [@0xSeldszar](https://twitter.com/0xSeldszar)

## License

MIT © [Alexandre Breteau](https://seldszar.fr)
npm package: @fanion/preset-vue-next
Description: Vue Next preset for Fanion
Author: Alexandre Breteau
Latest version: 1.2.2

# @fanion/preset-vue-next

> Vue Next preset for Fanion

## Usage

```javascript
const fanion = require("@fanion/webpack");

module.exports = fanion({
  dashboard: {
    use: require("@fanion/preset-vue-next"),
  },
});
```

## Author

Alexandre Breteau - [@0xSeldszar](https://twitter.com/0xSeldszar)

## License

MIT © [Alexandre Breteau](https://seldszar.fr)
npm package: @fanion/webpack
Description: Yet another opiniated Webpack configuration for NodeCG bundles
Author: Alexandre Breteau
Latest version: 1.4.8

# @fanion/webpack

> Yet another opiniated Webpack configuration for NodeCG bundles

## Table of Contents

- [Install](#install)
- [Usage](#usage)
- [API](#api)
- [Author](#author)
- [License](#license)

# Install

```bash
$ npm install @fanion/webpack
```

# Usage

Create a new file called `webpack.config.js` and write the configuration you need.

Here's an example using Vue.js with the following file structure:

```
src/
├── dashboard/
|   └── views/
|   |   ├── lorem/
|   |   |   ├── App.vue
|   |   |   └── index.ts
|   |   └── ipsum/
|   |       ├── App.vue
|   |       └── index.ts
|   └── template.html
├── extension/
|   └── index.ts
└── graphics/
    ├── views/
    |   ├── lorem/
    |   |   ├── App.vue
    |   |   └── index.ts
    |   └── ipsum/
    |       ├── App.vue
    |       └── index.ts
    └── template.html
```

```javascript
const fanion = require("@fanion/webpack");

module.exports = fanion({
  variants: {
    extension: {
      source: "src/extension/index.ts",
    },
    dashboard: {
      source: "src/browser/dashboard/views/*/index.ts",
      template: "src/browser/dashboard/template.html",
      use: require("@fanion/preset-vue"),
    },
    graphics: {
      source: "src/browser/graphics/views/*/index.ts",
      template: "src/browser/graphics/template.html",
      use: require("@fanion/preset-vue"),
    },
  },
});
```

## API

See the [declaration file](./index.d.ts).

## Author

Alexandre Breteau - [@0xSeldszar](https://twitter.com/0xSeldszar)

## License

MIT © [Alexandre Breteau](https://seldszar.fr)
npm package: @fanioz/gitcommitgen
Description: AI-powered conventional commit message generator
Author: fanioz
Latest version: 1.0.1

# gitcommitgen

AI-powered conventional commit message generator. Analyzes your staged git changes and generates clean, meaningful commit messages.

## Why?

Writing good commit messages is tedious. Let AI do it. Just stage your changes and run `gitcommitgen`.

## Install

```bash
npm install -g gitcommitgen
```

## Setup

Set your LLM provider API key:

```bash
# OpenAI
export OPENAI_API_KEY="sk-..."

# Anthropic
export ANTHROPIC_API_KEY="sk-ant-..."
```

Optional: create a config file at `~/.gitcommitgen.json` to set defaults:

```json
{
  "provider": "openai",
  "model": "gpt-4o-mini",
  "commit": true,
  "edit": true,
  "dryRun": false
}
```

By default, if no configuration file is found and no flags are provided, the tool defaults to `--edit` mode.

## Usage

```bash
# Generate and print commit message
gitcommitgen

# Generate and auto-commit
gitcommitgen --commit

# Use a specific provider and model
gitcommitgen --provider anthropic --model claude-haiku-4-5

# Preview: show diff summary and proposed message
gitcommitgen --dry-run

# Edit the generated message before committing
gitcommitgen --commit --edit
```

### Pipe to git commit

```bash
git commit -m "$(gitcommitgen)"
```

## How it works

1. Reads `git diff --staged` to see your changes
2. Sends the diff to an LLM with a prompt tuned for conventional commits
3. Returns a clean commit message (type, optional scope, description)

## Supported providers

| Provider  | Default model       | Env var              |
| --------- | ------------------- | -------------------- |
| OpenAI    | gpt-4o-mini         | `OPENAI_API_KEY`     |
| Anthropic | claude-haiku-4-5    | `ANTHROPIC_API_KEY`  |

## License

MIT
npm package: @fanioz/jsonask
Description: Query JSON with natural language instead of jq syntax
Author: fanioz
Latest version: 1.0.0

# jsonask

Query JSON with natural language instead of jq syntax.

**Stop memorizing jq. Just ask.**

## Install

```bash
npm install -g @fanioz/jsonask
```

## Usage

```bash
# Pipe JSON and ask a question
cat data.json | jsonask "show names"

# Pass file path + query
jsonask data.json "count by status"

# Extract specific fields
jsonask users.json "extract all emails"

# Filter data
jsonask users.json "where role is admin"
jsonask products.json "price greater than 100"

# Sort
jsonask products.json "sort by price"
jsonask products.json "sort by price desc"

# Aggregation
jsonask data.json "count by status"
jsonask data.json "unique categories"

# Limit results
jsonask data.json "top 5 by score"
jsonask data.json "first 3"

# Explore structure
jsonask data.json "keys"
```

## Output Formats

```bash
# Table (default)
jsonask data.json "show names"

# JSON
jsonask data.json "show names" -o json

# List (values only)
jsonask data.json "show names" -o list
```

## Features

- **Zero config** — works immediately, no API key needed
- **Offline** — local query engine handles common patterns
- **Pipe-friendly** — reads from stdin or file
- **Smart parsing** — fuzzy key matching, dot notation support
- **Multiple outputs** — table, JSON, or raw list format

## How It Works

`jsonask` parses natural language queries into structured operations using pattern matching. It handles:

- **Extract**: "show names", "get emails", "extract all ids"
- **Filter**: "where status is active", "price greater than 100"
- **Count**: "count by role", "how many items"
- **Unique**: "unique values", "distinct categories"
- **Sort**: "sort by name", "top 5 by score"
- **Explore**: "keys", "what fields"

## License

MIT
npm package: @fanioz/secretsweep
Description: Zero-config secret scanning for staged git files — catch API keys before you push
Author: fanioz
Latest version: 1.0.0

# secretsweep

Zero-config secret scanning for staged git files — catch API keys before you push.

## Install

```bash
npx secretsweep
```

Or install globally:

```bash
npm install -g secretsweep
```

## Usage

### Scan staged files (pre-commit friendly)

```bash
secretsweep
# or explicitly:
secretsweep staged
```

Scans only files staged in `git add` — perfect for pre-commit hooks.

### Scan a directory or file

```bash
secretsweep scan ./src
secretsweep scan ./config/production.json
```

### Use as a pre-commit hook

```bash
# .husky/pre-commit (or .git/hooks/pre-commit)
npx secretsweep staged
```

## What it detects

| Category | Patterns |
|---|---|
| **AWS** | Access Keys (AKIA...), Secret Keys |
| **GitHub** | Personal Access Tokens, OAuth, App Tokens |
| **GCP** | API Keys, OAuth tokens, Service Account keys |
| **Azure** | Connection Strings |
| **Stripe** | Secret and Publishable Keys |
| **Slack** | Bot tokens, Webhooks |
| **Database** | MongoDB, PostgreSQL, MySQL, Redis URIs |
| **Generic** | Bearer tokens, API keys, passwords, private keys |
| **Entropy** | High-entropy strings that look like secrets |

## Ignore false positives

Create a `.secretsweepignore` file:

```
# Ignore test fixtures
test/fixtures/
*.test.js
# Ignore specific files
examples/demo.js
```

## Why secretsweep?

Existing tools like gitleaks and truffleHog are powerful but enterprise-focused. secretsweep is:

- **Zero config** — works immediately, no setup files needed
- **Fast** — under 2 seconds for typical repos
- **Git-aware** — scans staged files by default, not your whole history
- **Focused** — catches secrets before they leave your machine

## License

MIT