open-index/open-npm huggingface dataset:
npm package: @penglei188288/clampjs
Description: 文本超出省略、基于js的实现方式
Author: penglei
Latest version: 2.0.0

<h2 align="center">@penglei188288/clampjs</h2>
<p align="center"><b>@penglei188288/clampjs 能够在HTML元素内容过长时在后面添加省略标志。提供原生-webkit-line-clamp和js实现两种实现方式。</b</p>

## 安装

```shell
npm install @penglei188288/clampjs --save
# or
yarn add @penglei188288/clampjs
```

## 示例

```javascript
import { createClamp } from '@penglei188288/clampjs'

const example = createClamp(document.getElementById('app'), {
    clamp: 2,
    useNative: false,
    suffixHTML: '<span class="text-primary m-l-5">...查看全部</span>',
    responsive: false,
    suffixClick: (original) => {
        alert(original)
    }
})

example.reset() //刷新
example.destroy() // responsive为true时会监听resize事件，调用destroy()函数，会清除监听的事件。以免造成性能问题

```

## 参数
| 参数  | 说明  | 类型  | 可选值  | 默认值  |
| ------------ | ------------ | ------------ | ------------ | ------------ |
| clamp  | 这个选项控制何时何地去限制文本元素。第一，当选项为数字的时候，则代表应该被显示的行数。第二，你可以使用代表 CSS的值（px,em）字符串来控制元素显示的高度。最后，你可以使用’auto’字符串。’auto’将会尝试铺满有效的空白区域并且自动的限制元素使其自适应。  |  number/string  |  —  | 2  |
| useNative  | 是否使用原生的 -webkit-line-clamp 属性在 支持的浏览器中。 默认是true 。如果你使用的是 Webkit 内核的浏览器，但是在某些情况下，显示不正常。你可以把这个值设置为false，使用基于js的实现方式  | boolean   | true  | false  |
| responsive  | 是否监听窗口变化以触发刷新，useNative为true时不会监听。使用后注意调用实例的destroy ()函数销毁，以免出现性能问题  |  boolean | true  | false  |
| suffixHTML  | 在HTML元素截断之后显示的字符串，默认是省略号(…)。同时支持 字符串和HTML标签。useNative为false时生效  | string   |  —  |  ...  |
| suffixClick  | 点击省略号触发时的回调函数，回调的参数为original。useNative为false时生效  | Function(original)  | —  |  — |

