open-index/open-npm huggingface dataset:
npm package: @hongvanpc10/rehype-embed
Description: Add improved video syntax: support embeds videos from youtube links.
Author: Hong Van
Latest version: 1.0.21

# @hongvanpc10/rehype-embed

Add improved video syntax: support embeds videos from youtube links.

## Installation

This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c): Node 12+ is needed to use it and it must be import instead of require.

```bash
npm install @hongvanpc10/rehype-embed
```

Or

```bash
yarn add @hongvanpc10/rehype-embed
```

## Usage

```js
import { unified } from 'unified'
import remark2rehype from 'remark-rehype'
import remarkParse from 'remark-parse'
import rehypeEmbed from '@hongvanpc10/rehype-embed'
import stringify from 'rehype-stringify'

const string = `{@embed:https://www.youtube.com/watch?v=xsI0j3pO7vc}`

const htmlStr = unified()
  .use(remarkParse)
  .use(remark2rehype)
  .use(rehypeEmbed)
  .use(stringify)
  .processSync(string)
  .toString()
```

Output:

```html
<p>
  <iframe
    src="https://www.youtube.com/embed/xsI0j3pO7vc"
    style="width: 100%; aspect-ratio: 16 / 9; border-radius: 0.75rem"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen=""
  ></iframe>
</p>
```

## Custom Style

```js
const string = `{@embed:https://www.youtube.com/watch?v=xsI0j3pO7vc}`
const htmlStr = unified()
  .use(remarkParse)
  .use(remark2rehype)
  .use(rehypeEmbed, {
    style: 'width: 100%; aspect-ratio: 16 / 9; border-radius: 20px;',
    class: 'iframe'
  })
  .use(stringify)
  .processSync(string)
  .toString()
```

Output:

```html
<p>
  <iframe
    src="https://www.youtube.com/embed/xsI0j3pO7vc"
    style="width: 100%; aspect-ratio: 16 / 9; border-radius: 20px"
    class="iframe"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen=""
  ></iframe>
</p>
```

## Options

| Option | Type | Default |
| --- | --- | --- |
| **style** | `string` | `'width: 100%; aspect-ratio: 16 / 9; border-radius: 0.75rem'` |
| **allow** | `string` | `'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'` |
| **allowfullscreen** | `boolean` | `true` |
| **class** | `string` | |

## License

MIT © [Hong Van](https://github.com/hongvanpc10)
npm package: @hongvanpc10/tailwindcss-12-column-grid
Description: A plugin that provides utilities for making layout easier based on 12-column grids to design web pages.
Author: Hong Van
Latest version: 1.1.1

# @hongvanpc10/tailwindcss-12-column-grid

A plugin that provides utilities for making layout easier based on 12-column grids to design web pages.

## Installation

```shell
npm i @hongvanpc10/tailwindcss-12-column-grid -D
```

or

```shell
yarn add @hongvanpc10/tailwindcss-12-column-grid --dev
```

Then add the plugin to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
	theme: {
		// ...
	},
	plugins: [
		require('@hongvanpc10/tailwindcss-12-column-grid'),
		// ...
	],
}
```

## Usage

Here is example:

```html
<div class="row">
	<div class="col-6">
		<div class="bg-blue-500 h-60"></div>
	</div>
	<div class="col-6">
		<div class="bg-blue-500 h-60"></div>
	</div>
</div>
```

To specify gutter, use class `gutter-{size}`, default is 1.5rem.

| Class       | Spacing   |
| ----------- | --------- |
| `gutter-xs` | `0.75rem` |
| `gutter-sm` | `1rem`    |
| `gutter-md` | `1.25rem` |
| `gutter-nm` | `1.5rem`  |
| `gutter-lg` | `1.75rem` |
| `gutter-xl` | `2rem`    |

Example:

```html
<div class="row gutter-sm">
	<div class="col-6">
		<div class="bg-blue-500 h-60"></div>
	</div>
	<div class="col-6">
		<div class="bg-blue-500 h-60"></div>
	</div>
</div>
```

## Configuration

You can configure gutter which values are generated by this plugin under the `gutter` key in your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			gutter: {
				xs: '0.75rem',
				sm: '1rem',
				md: '1.25rem',
				lg: '1.75rem',
				xl: '2rem',
			},
		},
	},
}
```
npm package: @hongvanpc10/tailwindcss-responsive
Description: A plugin that provides utilities for responsive: show and hide element.
Author: Hong Van
Latest version: 1.0.3

# @hongvanpc10/tailwindcss-responsive

A plugin that provides utilities for responsive: show and hide element.

## Installation

Install the plugin from npm:

```sh
npm install -D @hongvanpc10/tailwindcss-responsive
```

Or yarn:

```sh
yarn add @hongvanpc10/tailwindcss-responsive --dev
```

Then add the plugin to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@hongvanpc10/tailwindcss-responsive'),
    // ...
  ],
}
```

## Usage

Use the `show-on-{breakpoint}` and `hide-on-{breakpoint}` utilities to specify when element should be shown or hidden

## Examples

To show element on xl devices and higher:

```html
<p class="show-on-xl">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum
  odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit
  delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas
  voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>
```

Result:

