open-index/open-npm huggingface dataset:
npm package: @ruabick/create-vlib
Description: @ruabick's cli
Author: dewfall123
Latest version: 0.3.3

# @ruabick/create-vlib

快速创建 Vue 组件库的脚手架。

# Features

- 基于[`ruabick`](https://github.com/dewfall123/ruabick.git)一键启动开发环境，一键生成文档。
- 基于`vite`一键打包。
- 使用[`np`](https://github.com/sindresorhus/np)发布版本（非常 nice 的发布工具）。
- 使用`gh-pages`一键发布 github.io 文档。
- 集成`eslint` `prettier` `ls-lint` 等 lint 工具。
- 集成`husky` `conventional-changelog-cli`等工具。

# 使用

执行命令 `yarn create @ruabick/vlib`。
npm package: @ruabick/md-demo-plugins
Description: `@ruabick/md-demo-plugins` 与 `@ruabick/vitepress-demo-block` 配合使用在 VirePress 里面支持`demo-block`。
Author: dewfall123
Latest version: 0.3.3

`@ruabick/md-demo-plugins` 与 `@ruabick/vitepress-demo-block` 配合使用在 VirePress 里面支持`demo-block`。

### 步骤 1: 增加 markdown 插件

安装插件 `pnpm add @ruabick/md-demo-plugins -D`

```js
// .vitepress/config.js
import { applyPlugins } from '@ruabick/md-demo-plugins';

export default defineConfig({
  markdown: {
    config: (md) => {
      applyPlugins(md);
    },
  },
});
```

### 步骤 2: 注册 demo 组件

安装插件 `pnpm add @ruabick/vitepress-demo-block -D`

```js
// docs/.vitepress/theme/index.ts
import DemoBlock from '@ruabick/vitepress-demo-block';
import '@ruabick/vitepress-demo-block/dist/style.css';

export default {
  ...DefaultTheme,
  enhanceApp({ app, router, siteData }) {
    app.component('demo', DemoBlock);
  },
};
```

### 步骤 3: 修改 VitePress `Code Blocks` 样式 （可选）

`VitePress` 默认 `Code Blocks` 是黑色，与 demo 样式不太符合，所以建议修改 `Code Blocks` 样式。

[`Code Blocks` 样式在这里](https://github.com/dewfall123/ruabick/blob/master/packages/doc-site/docs/.vitepress/theme/var.css)
npm package: @ruabick/vite-plugin-gen-api-doc
Description: > 基于`vue-docgen-api`项目, 参考了很多[arco-design-vue](https://github.com/arco-design/arco-design-vue/tree/main/packages/arco-vue-scripts)的代码。
Author: dewfall123
Latest version: 0.3.3

# @ruabick/vite-plugin-gen-api-doc

> 基于`vue-docgen-api`项目, 参考了很多[arco-design-vue](https://github.com/arco-design/arco-design-vue/tree/main/packages/arco-vue-scripts)的代码。

## 开始使用

### 步骤 1

安装插件 `pnpm add @ruabick/vite-plugin-gen-api-doc -D`

### 步骤 2

`.vitepress/config.js`

```js
import { genApiDoc } from '@ruabick/vite-plugin-gen-api-doc';

export default defineConfig({
  // ...
  vite: {
    plugins: [genApiDoc()],
  },
});
```

## 示例

注释用参考[vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api)
npm package: @ruabick/vite-plugin-gen-temp
Description: 像 dumi 一样使用 `VitePress`，此插件包含一个`initial-scan`脚本和一个vite插件，需要配合使用。
Author: dewfall123
Latest version: 0.3.3

##

像 dumi 一样使用 `VitePress`，此插件包含一个`initial-scan`脚本和一个vite插件，需要配合使用。


## 参考示例

示例项目 https://github.com/dewfall123/ruabick/tree/master/packages/doc-site

示例站点 https://dewfall123.github.io/ruabick/guide/

## 使用步骤

### 步骤 1

`pnpm add @ruabick/vite-plugin-gen-temp -D`

### 步骤 2

修改 package.json 脚本。

::: warning
注意`vitepress dev .docs` 是`.docs`而不是`docs`，因为`.docs`是脚本处理后的目录。
:::

```json
{
  "dev": "initial-scan && vitepress dev .docs"
}
```

### 步骤 3

增加插件配置

```js
// .vitepress/config.js
import { genTemp } from '@ruabick/vite-plugin-gen-temp';

export default defineConfig({
  ...
  vite: {
    plugins: [genTemp()],
  }
  ...
})
```
npm package: @ruabick/vitepress-demo-block
Description: `@ruabick/md-demo-plugins` 与 `@ruabick/vitepress-demo-block` 配合使用在 VirePress 里面支持`demo-block`。
Latest version: 0.3.3

`@ruabick/md-demo-plugins` 与 `@ruabick/vitepress-demo-block` 配合使用在 VirePress 里面支持`demo-block`。

### 步骤 1: 增加 markdown 插件

安装插件 `pnpm add @ruabick/md-demo-plugins -D`

```js
// .vitepress/config.js
import { applyPlugins } from '@ruabick/md-demo-plugins';

export default defineConfig({
  markdown: {
    config: (md) => {
      applyPlugins(md);
    },
  },
});
```

### 步骤 2: 注册 demo 组件

安装插件 `pnpm add @ruabick/vitepress-demo-block -D`

```js
// docs/.vitepress/theme/index.ts
import DemoBlock from '@ruabick/vitepress-demo-block';
import '@ruabick/vitepress-demo-block/dist/style.css';

export default {
  ...DefaultTheme,
  enhanceApp({ app, router, siteData }) {
    app.component('demo', DemoBlock);
  },
};
```

### 步骤 3: 修改 VitePress `Code Blocks` 样式 （可选）

`VitePress` 默认 `Code Blocks` 是黑色，与 demo 样式不太符合，所以建议修改 `Code Blocks` 样式。

[`Code Blocks` 样式在这里](https://github.com/dewfall123/ruabick/blob/master/packages/doc-site/docs/.vitepress/theme/var.css)
npm package: @ruahx/mic-recorder-to-mp3-vite
Description: Vite-compatible mic recorder with mp3 encoding
Author: RuahX Co.
Latest version: 2.3.0

# Microphone Recorder to Mp3

Record your microphone audio input and get an ```audio/mp3``` file in the end.

# Install

## Yarn

```bash
yarn add mic-recorder-to-mp3
```

## npm

```bash
npm install mic-recorder-to-mp3
```

## CDN Usage

You can add via CDN using the address: [https://unpkg.com/mic-recorder-to-mp3@2.2.1](https://unpkg.com/mic-recorder-to-mp3@2.2.1). You can find the minified version in the same address, ex: [https://unpkg.com/mic-recorder-to-mp3@2.2.1/dist/index.min.js](https://unpkg.com/mic-recorder-to-mp3@2.2.1/dist/index.min.js)

**About the version in URL**: Change the URL version to any of our releases, or use https://unpkg.com/mic-recorder-to-mp3 to automatically use the latest version.

# Development

- Watch for changes:

```bash
npm run watch
```

- Regular build:

```bash
npm run build
```

# How to use

```js
const MicRecorder = require('mic-recorder-to-mp3');

// New instance
const recorder = new MicRecorder({
  bitRate: 128
});

// Start recording. Browser will request permission to use your microphone.
recorder.start().then(() => {
  // something else
}).catch((e) => {
  console.error(e);
});

// Once you are done singing your best song, stop and get the mp3.
recorder
.stop()
.getMp3().then(([buffer, blob]) => {
  // do what ever you want with buffer and blob
  // Example: Create a mp3 file and play
  const file = new File(buffer, 'me-at-thevoice.mp3', {
    type: blob.type,
    lastModified: Date.now()
  });

  const player = new Audio(URL.createObjectURL(file));
  player.play();

}).catch((e) => {
  alert('We could not retrieve your message');
  console.log(e);
});
```

- Check the [samples](https://github.com/closeio/mic-recorder-to-mp3/tree/master/samples) folder for more examples.

- [Live example on jsfiddle](https://jsfiddle.net/8u5fbpx6/1/)

## Lamejs Notice

This library uses lamejs as a direct dependency. We build our releases with [lamejs](https://github.com/zhuker/lamejs/) built-in, so you don't need to add another dependency.

Thanks to **@zhuker** for writing the lamejs library.

# License

MIT
npm package: @ruan-cat/domains
Description: 为 ruancat6312.top 和 ruan-cat.com 两个域名，提供预设好的常量。旨在于管理全部的域名，便于查询和使用。
Author: ruan-cat
Latest version: 2.3.0

# 阮喵喵全部的域名列表

<!-- automd:badges color="yellow" name="@ruan-cat/domains" -->

[![npm version](https://img.shields.io/npm/v/@ruan-cat/domains?color=yellow)](https://npmjs.com/package/@ruan-cat/domains)
[![npm downloads](https://img.shields.io/npm/dm/@ruan-cat/domains?color=yellow)](https://npm.chart.dev/@ruan-cat/domains)

<!-- /automd -->

为 `ruancat6312.top` 和 `ruan-cat.com` 两个域名，提供预设好的常量。旨在于管理全部的域名，便于查询和使用。

## Install

<!-- automd:pm-install name="@ruan-cat/domains" -->

```sh
# ✨ Auto-detect
npx nypm install @ruan-cat/domains

# npm
npm install @ruan-cat/domains

# yarn
yarn add @ruan-cat/domains

# pnpm
pnpm add @ruan-cat/domains

# bun
bun install @ruan-cat/domains

# deno
deno install npm:@ruan-cat/domains
```

<!-- /automd -->
npm package: @ruan-cat/generate-code-workspace
Description: 根据 pnpm-workspace.yaml 配置，生成vscode的code-workspace工作区文件。
Author: ruan-cat
Latest version: 0.8.0

# 生成工作区文件

<!-- automd:badges color="yellow" name="@ruan-cat/generate-code-workspace" -->

[![npm version](https://img.shields.io/npm/v/@ruan-cat/generate-code-workspace?color=yellow)](https://npmjs.com/package/@ruan-cat/generate-code-workspace)
[![npm downloads](https://img.shields.io/npm/dm/@ruan-cat/generate-code-workspace?color=yellow)](https://npm.chart.dev/@ruan-cat/generate-code-workspace)

<!-- /automd -->

本库用于生成工作区文件。

## 安装

<!-- automd:pm-install name="@ruan-cat/generate-code-workspace" dev -->

```sh
# ✨ Auto-detect
npx nypm install -D @ruan-cat/generate-code-workspace

# npm
npm install -D @ruan-cat/generate-code-workspace

# yarn
yarn add -D @ruan-cat/generate-code-workspace

# pnpm
pnpm add -D @ruan-cat/generate-code-workspace

# bun
bun install -D @ruan-cat/generate-code-workspace

# deno
deno install --dev npm:@ruan-cat/generate-code-workspace
```

<!-- /automd -->

本库应当作为开发环境依赖。

本库将使用 `tsx` 完成对 ts 脚本的运行，故需要安装 `tsx` 作为对等依赖。

## 使用方式

### 函数用法

<details>

<summary>
函数用法
</summary>

```ts
// scripts/generate.code-workspace.ts
import { generateCodeWorkspace } from "@ruan-cat/generate-code-workspace";
generateCodeWorkspace("monorepo单仓");
```

```json
{
	"scripts": {
		"code-workspace:create": "tsx ./scripts/generate.code-workspace.ts"
	}
}
```

</details>

### 命令行传参

```ts
// scripts/generate.code-workspace.ts
import "@ruan-cat/generate-code-workspace";
```

```json
{
	"scripts": {
		"code-workspace:create": "tsx ./scripts/generate.code-workspace.ts --name=monorepo单仓"
	}
}
```

## 更新日志

[CHANGELOG.md](./CHANGELOG.md)

<!-- 尝试触发部署 -->
npm package: @ruan-cat/utils
Description: 阮喵喵工具集合。默认提供js文件，也直接提供ts文件。
Author: ruan-cat
Latest version: 4.25.0

---
order: 10
dir:
  order: 10
---

# 工具包

<!-- automd:badges color="yellow" name="@ruan-cat/utils" -->

[![npm version](https://img.shields.io/npm/v/@ruan-cat/utils?color=yellow)](https://npmjs.com/package/@ruan-cat/utils)
[![npm downloads](https://img.shields.io/npm/dm/@ruan-cat/utils?color=yellow)](https://npm.chart.dev/@ruan-cat/utils)

<!-- /automd -->

这是阮喵喵开发的工具包，提供了一些工具函数。

## Install

<!-- automd:pm-install name="@ruan-cat/utils" -->

```sh
# ✨ Auto-detect
npx nypm install @ruan-cat/utils

# npm
npm install @ruan-cat/utils

# yarn
yarn add @ruan-cat/utils

# pnpm
pnpm add @ruan-cat/utils

# bun
bun install @ruan-cat/utils

# deno
deno install npm:@ruan-cat/utils
```

<!-- /automd -->
npm package: @ruan-cat/vite-plugin-ts-alias
Description: 将 tsconfig.paths 配置转换成 vite 的 alias 路径别名。
Author: ruan-cat
Latest version: 0.3.0

# @ruan-cat/vite-plugin-ts-alias

<!-- automd:badges color="yellow" name="@ruan-cat/vite-plugin-ts-alias" -->

[![npm version](https://img.shields.io/npm/v/@ruan-cat/vite-plugin-ts-alias?color=yellow)](https://npmjs.com/package/@ruan-cat/vite-plugin-ts-alias)
[![npm downloads](https://img.shields.io/npm/dm/@ruan-cat/vite-plugin-ts-alias?color=yellow)](https://npm.chart.dev/@ruan-cat/vite-plugin-ts-alias)

<!-- /automd -->

将 tsconfig.paths 配置转换成 vite 的 alias 路径别名。

> [!CAUTION]
> 这个包是基于 [Codpoe/vite-plugin-ts-alias](https://github.com/Codpoe/vite-plugin-ts-alias) 仓库的代码进行修改和增强的，**不是作者原创的包**。
>
> **主要改进**：
>
> - ✅ 增加了更详细的错误提示
> - ✅ 优化了类型定义
> - ✅ 改进了错误处理机制
>
> **原始仓库**：[Codpoe/vite-plugin-ts-alias](https://github.com/Codpoe/vite-plugin-ts-alias)

## 安装

<!-- automd:pm-install name="@ruan-cat/vite-plugin-ts-alias" dev -->

```sh
# ✨ Auto-detect
npx nypm install -D @ruan-cat/vite-plugin-ts-alias

# npm
npm install -D @ruan-cat/vite-plugin-ts-alias

# yarn
yarn add -D @ruan-cat/vite-plugin-ts-alias

# pnpm
pnpm add -D @ruan-cat/vite-plugin-ts-alias

# bun
bun install -D @ruan-cat/vite-plugin-ts-alias

# deno
deno install --dev npm:@ruan-cat/vite-plugin-ts-alias
```

<!-- /automd -->

> [!NOTE]
> 需要确保项目中已安装 `vite`。

## 使用方法

### 基本用法

```typescript
import { defineConfig } from "vite";
import { tsAlias } from "@ruan-cat/vite-plugin-ts-alias";

export default defineConfig({
	plugins: [tsAlias()],
});
```

### 自定义 tsconfig 文件名

```typescript
import { defineConfig } from "vite";
import { tsAlias } from "@ruan-cat/vite-plugin-ts-alias";

export default defineConfig({
	plugins: [
		tsAlias({
			tsConfigName: "tsconfig.path.json",
		}),
	],
});
```

## 功能特性

- 🔄 **自动转换**: 自动读取 tsconfig.json 中的 paths 配置并转换为 vite alias
- 📁 **路径解析**: 支持相对路径和绝对路径的解析
- ⚡ **性能优化**: 在 vite 构建的 pre 阶段执行，确保路径别名正确解析
- 🛠️ **类型安全**: 完整的 TypeScript 类型支持

## 配置说明

### tsconfig.json 示例

```json
{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@/*": ["src/*"],
			"@components/*": ["src/components/*"],
			"@utils/*": ["src/utils/*"]
		}
	}
}
```

### 转换结果

上述配置会被转换为以下 vite alias：

```typescript
{
  "@": "/path/to/your/project/src",
  "@components": "/path/to/your/project/src/components",
  "@utils": "/path/to/your/project/src/utils"
}
```

## API

### tsAlias(options?)

#### 参数

- `options` (可选): 配置选项
  - `tsConfigName` (可选): tsconfig 文件名，默认为 `'tsconfig.json'`

#### 返回值

返回一个 vite 插件对象。

## 注意事项

1. 这是一个开发环境依赖，建议使用 `-D` 参数安装到 `devDependencies` 中
2. 确保你的 tsconfig.json 中配置了 `baseUrl` 和 `paths`
3. 插件会在 vite 的 `pre` 阶段执行，确保路径别名在构建开始前就被正确设置
4. 如果找不到 tsconfig.json 或缺少必要的配置，插件会输出错误信息但不会中断构建

## 许可证

MIT
npm package: @ruan-cat/vitepress-demo-plugin
Description: 阮喵喵自己照抄别人vitepress-demo-plugin的插件，纯粹自用。
Author: ruan-cat
Latest version: 0.3.0

<div align="center">
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/vitepress-demo-plugin/logo.svg" width="160px" style="margin-bottom: 12px;" />

<p align="center">
  <h2>vitepress-demo-plugin</h2>
  <a href="https://vitepress-demo.fe-dev.cn">在线文档</a>
</p>

[![NPM version](https://img.shields.io/npm/v/vitepress-demo-plugin.svg)](https://www.npmjs.com/package/vitepress-demo-plugin)
[![GITHUB star](https://img.shields.io/github/stars/zh-lx/vitepress-demo-plugin?style=flat&label=%E2%AD%90%EF%B8%8F%20stars)](https://github.com/zh-lx/vitepress-demo-plugin)
[![MIT-license](https://img.shields.io/npm/l/vitepress-demo-plugin.svg)](https://opensource.org/licenses/MIT)
[![GITHUB-language](https://img.shields.io/github/languages/top/zh-lx/vitepress-demo-plugin?logoColor=purple&color=purple)](https://github.com/zh-lx/vitepress-demo-plugin)

</div>

<hr />

## 📖 介绍

`vitepress-demo-plugin` 是一个支持在 Vitepress 构建的站点中展示并预览代码 Demo 的插件，支持 `vue/react/html` 等多种语法组件的预览。

[在线查看效果](https://vitepress-demo.fe-dev.cn/components/antd.html)

- 展示 React 组件：

  <img src="https://github.com/user-attachments/assets/f7d90222-c38b-452d-b4fa-85310f0bdedb" width="700" />

- 展示 Vue 组件：

  <img src="https://github.com/user-attachments/assets/f8fbb33f-a42d-43ce-b9cb-42c1a6af8422" width="700" />

## 🚀 安装

```shell
npm i vitepress-demo-plugin -D
# or
yarn add vitepress-demo-plugin -D
# or
pnpm add vitepress-demo-plugin -D
```

## 🌈 使用

1. 引入插件

```ts
import { defineConfig } from "vitepress";
import { vitepressDemoPlugin } from "vitepress-demo-plugin";
import path from "path";

export default defineConfig({
	// other configs...
	markdown: {
		config(md) {
			md.use(vitepressDemoPlugin);
		},
	},
});
```

2. 展示 Demo

现在你可以在 markdown 中通过 `<demo />` 组件展示你的 demo 了：

```html
<!-- 展示 vue demo -->
<demo vue="../demos/demo.vue" />

<!-- 展示 react demo -->
<demo react="../demos/demo.tsx" />

<!-- 展示 html demo -->
<demo html="../demos/demo.html" />
```

## 📧 交流与反馈

任何使用问题可以加入微信群或者添加作者微信 `zhoulx1688888` 进行咨询与反馈:

<div style="display: flex; column-gap: 16px; row-gap: 16px; flex-wrap: wrap;">
  <img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/vitepress-demo-plugin/wx-group.jpg" width="200" height="272" />
  <img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/wx-qrcode.jpg" width="200" height="272" />
</div>
npm package: @ruan-cat/vitepress-preset-config
Description: 用于给大多数的vitepress项目提供一个预设的配置文件。
Author: ruan-cat
Latest version: 3.2.0

# @ruan-cat/vitepress-preset-config

<!-- automd:badges color="yellow" name="@ruan-cat/vitepress-preset-config" -->

[![npm version](https://img.shields.io/npm/v/@ruan-cat/vitepress-preset-config?color=yellow)](https://npmjs.com/package/@ruan-cat/vitepress-preset-config)
[![npm downloads](https://img.shields.io/npm/dm/@ruan-cat/vitepress-preset-config?color=yellow)](https://npm.chart.dev/@ruan-cat/vitepress-preset-config)

<!-- /automd -->

用于给大多数的 vitepress 项目提供一个预设的配置文件。

## 安装

<!-- automd:pm-install name="@ruan-cat/vitepress-preset-config" dev -->

```sh
# ✨ Auto-detect
npx nypm install -D @ruan-cat/vitepress-preset-config

# npm
npm install -D @ruan-cat/vitepress-preset-config

# yarn
yarn add -D @ruan-cat/vitepress-preset-config

# pnpm
pnpm add -D @ruan-cat/vitepress-preset-config

# bun
bun install -D @ruan-cat/vitepress-preset-config

# deno
deno install --dev npm:@ruan-cat/vitepress-preset-config
```

<!-- /automd -->

## 使用方法

```typescript
import { defineConfig } from "vitepress";
import { config } from "@ruan-cat/vitepress-preset-config";

export default defineConfig(config);
```

## 许可证

MIT
npm package: @ruan-cat/vuepress-preset-config
Description: 用于给大多数的vuepress项目提供一个预设的配置文件。
Author: ruan-cat
Latest version: 0.4.0

# @ruan-cat/vuepress-preset-config

<!-- automd:badges color="yellow" name="@ruan-cat/vuepress-preset-config" -->

[![npm version](https://img.shields.io/npm/v/@ruan-cat/vuepress-preset-config?color=yellow)](https://npmjs.com/package/@ruan-cat/vuepress-preset-config)
[![npm downloads](https://img.shields.io/npm/dm/@ruan-cat/vuepress-preset-config?color=yellow)](https://npm.chart.dev/@ruan-cat/vuepress-preset-config)

<!-- /automd -->

阮喵喵的 vuepress 项目预设，为了快速初始化 vuepress 文档项目，故提供一系列 vuepress 的项目预设。

## 安装

<!-- automd:pm-install name="@ruan-cat/vuepress-preset-config" dev -->

```sh
# ✨ Auto-detect
npx nypm install -D @ruan-cat/vuepress-preset-config

# npm
npm install -D @ruan-cat/vuepress-preset-config

# yarn
yarn add -D @ruan-cat/vuepress-preset-config

# pnpm
pnpm add -D @ruan-cat/vuepress-preset-config

# bun
bun install -D @ruan-cat/vuepress-preset-config

# deno
deno install --dev npm:@ruan-cat/vuepress-preset-config
```

<!-- /automd -->

## 路线图

这两个依赖仍旧要安装，否则用户端无法启动，会报错。

```json
{
	"@vuepress/bundler-vite": "2.0.0-rc.15",
	"vuepress": "2.0.0-rc.15"
}
```