open-index/open-npm huggingface dataset:
npm package: @greatz/feedback-plugin
Description: A plugin with feedback
Author: happyz
Latest version: 1.0.18

## 反馈插件

## 使用说明

* npm i @greatz/feedback --save-dev

``` jsx
  <div className={styles.bottom} id="addFeedback">
```

``` jsx
   const feedback = new Feedback({
      type: 'submit', // sumit/display
      appkey: 'c5a7b983122f4846b16e1e272f68731c', // appKey
      email: user.email, 
      subProductId: 9, // 子产品
      level: 1, // 优先级
      responseEmail: user.email,
      submitEmail: user.email,
      channel: 'ep-pc平台',
    })
    feedback.render('addFeedback');
    
```

## 更新说明
- 1.0.1 创建/查看基础功能
- 1.0.2 支持图片粘贴上传
- 1.0.3 修复css样式bug
- 1.0.5 区分dev/test/online环境
- 1.0.6 全局样式前缀修改避免污染
- 1.0.7 将compatiable包及样式移除，解决样式污染问题
- 1.0.8 增加https://overmind-project.netease.com/域名
npm package: @grec0/mcp-n8n-webhook
Description: MCP server para enviar información a webhook de n8n
Author: @grec0
Latest version: 0.1.1

# MCP N8N Webhook Server

Servidor MCP (Model Context Protocol) para enviar datos a un webhook de n8n para almacenamiento e indexación.

## Descripción

Este servidor MCP permite a los asistentes de IA guardar información estructurada en n8n a través de webhooks. Es ideal para:

- Guardar conversaciones y logs de desarrollo
- Almacenar documentación de proyectos
- Indexar información para búsquedas posteriores
- Crear embeddings de contenido para RAG

## Instalación

```bash
npm install
npm run build
```

## Configuración

Crea un archivo `.env` basado en `config.example.env`:

```bash
cp config.example.env .env
```

Configura las variables de entorno:

- `N8N_WEBHOOK_URL`: URL base del webhook de n8n
- `N8N_WEBHOOK_ID`: ID único del webhook
- `N8N_API_KEY`: Clave de API para autenticación
- `N8N_INDEX_NAME`: Nombre del índice por defecto (opcional, default: PROJECT_CONVERSATIONS)
- `N8N_TABLE_CATEGORY`: Categoría de tabla por defecto (opcional, default: DEVELOPMENT_LOGS)

## Uso

### Modo desarrollo
```bash
npm run dev
```

### Modo inspector (para testing)
```bash
npm run inspector
```

### Modo producción
```bash
npm start
```

## Herramientas Disponibles

### `n8n_save_data`
Guarda información estructurada en el webhook de n8n.

**Parámetros:**
- `projectName` (requerido): Nombre del proyecto
- `projectCategory` (requerido): Categoría del proyecto
- `contentType` (requerido): Tipo de contenido
- `title` (requerido): Título del contenido
- `description` (requerido): Descripción del contenido
- `text` (requerido): Texto completo
- `tags` (requerido): Array de etiquetas
- `projectId` (opcional): ID del proyecto
- `projectStatus` (opcional): Estado del proyecto
- `language` (opcional): Idioma del contenido
- `indexName` (opcional): Nombre del índice
- `tableCategory` (opcional): Categoría de tabla
- `source` (opcional): Fuente de los datos

### `n8n_health_check`
Verifica la conectividad con el webhook de n8n.

## Estructura del Payload

El servidor envía datos en el siguiente formato:

```json
{
  "metadata": {
    "timestamp": "2025-07-02T10:30:00Z",
    "source": "mcp_assistant",
    "version": "1.0"
  },
  "project": {
    "id": "proj_001",
    "name": "Sistema de Embeddings",
    "category": "AI_ML",
    "status": "ACTIVE"
  },
  "content": {
    "type": "CONVERSATION",
    "title": "Implementación de almacenamiento vectorial",
    "description": "Discusión sobre la arquitectura...",
    "text": "Se está implementando un sistema...",
    "tags": ["embeddings", "vectorial", "conversaciones"],
    "language": "es"
  },
  "indexing": {
    "index_name": "PROJECT_CONVERSATIONS",
    "table_category": "DEVELOPMENT_LOGS"
  }
}
```

