open-index/open-npm huggingface dataset:
npm package: @ookamiiixd/baileys-store
Description: Minimal Baileys data storage for your favorite DBMS built with Prisma
Author: Royhan
Latest version: 1.0.0-beta.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Baileys Store

Minimal Baileys data storage for your favorite DBMS built with Prisma. This library is a simple handler for Baileys event emitter that will listen and update your data in the database.

## Requirements

- **Prisma** version **4.5.x** or higher
- **Baileys** version **5.x.x** or higher

## Installation

```bash
# Using npm
npm i @ookamiiixd/baileys-store

# Using yarn
yarn add @ookamiiixd/baileys-store
```

## Setup

Before you can actually use this library, you have to setup your database first.

1. Copy the `.env.example` file from this repository or from the `node_modules` directory (should be located at `node_modules/@ookamiiixd/baileys-store/.env.example`). Rename it into `.env` and then update your [connection url](https://www.prisma.io/docs/reference/database-reference/connection-urls) in the `DATABASE_URL` field.
1. Copy the `prisma` directory from this repository or from the `node_modules` directory (should be located at `node_modules/@ookamiiixd/baileys-store/prisma/`). Additionaly, you may want to update your `provider` in the `schema.prisma` file if you're not using MySQL database.
1. Run your [migration](https://www.prisma.io/docs/reference/api-reference/command-reference#prisma-migrate).

## Usage

```ts
import pino from 'pino';
import makeWASocket from '@adiwajshing/baileys';
import { PrismaClient } from '@prisma/client';
import { initStore, Store } from '@ookamiiixd/baileys-store';

const logger = pino();
const socket = makeWASocket();
const prisma = new PrismaClient();

// You only need to run this once
initStore({
  prisma, // Prisma client instance
  logger, // Pino logger (Optional)
});

// Create a store and start listening to the events
const store = new Store('unique-session-id-here', socket.ev);

// That's it, you can now query from the prisma client without having to worry about handling the events
const messages = prisma.message.findMany();
```

## Contributing

PRs, issues, suggestions, etc are welcome. Please kindly open a new issue to discuss it.
npm package: @ookla/mapbox-gl-draw-rectangle
Description: A custom mode for MapboxGL Draw to draw rectangles that adds the functionality of keeping the rectangle's shape when adjusting a corner of the drawn rectangle
Author: Ookla
Latest version: 1.2.2

## Mapbox GL Draw Rectangle Mode

A custom mode for MapboxGL Draw to draw rectangles that adds the functionality of keeping the rectangle's shape when adjusting a corner of the drawn rectangles.
This mode is compatible with @mapbox/mapbox-gl-draw@1.4.0 and above.
Original inspiration comes from this package, which hasn't been mantained for the last 4 years:
https://github.com/thegisdev/mapbox-gl-draw-rectangle-mode

### Usage

```js
import DrawRectangle from 'mapbox-gl-draw-rectangle-mode';

const modes = MapboxDraw.modes;
modes.draw_rectangle = DrawRectangle;

const draw = new MapboxDraw({
  modes: modes
});

draw.changeMode('draw_rectangle');
```

Once a rectangle is created, 1 event is fired:
- `draw.create` with the created rectangle

### Build

`yarn build` will do it.

### License
MIT
npm package: @oom/copy-to-clipboard
Description: Web component to create a button to copy to clipboard
Author: Óscar Otero
Latest version: 0.1.0

# Copy to clipboard

Web component to create a button to copy to clipboard.

- No dependencies
- Very light
- Follow the **progressive enhancement strategy**. If JavaScript fails the page
  continue working.
- No styles or themes are provided with this package.
- Build with modern JavaScript.

## Usage

Import and register the component with the desired tag name:

```js
import Copy from "copy-to-clipboard/copy.js";

customElements.define("oom-copy", Copy);
```

Use it in the HTML code. The `data-target` attribute must contain the id of the
text container:

```html
<oom-copy data-target="code"></oom-toc>

<textarea id="code">Some content</textarea>
```

You can use the `data-text` attribute to assign the text directly:

```html
<oom-copy data-text="Some content"></oom-toc>
```

## Customization

You can provide your own button:

```html
<oom-copy data-text="Some content"><button>Copy to clipboard</button></oom-toc>
```

Or define a default function to create the button:

```js
import Copy from "copy-to-clipboard/copy.js";

Copy.createButton = () => {
  const btn = document.createElement("button");
  btn.classList.add("copy-btn");
  btn.innerText = "Copy to clipboard";
  return btn;
};
```

You can configure the notification message:

```html
<oom-copy data-text="Some content" data-message="Text has copied!"></oom-toc>
```

Configure a default message:

```js
import Copy from "copy-to-clipboard/copy.js";
Copy.messsage = "Text has copied!";
```

Or create a new notification element:

```js
import Copy from "copy-to-clipboard/copy.js";

Copy.createNotification = (message = CopyToClipboard.message) => {
  const element = document.createElement("div");
  element.setAttribute("role", "status");
  element.innerHTML = message;
  return element;
};
```
npm package: @oom/horizontal-menu
Description: Web component to create a responsive horizontal menu
Author: Oscar Otero
Latest version: 0.2.0

# Horizontal menu

Web component to create a responsive horizontal menu. In narrow screens, the
items that don't fit in the menu are moved to a dropdown list.

- No dependencies
- Very light
- Follow the **progressive enhancement strategy**. If the JavaScript fails, the
  links are still visible.
- No styles or themes are provided with this package. Just the basic styles.
- Build with modern javascript, using ES6 modules and custom elements

## Usage

Import and register the component with the desired tag name:

```js
import Menu from "horizontal-menu/horizontal-menu.js";

customElements.define("oom-menu", Menu);
```

Create the menu with the following HTML code:

```html
<oom-menu>
  <a href="#1">Link 1</a>
  <a href="#2">Link 2</a>
  <a href="#3">Link 3</a>
  <a href="#4">Link 4</a>
  <a href="#5">Link 5</a>
</oom-menu>
```

Use CSS to customize your menu. This web component uses a shadow dom and _parts_
to customize the internal elements.

```css
my-menu {
  /* Generic styles */
  display: flex;

  a {
    white-space: nowrap;
  }

  &::part(menu) {
    /* Main container */
  }
  &::part(links) {
    /* Horizontal links */
  }
  &::part(dropdown) {
    /* Dropdown container */
  }
  &::part(dropdown-button) {
    /* Button to show/hide the dropdown */
  }
  &::part(dropdown-links) {
    /* Dropdown links */
  }
}
```

The HTML structure of the shadow DOM is:

```html
<div part="menu">
  <div part="links">
    <!-- Horizontal links -->
  </div>
  <div part="dropdown">
    <button part="dropdown-button">
      <!-- Button to show/hide the hidden links -->
    </button>
    <div part="dropdown-links">
      <!-- Hidden links -->
    </div>
  </div>
</div>
```
npm package: @oom/mastodon-comments
Description: Web component to show comments from Mastodon and Bluesky
Author: Oscar Otero
Latest version: 0.3.2

# Mastodon comments

Web component to show comments from Mastodon. Inspired by the work of
[Thiago Cerqueira](https://thiagojedi.github.io/blog/activitypub-comments/) who
has inspired by
[Julian Fietkau](https://fietkau.blog/2023/another_blog_resurrection_fediverse_new_comment_system),
who has inspired by
[Cassidy James](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon/),
who also was inspired by
[Jan Wildeboer](https://jan.wildeboer.net/2023/02/Jekyll-Mastodon-Comments/) who
was inspired by
[Yidhra Farm](https://yidhra.farm/tech/jekyll/2022/01/03/mastodon-comments-for-jekyll.html),
who was inspired by
[Joel Chrono](https://joelchrono12.xyz/blog/how-to-add-mastodon-comments-to-jekyll-blog/)
who was inspired by
[Carl Schwan](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/).

Recently I included support for Bluesky. Thanks to [Andy](https://pixelde.su/) for the idea and for [let me borrow his code](https://mastodon.gal/@pixel@desu.social/113569049052739770).

- No dependencies
- Light: ~300 lines of code (including comments and spaces)
- Follows the **progressive enhancement strategy:**
- Build with modern javascript, using ES6 modules and custom elements

## Usage

### HTML

Write the following HTML code with a link to a post from Mastodon and/or Bluesky:

```html
<oom-comments
  mastodon="https://mastodon.gal/@misteroom/110810445656343599"
  bluesky="https://bsky.app/profile/lume.land/post/3lc3b4k2n6p2x">
  No comments yet
</oom-comments>
```

### JS

Register the custom element:

```js
import Comments from "./mastodon-comments/comments.js";

//Register the custom element with your desired name
customElements.define("oom-comments", Comments);
```

### CSS

Import the CSS code from this package or create your own.

```css
@import "./mastodom-comments/styles.css";
```

## Customization

You can customize the HTML code generated by overriding the default
`renderComment` static function:

```js
import Comments from "./mastodon-comments/comments.js";

// Customize the HTML rendering
class CustomComments extends Comments {
  renderComment(comment) {
    // your render here
  }
};

//Register the custom element with your desired name
customElements.define("oom-comments", CustomComments);
```

## Cache

Use the `cache` attribute to cache the API responses. It accepts a number with
the time in seconds. The cache is also used offline.

```html
<!-- Cache for 1 minute (60 seconds) -->
<oom-comments
  cache="60"
  mastodon="https://mastodon.gal/@misteroom/110810445656343599"
>
  No comments yet.
</oom-comments>
```
npm package: @oom/particles
Description: Generate particles
Author: Oscar Otero
Latest version: 0.1.3

# @oom/particles

Javascript library to generate particles using the canvas API. It has the following features:

* No dependencies
* Superlight
* High performance
* Built with ES6, so you may need a transpiler for old browser support

It's inspired by [particles.js](https://github.com/VincentGarreau/particles.js) library but lighter and with better performance, in order to be more flexible and customizable.

## Install

Requirements:

* NPM or Yarn to install [the package and the dependencies](https://www.npmjs.com/@oom/particles)

```sh
npm install @oom/particles
```

## Usage

```js
import Generator from './vendors/@oom/particles/src/generator.js';
import Canvas from './vendors/@oom/particles/src/canvas.js';

//The particles generator:
const generator = new Generator()
  .color('#ff0033')
  .position({
    speed: 2,
    sync: true,
    direction: 'right',
    outMode: 'bounce',
  })
  .size(10, {
    speed: 1,
    to: 5,
  })
  .opacity(1, {
    speed: 0.5,
    to: 0,
  })
  .strokeColor('blue')
  .strokeWidth(3, {
    speed: 0.5,
    to: 1,
  });

//The canvas where the particles will be drawn
const element = document.querySelector('#canvas');

//Options to configure the number of particles, density, etc
const options = {
  number: 150,
  densityArea: 400
};

const canvas = new Canvas(element, generator, options);

//Start the animation
canvas.start();

//Pause the animation
canvas.pause();

//Resume the animation
canvas.play();
```

### Random values

There's many ways to generate random values for color, opacity, size etc:

```js
const generator = new Generator();

//Use an array with the available values:
generator.color(["#333", "blue", "white", "rgb(234,111,0)"]);

//Use an object to generate random values with a min and max value:
generator.opacity({
  min: 0.1,
  max: 0.8,
});

//To generate integer values:
generator.size({
  min: 2,
  max: 20,
  round: true
});

//You can also pass a function that returns the value
generator.opacity(() => Math.random());
```

## Demo

To run the demo, just clone this repository, enter in the directory and execute:

```sh
npm install
npm start
```

You should see something in `http://localhost:8080/`

There's an online demo here: https://oom-components.github.io/particles/
npm package: @oom/scroll-styles
Description: Modify css properties on scroll
Author: Oscar Otero
Latest version: 0.2.1

# @oom/scroll-styles

Javascript library to apply css custom properties depending on the scroll position, allowing to create scrolling efects like parallax. It has the following features:

* No dependencies
* Superlight
* High performance
* Follows the **progressive enhancement strategy**
* Built with ES6, so you may need a transpiler for old browser support

It's inspired by [basicScroll](https://github.com/electerious/basicScroll) library but lighter and with better performance, in order to be more flexible and customizable.

## Install

Requirements:

* NPM or Yarn to install [the package and the dependencies](https://www.npmjs.com/@oom/scroll-styles)
* Any browser supporting the following APIs:
  * [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to detect when the elements are visible in the viewport.
  * [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to perform the animations.
  * [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList) to observe elements while a media-query is true.

```sh
npm install @oom/scroll-styles
```

## Usage

```js
import Scroll from './vendors/@oom/scroll-styles/src/scroll.js';

const scroll = new Scroll();

//Register an element to observe
const element = document.querySelector('.parallax');

scroll.observe(element, {
    name: '--scale',  // Name of the custom property
    element: [0, 1],  // [from, to] element intersection (0 = top, 1 = bottom, 0.5 = middle, etc)
    viewport: [1, 0]  // [from, to] viewport intersection
    media: '(min-width: 500px)'  // Observe only while this media-query is true

    //Custom handler, if you want to do more things that just update the property
    handler(element, scale, options) {
        element.style.setProperty(options.name, scale);
    }
})

//Remove an element
scroll.unobserve(element);

//Remove all elements
scroll.disconnect();
```

The `--scale` variable is a float number between 0 and 1, so you can use it in the css code:

```css
.parallax {
    /* Use the value as is */
    opacity: var(--scale, 1);

    /* Use calc() to convert to other units */
    transform: translateY(calc(var(--scale, 1) * 50rem));
}
```

## Demo

To run the demo, just clone this repository, enter in the directory and execute:

```sh
npm install
npm start
```

You should see something in `http://localhost:8080/`

There's an online demo here: https://oom-components.github.io/scroll-styles/
npm package: @oom/searcher
Description: Javascript to provide static searcher
Author: Oscar Otero
Latest version: 2.1.0

# @oom/searcher

Javascript library to include a searcher from a json file.

- Build with ES6.
- No default CSS styles provided (yes, it's a feature).

## Install

```sh
npm install @oom/searcher
```

## Usage

### HTML

Let's start with the following html code:

```html
<oom-search label="Search" placeholder="Type to search" src="path/to/data.json"></oom-search>
```

The JSON must have the following structure:

```json
[
  {
    "value": "Returned value on select",
    "label": "(optional) visible text of this option. If it's empty, the 'value' property will be used",
    "search": "(optional) to include extra text to search (in addition to 'label')"
  }
]
```

### JS

Use javascript for a complete experience:

```js
import Searcher from "./searcher.js";

// Register the component
customElements.define("oom-search", Searcher);

// Set a callback
const searcher = document.querySelector("search-form");

searcher.addEventListener("selected", (ev) => {
  const { value } = ev.detail;
  window.location.href = value;
});
```

### CSS

This web component uses
[::part](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) for styling:

```css
/* Style for the search-box container */
oom-search {
}

/* Styles for the input */
oom-search::part(input) {
}
oom-search::part(input):focus {
}

/* Styles for the label */
oom-search::part(label) {
}

/* Styles for the list of items */
oom-search::part(items) {
}

/* Style for the individual items */
oom-search::part(item) {
}

/* Style the active item */
oom-search::part(active) {
}
```

See the [demo](demo) for styling examples.
npm package: @oom/toc
Description: Web component to create a table of contents menu
Author: Oscar Otero
Latest version: 0.1.0

# Table of contents

Web component to create a table of contents.

- No dependencies
- Very light
- Follow the **progressive enhancement strategy**. If JavaScript fails the page
  continue working.
- No styles or themes are provided with this package.
- Build with modern JavaScript.

## Usage

Import and register the component with the desired tag name:

```js
import Toc from "toc/toc.js";

customElements.define("oom-toc", Toc);
```

Use it in the HTML code. The `data-target` attribute must contain the id of the
text container:

```html
<nav>
  <h2>Table of contents</h2>

  <oom-toc data-target="main-content">
    Fallback text if something fails
  </oom-toc>
</nav>

<div id="main-content">
  <h2>Lorem Ipsum Dolor Sit Amet</h2>
  ...
  <h3>Consectetur Adipiscing</h3>
  ...
</div>
```

## Anchors

Anchors are created automatically if they are missing. For example:

```html
<h2>One</h2>
<h2 id="two">Two</h2>
<h2><a id="three" href="#three">Three</a></h2>
```

The component makes the following changes:

```html
<h2 id="one"><a href="one">One</a></h2>
<h2 id="two"><a href="two">Two</a></h2>
<h2><a id="three" href="#three">Three</a></h2>
```

- It creates the id automatically using the text content of the heading.
- It creates the anchor automatically if it's missing
- If the id and/or anchor is detected, it does nothing.

If you want a different anchor style, you can override the `anchorCreator`
static property:

```js
import Toc from "toc/toc.js";

// <h2><a href="#id">anchor</a>Header</h2>
Toc.anchorCreator = (heading, id) => {
  const a = document.createElement("a");
  a.href = `#${id}`;
  a.innerHTML = "anchor";
  heading.prepend(a);
};

customElements.define("oom-toc", Toc);
```