```css
@media (max-width: 1280px) {
  .show-on-xl {
    display: none;
  }
}
```

To hide element on xl devices and higher:

```html
<p class="hide-on-xl">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum
  odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit
  delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas
  voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>
```

Result:

```css
@media (min-width: 1280px) {
  .hide-on-xl {
    display: none;
  }
}
```

To show element from md devices to lg devices:

```html
<p class="show-on-md hide-on-lg">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum
  odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit
  delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas
  voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>
```

## Configuration

You can configure which breakpoints and value are generated by this plugin under the `breakpoint` key in your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      breakpoints: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
    },
  },
}
```
npm package: @hongweifei/euv
Description: euv
Author: hongweifei
Latest version: 0.2.4

# EUV

一时兴起写的

## 暂时已实现

- 数据绑定
- 计算属性
- 指令
- 元素引用

### 内置指令

- e-show 指令
- e-bind: 或 : 单向绑定
- e-model: 双向绑定
- e-on: 或 @ 事件绑定
- e-if 条件渲染（待开发）
- e-for 循环渲染（待开发）
npm package: @hongxianzhi/seedream-image-mcp
Description: 基于火山引擎 SeeDream 模型的 MCP 图片生成工具，支持在 Cursor、Claude Desktop 等客户端中使用
Author: PixelArk Team
Latest version: 1.0.3

# SeeDream Image MCP

基于火山引擎 SeeDream 模型的 MCP (Model Context Protocol) 图片生成工具。

## ✨ 特性

- 🎨 使用火山引擎 SeeDream 4.0 模型生成高质量图片
- 🔧 支持自定义尺寸、智能参考图等
- 📝 无需编写复杂提示词，AI自动根据需求生成生图提示词
- 🔌 MCP 协议支持，可在 Cursor、Claude Desktop 等客户端中使用

## 📺 演示

<video src="https://github.com/user-attachments/assets/2b82a9d4-7799-4625-a140-2a48845b2e4a" autoplay muted loop playsinline controls width="100%" height="auto"></video>

## 🚀 快速开始

### 1. 获取火山引擎 API Key

前往 [火山引擎->火山方舟控制台](https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey) 开通服务并申请 API Key。

### 2. 使用 npx 运行

```bash
npx @hongxianzhi/seedream-image-mcp --ark-key=YOUR_API_KEY [--ark-model=MODEL_NAME] [--ark-endpoint=REQUEST_ENDPOINT]
```

**参数说明：**
- `--ark-key` (必需) - 火山引擎 API Key
- `--ark-model` (可选) - 模型名称，默认 `doubao-seedream-4-5-251128`
- `--ark-endpoint` (可选) - 请求地址，默认 `https://ark.cn-beijing.volces.com/api/v3/images/generations`

### 3. 在 Cursor、Claude Desktop 中配置

编辑 `Cursor MCP配置` 或 `claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "seedream-image": {
      "command": "npx",
      "args": ["@hongxianzhi/seedream-image-mcp", "--ark-key=YOUR_API_KEY", "--ark-model=doubao-seedream-4-5-251128", "--ark-endpoint=https://ark.cn-beijing.volces.com/api/v3/images/generations"]
    }
  }
}
```

## 📖 使用示例

在 AI Agent 工具中，你可以这样使用：

```
为这个页面添加合适的图片，避免过于单调
```

AI 会自动调用工具完成生成。

## 📌 注意事项

**图片链接时效性**：本项目使用火山引擎原始 API，生成的图片链接通常在 24 小时后失效。如果你需要长期保存图片，请及时下载到本地。

## 🔄 两种使用方式

你可以根据自己的需求选择：

### 方式一：本地运行 🔧
- 需要自己申请火山引擎 API key
- 图片链接 24 小时后失效，需下载到本地使用。

### 方式二：云端版本 ✨
- ✅ 无需申请 API key，开箱即用
- ✅ 图片支持永久存储在 CDN
- ✅ 支持 webp 压缩、背景移除、快速并发生成多张图片等功能
- ✅ 提供一定的免费额度
- ✅ 量大时价格更优惠

👉 了解云端版本：[https://mcp.pixelark.art](https://mcp.pixelark.art)

---


## 🛠️ 开发

### 安装依赖

```bash
npm install
```

### 编译项目

```bash
npm run build
```

### 全局安装

如需全局安装此包以便在命令行中使用，可执行以下步骤：

```bash
# 1. 正常编译
npm run build

# 2. 拷贝 dist/index.js 到全局 npm 目录
cp dist/index.js "$(npm prefix -g)/lib/node_modules/seedream-image-mcp/dist/index.js"

# 3. 创建符号链接到全局目录
ln -sf "$(npm prefix -g)/lib/node_modules/seedream-image-mcp/dist/index.js" "$(npm prefix -g)/bin/seedream-image-mcp"
```

或者使用 npm link（推荐）：

```bash
npm run build
npm link
```

## 📄 许可证

MIT

## 🔗 相关链接

- [云端版本](https://mcp.pixelark.art)
- [火山引擎 SeeDream](https://www.volcengine.com/docs/ark/doubao-seedream)
- [MCP 协议](https://modelcontextprotocol.io)