open-index/open-npm huggingface dataset:
npm package: @mikinho/active-links
Description: High-performance active class toggling for modern browsers.
Author: Michael Welter
Latest version: 1.0.7

# @mikinho/active-links

Copyright (c) 2025 Michael Welter <me@mikinho.com>

[![NPM Version](https://img.shields.io/npm/v/@mikinho/active-links.svg)](https://www.npmjs.com/package/@mikinho/active-links)
![GitHub Release](https://img.shields.io/github/v/release/mikinho/active-links?style=flat-square)
![File Size](https://img.shields.io/github/size/mikinho/active-links/dist/active-links.min.js?style=flat-square&label=minified%20size)
![License](https://img.shields.io/github/license/mikinho/active-links?style=flat-square)

A lightweight, high-performance script that automatically adds `is-active` and `is-ancestor` classes to your navigation links.

## Features

* **Fast**: Uses `document.links`, cached loops, and skips non-HTTP protocols.
* **Smart**: Handles query strings (`?a=1&b=2` == `?b=2&a=1`) and normalizes trailing slashes.
* **Zero Dependencies**: Drop it in and it works.

## Installation & Usage

### Option 1: CDN (Easiest)
Place this at the end of your `<body>` tag:

#### jsdelivr
```html
<script src="https://cdn.jsdelivr.net/gh/mikinho/active-links@latest/dist/active-links.min.js" defer></script>
```

#### unpkg
```html
<script src="https://unpkg.com/@mikinho/active-links@latest/dist/active-links.min.js" defer></script>
```

### Option 2: NPM

```bash
npm install @mikinho/active-links
```

#### Usage with Fastify

```JavaScript
const path = require("node:path");
const fastify = require("fastify")();

fastify.register(require("@fastify/static"), {
    root: path.join(__dirname, "node_modules/@mikinho/active-links/dist"),
    prefix: "/s/js/",
    decorateReply: false
});
```

#### Usage with Express

```JavaScript
const express = require("express");
const app = express();
const path = require("path");

app.use("/s/js", express.static(path.join(__dirname, "node_modules/@mikinho/active-links/dist")));
```

## Publishing

```bash
git commit -sam "Blah blah blah"
npm version patch
git push --tags
```
npm package: @mikionatsu/search
Description: Tiny fuzzy search + highlight ranges (core + React entrypoint).
Latest version: 0.1.0

# @mikionatsu/search

Tiny fuzzy search + highlight ranges.

## Install

npm i @mikionatsu/search9n

## Core

import { search, fuzzyMatch } from "@mikionatsu/search9n";

## React

import { Highlight } from "@mikionatsu/search9n/react";
npm package: @mikionatsu/t9n
Description: Tiny translation toolkit (nested keys, interpolation, plural, React hooks).
Latest version: 0.1.3

# @mikionatsu/t9n

Tiny translation toolkit for Node/JS + React.

✅ Nested keys (`common.hello`)  
✅ Interpolation (`"Salom, {name}!"`)  
✅ Fallback locale  
✅ Plural (`Intl.PluralRules`)  
✅ React Provider + hooks (`@mikionatsu/t9n/react`)

---

## Install

```bash
npm i @mikionatsu/t9n
```

## Core usage (Node/JS)

```import { createT9n } from "@mikionatsu/t9n";

const t9n = createT9n({
locale: "uz",
fallbackLocale: "en",
resources: {
uz: { common: { hello: "Salom, {name}!" } },
en: { common: { hello: "Hello, {name}!" } }
}
});```

```console.log(t9n.t("common.hello", { name: "Natsu" })); // Salom, Natsu!```

## Plural

```const t9n = createT9n({
  locale: "en",
  resources: {
    en: { items: { one: "{count} item", other: "{count} items" } }
  }
});

t9n.t("items", { count: 1 }); // 1 item
t9n.t("items", { count: 5 }); // 5 items ```

## React usage

```import { createT9n } from "@mikionatsu/t9n";

export const t9n = createT9n({
  locale: "uz",
  fallbackLocale: "en",
  resources: {
    uz: {
      common: { hello: "Salom, {name}!" }
    },
    en: {
      common: { hello: "Hello, {name}!" }
    }
  }
});```

## Provider

```import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { T9nProvider } from "@mikionatsu/t9n/react";
import { t9n } from "./i18n";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <T9nProvider t9n={t9n} initialLocale="uz">
      <App />
    </T9nProvider>
  </React.StrictMode>
);```


## Hooks

```import React from "react";
import { useT, useLocale } from "@mikionatsu/t9n/react";

export function Header() {
  const t = useT();
  const { locale, setLocale } = useLocale();

  return (
    <div>
      <h1>{t("common.hello", { name: "Natsu" })}</h1>

      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
        <option value="uz">uz</option>
        <option value="en">en</option>
      </select>
    </div>
  );
}
```
npm package: @mikisec/graphiql-github-api
Description: Parked package against malicious takeover. Refer to the usage at https://github.com/NyanKiyoshi/graphiql-github-api instead.
Latest version: 0.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Parked package against malicious takeover. Refer to the usage at https://github.com/NyanKiyoshi/graphiql-github-api instead.
npm package: @mikivela/sc-scrappy
Description: Module for fetching results from soundcloud.
Author: mikivela
Latest version: 0.2.5

Module for fetching results from soundcloud.

Install with yarn or npm:

```
yarn add @mikivela/sc-scrappy
```

(or npm)
Import with with

```
import scrappy from "@mikivela/sc-scrappy"
```

or

```
const scrappy = require("@mikivela/sc-scrappy")
```

## Requires

| title     | type   |
| --------- | ------ |
| client_id | string |

## Usage

First supply a client_id with `setApiKey`:

```
scrappy.setApiKey(yourApiKey);
```

Then, you're good to go. You can use any of the provided functions. You only need to supply this key once, since it is shared.

## Available calls

```ts
ping(): Promise<void>
search(searchString: string, limit?: any): Promise<Track[]>;
getTrackInfo(trackId: string): Promise<Track>;
getUserTracks(userId: string, limit?: any): Promise<UsersTrack[]>;
getUsersPlaylists(userId: string, limit?: any): Promise<UsersPlaylist[]>;
getPlaylistItems(id: string): Promise<PlaylistTrack[]>;
getSuggestions(searchString: string, limit?: any): Promise<Suggestion[]>;
```

Examples of responses can be found in `/examples`.

### scrappy.ping()

Pings to check if your clientId and connection is working.

### scrappy.search(searchString, limit)

Search for tracks by a text query.
Returns: array of TrackInfos that meet search criteria.

| parameters   |        |
| ------------ | ------ |
| searchString | string |
| limit        | number |

### scrappy.getTrackInfo(trackId, limit)

Returns a TrackInfo for a specific track.
TrackId can be extracted from `.search()` results.

| parameters |        |
| ---------- | ------ |
| trackId    | string |
| limit      | number |

### scrappy.getChannelItems(channelId, limit) or scrappy.getChannelPlaylists(channelId, limit)

Retuns Tracks or Playlists for a channel. (user)

### scrappy.getPlaylistItems(playlistId)

Returns an array of TrackInfos for tracks in a playlist.
`playlistId` can be extracted from `.getChannelPlaylists()`.

| parameters |        |
| ---------- | ------ |
| playlistId | string |

### scrappy.getSuggestions(searchString)

Returns text input suggestion results for a search string.

| parameters   |        |
| ------------ | ------ |
| searchString | string |

### scrappy.getDirectUrls(trackId)

Returns array of audio formats for a track.<br/>
Response:

```js
{
  url: string;
  type: mimeType;
}
```

TrackId can be extracted from `.search()` call.

| parameters |        |
| ---------- | ------ |
| trackId    | string |
npm package: @mikixing/crk
Description: canvas rendering kit
Author: mikixing
Latest version: 0.1.2

# CRK

​**crk** (canvas rendering kit, canvas 渲染工具集) 是基于原生 canvas api 的超轻量绘制引擎, 包含完整 **图形类**, **事件系统**, **矩阵系统**, 可轻松实现 canvas 中的各种图形绘制

[demo](https://mikixing.github.io/demo/crk)

<p align="center">
  <a target="_blank" href="https://mikixing.github.io/demo/crk/#/tree">
    <img width="400" style="border: 1px solid #ccc;" alt="tree" src="asset/tree.gif">
  </a>
  &emsp;
  <a target="_blank" href="https://mikixing.github.io/demo/crk/#/deformer">
    <img width="400" style="border: 1px solid #ccc;" alt="deformer" src="asset/deformer.gif">
  </a>
</p>
<p align="center">
   <a target="_blank" href="https://mikixing.github.io/demo/crk/#/chord">
  <img width="400" style="border: 1px solid #ccc;" alt="chord" src="asset/chord.jpg">
  </a>&emsp;
   <a target="_blank" href="https://mikixing.github.io/demo/crk/#/radial-grid">
  <img width="400" style="border: 1px solid #ccc;" alt="radial" src="asset/radial.jpg">
  </a>
</p>

#### 安装

```javascript
// npm
npm i @mikixing/crk

// yarn
yarn add @mikixing/crk
```

#### API

[API 文档](https://github.com/mikixing/crk/blob/master/API.md)

#### 示例

绘制闭合图形

```javascript
import { Shape, Group, Stage } from '@mikixing/crk'

const stage = new Stage(canvas)
const shape = new Shape()
const grp = new Group()

grp.addChild(shape)
stage.addChild(grp)

shape.graphics
  .setStrokeStyle({
    color: '#f70',
    lineWidth: 2,
    gap: 'round',
    join: 'round',
  })
  .setFillStyle('#6cf')
  .moveTo(50, 300)
  .bezierCurveTo(80, 70, 260, 50, 310, 300)
  .closePath()
  .stroke()
  .fill()
stage.update()
```

#### 对比 [easeljs](https://github.com/CreateJS/EaselJS)

`crk` 在部分接口定义上, 借鉴了 `easeljs`, 但内部实现原理完全不同, 主要包含以下几点:

- **轻量** - `crk` 在 **Gzip** 压缩后体积仅为 `8KB`, 但却包含了 canvas 图形绘制中最重要的 `图形类, 事件, 矩阵`
- **支持填充规则 winding rule**, `easeljs` 常因无法设置此功能而让人诟病, 这也是我开发 `crk` 的一大原因. `crk` 的 `graphics` 模块尽量模拟原生 canvas api 写法
- **不支持\*Filter、 StageGL、Spirite 等** - 个人觉得这些功能对于一个功能纯粹的 2D 渲染库意义不大, 可拆分到独立的项目中, 或由业务开发实现

#### 协议

MIT
npm package: @mikk36/chart.js
Description: Simple HTML5 charts using the canvas element.
Latest version: 4.0.0-dev

<p align="center">
  <a href="https://www.chartjs.org/" target="_blank">
    <img src="https://www.chartjs.org/media/logo-title.svg" alt="https://www.chartjs.org/"><br/>
  </a>
    Simple yet flexible JavaScript charting for designers & developers
</p>

<p align="center">
    <a href="https://www.chartjs.org/docs/latest/getting-started/installation.html"><img src="https://img.shields.io/github/release/chartjs/Chart.js.svg?style=flat-square&maxAge=600" alt="Downloads"></a>
    <a href="https://github.com/chartjs/Chart.js/actions?query=workflow%3ACI+branch%3Amaster"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/chartjs/Chart.js/CI"></a>
    <a href="https://coveralls.io/github/chartjs/Chart.js?branch=master"><img src="https://img.shields.io/coveralls/chartjs/Chart.js.svg?style=flat-square&maxAge=600" alt="Coverage"></a>
    <a href="https://github.com/chartjs/awesome"><img src="https://awesome.re/badge-flat2.svg" alt="Awesome"></a>
    <a href="https://chartjs-slack.herokuapp.com/"><img src="https://img.shields.io/badge/slack-chartjs-blue.svg?style=flat-square&maxAge=3600" alt="Slack"></a>
</p>

## Documentation

All the links point to the new version 3 of the lib.

* [Introduction](https://www.chartjs.org/docs/latest/)
* [Getting Started](https://www.chartjs.org/docs/latest/getting-started/index)
* [General](https://www.chartjs.org/docs/latest/general/data-structures)
* [Configuration](https://www.chartjs.org/docs/latest/configuration/index)
* [Charts](https://www.chartjs.org/docs/latest/charts/line)
* [Axes](https://www.chartjs.org/docs/latest/axes/index)
* [Developers](https://www.chartjs.org/docs/latest/developers/index)
* [Popular Extensions](https://github.com/chartjs/awesome)
* [Samples](https://www.chartjs.org/samples/)

In case you are looking for the docs of version 2, you will have to specify the specific version in the url like this: [https://www.chartjs.org/docs/2.9.4/](https://www.chartjs.org/docs/2.9.4/)

## Contributing

Instructions on building and testing Chart.js can be found in [the documentation](https://www.chartjs.org/docs/master/developers/contributing.html#building-and-testing). Before submitting an issue or a pull request, please take a moment to look over the [contributing guidelines](https://www.chartjs.org/docs/master/developers/contributing) first. For support, please post questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/chart.js) with the `chart.js` tag.

## License

Chart.js is available under the [MIT license](LICENSE.md).
npm package: @mikk36/chartjs-adapter-date-fns
Description: Chart.js adapter to use date-fns for time functionalities
Latest version: 2.0.1

# chartjs-adapter-date-fns

[![release](https://img.shields.io/github/release/chartjs/chartjs-adapter-date-fns.svg?style=flat-square)](https://github.com/chartjs/chartjs-adapter-date-fns/releases/latest) [![travis](https://img.shields.io/travis/chartjs/chartjs-adapter-date-fns.svg?style=flat-square&maxAge=60)](https://travis-ci.org/chartjs/chartjs-adapter-date-fns) [![awesome](https://awesome.re/badge-flat2.svg)](https://github.com/chartjs/awesome)

## Overview

This adapter allows the use of date-fns with Chart.js.

Requires [Chart.js](https://github.com/chartjs/Chart.js/releases) **2.8.0** or later and [date-fns](https://date-fns.org/) **2.0.0** or later.

**Note:** once loaded, this adapter overrides the default date-adapter provided in Chart.js (as a side-effect).

## Installation

### npm

```bash
npm install date-fns chartjs-adapter-date-fns --save
```

```javascript
import { Chart } from 'chart.js';
import 'chartjs-adapter-date-fns';
```

### CDN

By default, `https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns` returns the latest (minified) version, however it's [highly recommended](https://www.jsdelivr.com/features) to always specify a version in order to avoid breaking changes. This can be achieved by appending `@{version}` to the url:

```html
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
```

Read more about jsDeliver versioning on their [website](http://www.jsdelivr.com/).

## Configuration

### Locale support via scale options

date-fns requires a date-fns locale object to be tagged on to each `format()` call, which requires the locale to be explicitly set via the `adapters.date` option: [Chart.js documentation on adapters.date](https://www.chartjs.org/docs/next/axes/cartesian/time#date-adapters)

For example:

```javascript
// import date-fns locale:
import {de} from 'date-fns/locale';


// scale options:
{
    adapters: {
        date: {
            locale: de
        }
    }
}
```

Further, read the [Chart.js documentation](https://www.chartjs.org/docs/next) for other possible date/time related options. For example, the time scale [`time.*` options](https://www.chartjs.org/docs/next/axes/cartesian/time#configuration-options) can be overridden using the [date-fns tokens](https://date-fns.org/docs/format).

## Development

You first need to install node dependencies (requires [Node.js](https://nodejs.org/)):

```bash
> npm install
```

The following commands will then be available from the repository root:

```bash
> npm run build         // build dist files
> npm run lint          // perform code linting
```

## License

`chartjs-adapter-date-fns` is available under the [MIT license](LICENSE.md).
npm package: @mikk3lro/mc-colorpicker
Description: A simple colorpicker component for Vue.js. Easy to implement, easy to use.
Author: Mikk3lRo
Latest version: 0.0.11

# vue-colorpicker

A simple colorpicker component for Vue.js. Easy to implement, easy to use.

# Documentation
Documentation and live demo is available at:
https://mikk3lro.github.io/vue-colorpicker/

# Installing

```bash
# yarn  
yarn add @mikk3lro/mc-colorpicker
# npm
npm i @mikk3lro/mc-colorpicker
```

Then, import and register the component and stylesheet:

```js
import McColorpicker from '@mikk3lro/mc-colorpicker';
import '@mikk3lro/mc-colorpicker/dist/mc-colorpicker.css';

Vue.component("McColorpicker", McColorpicker);
```
npm package: @mikk3lro/mc-fontpicker
Description: A simple google font picker component for Vue.js. Easy to implement, easy to use.
Author: Mikk3lRo
Latest version: 0.1.4

# vue-fontpicker

A simple google font picker component for Vue.js. Easy to implement, easy to use.

# Documentation
Documentation and live demo is available at:
https://mikk3lro.github.io/vue-fontpicker/

# Installing

```bash
# yarn  
yarn add @mikk3lro/mc-fontpicker
# npm
npm i @mikk3lro/mc-fontpicker
```

Then, import and register the component and stylesheet:

```js
import McFontpicker from '@mikk3lro/mc-fontpicker';
import '@mikk3lro/mc-fontpicker/dist/mc-fontpicker.css';

Vue.component("McFontpicker", McFontpicker);
```