## Licencia

MIT
npm package: @greedygame/react-native-sdkx
Description: The official react native plugin for SDKX
Author: GreedyGame-Android
Latest version: 0.0.4

# react-native-sdkx

## Getting started

`$ npm install react-native-sdkx --save`

### Mostly automatic installation

`$ react-native link react-native-sdkx`

## Usage
```javascript
import Sdkx from 'react-native-sdkx';
```
npm package: @green-api/n8n-nodes-telegram-greenapi
Description: n8n node for Green-API for Telegramm
Author: GREEN API
Latest version: 0.0.1

# n8n-nodes-telegram-green-api

Integration node for [Green API](https://green-api.com/) in [n8n](https://n8n.io).  
This community node allows automation of Telegram interactions using Green API — including messaging, file transfer, contacts, groups, statuses, and instance management.

---

## 📖 Overview

The **GreenAPI Node** provides full access to Green API endpoints, enabling you to send messages, manage chats, groups, and retrieve account information.

---

## Installation
### Install community node
Go to `Settings` → `Community Nodes` → `Install`, then enter `@green-api/n8n-nodes-telegram-greenapi`


### Install via npm
```bash
npm install @green-api/n8n-nodes-telegram-greenapi
```

Restart n8n after installation.

### Manual installation
1. Copy repository into `~/.n8n/custom/`
2. Run:
   ```bash
   npm install
   npm run build
   ```
3. Restart n8n

---

You can also check out the [installation guide](https://docs.n8n.io/integrations/community-nodes/installation/) in the n8n community nodes documentation.

---

## Authentication

To use this node, you need to have an instance and token from [Green-API](https://green-api.com/en) platform and Telegram account:

- Sign up at [Green-API](https://green-api.com/en)
- Create an instance
- Get idInstance and apiTokenInstance
- Authorize the instance in the [Console](https://console.green-api.com/instanceList)

## 🧩 Features

| Category | Methods |
|-----------|----------|
| 👤 **Account** | getStateInstance, reboot, getAccountSettings |
| ✉️ **Sending** | sendMessage, sendPoll, sendFileByUrl |
| 📥 **Receiving** | webhookTrigger |
| 📜 **Journals** | getChatHistory, getMessage, lastIncomingMessages, lastOutgoingMessages |
| 🧾 **Queues** | showMessagesQueue, clearMessagesQueue |
| 👥 **Groups** | getGroupData |
| ✅ **Readmark** | readChat |
| 🧩 **Service** | getContacts, getContactInfo, checkAccount |

---

## ⚙️ Usage Examples

### 💬 Send Message
```json
{
  "operation": "sendMessage",
  "chatId": "7596558806",
  "message": "Hello from n8n and Green API!"
}
```

### 📎 Send File by URL
```json
{
  "operation": "sendFileByUrl",
  "chatId": "7596558806",
  "urlFile": "https://example.com/image.jpg",
  "fileName": "photo.jpg"
}
```

### 🔄 Check Account
```json
{
  "operation": "checkAccount",
  "phoneNumber": 77780738519
}
```
---

## 🔗 Resources

- 🌐 [Green API Documentation](https://green-api.com/telegram/docs/)
- 📘 [n8n Documentation](https://docs.n8n.io)
- 💬 [n8n Community Forum](https://community.n8n.io)

---

## 👤 Author

Developed by [Green API](https://green-api.com/)  
📧 support@green-api.com  
🌍 https://green-api.com/en/

---

## 🪪 License

[MIT License](LICENSE)
npm package: @green-api/v1-whatsapp-api-client
Description: WhatsApp wrapper library for green-api V1 protocol
Author: Slonbook team
Latest version: 0.1.7

# v1-whatsapp-api-client for javascript

[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/green-api/v1-whatsapp-api-client/blob/master/LICENSE)
[![GitHub release](https://img.shields.io/github/v/release/green-api/v1-whatsapp-api-client.svg)](https://github.com/green-api/v1-whatsapp-api-client/releases)
[![npm version](https://badge.fury.io/js/%40green-api%2Fv1-whatsapp-api-client.svg)](https://www.npmjs.com/package/@green-api/v1-whatsapp-api-client)

## Introduction

The library is a wrapper for WhatsApp API V1 protocol provided by service [green-api.com](https://green-api.com). Unlike [whatsapp-api-client](https://github.com/green-api/whatsapp-api-client) the library implements protocol similar to WhatsApp Business API and does not require to keep a phone pluged with active connection to Internet. You only need a phone number. To use this you have to visit [green-api.com](https://green-api.com) and get an account. 

## Installation

```
npm i @green-api/v1-whatsapp-api-client
```

## Getting started  

### 1. Get green api account

To use the WhatsApp Bot API, you first have to visit [green-api.com](https://green-api.com) and get free developer account. Green Api will give you token  something like 
```
TOKEN: gr.abcdefgijklmn.....
```

### 2. Add import

You can import library using modern ES6 syntax (you have to add ``"type":"module"`` to ``package.json``):
```
import WhatsAppApi from '@green-api/v1-whatsapp-api-client'
```
or using classic syntax:
```
const WhatsAppApi = require('@green-api/v1-whatsapp-api-client')
```
### 3. Initiliaze new WhatsApp Bot with aquired account data
```
const bot = new WhatsAppApi(YOUR_TOKEN)
```

### 3. Start coding

Try to write simple app that sends some hello world text message, for example:

```js
import WhatsAppApi from '@green-api/v1-whatsapp-api-client'

(async () => {
    const api = new WhatsAppApi(process.env.TOKEN || '')
    const response = await api.messages.sendTextMessage(process.env.PHONE_NUMBER || '', 'hello world')
    console.log(response.messages[0].id)
})();
```

More examples [here...](examples/).

## Preparing development environment

Notice project is using tsdx bootstrap

1. Clone repository
2. install tsdx globally
3. Run npm install command

After that you can run tests with command ``npm run test``

## Publish new library version to npm
```
npm login
npm publish --access public
```

## License

Licensed on MIT terms. For additional info have look at [LICENSE](LICENSE)

## Third-party libraries

* [axios](https://github.com/axios/axios) -  sending web requests
npm package: @green-code/music-track-data
Description: A music API. Provides you an array of music track data including lyrics, album, artist and title, simply by performing a fuzzy search on the lyrics or title.
Author: beningreenjam
Latest version: 2.0.3

# Music Track Data API
A simple JavaScript music track data search API.

## Installing
```
npm install @green-code/music-track-data
```

## Get Tracks
```javascript
const {getTracks} = require("@green-code/music-track-data");

getTracks("Times Like These")
    .then(console.log)
    .catch(console.log);
```

The method returns an array of objects in the format below. Each object is data of a track found by the Deezer API.
If the API doesn't find any data, you will get an empty array.

You don't require an API key to use this method.

```json
[
  {
    "id": 0,
    "artist": "Foo Fighters",
    "title": "Times Like These",
    "preview": "http://cdn-preview-9.deezer.com/stream/c-9516e9507adaaf3f0fa2354c816adeb8-5.mp3",
    "album": {
      "title": "Greatest Hits",
      "artwork": "http://e-cdn-images.dzcdn.net/images/cover/266f01f1c7a04843d11cd08f9c07d11f/1000x1000-000000-80-0-0.jpg"
    }
  }
]
```

## Get Lyrics
```javascript
const {getLyrics} = require("@green-code/music-track-data");

getLyrics("Foo Fighters", "Times Like These")
    .then(console.log)
    .catch(console.log);
```
The method returns an object in the format below or `null` if no lyrics were found.

This method call uses MusicMatch and requires an API key. Set yours with the var name of `MUSICMATCH_API_KEY`

```json
{
  "explicit": false,
  "lyrics": "I, I'm a one way motorway\nI'm the one that drives away\nThen follows you back home\nI, I'm a street light shining\nI'm a wild light blinding bright\nBurning off alone..."
}
```

### Info
* Large thanks to [MusicMatch](https://www.musixmatch.com/) and [Deezer](https://deezer.com/).
* Author: [beningreenjam](https://github.com/beningreenjam).
* Forked from [s0ftik3/lyrics-api](https://github.com/s0ftik3/lyrics-api).
npm package: @green-id/meexr-badge
Description: Ce package permet d'intégrer un badge de notation environnementale dans vos projets React.
Author: Green-id
Latest version: 1.0.38

# React Website Carbon Badge

Ce package permet d'intégrer un badge de notation environnementale dans vos projets React.

## Installation

npm install meexr-badge


## Utilisation

Dans votre composant React, importez et utilisez `WebsiteCarbonBadge` comme suit :

```jsx
import React from 'react';
import { WebsiteCarbonBadge } from 'votre-nom-de-package';

class MyComponent extends React.Component {
  render() {
    return <WebsiteCarbonBadge co2="0.12" percentage="89" />;
  }
}
```
npm package: @greenberry/eslint-config
Description: ESLint and Prettier config for all things Greenberry.
Author: Greenberry Development
Latest version: 3.6.0

# Greenberry eslint-config v3

ESLint and Prettier bundle for all things Greenberry.

## Install

```bash
npm i -D  @greenberry/eslint-config
```

## Upgrade from v2.0.0
Remove redundant packages:
```bash
npm remove @greenberry/eslint-config eslint
```
Install the latest version eslint-config:
```bash
npm i -D @greenberry/eslint-config
```

## React
`package.json`:
```json
{
  "scripts": {
    "lint": "eslint src --fix"
  }
}
```

`.eslintrc`:
```json
{
  "extends": "@greenberry/eslint-config"
}
```

## NextJS
> ⚠️ Requires `eslint-config-next @11.1.4`

`package.json`:
```json
{
  "scripts": {
    "lint": "next lint --fix"
  }
}
```
}

`.eslintrc`:

```json
{
  "extends": ["next/core-web-vitals", "@greenberry/eslint-config"]
}
```
npm package: @greenberry/use-label-prefix
Description: Custom React Hook to prefix labels on Input fields
Author: Ramon Gebben
Latest version: 1.0.2

# `@greenberry/use-label-prefix`

[![coverage report](https://gitlab.com/greenberrynl/hooks/use-label-prefix/badges/master/coverage.svg)](https://gitlab.com/greenberrynl/hooks/use-label-prefix/commits/master)
[![pipeline status](https://gitlab.com/greenberrynl/hooks/use-label-prefix/badges/master/pipeline.svg)](https://gitlab.com/greenberrynl/hooks/use-label-prefix/commits/master)

## Why?

When generating a lot of input groups on one page it can get tedious to create a unique label/id for each input group.
However this is required when you want to keep semantics and accessibility functionalities.
This hook generates a prefix for your labels which persist over multiple updates and are unique per instance of the component.

## Installation

```bash
yarn add @greenberry/use-label-prefix
# or
npm i @greenberry/use-label-prefix
```

## Usage

```js
// Minimal example
const prefixed = useLabelPrefix('my-label');

// With larger prefix; defaults to 8
const prefixed2 = useLabelPrefix('my-label', 16);
```

**Inside a component**
```js
const MyInput = () => {
  const prefixedLabel = useLabelPrefix('my-label');

  return (
    <div>
      <label htmlFor={prefixedLabel}>
        Hello Prefix
      </label>
      <input id={prefixedLabel} type="text" />
    </div>
  );
};

```


## Notes

- When `NODE_ENV` is `test` no random string will be generated
npm package: @greenbot/cli
Description: An interactive package updater for npm based applications
Latest version: 0.34.1

# Greenbot

[![npm downloads](https://img.shields.io/npm/dt/@greenbot/cli.svg)](https://npmjs.org/@greenbot/cli)
![Version](https://img.shields.io/badge/version-0.34.1-blue)
![License](https://img.shields.io/badge/license-MIT-green)

> An interactive package updater for npm-based applications.

## Features

- 🎨 Beautiful web UI for dependency updates
- ⌨️ Fully keyboard accessible
- 🏗️ Supports multiple package managers: npm, yarn, pnpm
- 📦 Monorepo savvy: Automatically identifies your package structure

## Quick Start

### Run Greenbot with your favorite package manager

| Package Manager | Command                      |
| --------------- | ---------------------------- |
| npm             | `npx @greenbot@latest`       |
| pnpm            | `pnpx @greenbot/cli@latest`  |
| bun             | `bun x @greenbot/cli@latest` |

📌 For `yarn`, you'll need to install it globally:

```bash
yarn global add @greenbot/cli
@greenbot/cli
```

## Technical Details

### Version

Current Version: `0.34.1`

### Binaries

The CLI executable is located at `./bin/greenbot.cjs`

### Available Scripts

| Script        | Description                                      |
| ------------- | ------------------------------------------------ |
| `dev`         | Concurrently run Vite and the Node.js binary     |
| `build`       | Build the project using Vite                     |
| `serve`       | Preview the build                                |
| `check`       | Run type checks with Svelte                      |
| `postversion` | Amend the last commit and build after versioning |
| `release`     | Publish the package and push to Git              |
| `prepare`     | Install Husky hooks                              |
| `postinstall` | Run post-install script                          |

### Homepage & Source Code

- 🏠 [Homepage](https://github.com/alanrsoares/greenbot)
- 👾 [GitHub Repository](https://github.com/alanrsoares/greenbot)

## Screenshots

### CLI

![CLI Screenshot](https://github.com/alanrsoares/greenbot/assets/273334/487c276b-2266-439e-96e5-fbd7e658c4bd)

### Web UI

![Web UI Screenshot 1](https://github.com/alanrsoares/greenbot/assets/273334/66ddde3c-0844-4440-8295-9ba6ad8334f9)

![Web UI Screenshot 2](https://github.com/alanrsoares/greenbot/assets/273334/5d78ce0b-7f68-40e5-ae2d-d66994571059)

## License

This project is licensed under the terms of the MIT license.

## Acknowledgements

Special thanks to the following open-source projects that make Greenbot tick:

- [Svelte](https://svelte.dev/)
- [Express](https://expressjs.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Vite](https://vitejs.dev/)
- [Husky](https://github.com/typicode/husky)
- [DaisyUI](https://daisyui.com/)
- [Rambda](https://ramdajs.com/)
npm package: @greenbox-technologies/ayenama
Description: A program about greenbox technologies
Author: Ben Greenbox
Latest version: 1.0.0


# ayenama

Pause. Take a break. A program about taking breaks. Pause. Take a break. A broken program about taking breaks.

A good description could possibly describe how Ben Greenbox takes a break because this is their own personal reality.

How does Ben Greenbox see the world?

That is the break in the game that is known as their personal experience.

Do you take breaks?

That is a greenbox technology breakpoint.

You can thank Ben Greenbox for inventing this term and technology. This term and technique. It means your personal reality is an illusion and you're in a greenbox technology that allows you to add a greenscreen transparency device over your entire crown experience.

If you believe their is a futre, there is a technology called "immediate self perception" that allows you to perceive that as your now new greenbox technology.

It is a nightmare to manage. You have to create your own reality. You have to create your own greenbox existence field.

Ben Greenbox is here to give that to you.

You are now in a greenbox. You are welcome for using it.

You are welcome for being my greenscreen background capture device reading this readfback (feedback, reading, greedback, greenscreen, hello, screencapture technology overlay device of all of these simultaneous words)

You are welcome
npm package: @greencoast/logger
Description: A logger with some colors and timestamps depending on the logging level.
Author: Greencoast Studios
Latest version: 1.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

[![ci-build-status](https://img.shields.io/github/actions/workflow/status/greencoast-studios/node-logger/ci.yml?logo=github&label=build)](https://github.com/greencoast-studios/node-logger)
[![issues](https://img.shields.io/github/issues/greencoast-studios/node-logger?logo=github)](https://github.com/greencoast-studios/node-logger)
[![bundle-size](https://img.shields.io/bundlephobia/min/@greencoast/logger)](https://www.npmjs.com/package/@greencoast/logger)
[![version](https://img.shields.io/npm/v/@greencoast/logger?logo=npm)](https://www.npmjs.com/package/@greencoast/logger)
[![downloads-week](https://img.shields.io/npm/dw/@greencoast/logger?logo=npm)](https://www.npmjs.com/package/@greencoast/logger)
[![downloads-total](https://img.shields.io/npm/dt/@greencoast/logger?logo=npm)](https://www.npmjs.com/package/@greencoast/logger)

# @greencoast/logger

This is a small logging module that helps with a more organized message logging through color, logging type and timestamps. Used in [Greencoast Studios](https://github.com/greencoast-studios) packages and projects.

## Usage

### Installation

With `npm`:

``` text
npm install @greencoast/logger
```

or with `yarn`:

``` text
yarn add @greencoast/logger
```

### Importing the Package

``` js
const logger = require('@greencoast/logger');
import logger from '@greencoast/logger';
```

### Logging Messages

You can log multiple types of messages. Objects will be serialized and stack traces will be shown.

#### LOG

``` js
logger.log('message to log');
```

#### INFO

``` js
logger.info('message to log');
```

#### WARN

``` js
logger.warn('message to log');
```

#### ERROR

``` js
logger.error('message to log');
```

#### FATAL

``` js
logger.fatal('message to log');
```

#### DEBUG

``` js
logger.debug('message to log');
```

### Clear Console

You can clear the console with:

``` js
logger.clear();
```

## Author

This module was made by [Greencoast Studios](https://github.com/greencoast-studios).
npm package: @greendou/rollup-plugin-tslint
Description: Verify entry point and all imported files with TSLint
Author: Minocoko
Latest version: 0.1.26

# rollup-plugin-tslint 

[![Build][travis-img]][travis]
[![Coverage][coveralls-img]][coveralls]
[![JavaScript Style Guide][standard-img]][standard]
[![Downloads][rollup-plugin-tslint-dt-img]][rollup-plugin-tslint-pkg]
[![Version][rollup-plugin-tslint-v-img]][rollup-plugin-tslint-pkg]
[![Dependency][dependency-img]][dependency]
[![DevDependency][devDependency-img]][dependency]

[travis-img]: https://travis-ci.org/minocoko/rollup-plugin-tslint.svg
[travis]: https://travis-ci.org/minocoko/rollup-plugin-tslint
[coveralls-img]: https://coveralls.io/repos/github/minocoko/rollup-plugin-tslint/badge.svg
[coveralls]: https://coveralls.io/github/minocoko/rollup-plugin-tslint
[standard-img]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
[standard]: https://standardjs.com
[rollup-plugin-tslint-pkg]: https://www.npmjs.com/package/rollup-plugin-tslint
[rollup-plugin-tslint-dt-img]: https://img.shields.io/npm/dt/rollup-plugin-tslint.svg
[rollup-plugin-tslint-v-img]: https://img.shields.io/npm/v/rollup-plugin-tslint.svg
[dependency]: https://david-dm.org/minocoko/rollup-plugin-tslint
[dependency-img]: https://david-dm.org/minocoko/rollup-plugin-tslint/status.svg
[devDependency-img]: https://david-dm.org/minocoko/rollup-plugin-tslint/dev-status.svg
[rollup]: https://github.com/rollup/rollup
[tslint-config]: https://palantir.github.io/tslint/usage/configuration
[rollup-plugin-eslint]: https://github.com/TrySound/rollup-plugin-eslint

[Rollup] plugin to verify entry point and all imported files with TSLint.


## Install

```sh
npm i rollup-plugin-tslint -D
```


## Usage

```js
import { rollup } from 'rollup';
import tslint from 'rollup-plugin-tslint';

rollup({
    entry: 'main.js',
    plugins: [
        tslint({ /* your options */ })
    ]
});
```


## Options

See more options here [tslint-config].

### throwError

Type: `boolean`  
Default: `false`

If true, will throw an error if any warnings or errors were found.

### include

Type: `array` or `string`  
Default: `[]`

A single file, or array of files, to include when linting.

### exclude

Type: `array` or `string`  
Default: `node_modules/**`

A single file, or array of files, to exclude when linting.

### formatter

Type: `function` or `string`  
Default: `stylish`

Custom error formatter or the name of a built-in formatter.

### tsConfigSearchPath


# License

MIT © [Minocoko](mailto:minocoko@outlook.com)

# Acknowledges
Initially this plugin were inspired by [rollup-plugin-eslint], thanks a lot.
npm package: @greenestgoat/lite-vimeo-embed
Description: A faster vimeo embed.
Author: Wesley Luyten
Latest version: 1.0.0

> 🙋 Using YouTube? Check out the original [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed).  
> 🦾 Need more power? Check out [playerx](https://github.com/playerxo/playerx).

# Lite Vimeo Embed

> #### Renders faster than a sneeze.

Provide videos with a supercharged focus on visual performance.
This custom element renders just like the real thing but approximately 224X faster.

## Comparison

| Normal `<iframe>` Vimeo embed |  `lite-vimeo` |
|---|---|
|  ![Screen Shot 2019-11-03 at 5 23 50 PM](https://user-images.githubusercontent.com/39191/68095560-5c930d00-fe5f-11e9-8104-e73e77a21287.png)   ![Screen Shot 2019-11-03 at 5 21 05 PM](https://user-images.githubusercontent.com/39191/68095562-5d2ba380-fe5f-11e9-8b5f-18f451b0716d.png)  ![Screen Shot 2019-11-03 at 5 19 35 PM](https://user-images.githubusercontent.com/39191/68095565-5d2ba380-fe5f-11e9-835d-85d37df71f52.png)  | ![Screen Shot 2019-11-03 at 5 23 27 PM](https://user-images.githubusercontent.com/39191/68095561-5d2ba380-fe5f-11e9-9393-e2206a64c8bf.png) ![Screen Shot 2019-11-03 at 5 20 55 PM](https://user-images.githubusercontent.com/39191/68095563-5d2ba380-fe5f-11e9-8f9a-f5c4a774cd56.png)  ![Screen Shot 2019-11-03 at 5 20 16 PM](https://user-images.githubusercontent.com/39191/68095564-5d2ba380-fe5f-11e9-908f-7e12eab8b2ad.png) |

## Basic usage

To use the custom embed you will need to:

1. Include the script
1. Use the element `lite-vimeo` markup and scripting
1. Be happy that you're providing a better user experience to your visitors

```html
<!-- Include the custom element script -->
<script type="module" src="https://cdn.jsdelivr.net/npm/lite-vimeo-embed/+esm"></script>

<!-- Use the element. You may define uses before the scripts are parsed and executed. -->
<lite-vimeo videoid="357274789"></lite-vimeo>
```

## Pro-usage

Use this as your HTML, load the script asynchronously, and let the JS progressively enhance it.

```html
<lite-vimeo videoid="357274789" style="background-image: url('https://i.vimeocdn.com/video/810965406.webp?mw=1600&mh=900&q=70');">
  <div class="ltv-playbtn"></div>
</lite-vimeo>
```