## 维护者
- [penglei](https://www.penglei.cc/)

## License
- [MIT](https://opensource.org/licenses/MIT)
npm package: @pengomap/cli
Description: Rapid generation and development template scaffold
Author: Pengo
Latest version: 1.0.1

```
                                                             
 ___  ___       ___       ______   
|   \/   |     /   \     |   _  \  
|  \  /  |    /  ^  \    |  |_)  | 
|  |\/|  |   /  /_\  \   |   ___/  
|  |  |  |  /  _____  \  |  |      
|__|  |__| /__/     \__\ | _|    

```

<p style="color: #000000;font-size: 1.2em;font-family: sans-serif;font-weight: 600">安装:</p>

<p style="color: #000000;font-size: 1em;font-family: sans-serif;font-weight: 400">$ npm install @pengomap/cli -g 或者 yarn add @pengomap/cli -g</p>

<p style="color: #000000;font-size: 1.2em;font-family: sans-serif;font-weight: 600">使用:</p>

<p style="color: #000000;font-size: 1em;font-family: sans-serif;font-weight: 400">map init [初始化项目]</p>
<p style="color: #000000;font-size: 1em;font-family: sans-serif;font-weight: 400">map list [模板列表]</p>
<p style="color: #000000;font-size: 1em;font-family: sans-serif;font-weight: 400">map update [更新模板]</p>
<p style="color: #000000;font-size: 1em;font-family: sans-serif;font-weight: 400">map -h [查看帮助]</p>

<p style="color: #000000;font-size: 1.2em;font-family: sans-serif;font-weight: 600">说明:</p>
<p style="color: #000000;font-size: 1em;font-family: sans-serif;font-weight: 400">目前只有基于vue移动端h5模板。后续会逐渐增加。包括却不限基于react及小程序等模板及其ui框架。环境都会配置集成好项目中。避免重复造轮子，提高开发效率。</p>
<p style="color: #000000;font-size: 1em;font-family: sans-serif;font-weight: 400">个人平时上班，精力有限。有意一起开发的或者有其它好的提议的同学联系：18020874153@163.com</p>
npm package: @pengoose/funnel
Description: A Simple and Easy Funnel context Provider for React
Author: pengooseDev
Latest version: 1.0.2

# @pengoose/funnel

<div align="center">

<h3>🚀 Funnel</h3>
   <picture width="350">
    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/pengooseDev/goose_module/assets/73521518/b6e173a5-14fe-46fa-b5b8-9cdae09f3958" width="350">
    <source media="(prefers-color-scheme: light)" srcset="https://github.com/pengooseDev/goose_module/assets/73521518/78f1f5f5-dee5-4e8b-b066-3986534818fa" width="350">
    <img alt="IMAGE" src="http://LIGHT_IMAGE_URL.png">
  </picture>
  <h4> * Illustration created by coalowl </h4>

</div>

## Installation

Install the package using npm:

```sh
npm install @pengoose/funnel
```

Or using yarn:

```sh
yarn add @pengoose/funnel
```

## Usage Example

### Constants

```ts
// example/constants.ts
export const STEP = {
  INITIAL_STEP: 'addId',
  ADD_NAME: 'addName',
  ADD_NUMBER: 'addNumber',
  ADD_EXPIRATION: 'addExpiration',
  ADD_CVV: 'addCvv',
  CONFIRM: 'confirm',
} as const;

export const INITIAL_DATA = {
  id: '',
  name: '',
  number: '',
  expiration: '',
  cvv: '',
} as const;
```

### Types

```ts
// example/types.ts
export type Step = (typeof STEP)[keyof typeof STEP];
export type Data = typeof INITIAL_DATA;
```

### Funnel

```ts
// example/funnel.ts
import { createFunnel } from '@pengoose/funnel';
import { STEP, INITIAL_DATA } from '@/constants';

export const Funnel = createFunnel<Step, Data>({
  initialStep: STEP.INITIAL_STEP,
  initialData: INITIAL_DATA,
});
```

### Usage

```tsx
// example/AddCard.tsx
import { Funnel } from '@pengoose/funnel';

export const Funnels = () => {
  const { step, setStep } = Funnel.useContext();

  return (
    <Funnel>
      {/* Step1 */}
      <Funnel.Step step={STEP.INITIAL_STEP}>
        <AddId />
      </Funnel.Step>

      {/* Step2 */}
      <Funnel.Step step={STEP.ADD_NAME}>
        <AddName />
      </Funnel.Step>

      {/* ...Steps */}
    </Funnel>
  );
};
```

```tsx
// example/AddId.tsx
import { Funnel } from '@pengoose/funnel';
import { STEP } from '@/constants';

export const AddId = () => {
  const { data, setData, setStep } = Funnel.useContext();

  const nextStep = () => {
    setStep(STEP.ADD_NAME);
  };

  return (
    <div>
      <input
        type='text'
        value={data.id}
        onChange={(e) => setData({ id: e.target.value })}
      />
      <button onClick={nextStep}>Next</button>
    </div>
  );
};
```
npm package: @pengoose/goostate
Description: An abstract state management library leveraging React's useSyncExternalStore for encapsulating state logic with an object-oriented approach. Provides a structured and reusable way to manage and synchronize application state across React components.
Author: pengooseDev
Latest version: 0.0.1

<div align="center">
<h1>@pengoose/goostate</h1>

<h3>
 A simple state Convention manager for React applications.
</h3>
  <picture width="350">
    <source media="(prefers-color-scheme: light)" srcset="https://i.imgur.com/lPN6qxb.png" width="550">
    <source media="(prefers-color-scheme: dark)" srcset="https://i.imgur.com/N5aPzdJ.png" width="550">
    <img alt="IMAGE" src="https://i.imgur.com/lPN6qxb.png">
  </picture>
  <h4> * Illustration created by <a href="https://twitter.com/takuan1469414">沢庵</a> </h4>

</div>

## Introduction

`@pengoose/goostate` is a simple state Convention manager for React applications. It is a simple and easy-to-use state manager that allows you to manage your application state in a more organized way.

## Installation

Install the package using npm:

```sh
npm install @pengoose/goostate
```

Or using yarn:

```sh
yarn add @pengoose/goostate
```
npm package: @pengoose/layout
Description: A flexible layout component for React with dynamic sections and adjustable areas for top, left, right, and bottom regions. Allows content adjustment based on provided sections, making it suitable for complex UIs.
Author: pengooseDev
Latest version: 1.0.5

# @pengoose/layout

![Layout Example](https://github.com/user-attachments/assets/da27373c-cdb6-4d34-979c-c26a2f1aed76)

`@pengoose/layout` is a flexible layout component for React that allows you to create complex layouts with ease. It provides `top`, `left`, `right`, and `bottom` sections that can be dynamically added, and each section is automatically adjusted based on its presence.

## Features

- Dynamically add `top`, `left`, `right`, and `bottom` sections
- Automatically adjusts each section’s size to optimize available space
- Easily create complex UI layouts

## Installation

### > npm

```
npm install @pengoose/layout
```

### > yarn

```
yarn add @pengoose/layout
```

### > pnpm

```
pnpm add @pengoose/layout
```

## API

### `Layout`

The `Layout` component accepts the following props.

| Prop       | Type        | Description                              |
| ---------- | ----------- | ---------------------------------------- |
| `top`      | `ReactNode` | Content to display in the top section    |
| `left`     | `ReactNode` | Content to display in the left section   |
| `right`    | `ReactNode` | Content to display in the right section  |
| `bottom`   | `ReactNode` | Content to display in the bottom section |
| `children` | `ReactNode` | Content to display in the main area      |

## Usage

```tsx
import { Layout } from '@/modules/layout';

function App() {
  return (
    <Layout
      top={
        <div
          style={{ backgroundColor: '#FF5733', padding: '10px', color: '#FFF' }}
        >
          Top Section
        </div>
      }
      left={
        <div
          style={{ backgroundColor: '#33C3FF', height: '100%', color: '#FFF' }}
        >
          Left Section
        </div>
      }
      right={
        <div
          style={{ backgroundColor: '#75FF33', height: '100%', color: '#FFF' }}
        >
          Right Section
        </div>
      }
      bottom={
        <div
          style={{ backgroundColor: '#FF33B5', padding: '10px', color: '#FFF' }}
        >
          Bottom Section
        </div>
      }
    >
      <div
        style={{
          margin: '20px',
          padding: '20px',
          borderRadius: '10px',
          background: 'rgba(0,0,0,0.15)',
          height: 'calc(100% - 40px)',
          overflowY: 'auto',
        }}
      >
        <div style={{ height: '100vh', background: 'rgba(0,0,0,0.1)' }}>
          <h1>App Content</h1>
          <p>This is the main content area.</p>
        </div>
      </div>
    </Layout>
  );
}

export default App;
```
npm package: @pengoose/pinterest
Description: Easy to use Pinterest API wrapper for Node.js
Author: pengooseDev
Latest version: 1.0.5

# @pengoose/pinterest

![Logo](https://github.com/user-attachments/assets/676e907f-faf9-43ff-8f72-913eb9aa6e1e)

`@pengoose/pinterest` is a lightweight library for interacting with the Pinterest API, designed to easily fetch pins from multiple boards.

## Installation

```bash
npm install @pengoose/pinterest
```

## Usage

### Basic Setup

Create an instance of the `Pinterest` class by providing your Pinterest user ID and an array of board IDs.

```ts
import { Pinterest } from '@pengoose/pinterest';

const pinterest = new Pinterest({
  id: 'your_user_id',
  boardIds: ['board_id_1', 'board_id_2'],
});
```

### Fetch Boards Data

The `getBoards()` method retrieves pins from each board and returns an object where each key is a board ID and its value is an array of pins.

```ts
const boards = await pinterest.getBoards();
console.log(boards);
// Example output:
// {
//   board_id_1: [/* Array of Pin objects */],
//   board_id_2: [/* Array of Pin objects */]
// }
```

### Fetch All Pins

The `getAllPins()` method aggregates pins from all boards into a single array. You can optionally shuffle the resulting array by setting the `shuffle` option to `true`.

```ts
// Retrieve all pins in order
const allPins = await pinterest.getAllPins();

// Retrieve all pins with a randomized order
const shuffledPins = await pinterest.getAllPins({ shuffle: true });
```

## API Overview

### Class: `Pinterest`

#### Constructor

```ts
new Pinterest({ id: string, boardIds: string[] });
```

- **id**: Your Pinterest user ID.
- **boardIds**: An array of board IDs from which to fetch pins.

#### Methods

- **getBoards()**
  - **Description**: Fetches pins for each board specified during instantiation.
  - **Returns**: An object (`Boards`) where keys are board IDs and values are arrays of pins.

- **getAllPins({ shuffle?: boolean })**
  - **Description**: Aggregates pins from all boards into a single array.
  - **Parameters**:
    - `shuffle` (optional): If set to `true`, the returned array will be randomized.
  - **Returns**: An array of Pin objects.

## Additional Information

- The internal helper method `parseBoardId` cleans up board IDs by removing dots and replacing spaces with hyphens.
- The API endpoint is dynamically constructed
npm package: @pengoose/theme
Description: A Simple and Easy Theme Manager for React
Author: pengooseDev
Latest version: 1.1.0

# @pengoose/Theme

This module have dependencies on `tailwindcss` & `Shadcn`.

## 1. Add Theme with TailwindCSS

You can createTheme easily with this [**Link**](https://gradient.page/tools/shadcn-ui-theme-generator)

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    /* CSS Codes */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

## 2. Add constants

```ts
const THEME = {
  default: '',
  dark: 'dark',
  cherryBlossom: 'cherry-blossom',
  linear: {
    pink: 'lg-pink',
    blue: 'lg-blue',
  },
} as const; // NOTE: should be `as const` to infer type properly.
```

## 3. Make type of `Theme`

```ts
type Theme = typeof THEME;
```

## 4. DI to `createTheme`

```ts
const Theme = createTheme<Theme>({
  themes: THEME,
  initialTheme: THEME.default, // NOTE: optional ;)
});
```

- the `const Theme` is assigned Object with `Provider` and `useContext`.

## 5. Add Provider

```tsx
import { Theme } from 'my-path/theme';

const Providers = ({ children }: React.PropsWithChildren) => {
  return <Theme.Provider>{children}</Theme.Provider>;
};
```

- NOTE: If you use hooks outside of the `Provider`, it will throw an error.

```bash
> Error: Should be used inside ThemeProvider
```

## 6. Use `useTheme`

```tsx
const Example = () => {
  const { theme, themes, setTheme } = Theme.useContext();

  console.log(theme, typeof theme);
  // > default, string
  console.log(themes, typeof themes);
  // > { default: '', dark: 'dark', cherryBlossom: 'cherry-blossom', linear: { pink: 'lg-pink', blue: 'lg-blue' } }, object

  return (
    <div>
      <>currentTheme : {theme}</>
      {Object.entries(themes).map(([key, value]) => {
        if (typeof value === 'object') {
          return Object.entries(value).map(([k, v]) => {
            return (
              <Button key={k} className={v} onClick={() => setTheme(v)}>
                {k}
              </Button>
            );
          });
        }

        return (
          <Button key={key} className={value} onClick={() => setTheme(value)}>
            {key}
          </Button>
        );
      })}
    </div>
  );
};
```
npm package: @pengshu/hsa-ui
Description: A Vue.js project
Latest version: 1.1.3-12

# hsa-ui.

> vue 组件项目

### 快速启动

```
# 下载依赖
npm install

# 快速启动 localhost:8080
npm run dev

# 打包(完整)
npm run build

# 打包（分模块）
npm run build:modules

```
### 组件发布

1. 创建用户（首次发布需要创建，后面直接登录发布即可）
    ```
    npm adduser --scope=@hsa
    Username:ui
    Password:123456
    Email:ui@hsa.com
    ```
1. 打包及修改版本号
    ```
    ### 打包
    npm run build

    ### 变更版本号
    打包完成后，修改package.json中到version版本号
    ```

1. 登录及发布
    ```
    ### 登录
    npm login --scope=@hsa
    Username:ui
    Password:123456
    Email:ui@hsa.com

    ### 发布
    npm publish
    ```
npm package: @pengubot/eslint-config
Description: PenguBot's ESLint and TypeScript Configuration
Author: @pengubot
Latest version: 1.0.0

<div align="center">

# @pengubot/eslint-config
PenguBot's Organisation Standard ESLint and TSConfig

[![GitHub](https://img.shields.io/github/license/pengubot/eslint-config?logo=github&style=flat-square)](https://github.com/pengubot/eslint-config/blob/master/LICENSE.md)
[![npm](https://img.shields.io/npm/v/@pengubot/eslint-config?color=crimson&logo=npm&style=flat-square)](https://www.npmjs.com/package/@pengubot/eslint-config)
[![npm](https://img.shields.io/npm/dt/@pengubot/eslint-config?color=crimson&logo=npm&style=flat-square)](https://www.npmjs.com/package/@pengubot/eslint-config)
[![Discord](https://img.shields.io/discord/303195322514014210?color=697EC4&label=Discord&logo=discord&logoColor=FDFEFE&style=flat-square)](https://pengubot.com/support)
[![Twitter Follow](https://img.shields.io/twitter/follow/adityatripathid?label=Follow%20@adityatripathid&logo=twitter&colorB=1DA1F2&style=flat-square)](https://twitter.com/adityatripathid/follow)
[![Twitter Follow](https://img.shields.io/twitter/follow/PenguBot?label=Follow%20@PenguBot&logo=twitter&colorB=1DA1F2&style=flat-square)](https://twitter.com/PenguBot/follow)
[![Patreon Support](https://img.shields.io/badge/patreon-donate-brightgreen.svg?label=Support%20on%20Patreon&logo=patreon&colorB=F96854&style=flat-square&link=https://patreon.com/PenguBot)](https://patreon.com/PenguBot)
[![PayPal Donate](https://img.shields.io/badge/paypal-donate-brightgreen.svg?label=Donate%20with%20Paypal&logo=paypal&colorB=00457C&style=flat-square&link=https://paypal.me/adityatripathid)](https://paypal.me/adityatripathid)
</div>

----

## Installation
Installing the Peer Dependencies:
> yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

Then install this config:
> yarn add -D @pengubot/eslint-config

## Installation
### ESLint
To use it as your ESLint config you can add this to your `.eslintrc` file:

```json
{
    "extends": ["@pengubot"]
}
```
Or you can add this to your `package.json`:
```json
{
    "eslintConfig": {
        "extends": "@pengubot"
    }
}
```

Then create a `tsconfig.eslint.json` similar to the following example in the same directory:
```json
{
    "extends": "./tsconfig.json",
    "include": ["src"]
}
```

### TypeScript
To use `@pengubot/eslint-config`'s TypeScript config you can add this to your `tsconfig.json`:

```json
{
    "extends": "@pengubot/eslint-config"
}
```

## Support
[![Support](https://i.imgur.com/H1MveyG.png?2)](https://ko-fi.com/AdityaTD)

## License
[MIT](https://github.com/PenguBot/eslint-config/blob/master/LICENSE)
npm package: @pengubot/klasa
Description: Klasa modular Discord bot framework for Discord.js.
Author: PenguBot
Latest version: 1.0.1

<div align="center">

# @pengubot/klasa
[![GitHub](https://img.shields.io/github/license/pengubot/klasa?logo=github&style=flat-square)](https://github.com/pengubot/klasa/blob/stable/LICENSE.md)
[![Discord](https://img.shields.io/discord/303195322514014210?color=697EC4&label=Discord&logo=discord&logoColor=FDFEFE&style=flat-square)](https://pengubot.com/support)
[![Twitter Follow](https://img.shields.io/twitter/follow/adityatripathid?label=Follow%20@adityatripathid&logo=twitter&colorB=1DA1F2&style=flat-square)](https://twitter.com/adityatripathid/follow)
[![Twitter Follow](https://img.shields.io/twitter/follow/PenguBot?label=Follow%20@PenguBot&logo=twitter&colorB=1DA1F2&style=flat-square)](https://twitter.com/PenguBot/follow)
[![Patreon Support](https://img.shields.io/badge/patreon-donate-brightgreen.svg?label=Support%20on%20Patreon&logo=patreon&colorB=F96854&style=flat-square&link=https://patreon.com/PenguBot)](https://patreon.com/PenguBot)
[![PayPal Donate](https://img.shields.io/badge/paypal-donate-brightgreen.svg?label=Donate%20with%20Paypal&logo=paypal&colorB=00457C&style=flat-square&link=https://paypal.me/adityatripathid)](https://paypal.me/adityatripathid)

----
</div>

## What is this?
This is simply a fork of Klasa but patched for discord.js v12 and above along with the use of @klasa/settings-gateway.
We do not provide support for this, but you are free to use it for your own projects.
If this is used by many users, we may start maintaining and supporting this for future versions of discord.js.

## Information
- [Documentation for Klasa](https://klasa.js.org)
- [Example premade pieces](https://github.com/dirigeants/klasa-pieces)
- [VS Code extension for rapid development](https://marketplace.visualstudio.com/items?itemName=bdistin.klasa-vscode)

## Support
[![Support](https://i.imgur.com/H1MveyG.png?2)](https://ko-fi.com/AdityaTD)

## License
[MIT](https://github.com/PenguBot/klasa/blob/main/LICENSE)
npm package: @penguin-ui/aspect-ratio
Description: <a href="https://npmjs.org/package/@penguin-ui/aspect-ratio"><img alt="NPM version" src="https://img.shields.io/npm/v/@penguin-ui/aspect-ratio.svg" /></a> [![Coverage Status](https://coveralls.io/repos/github/particle4dev/aspect-ratio/badge.svg?branch=mas
Author: Hoang Nam
Latest version: 1.3.0

# @penguin-ui/aspect-ratio

<a href="https://npmjs.org/package/@penguin-ui/aspect-ratio"><img alt="NPM version" src="https://img.shields.io/npm/v/@penguin-ui/aspect-ratio.svg" /></a> [![Coverage Status](https://coveralls.io/repos/github/particle4dev/aspect-ratio/badge.svg?branch=master)](https://coveralls.io/github/particle4dev/aspect-ratio?branch=master)

A simple npm package that help you to caculate aspect ratio of an image.

## Installation

npm:
```sh
npm i @penguin-ui/aspect-ratio
```

Yarn:
```sh
yarn add @penguin-ui/aspect-ratio
```

## Setup

```js
const aspectRatio = require('@penguin-ui/aspect-ratio')


console.log(aspectRatio(1920/1080))
// print [16, 9]
```

## License

MIT © [Nam Hoang](https://github.com/particle4dev)
npm package: @penguin-ui/slugify
Description: <a href="https://npmjs.org/package/@penguin-ui/slugify"><img alt="NPM version" src="https://img.shields.io/npm/v/@penguin-ui/slugify.svg" /></a> [![Coverage Status](https://coveralls.io/repos/github/particle4dev/slugify/badge.svg?branch=master)](https://c
Author: Hoang Nam
Latest version: 1.1.0

# @penguin-ui/slugify

<a href="https://npmjs.org/package/@penguin-ui/slugify"><img alt="NPM version" src="https://img.shields.io/npm/v/@penguin-ui/slugify.svg" /></a> [![Coverage Status](https://coveralls.io/repos/github/particle4dev/slugify/badge.svg?branch=master)](https://coveralls.io/github/particle4dev/slugify?branch=master)

Convert string to slug.

## Installation

npm:
```sh
npm i @penguin-ui/slugify
```

Yarn:
```sh
yarn add @penguin-ui/slugify
```

## Setup

```js
const slugify = require('@penguin-ui/slugify')

console.log(slugify(`a    b c`))
// print "a-b-c"
```

## License

MIT © [Nam Hoang](https://github.com/particle4dev)
npm package: @penguin-ui/unaccented
Description: <a href="https://npmjs.org/package/@penguin-ui/unaccented"><img alt="NPM version" src="https://img.shields.io/npm/v/@penguin-ui/unaccented.svg" /></a> [![Coverage Status](https://coveralls.io/repos/github/particle4dev/unaccented/badge.svg?branch=master)](
Author: Hoang Nam
Latest version: 1.3.0

# @penguin-ui/unaccented

<a href="https://npmjs.org/package/@penguin-ui/unaccented"><img alt="NPM version" src="https://img.shields.io/npm/v/@penguin-ui/unaccented.svg" /></a> [![Coverage Status](https://coveralls.io/repos/github/particle4dev/unaccented/badge.svg?branch=master)](https://coveralls.io/github/particle4dev/unaccented?branch=master)

Convert vietnamese string to unaccented string.

## Installation

npm:
```sh
npm i @penguin-ui/unaccented
```

Yarn:
```sh
yarn add @penguin-ui/unaccented
```

## Setup

```js
const unaccented = require('@penguin-ui/unaccented')

console.log(unaccented(`Cháu xin chào cô chú! Sa chào cô chú đi con.`))
// print "chau xin chao co chu! sa chao co chu di con."
```

## License

MIT © [Nam Hoang](https://github.com/particle4dev)
npm package: @penguin_astronaut/router
Description: Simple js router
Author: peng
Latest version: 1.1.4

# Simple JS Router

## Installation

    npm i @penguin_astronaut/router

## Простой пример

```js
import Router from "ot-router";

const router = new Router()
onEnter() {
  console.log('Hello world')
}
router.on({match: '/', onEnter: [onEnter]})
```

### параметры конструктор Router

```js
const router = new Router(hashMode, selector);
```

`hashMode` - boolean значение, которое говорит, использовать hash вместо History Api, по умолчанию false

`selctor` - css селектор, по которому выбираются теги для роутинга, по умолчанию берутся все теги "a"

### Методы

`router.on` - прослушивает путь по заданному правилу

```js
router.on({
  match: "/",
  beforeEnter: [onLeave],
  onEnter: [onEnter, onEnter2],
  onLeave: [onLeave],
});
```

`router.go` - перейти по заданному пути

```js
const someParams = { a: 12, c: "test arg" };
router.go("/path-to-go", someParams);
```
npm package: @penguincabinet/vivliostyle-theme-bunko-pre
Description: Preテキストに対応した文庫用のテーマ
Author: PenguinCabinet
Latest version: 1.0.1-f

# Bunko-pre

A theme that add pre text support to [Bunko Theme for Vivliostyle](https://github.com/vivliostyle/themes/tree/main/packages/@vivliostyle/theme-bunko).     

[文庫用のテーマ](https://github.com/vivliostyle/themes/tree/main/packages/@vivliostyle/theme-bunko)で、preテキストを使えるようにするテーマ。

> [!WARNING]
> 文字数が増加するとbuildが極端に遅くなるため、その場合、段落ごとに空行を挟む本来の記法をおすすめします

## Use

In `vivliostyle.config.js`:

```js
module.exports = {
  theme: '@penguincabinet/vivliostyle-theme-bunko-pre',
};
```

## Differences from the original
For more details, please see [the example](https://raw.githubusercontent.com/PenguinCabinet/vivliostyle-theme-bunko-pre/main/example/bunko.md).
### A samples of the original bunko theme
```markdown
「ではみなさんは、そういうふうに川だと{云|い}われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に{吊|つる}した大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを{指|さ}しながら、みんなに{問|とい}をかけました。

カムパネルラが手をあげました。それから四五人手をあげました。ジョバンニも手をあげようとして、急いでそのままやめました。たしかにあれがみんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはまるで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどんなこともよくわからないという気持ちがするのでした。

ところが先生は早くもそれを{見附|みつ}けたのでした。
```
### Equivalent
```
「ではみなさんは、そういうふうに川だと{云|い}われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に{吊|つる}した大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを{指|さ}しながら、みんなに{問|とい}をかけました。
　カムパネルラが手をあげました。それから四五人手をあげました。ジョバンニも手をあげようとして、急いでそのままやめました。たしかにあれがみんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはまるで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどんなこともよくわからないという気持ちがするのでした。
　ところが先生は早くもそれを{見附|みつ}けたのでした。
```

## Available theme CSS variables

```css
:root {
  /**
   *  Number of lines per page/Number of characters per line
   */
  --vs-theme--num-of-line: 15;
  --vs-theme--num-of-character: 39;
  /**
   *  Content to be displayed in the upper left/upper right corner of the page spread
   */
  --vs-theme--page-top-left-content: counter(page) '　' env(doc-title);
  --vs-theme--page-top-right-content: counter(page);
  /**
   *  Indent size of subsection
   */
  --vs-theme--subsection-text-indent: 3rem;
  /**
   *  Color of anchor texts on screen media
   */
  --vs-theme--anchor-color-body: darkblue;
}
```

## License

> author: PenguinCabinet
npm package: @pengx17/electron-forge-maker-appimage
Description: This is an [electron-forge](https://www.electronforge.io/) builder for [AppImage](https://appimage.org/).
Latest version: 1.2.1

# electron-forge-maker-appimage

This is an [electron-forge](https://www.electronforge.io/) builder for [AppImage](https://appimage.org/).

It's far from complete, but it serves the basic needs of our application.

This is based on several existing projects.

[electron-forge-maker-appimage](https://github.com/electron-userland/electron-builder/tree/master/packages/electron-forge-maker-appimage)
This is the previous maker for electron forge. It does not work, I suspect it uses an older maker API and was never updated.

Working electron-forge makers can be found here. These were used as an example when creating this maker:
https://github.com/electron-userland/electron-forge/tree/master/packages/maker

Some parts of electron-builder are still used, specifically [app-builder-lib](https://github.com/electron-userland/electron-builder/tree/master/packages/app-builder-lib)

Overall, I suspect app-builder-lib isn't meant to work with electron-forge makers anymore. I am using the components that specifically wrap [app-builder](https://github.com/develar/app-builder), the tool that actually prepares the AppImage.

## Usage

```
yarn add --dev https://github.com/Marcus10110/electron-forge-maker-appimage.git
```

## example forgeconfig.js

```
makers: [
  {
    name: 'electron-forge-maker-appimage',
    platforms: ['linux'],
    config: { template: 'assets/AppRunTemplate.sh' },
  },
];

```

This was created specifically because we wanted to use AppImage's AppRun script to detect and load modern versions of libstdc++ and libgcc_s on older systems.
npm package: @pengxs/async-messenger
Description: Synchronized communication between windows and iframes
Author: Mark Peng
Latest version: 1.0.1

# async-messenger

🚀 Synchronized communication between windows and iframes

## Installing

### Package manager

Using npm:

```bash
$ npm install @pengxs/asyn-messenger
```

Using yarn:

```bash
$ yarn add @pengxs/async-messenger
```

Using pnpm:

```bash
$ pnpm add @pengxs/async-messenger
```

## Example

parent.html

```html
<html>
<body>
  <iframe id="child" src="child.html" frameborder="0"></iframe>

  <script type="module">

    import asyncMessenger from '@pengxs/async-messenger'

    const child = document.querySelector('#child')
    child.onload = async () => {
      const messenger = asyncMessenger.create({target: child.contentWindow})
      const res = await messenger.post({event: 'say'})
      console.log(res) // Hello World
    }

  </script>

</body>
</html>
```

child.html

```html
<html>
<body>

  <script type="module">

    import asyncMessenger from '@pengxs/async-messenger'

    const messenger = asyncMessenger.create({target: window.parent})
    window.addEventListener('message', async (e) => {
      const { data, channel } = e.data
      if (data.event == 'say') {
        messenger.send({ channel, data: 'Hello World' })
      }
    })

  </script>

</body>
</html>
```

## License

[MIT](./LICENSE) License © 2023 [Mark Peng](https://github.com/pxs797)