open-index/open-npm huggingface dataset:
npm package: @mlaursen/code
Description: Components and utils for rendering code for documentation pages or in general
Author: Mikkel Laursen
Latest version: 0.0.1

# @mlaursen/code

```sh
# only components
pnpm add @mlaursen/code @react-md/core cnbuilder sass-embeded

# with nextjs server components
pnpm add @mlaursen/code @react-md/core cnbuilder sass-embeded shiki

# or with code runner
pnpm add @mlaursen/code @react-md/core cnbuilder sass-embeded sucrase
```
npm package: @mlaursen/node-utils
Description: A package of utils I generally find myself using in projects with node
Author: Mikkel Laursen
Latest version: 0.0.2

# @mlaursen/node-utils

A package of utils I generally find myself using in projects with node.

## Installation

```sh
npm install @mlaursen/node-utils
```

<!-- examples-start -->

## filesize

### Simple Example

```ts
import { filesize } from "@mlaursen/node-utils";
import { readFile } from "node:fs/promises";

const contents = await readFile("README.md", "utf8");
console.log(`README.md is ${filesize(contents)} bytes`);
console.log(
  `README.md is ${filesize(contents, { gzip: true })} bytes when gzipped`
);
```

## log

### Simple Example

```ts
import { disableLogger, enableLogger, log } from "@mlaursen/node-utils";

log("This won't be printed");

enableLogger();
log("This will be printed");

disableLogger();
log("This won't be printed");
```

## logTask

### Simple Example

```ts
import { enableLogger, logTask } from "@mlaursen/node-utils";

enableLogger();

async function someTask(): Promise<void> {
  // implementation
}

await logTask(someTask(), "Starting some task", "Some task complete!");
```

## prettyFilesize

### Simple Example

```ts
import { prettyFilesize } from "@mlaursen/node-utils";
import { readFile } from "node:fs/promises";

const contents = await readFile("README.md", "utf8");
console.log(`README.md is ${prettyFilesize(contents)}`);
console.log(
  `README.md is ${prettyFilesize(contents, { gzip: true })} when gzipped`
);
```

<!-- examples-end -->
npm package: @mlaursen/prettier-config
Description: The reusable prettier config I normally use for repos
Author: Mikkel Laursen
Latest version: 0.0.3

# prettier-config

My main prettier config.

## Installation

```sh
pnpm add -D @mlaursen/prettier-config prettier
```

Next, create a `.prettierrc.yaml` file so `nvim` formats the repo:

```sh
echo '"@mlaursen/eslint-config"' > .prettierrc.yaml
```

Finally, create a `.prettierignore` file with whatever:

```sh
cat > .prettierignore << EOF
pnpm*.yaml
node_modules
coverage/

CHANGELOG.md

.next
EOF
```

## Extending

The default `importOrder` is:

```yaml
importOrder:
  - "<THIRD_PARTY_MODULES>"
  - "^@/(.*)$"
  - "^[./]"
```

Just modify as needed in the `.prettierrc.yaml`
npm package: @mlaursen/release-script
Description: The release script I normally use for packages I publish to npm
Author: Mikkel Laursen
Latest version: 0.1.1

# @mlaursen/release-script

This is the normal npm release script I use. This requires:

