open-index/open-npm huggingface dataset:
npm package: @ludis/use-enhanced-reducer
Description: enhanced usereducer hook
Author: ludis
Latest version: 1.0.0

# use-enhanced-reducer

Powerful enhanced usereducer hook, support redux-thunk, redux-promise, middlewares.

# Examples

### Support any type of action

```ts
const initialState = {
  loading: false,
  listData: []
}

// simple action
const simpleAction = { type: 'SIMPLE_ACTION', payload: true }
// async function action
const asyncFunctionAction = (args) => async ({ getState, dispatch }) => {
  await Apis.getList(args)
  dispatch(simpleAction)
}
// async payload
const asyncActionPayload = { type: 'ASYNC_ACTION_PAYLOAD', payload: Apis.getList() }

const reducer = (initialState, action) => {
  switch (action.type) {
    case 'SIMPLE_ACTION':
      return Object.assign({}, state, loading: action.payload)
    case 'ASYNC_ACTION_PAYLOAD':
      return Object.assign(
        {},
        state,
        // action.payload is the result of the asynchronous request of Apis.getList
        listData: action.payload
      )
    default:
      return state
  }
}
```

### Simple use

```ts
import * as React from 'react';
import useEnhancedReducer from 'use-enhanced-reducer';

const Example: React.FunctionComponent<{}> = () => {
	const [state, dispatch, getState] = useEnhancedReducer(reducer, initialState)

	// do something
}
```

### With middlewares

```ts
import * as React from 'react';
import useEnhancedReducer, { Middleware } from 'use-enhanced-reducer';

const loggerMiddleware: Middleware = ({ getState, dispatch }) => next => action => {
  console.group(action.type);
  console.log('before state', getState());
  await next(action);
  console.log('after state', getState());
  console.groupEnd();
};

const customMiddleware: Middleware = ({ getState, dispatch }) => dispatch => action => {
	// do something
};

const ExampleWithMiddlewares: React.FunctionComponent<{}> = () => {
	const [state, dispatch, getState] = useEnhancedReducer(reducer, initialState, [loggerMiddleware, customMiddleware])

	return <Context.Provider value={{ state, dispatch, getState }}>
    // ...
    </Context.Provider>
}
```
npm package: @ludis/vue-countdown
Description: Countdown component for Vue.js.
Author: ludis
Latest version: 1.0.0

### vue-countdown

Countdown component for Vuejs 2.x.

Website: https://flute.github.io/vue-countdown

### 目录

```
.
├── dist
│   ├── countdown.common.js     (CommonJS, default)
│   ├── countdown.umd.js        (UMD)
│   ├── countdown.umd.min.js    (UMD, compressed)
└── src
    └── index.js // 源码
```

### 安装

```
npm install @flute/vue-countdown vue
```

浏览器:

```js
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-countdown.js"></script>
<script>Vue.component(VueCountdown.name, VueCountdown);</script>
```

### 使用

```js
import Vue from 'vue';
import VueCountdown from '@flute/vue-countdown';

Vue.component(VueCountdown.name, VueCountdown);

<VueCountdown
  notOpenTip="距离开始还剩："
  openingTip="距离结束还剩："
  closedTip="已结束"
  :duration="1*60"
  @start="startHandler"
  @end="endHandler"
  startTime="2018-11-01 20:35:00">
  <template slot="tip" scope="props">
    {{props.tip}}
  </template>
  <template slot="countdown" scope="props">
    {{props.days}}天{{props.hours}}小时{{props.minutes}}分钟{{props.seconds}}秒
  </template>
</VueCountdown>

<!--
开始前：
<div>
  距离开始还剩: 01天01小时11分钟11秒
</div>

进行中：
<div>
  距离结束还剩: 01天01小时11分钟11秒
</div>

已结束：
<div>
  已结束: 00天00小时00分钟00秒
</div>
-->
```

更多使用案例参考： https://flute.github.io/vue-countdown

### Attributes


| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| startTime | 倒计时的开始时间 | Date/string/number | 可被`new Date()`解析：js Date类型，或字符串日期如: '2018-11-02 14:00:00'，或时间戳如: 1541138400000  | - |
| endTime | 可选，倒计时的结束时间。和duration二选一，当填写endTime时，duration失效 | Date/string/number | 同startTime | - |
| duration | 可选，倒计时持续时间，单位为秒。和duration二选一，当填写endTime时，duration失效 | number | - | - |
| currentTime | 可选，当前时间，默认为本地时间 | Date/string/number | 同startTime | new Date() |
| notOpenTip | 可选，为开始前的提示 | string | - | "Left at the beginning:" |
| openingTip | 可选，进行中的提示 | string | - | "Left at the end:" |
| closedTip | 可选，结束后的提示 | string | - | "Over:" |

### Events


| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| start | 当倒计时开始时触发 | 无 |
| end | 当倒计时结束时触发 | 无 |
npm package: @ludo.ninja/api-server-admin
Description: Visit [Pharos Production](https://pharosproduction.com) – the software development company specializing in high-load Web3 and DeFi projects. We deliver projects on time and within budget!
Author: Pharos Production Inc.
Latest version: 1.0.0-development-8fc92c8-dmytro-2025-10-06-10-19-01

Visit [Pharos Production](https://pharosproduction.com) – the software development company specializing in high-load Web3 and DeFi projects.
We deliver projects on time and within budget!
npm package: @ludo.ninja/api-server-assets
Description: Visit [Pharos Production](https://pharosproduction.com) – the software development company specializing in high-load Web3 and DeFi projects. We deliver projects on time and within budget!
Author: Pharos Production Inc.
Latest version: 1.0.0-development-59a45bb-dmytro-2025-09-16-13-53-38

Visit [Pharos Production](https://pharosproduction.com) – the software development company specializing in high-load Web3 and DeFi projects.
We deliver projects on time and within budget!
npm package: @ludo.ninja/api-server-extension
Description: Visit [Pharos Production](https://pharosproduction.com) – the software development company specializing in high-load Web3 and DeFi projects. We deliver projects on time and within budget!
Author: Pharos Production Inc.
Latest version: 1.0.0-development-d1e6971-dmytro-2025-10-21-00-39-19

Visit [Pharos Production](https://pharosproduction.com) – the software development company specializing in high-load Web3 and DeFi projects.
We deliver projects on time and within budget!
npm package: @ludo.ninja/api-server-features
Description: Visit [Pharos Production](https://pharosproduction.com) – the software development company specializing in high-load Web3 and DeFi projects. We deliver projects on time and within budget!
Author: Pharos Production Inc.
Latest version: 1.0.0-development-c3df129-ihnatov.d-2025-10-23-20-32-36

Visit [Pharos Production](https://pharosproduction.com) – the software development company specializing in high-load Web3 and DeFi projects.
We deliver projects on time and within budget!
npm package: @ludo237/paginetta
Description: Easy to use pagination component
Latest version: 0.1.1

# Paginetta

Easy to use pagination component

This is still a work in progress and I don't know how to publish is correctly so please stand by

## How to use

Include the component in your file like so

`<paginetta :meta="meta" v-on:page:changed="YourEvent">`

It expects a meta object, like one from an API, and emits a simple `page:changed` event with the page number as payload
npm package: @ludo2406/ludovic
Description: A personal card for Tierney Cyren (@bitandbang)
Author: Tierney Cyren
Latest version: 1.0.0

It's me, Tierney!

# Usage

## npm
```
npx bitandbang
```

## GitHub Package Registry
Assuming you have the GitHub registry set up, you can use via npx:
```
npx @bnb/card
```

Not including how to use it globally because I'm not sure why you'd want this as a global command. That'd be creepy.
npm package: @ludoows/create-discord-bot
Description: Scaffold a production-ready Discord bot in TypeScript
Author: ludoows
Latest version: 1.0.0

# create-discord-bot

CLI to scaffold a new project from the [discord-bot-template](https://github.com/Ludows/discord-bot-template).

## Usage

```bash
npx @ludoows/create-discord-bot
```

No installation required.

## Prompts

| Prompt | Choices |
| :--- | :--- |
| Project name | Free text (converted to a slug) |
| Database dialect | `mysql` · `postgres` · `sqlite` · None |
| Cache driver | `file` · `memory` |
| Include mail system? | Yes · No |
| Default language | `fr` · `en` |

## What it does

1. Clones the template from GitHub (no git history)
2. Renames the project in `package.json`
3. Generates a pre-filled `.env` based on your answers
4. Updates the default locale in `src/config.ts`
5. Runs `npm install`

## Requirements

- Node.js >= 18

## License

MIT
npm package: @ludoows/emix
Description: Event-driven state management for React — emit to mutate, Proxy to track
Author: ludoows
Latest version: 1.0.0

# Emix

**Event-driven state management for React — emit to mutate, Proxy to track.**

Emix is a lightweight, predictable state management library that combines the best of event buses, Proxies (via Immer-like drafts), and React Hooks.

## Why Emix?

- **🎯 Event-Driven**: All state changes happen via named events, making your logic easy to track and debug.
- **🚀 Proxy-Based**: Mutate state naturally in mutators — no need for complex immutable boilerplate.
- **⚛️ Fine-Grained**: Components only re-render if the specific data they follow actually changes.
- **🛠️ Battery-Included**: Debounce, throttle, retry, undo/redo, and more built-in.

## Installation

### npm / yarn / pnpm

```bash
npm install @ludoows/emix
```

### CDN

```html
<script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@18",
      "react-dom": "https://esm.sh/react-dom@18",
      "emittery": "https://esm.sh/emittery"
    }
  }
</script>

<script type="module">
  import { createSlice } from "https://cdn.jsdelivr.net/npm/@ludoows/emix/dist/index.js";
</script>
```

> For full CDN usage with hooks and devtools, see [Getting Started](./docs/GETTING_STARTED.md#1-installation).

## Documentation

- 🏁 [**Getting Started**](./docs/GETTING_STARTED.md) - Install and create your first store in 5 minutes.
- 📚 [**API Reference**](./docs/API_REFERENCE.md) - Detailed guide of all functions and hooks.
- 💡 [**Concrete Examples**](./docs/EXAMPLES.md) - Auth flows, search debouncing, resilience, and more.

## Quick Preview

```tsx
import { createSlice } from "@ludoows/emix";
import { useSnapshot } from "@ludoows/emix/hooks";

const counter = createSlice({ count: 0 });

function App() {
  const { count } = useSnapshot(counter);

  return (
    <button
      onClick={() =>
        counter.emit("inc", (d) => {
          d.count++;
        })
      }
    >
      Count: {count}
    </button>
  );
}
```

## License

MIT
npm package: @ludoows/tubby
Description: Pipeline orchestrator for TypeScript. Lightweight, expressive, fully typed.
Latest version: 1.0.0

# @ludoows/tubby

Pipeline orchestrator for TypeScript — lightweight, expressive, fully typed.

```sh
npm install @ludoows/tubby
```

---

## What it does

Compose async operations as a sequence of typed **steps**. Each step receives a payload, does its thing, and hands it to the next.

```ts
import { pipeline, map, tap, retry, timeout } from '@ludoows/tubby'

const result = await pipeline({ orderId: '123', total: 99 })
  .give({ userId: 'u_42' })
  .ensure((order) => order.total > 0, 'Empty order')
  .through([
    validateStock,
    retry(timeout(chargePayment, 5000), { attempts: 3 }),
    tap((order) => logger.info('charged', order.orderId)),
    sendConfirmation,
  ])
  .thenReturn()
```

No magic. No decorators. Just functions and objects.

---

## Features

- Chainable builder API (`pipeline().give().through().thenReturn()`)
- Typed payload and context throughout the chain
- Step-level error recovery with `onError`
- Guards with `ensure()`, early exit with `stop()`
- Built-in utilities: `map`, `tap`, `branch`, `when`, `unless`, `retry`, `timeout`, `delay`, `merge`, `pick`, `parallel`, `combine`, `once`, `race`, `fallback`, `loop`
- Abort support via `.withSignal(AbortSignal)`
- Real-time step streaming with `.thenStream()`
- Observability: `inspect()`, `measure()`, `onStep()`, `collect()`

---

## TypeScript

Payload and context types flow end-to-end with no manual casting:

```ts
type Order = { id: string; total: number }
type Ctx   = { userId: string }

const result = await pipeline<Order>({ id: '1', total: 50 })
  .give<Ctx>({ userId: 'u_1' })
  .through([myStep]) // Step<Order, Ctx> — fully checked
  .thenReturn()      // Order | null
```

---

## CDN

```html
<!-- development -->
<script src="https://cdn.jsdelivr.net/npm/@ludoows/tubby/dist/index.global.js"></script>
<!-- production (minified) -->
<script src="https://cdn.jsdelivr.net/npm/@ludoows/tubby/dist/index.global.min.js"></script>
<script>
  const { pipeline, tap, retry } = Tubby
</script>
```

---

## Documentation

→ [Getting started](https://github.com/Ludows/tubby/blob/main/packages/tubby/docs/README.md) · [Full API](https://github.com/Ludows/tubby/blob/main/packages/tubby/docs/api.md) · [Utilities](https://github.com/Ludows/tubby/blob/main/packages/tubby/docs/utils.md)
npm package: @ludoows/tubby-react
Description: React integration for Tubby pipeline orchestrator
Latest version: 1.0.0

# @ludoows/tubby-react

React integration for [Tubby](https://github.com/Ludows/tubby) — a single hook that wraps any pipeline with `data`, `loading`, and `error` state.

```sh
npm install @ludoows/tubby @ludoows/tubby-react
```

---

## Usage

```tsx
import { usePipeline } from '@ludoows/tubby-react'
import { pipeline } from '@ludoows/tubby'

const { data, loading, error, run } = usePipeline(
  () => pipeline(query).through([fetchResults, formatResults]),
  { immediate: true, auto: true, watch: [query] }
)
```

---

## Modes

| Option | Behavior |
|---|---|
| `immediate: true` | Run once on mount |
| `auto: true, watch: [deps]` | Re-run when deps change |
| _(none)_ | Manual trigger via `run()` |

Requests are cancelled on unmount and on re-run.

---

## CDN

```html
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>
<!-- development -->
<script src="https://cdn.jsdelivr.net/npm/@ludoows/tubby/dist/index.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ludoows/tubby-react/dist/index.global.js"></script>
<!-- production (minified) -->
<script src="https://cdn.jsdelivr.net/npm/@ludoows/tubby/dist/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ludoows/tubby-react/dist/index.global.min.js"></script>
<script>
  const { usePipeline } = TubbyReact
</script>
```

---

## Return value

```ts
{
  data: T | null
  loading: boolean
  error: Error | null
  run: () => void
}
```

---

## Documentation

→ [Getting started](https://github.com/Ludows/tubby/blob/main/packages/tubby-react/docs/README.md) · [Full API](https://github.com/Ludows/tubby/blob/main/packages/tubby-react/docs/api.md)
npm package: @ludovicm67/media-tools
Description: Media tools
Author: Ludovic Muller
Latest version: 0.3.7

# Media Tools

This package contains various tools to work with media files of different format.

## Install this library

```sh
npm install @ludovicm67/media-tools
```

The following is also exposed:

- `Buffer`: Buffer that works on both Node.js and browsers
- `utils.blobToArrayBuffer`: a function to convert a Blob to an ArrayBuffer
- `mp4`: MP4 tools
- `ogg`: OGG tools
- `webm`: WebM tools
- `fix`: the function to use to fix a chunk by using the previous one
- `MediaTypes`: an enum with the different media types

## Angular

If you are using Angular, you might need to add `buffer` as an `allowedCommonJsDependencies` in your `angular.json` file, like this:

```json
{
  "projects": {
    "YOUR_PROJECT": {
      "architect": {
        "build": {
          "options": {
            "allowedCommonJsDependencies": ["buffer"]
          }
        }
      }
    }
  }
}
```

by replacing `YOUR_PROJECT` with the name of your project.

This will prevent the display of some warnings when building your project.
npm package: @ludovicm67/media-tools-utils
Description: Media tools utils
Author: Ludovic Muller
Latest version: 0.1.10

# Media Tools Utils

This package contains utilities that are used in other packages.

## Install this library

```sh
npm install @ludovicm67/media-tools-utils
```

The following is exposed:

- `Buffer`: Buffer that works on both Node.js and browsers
- `utils.blobToArrayBuffer`: a function to convert a Blob to an ArrayBuffer

## Angular

If you are using Angular, you might need to add `buffer` as an `allowedCommonJsDependencies` in your `angular.json` file, like this:

```json
{
  "projects": {
    "YOUR_PROJECT": {
      "architect": {
        "build": {
          "options": {
            "allowedCommonJsDependencies": ["buffer"]
          }
        }
      }
    }
  }
}
```

by replacing `YOUR_PROJECT` with the name of your project.

This will prevent the display of some warnings when building your project.
npm package: @ludovicm67/mp4-tools
Description: MP4 tools
Author: Ludovic Muller
Latest version: 0.2.9

# MP4 tools

## Install this library

```sh
npm install @ludovicm67/mp4-tools
```

The following is exposed:

- `Buffer`: Buffer that works on both Node.js and browsers
- `utils.blobToArrayBuffer`: a function to convert a Blob to an ArrayBuffer
- `fix`: the function to use to fix a chunk by using the previous one

## MP4 structure

MP4 files are structured into several different box types, each serving a specific purpose:

- **`ftyp` (File Type Box):** The first box in the file, declaring file type, compatibility, and specifications.
- **`moov` (Movie Box):** Contains all metadata about the video, like tracks, duration, etc. It includes sub-boxes:
  - `mvhd` (Movie Header Box): Global information about the movie.
  - `trak` (Track Box): A container for a single track (audio, video, etc.), with sub-boxes like `tkhd` (Track Header) and `mdia` (Media).
- **`moof` (Movie Fragment Box):** Contains all metadata about a single fragment of the movie, with sub-boxes like `mfhd` (Movie Fragment Header) and `traf` (Track Fragment).
- **`mdat` (Media Data Box):** Contains the actual media data, such as video frames and audio samples.

## Command line tool

The `cli` folder contains a command line tool that can be used to fix or merge chunks.

Have a look at the [README of the CLI](./cli/README.md) for more information.
npm package: @ludovicm67/ogg-tools
Description: OGG tools
Author: Ludovic Muller
Latest version: 0.1.4

# OGG tools

## Install this library

```sh
npm install @ludovicm67/ogg-tools
```

The following is exposed:

- `Buffer`: Buffer that works on both Node.js and browsers
- `utils.blobToArrayBuffer`: a function to convert a Blob to an ArrayBuffer
- `fix`: the function to use to fix a chunk by using the previous one

## Command line tool

The `cli` folder contains a command line tool that can be used to fix or merge chunks.

Have a look at the [README of the CLI](./cli/README.md) for more information.
npm package: @ludovicm67/react-dotenv
Description: Load environment variables dynamically for your React applications created with CRA (Create-React-App).
Author: Ludovic Muller
Latest version: 1.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# react-dotenv

> [!WARNING]
> This package is deprecated and archived since `create-react-app` is being sunsetted.
>
> See: https://react.dev/blog/2025/02/14/sunsetting-create-react-app

Load environment variables dynamically for your React applications created with `create-react-app`.

This will create a `env.js` file in your `public` and `build` directories, which will expose your environment variables you want in the global `window.env` variable.
It will also take care of configuring the `index.html` file present in those directories to load that file.

## Installation

```sh
npm install @ludovicm67/react-dotenv
```

## Usage

### Setup your project

Create a `.env` file at the root of your project, with some relevant values, like this:

```env
API_URL=https://example.com
SOME_OTHER_VARIABLE=foo
```

Open your project's `package.json` file and add:

- the `react-dotenv` command to your `start` and `build` scripts.
- the `react-dotenv.whitelist` property to specify which variables you need to be exposed.

Here is an example:

**package.json**:

```js
{
  // …other fields

  "scripts": {
    "start": "react-dotenv && react-scripts start", // <-- append command
    "build": "react-dotenv && react-scripts build", // <-- append command
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

  // …some other fields

  // Add the react-dotenv configuration
  "react-dotenv": {
    "whitelist": ["API_URL"]
  }
}
```

### Access environment variables from your code

You can start the development server using the following command:

```sh
npm run start
```

Now your project have the environment variables loaded **globally** in the `window.env` property.

You can access the environment variables from your code in two ways:

#### Using the `@ludovicm67/react-dotenv` library (recommended)

```jsx
import React from "react";
import env from "@ludovicm67/react-dotenv";

const MyComponent = () => {
  return <div>{env.API_URL}</div>;
};

export default MyComponent;
```

#### Using the `window.env` global variable

```jsx
import React from "react";

const MyComponent = () => {
  return <div>{window.env.API_URL}</div>;
};

export default MyComponent;
```

## Known limitations

This only supports one environment (so only one `.env` file) and is not meant to do more.

## Attributions

Forked from [jeserodz/react-dotenv](https://github.com/jeserodz/react-dotenv/commit/5ca0fe8ae117f18ae43ca965534c4c3d13f81897).

**Reasons:**

- upgrade dependencies
- use ESM
- fix TypeScript types
- fix the import of the `env.js` file in the `index.html` files
npm package: @ludovicm67/simple-whiteboard
Description: Simple Whiteboard is a simple and lightweight web component that can be integrated in any web application
Author: Ludovic Muller
Latest version: 0.3.13

# Simple Whiteboard

[![NPM](https://badge.fury.io/js/@ludovicm67%2Fsimple-whiteboard.svg)](https://npm.im/@ludovicm67/simple-whiteboard)
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fludovicm67%2Fsimple-whiteboard.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fludovicm67%2Fsimple-whiteboard?ref=badge_shield)

Simple Whiteboard is a simple web-based whiteboard application that allows users to draw on a canvas.

The application is built as a Web Component using [LitElement](https://lit.dev/).
This allows the whiteboard to be easily embedded in any web application regardless of the framework used.

## Features

- Different drawing tools:
  - Rectangle
  - Circle
  - Line
  - Pen
  - Text
  - Picture
- Move the canvas using the Move tool
- Clear the canvas
- Support mouse and touch input

## Used Technologies

- [LitElement](https://lit.dev/) - A simple base class for creating fast, lightweight web components.
- [TypeScript](https://www.typescriptlang.org/) - A typed superset of JavaScript that compiles to plain JavaScript.
- [Rough.js](https://roughjs.com/) - A small graphics library that lets you draw in a sketchy, hand-drawn-like, style.
- [Perfect Freehand](https://github.com/steveruizok/perfect-freehand) - A tiny library for rendering perfect freehand lines.
- [Lucide Icons](https://lucide.dev/) - Beautiful & consistent icons.

## License

Simple Whiteboard is licensed under the [MIT License](./LICENSE).

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fludovicm67%2Fsimple-whiteboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fludovicm67%2Fsimple-whiteboard?ref=badge_large)
npm package: @ludovicm67/webm-tools
Description: WebM tools
Author: Ludovic Muller
Latest version: 0.4.1

# WebM tools

## Install this library

```sh
npm install @ludovicm67/webm-tools
```

The following is exposed:

- `Buffer`: Buffer that works on both Node.js and browsers
- `utils.blobToArrayBuffer`: a function to convert a Blob to an ArrayBuffer
- `ebmlSchema`: the EBML schema
- `decode`: decode an EBML element
- `displayDecodedElements`: display the decoded elements using `console.log`
- `fix`: the function to use to fix a chunk by using the previous one

## How the chunks are fixed

WebM is a media format which has become the standard today.
However, there's an issue while doing audio chunks because they lack crucial metadata.
This essential metadata is stored in the first chunk, so we need to replicate it in the other chunks.
The challenge here is that we can't simply extract the header bytes and append them to all other chunks, as each chunk is not an independent "block".
They are interconnected, which can confuse the audio player.

Since WebM is based on Matroska, we can use Matroska tools, available at [this link](https://www.bunkus.org/videotools/mkvtoolnix/), to examine the chunks and ensure they are structured correctly.
Specifically, the [`mkvinfo` tool](https://mkvtoolnix.download/doc/mkvinfo.html) is employed to inspect these chunks.

Matroska employs the EBML (Extensible Binary Meta Language) format, which is a binary format consisting of elements.
To address the issue, we must parse the EBML format to identify the specific elements that need to be transferred from the first chunk to the subsequent ones.
These elements include the header, which contains essential metadata such as the codec, sampling frequency, and track type.
Additionally, we need to transfer the last block of the first chunk, even if it's incomplete, as we will get the end of the block in the next chunk.

The proposed solution is to concatenate the header and the last block of the first chunk with the next chunk.
This operation ensures that the structural integrity of the audio file is maintained, making it playable without causing confusion for the audio player.

## Command line tool

The `cli` folder contains a command line tool that can be used to fix or merge chunks.

Have a look at the [README of the CLI](./cli/README.md) for more information.
npm package: @ludum-dare-badges/react
Description: React bindings for ludum-dare-badges
Author: Jaxson Van Doorn
Latest version: 2.1.4

[![img](https://github.com/woofers/ludum-dare-badges/workflows/build/badge.svg)](https://github.com/woofers/ludum-dare-badges/actions) [![img](https://img.shields.io/david/woofers/ludum-dare-badges)](https://www.npmjs.com/package/@ludum-dare-badges/react) [![img](https://img.shields.io/npm/v/@ludum-dare-badges/react.svg?color=success&label=npm%20package)](https://www.npmjs.com/package/@ludum-dare-badges/react) [![img](https://img.shields.io/npm/dt/@ludum-dare-badges/react.svg)](https://www.npmjs.com/package/@ludum-dare-badges/react) [![img](https://img.shields.io/npm/l/@ludum-dare-badges/react.svg)](https://github.com/woofers/ludum-dare-badges/blob/master/License.txt)


# @ludum-dare-badges/react

Display Ludum Dare Game Jam results in React.

**[Live Demo](https://badges.jaxs.onl)**

**Note:** This project is community made and not endorsed by the offical Ludum Dare creator(s).


# Installation

**Yarn**

    yarn add @ludum-dare-badges/react

**npm**

    npm install @ludum-dare-badges/react


# Usage

```jsx
import React from 'react'
import Widget from '@ludum-dare-badges/react'

const App = () => (
  <Widget game="44/alien-e-x-p-a-n-s-i-o-n" />
)
```

Simply add the game widget to the React application using JSX.

The React component will simply call ****[@ludum-dare-badges/api](https://github.com/woofers/ludum-dare-badges/tree/main)****
to obtain the results badge.


## Props


### Game

The namespace of the game on the ldjam site **Required**

`game` requires both the Ludum Dare number and the game title (eg. `44/alien-e-x-p-a-n-s-i-o-n`  for Ludum Dare 44)


### Type

The image format type to display the badge as. **Default:** `svg`

Can be either `svg` or `png`.

`svg` is recommended for better font rendering.


### Type

The host of the API. **Default:** `https://badges.jaxs.onl`

Likely only set in the case that the API is self-hosted.