- [changesets](https://github.com/changesets/changesets) to handle bumping
  versions and generating changelogs.
- A Github [release token](https://github.com/settings/personal-access-tokens)
  - The token only needs repository access
  - This is normally stored as `GITHUB_TOKEN` in an `.env.local` file that
    should not be committed

## Installation

The release script relies on
[changesets](https://github.com/changesets/changesets) to handle bumping
versions and generating changelogs.

```sh
pnpm install --save-dev @mlaursen/release-script \
  @changesets/cli \
  tsx
```

Setup the `.changeset` dir if needed:

```sh
pnpm changeset init
git add .changeset
git add -u
git commit -m "build: setup changesets"
```

## Usage

Create a `scripts/release.ts` file with:

```ts
import { release } from "@mlaursen/release-script";

await release({
  repo: "{{REPO_NAME}}", // i.e. eslint-config

  // if the repo is not under `mlaursen` for some reason
  // owner: "mlaursen",

  // If there is a custom clean command for releases. `clean` is the default
  // cleanCommand: "clean",

  // If there is a custom build command for releases. `build` is the default
  // buildCommand: "build",

  // An optional flag if the build step should be skipped. `!buildCommand` by default
  // skipBuild: process.argv.includes("--skip-build"),

  // If the version message needs to be customized. The following is the default
  // versionMessage: "build(version): version package",

  // An optional `.env` file path that includes the `GITLAB_TOKEN` environment
  // variable.
  // envPath: ".env.local",

  // An optional lookup of package name -> package path in the repo used to
  // find the CHANGELOG.md for each release in a monorepo. Will default to
  // `"."` when omitted.
  // packagePaths: {
  //   "@react-md/core": "./packages/core",
  // },
});
```

Next, update `package.json` to include the release script:

```diff
   "scripts": {
     "prepare": "husky",
     "typecheck": "tsc --noEmit",
     "check-format": "prettier --check .",
     "format": "prettier --write .",
     "clean": "rm -rf dist",
     "build": "tsc -p tsconfig.json",
+    "release": "tsx scripts/release.ts"
   },
```

Finally, run the release script whenever a new release should go out:

```sh
pnpm release
```

## Adding Changesets

During normal development, add changesets and commit them. They will normally
be close to my commit messages which is a bit annoying.

```sh
pnpm changeset
git add .changeset
```

## Alpha Releases

Use the changesets api to enter the pre-release flow:

```sh
pnpm changeset enter pre
```

Once ready to do a real release:

```sh
pnpm changeset exit pre
```
npm package: @mlaursen/utils
Description: A package of utils I generally find myself using in projects
Author: Mikkel Laursen
Latest version: 0.0.2

# @mlaursen/utils

A package of utils I generally find myself using in projects.

## Installation

```sh
npm install @mlaursen/utils
```

<!-- examples-start -->

## camelCase

### Simple Example

```ts
import { camelCase } from "@mlaursen/utils";

camelCase("hello-world"); // "helloWorld"
```

## kebabCase

### Simple Example

```ts
import { kebabCase } from "@mlaursen/utils";

kebabCase("HelloWorld"); // "hello-world"
```

## pascalCase

### Simple Example

```ts
import { pascalCase } from "@mlaursen/utils";

pascalCase("hello-world"); // "HelloWorld"
```

## titleCase

### Simple Example

```ts
import { titleCase } from "@mlaursen/utils";

titleCase("hello-world"); // "Hello World"
```

## upperFirst

### Simple Example

```ts
import { upperFirst } from "@mlaursen/utils";

upperFirst("hello-world"); // "Hello-world"
```

## wait

### Wait some duration

```ts
import { wait } from "@mlaursen/utils/wait";

console.log("start");
await wait(5000);
console.log("it has been five seconds");
```

<!-- examples-end -->
npm package: @mlayerprotocol/core
Description: Typescript SDK for the mLayer protocol
Author: Abdulhafiz / @RulerOfCode
Latest version: 2.0.0

# mLayer node sdk

- Node SDK for interacting with the mLayer protocol
- Learn more at [https://www.mlayer.network](https://www.mlayer.network).


## Install

```typescript
yarn add @mlayerprotocol/core
```

## Rest client

```typescript
// browser based import
import {
  Client,
  Message,
  RESTProvider,
  Events,
} from '@mlayerprotocol/core/browser';

// nodejs backend based import
// import { Client, Message, RESTProvider, WSProvider,  Events} from '@mlayerprotocol/core';

const validatorHttpApi = 'http://localhost:9531'; // replace with valid api url
const client = new Client(new RESTProvider(validatorHttpApi));
try {
  console.log('Node Info', await client.getNodeInfo());

  console.log(
    'AUTHORIZE-HTTP',
    await client.getBlockStats({
      params: {},
    })
  );
} catch (e) {
  console.log('EEEEEE', e.message);
}
```

## Websocket client

```typescript
// browser based import
import {
  Client,
  Message,
  WSProvider,
  Events,
} from '@mlayerprotocol/core/browser';
// nodejs backend based import
// import { Client, Message, RESTProvider, WSProvider,  Events} from '@mlayerprotocol/core';

const wsUrl = 'ws://localhost:9091/ws'; // replace with valid api url
const wsClient = new Client(new WSProvider(wsUrl)); //initialize client
const connected = await wsClient.connect();
if (connected) {
  try {
    console.log('Node Info', await wsClient.getNodeInfo());
    const projectId = '2274aec8-6107-cb4f-5204-de5a9aaedb67';
    const topicId = 'f0b7be5f-3e70-0a05-6f04-797462ec3e61';

    await wsClient.subscribe(
      {
        [projectId]: [
          'app',
          'auth',
          'sub',
          'top',
          'msg',
          topicId, // specify topic id to subscribe to specific topic
        ],
      },
      {
        onError: console.log,
        onReceive: (msg) => {
          const event = Events.fromPayload(msg.event);
          if (msg.event.modelType == 'msg') {
            const sentMessage = event.payload?.data as Message; // if listening to
            console.log(sentMessage.data); // this is the message body
          }
        },
        onSubscribe: (id) => console.log('SUBSCRIPTIONID', id),
      }
    );
  } catch (e) {
    console.log('Error', e.message);
  }
}
```
npm package: @mlazuardy/nestjection
Description: Nestjs integration for Objection+Knex
Author: Michael Lazuardy
Latest version: 0.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# NESTJECTION

Nestjs database integration for Objection js

This package is use internally for my project, but can be used also if you want to use it.

## Features
- Extended Query Builder
- Extended Objection Relations ( In Progress )
- Model and Pagination Serializer ( for API )

## Installation
```
npm install @mlazuardy/nestjection
```
or
```
yarn add @mlazuardy/nestjection
```
npm package: @mlbd/gh-repo-replicator
Description: This is an automated coding challenge generator from GitHub repository templates.
Author: Kazi Shiplu
Latest version: 1.0.0

# GitHub Coding Challenge Generator

This is an automated coding challenge generator from GitHub repository templates.

It makes a copy of the template repository and names it after the candidate's GitHub handle.

It will also copy all Issues and Pull requests (work in progress). 

## Usage

You will need an GIthub Personal Access Token to use this. Create a personal access token at https://github.com/settings/tokens/new.

** For Personal repository you need to create access token with `repo` scope only.
** For Organization repository you would need `admin:org` `admin:repo_hook` along with `repo` scope.

You can use the token in your ENV file as `GITHUB_TOKEN` or you can paste it at the prompt.

Follow the prompts and you will get you replicated repository. 
```js
 npm start -- --token=<token> --source=git@github.com:charuvision/Sample-main.git --destination=my-new-repo-3 --repo_type=Organization --org_slug=charuvision --target_user=charuvisionapps --user=<your-github-username> --org_slug=<github-org-slug-if-org_slug=Organization>

```

## Development

TBD
npm package: @mlbrgn/image-shared
Description: shared resources
Author: Evertjan Garretsen
Latest version: 1.0.75

# Image Shared

docs generated using Junie AI

A shared utility package providing core functionality for image-related web components.

## Overview

Image Shared provides a collection of base classes, utilities, and helper functions that are used by other image-related packages in the mlbrgn-node-workspace. It serves as the foundation for components like ImageEditor, Image Slider, and ImageUploader.

## Key Features

- **Base Custom Elements**: Provides base classes for creating custom web components
  - `BaseCustomElement`: Foundation for all custom elements
  - `BaseFilesCustomElement`: Extends BaseCustomElement with file handling capabilities
  - `BaseFormCustomElement`: Extends BaseCustomElement with form-related functionality

- **Image Utilities**:
  - `ImageFile`: Class for handling image files with validation and processing
  - `ImageRepository`: Collection management for images
  - `ImageRepositoryItem`: Individual items in the repository
  - `ImageSource`: Handles different sources of images

- **Geometry Utilities**:
  - `Area`: Class for representing and manipulating rectangular areas
  - `Point`: Class for representing and manipulating points in 2D space

- **Helper Functions**:
  - `domHelpers`: Utilities for DOM manipulation
  - `helpers`: General utility functions
  - `imageHelpers`: Image-specific utility functions

- **Event Handling**:
  - `EventBus`: Facilitates communication between components

- **Logging**:
  - `Logger`: Provides consistent logging functionality

## Installation

```bash
npm install @mlbrgn/image-shared
```

## Usage

Import the required utilities from the package:

```javascript
import { 
  BaseCustomElement, 
  ImageFile, 
  Area, 
  EventBus 
} from '@mlbrgn/image-shared';
```

### Creating a Custom Element

```javascript
import { BaseCustomElement } from '@mlbrgn/image-shared';

export default class MyCustomElement extends BaseCustomElement {
  static shadowTemplate = '<div>My Custom Element</div>';
  static elementLookup = ['#someElement'];

  constructor() {
    super();
    // Your initialization code
  }
}
```

### Working with Images

```javascript
import { ImageFile, ImageRepository } from '@mlbrgn/image-shared';

// Create a repository to manage images
const repository = new ImageRepository();

// Create an image file
const imageFile = new ImageFile(fileObject, {
  maxWidth: 1920,
  maxHeight: 1080,
  formatsRegex: /\.(jpe?g|png|gif)$/i
});

// Add to repository
repository.add(imageFile);
```

## Development

This package is developed inside the mlbrgn-node-workspace monorepo.
Do not run `npm run dev` or `npm install` inside this repository.

Clone the monorepo instead:
https://github.com/evertjanmlbrgn/mlbrgn-node-workspace
npm package: @mlbrgn/image-slider
Description: A customizable image slider web component for displaying and navigating through images
Author: Evertjan Garretsen
Latest version: 1.0.38

# Image Slider

docs generated using Junie AI

A customizable image slider web component for displaying and navigating through images.

## Overview

Image Slider is a lightweight, customizable web component that allows you to create image sliders/carousels on your web pages. It provides navigation controls, keyboard support, and smooth transitions between images.

## Key Features

- **Custom Web Component**: Easy to integrate into any web project
- **Navigation Controls**: Previous/next buttons for image navigation
- **Keyboard Navigation**: Support for arrow keys to navigate between images
- **Smooth Transitions**: Configurable fade animations between slides
- **Responsive Design**: Adapts to container size
- **Internationalization**: Support for multiple languages via the Translator package

## Installation

```bash
npm install @mlbrgn/image-slider
```

## Usage

### Basic Setup

Import the component in your JavaScript file:

```javascript
import '@mlbrgn/image-slider';
```

Add the component to your HTML:

```html
<image-slider></image-slider>
```

### Setting Images

You can set images programmatically:

```javascript
const slider = document.querySelector('image-slider');
const images = [
  { src: 'path/to/image1.jpg', alt: 'Image 1' },
  { src: 'path/to/image2.jpg', alt: 'Image 2' },
  { src: 'path/to/image3.jpg', alt: 'Image 3' }
];

slider.setImages(images);
```

### Configuration

You can configure the slider using attributes:

```html
<image-slider fade-duration="500"></image-slider>
```

Or programmatically:

```javascript
const slider = document.querySelector('image-slider');
slider.setConfiguration({
  fadeDuration: 500
});
```

## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| fadeDuration | Number | 350 | Duration of fade transition in milliseconds (0 for no fade) |

## Events

The slider emits events that you can listen for:

```javascript
const slider = document.querySelector('image-slider');
slider.addEventListener('slide-change', (event) => {
  console.log('Changed to slide:', event.detail.imageId);
});
```

## Development

This package is developed inside the mlbrgn-node-workspace monorepo.
Do not run `npm run dev` or `npm install` inside this repository.

Clone the monorepo instead:
https://github.com/evertjanmlbrgn/mlbrgn-node-workspace
npm package: @mlbrgn/media-library-extensions
Description: Companion package for the composer Laravel Media Library extensions
Author: Evertjan Garretsen
Latest version: 1.0.2

# Media Library Extensions – Companion Package

This package is the **JavaScript companion** for the Laravel package:
[`mlbrgn/laravel-medialibrary-extensions`](https://github.com/MLBRGN/laravel-medialibrary-extensions).

## Installation

Install via npm:

```bash
npm install @mlbrgn/media-library-extensions
```

This package automatically brings in the required `@mlbrgn/image-editor` dependency.

## Usage

Import the image editor in your application:

```js
import { ImageEditor } from '@mlbrgn/media-library-extensions';
```