open-index/open-npm huggingface dataset:
npm package: @hoppscotch/vue-toasted
Description: Port of vue-toasted to Vue 3
Author: The Hoppscotch Team
Latest version: 0.1.0

# [@hoppscotch/vue-toasted](https://www.npmjs.com/package/@hoppscotch/vue-toasted)

### A Vue 3 port of the [vue-toasted](https://github.com/shakee93/vue-toasted) library.

<br />
<br />

## Install
- Install the package from npm
  ```bash
  npm install @hoppscotch/vue-toasted
  ```

## Usage
- Initialize the Vue plugin.
  For example, for a Vite Vue application
  ```js
  // main.js
  import Toasted from "@hoppscotch/vue-toasted"
  import { createApp } from "vue"
  import App from "./App.vue"
  
  // Make sure to include the default stylings
  import "@hoppscotch/vue-toasted/style.css"
  
  const app = createApp(App)

  app.use(Toasted) // You can pass options as a second parameter

  ```
- Now you will be able to access `vue-toasted` in your Vue components.
  <br />
  <br />
  For Options API:
  ```js
  import { defineComponent } from "vue"

  export default defineComponent({
    mounted() {
        // Should give you access to the toasted show function
        this.$toasted.show("Hola! From Options API!")
    }
  })
  ```
  For Composition API:
  ```js
  const toast = useToasted()
  toast.show("Hola! From Composition API!")
  ```
npm package: @hopsoft/autosuggest-controller
Description: Brief description...
Author: Nathan Hopkins
Latest version: 0.0.5

# Autosuggest Controller

Brief description...

## Quick Start

```sh
yarn add @hopsoft/autosuggest-controller
```

```js
import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'
import AutosuggestController from '@hopsoft/autosuggest-controller'

const application = Application.start()
const context = require.context('./controllers', true, /\.js$/)
application.load(definitionsFromContext(context))
application.register('autosuggest', AutosuggestController)
```

```html
usage
```

## Usage

Friendly summary...

### Targets

Targets are child elements identified by setting:

```
data-target="controller.target"
```

| Name      |                   | Description            |
| --------- | ----------------- | ---------------------- |
| `target`  | required/optional | Describe the target... |

### Actions

Actions are behaviors that can be triggered and are identified by setting:

```
data-action="controller#action"
```

| Name      |                   | Description            |
| --------- | ----------------- | ---------------------- |
| `action`  | required/optional | Describe the action... |

### Configuration

| Attribute           |                   | Default | Description               |
| ------------------- | ----------------- | ------- | ------------------------- |
| `data-controller-?` | required/optional | "..."   | Describe the attribute... |
npm package: @hopsoft/controllers
Description: ## Installation
Author: Nathan Hopkins
Latest version: 0.0.12

[![Lines of Code](http://img.shields.io/badge/lines_of_code-428-brightgreen.svg?style=flat)](http://blog.codinghorror.com/the-best-code-is-no-code-at-all/)

# Controller Library

## Installation

```sh
yarn add @hopsoft/controllers
```

## Usage

```js
import ExampleController from '@hopsoft/controllers'
```

## Contributing

Standardize your code before pushing to GitHub.

```sh
yarn prettier-standard:format
```

## Publishing

```sh
yarn build
git add .
git commit -m "build ..."
yarn publish
git push github
git push github --tags
```
npm package: @hopsoft/copy-controller
Description: Copies text from `input` and `textarea` elements to the clipboard.
Author: Nathan Hopkins
Latest version: 0.0.5

# Copy Controller

Copies text from `input` and `textarea` elements to the clipboard.

## Quick Start

```sh
yarn add @hopsoft/copy-controller
```

#### `app/javascript/controllers/index.js`

```js
import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'
import CopyController from '@hopsoft/copy-controller'

const application = Application.start()
const context = require.context('./controllers', true, /\.js$/)
application.load(definitionsFromContext(context))
application.register('copy', CopyController)
```

#### `app/views/demos/copy.html.erb`

```html
<div data-controller="copy" data-copy-content='Copied...' data-copy-duration='1'>
  <textarea data-target='copy.source'></textarea>
  <button type="button" data-target='copy.target' data-action='click->copy#copy'>Copy</button>
</div>
```

## Usage

The root element is a container that holds holds all other elements and is configured by setting:

```
data-controller="copy"
```

### Configuration

| Attribute             |          | Default     | Description                                                                                             |
| --------------------- | -------- | ----------- | ------------------------------------------------------------------------------------------------------- |
| `data-copy-content`   | optional | "Copied..." | Content to show in the button after a copy has been performed                                           |
| `data-copy-duration`  | optional | 2000        | How many milliseconds to show the copied content in the button before reverting to the original content |

Copied content can be disabled by setting `data-copy-content=""` or `data-copy-duration="0"`

### Targets

Targets are child elements identified by setting:

```
data-target="copy.TARGET_NAME"
```

| Name      |          | Description                                              |
| --------- | -------- | -------------------------------------------------------- |
| `source`  | required | An input or textarea that holds the content to be copied |
| `trigger` | required | The button used to perform the copy                      |

### Actions

Actions are behaviors that can be triggered and are identified by setting:

```
data-action="copy#ACTION_NAME"
```

| Name     |          | Description                                                         |
| -------- | -------- | ------------------------------------------------------------------- |
| `copy`   | required | Performs the copy action (typically defined on the `button` target) |
npm package: @hoqn/zusammen
Description: A simple state management for react
Author: Hogyun Jeon
Latest version: 0.1.0

# @hoqn/zusammen

> [!IMPORTANT]
> 이 라이브러리는, 주로 학습을 목적으로 직접 구현해 본 라이브러리예요. 실제 프로젝트나 서비스에는 절대! 사용하지 마세요.  
> 대신 Zustand를 사용하실 수 있어요.

이 코드는, React를 흉내낸 라이브러리를 작성하고 이를 기반으로 간단한 앱을 만드는 과정에서, 전역 상태 관리가 필요해 만들게 된 코드예요. 앞선 라이브러리가 React와 거의 같은 인터페이스를 구현하고 있었기 때문에, 상태 관리 부분을 실제 React에서도 동작하도록 변경했어요.

#### 특징

- Zustand와 비슷하게 사용할 수 있어요.

```ts
const useStore = createStore((set, get) => ({
  // ...
}));

// 사용처
const counter = useStore((s) => s.counter);
```

- 기본적으로 React 18의 `useSyncExternalStore`를 사용해요.  
  다만, 내부적으로 주석 처리되어 있는 부분을 해제하고 빌드하면 React 18 이전에서도 사용할 수 있도록 구현되어 있어요.

```ts

function useStore(...) {
  // React 18 이전
  // ...

  // React 18 이후
  ...
}
```

- TypeScript를 완전히 지원해요. 상태와 Selector를 포함한 모든 곳에서 타이핑을 지원해요.

## 사용법

> [!NOTE]
> React에서 사용하려면, 모든 모듈은 `@hoqn/zusammen/react`에서 가져와야 해요.

```tsx
// store.ts
import { createStore } from "@hoqn/zusammen/react";

type TigerStore = TigerStoreActions & TigerStoreState;

const useTigerStore = createStore<TigerStore>((set, get) => ({
  counter: 0,
  incrementCounter: () => {
    const current = get().counter;
    set({ counter: current + 1 });
  },
}));

// Component.tsx
function MyComponent() {
  const { counter, incrementCounter } = useTigerStore();
  // const counter = useTigerStore(s => s.counter);
  // const incrementCounter = useTigerStore(s => s.incrementCounter);

  return (
    <div>
      <div>{counter}</div>
      <button onClick={() => void incrementCounter()}>increment</button>
    </div>
  );
}
```

#### 해결되지 않은 문제

- Redux Devtool을 지원하지 않아요.

- 얕은 비교를 지원하지 않아요. Selector 작성 시 단일 셀렉터 위주로 작성해야 불필요한 리렌더링을 최소화할 수 있어요.

- 아직 Raw 관점의 관리를 지원하지 않아요.
npm package: @hora/protocols
Description: Protocols symbols
Author: Paul Chavard
Latest version: 0.1.0

# @hora/protocols

[![Build Status](https://travis-ci.org/hora-project/protocols.svg?branch=master)](https://travis-ci.org/hora-project/protocols)
[![npm version](https://badge.fury.io/js/%40hora%2Fprotocols.svg)](https://badge.fury.io/js/%40hora%2Fprotocols)

## Install

```
$ yarn add @hora/protocols
```

## Usage

```js
import {
  isTransducer,
  ITERATOR,
  TRANSDUCER_INIT,
  TRANSDUCER_RESULT,
  TRANSDUCER_STEP,
  TYPEOF
} from '@hora/protocols';

class Collection {
  [TRANSDUCER_INIT]() {}

  [TRANSDUCER_RESULT](result) {}

  [TRANSDUCER_STEP](result, input) {}

  [ITERATOR]() {}

  [TYPEOF]() {
    return 'collection';
  }
}
```

For more in depth documentation see: http://hora.io/docs/protocols/
npm package: @hora/range
Description: [![Build Status](https://travis-ci.org/hora-project/range.svg?branch=master)](https://travis-ci.org/hora-project/range) [![npm version](https://badge.fury.io/js/%40hora%2Frange.svg)](https://badge.fury.io/js/%40hora%2Frange)
Author: Paul Chavard
Latest version: 0.2.0

# @hora/range

[![Build Status](https://travis-ci.org/hora-project/range.svg?branch=master)](https://travis-ci.org/hora-project/range)
[![npm version](https://badge.fury.io/js/%40hora%2Frange.svg)](https://badge.fury.io/js/%40hora%2Frange)

## Install

```
$ yarn add @hora/range
```

## Usage

```js
import { take } from '@hora/transducers';
import range from '@hora/range';

take(20, range());
```

For more in depth documentation see: http://hora.io/docs/range/
npm package: @hora/transducers
Description: Transducers for JavaScript
Author: Paul Chavard
Latest version: 0.2.0

# @hora/transducers

[![Build Status](https://travis-ci.org/hora-project/transducers.svg?branch=master)](https://travis-ci.org/hora-project/transducers)
[![npm version](https://badge.fury.io/js/%40hora%2Ftransducers.svg)](https://badge.fury.io/js/%40hora%2Ftransducers)

## Install

```
$ yarn add @hora/transducers
```

## Usage

```js
import { map, into } from '@hora/transducers';

map(x => x + 1, [1, 2, 3]);
into([], map(x => x + 2), [2, 3, 4]);
```

For more in depth documentation see: http://hora.io/docs/transducers/
npm package: @hora/type
Description: Improved typeof detection.
Author: Paul Chavard
Latest version: 0.3.0

# @hora/type

[![Build Status](https://travis-ci.org/hora-project/type.svg?branch=master)](https://travis-ci.org/hora-project/type)
[![npm version](https://badge.fury.io/js/%40hora%2Ftype.svg)](https://badge.fury.io/js/%40hora%2Ftype)

## Install

```
$ yarn add @hora/type
```

## Usage

```js
import type from '@hora/type';

type({}); // => 'plain-object'
type([]); // => 'array'
type(/a/); // => 'regexp'
type(new Map()); // => 'map'
```

For more in depth documentation see: http://hora.io/docs/type/
npm package: @hora/utils
Description: A collection of utils functions.
Author: Paul Chavard
Latest version: 0.4.0

# @hora/utils

[![Build Status](https://travis-ci.org/hora-project/utils.svg?branch=master)](https://travis-ci.org/hora-project/utils)
[![npm version](https://badge.fury.io/js/%40hora%2Futils.svg)](https://badge.fury.io/js/%40hora%2Futils)

## Install

```
$ yarn add @hora/utils
```

## Usage

```js
import { iterator } from '@hora/utils';

for (let [key, value] of iterator({ a: 'b', b: 'c' })) {
  console.log(key, value);
}
```

For more in depth documentation see: http://hora.io/docs/utils/
npm package: @horace_cai/firstui
Description: First vue UI framework
Latest version: 0.1.3

# 尝试发布 UI 框架到 npm 上  

- 开发一套 UI 框架  
  element-ui  
  公司需要 UI 框架，但可能现有的 UI 框架不满足需求  
  自己按需定制一份发布 npm  

- 跟平常开发的区别  
  packages 才是开发目录，防止自己的组件  
  原来的 src 改为 examples  

- 编写 vue.config.js  
  vue-cli 默认会启动 src 下的服务, 如果目录名变了, 需要手动修改配置  
  
- 在packages 目录下写自己的组件  
  Button/index.js -> 在组件入口文件，给组件添加 install 方法，让它可以被全局使用 Vue.use()  
  packages/index.js -> 在 packages 的入口文件中导入组件并安装导出  

- 配置 package.json  
  "lib": "vue-cli-service build --target lib --name (name) --dest lib packages/index.js"  
  输出到指定目录下  
  description 组件库的描述文本  
  keywords 组件库的关键词  
  license 许可协议  
  repository 组件库关联的 git 仓库地址  
  homepage 组件库展示的首页地址  
  main 组件库的主入口地址(在使用组件时引入的地址)  
  private 声明组件库的私有性, 如果要发布到npm公网上,需删除该属性或者设置为 false  
  publishConfig 用来设置 npm 发布的地址, 这个配置作为团队内部的npm服务器来说非常关键, 可以设置为私有的 npm 仓库  

- 发布到 npm  
  yarn lib: 本地编译组件库代码  
  npm login: 登录 npm(要注意从淘宝源 https://registry.npm.taobao.org/ 换回 npm 自己的源 http://registry.npmjs.org)  
  npm publish: 发布  
  npm publish --access public: 如果发布失败提示权限问题执行
npm package: @horacehylee/api-error-handler
Description: Express error handlers for JSON APIs
Author: Jonathan Ong
Latest version: 1.0.2


# api-error-handler

[![NPM version][npm-image]][npm-url]
[![Build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![Dependency Status][david-image]][david-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]
[![Gittip][gittip-image]][gittip-url]

An error handler for JSON APIs, meant to be used with [http-errors](https://github.com/jshttp/http-errors)-style errors.

## Example

```js
var errorHandler = require('api-error-handler');

var api = new express.Router();
api.get('/users/:userid', function (req, res, next) {

});

api.use(errorHandler());

app.use('/api', api);
```

## API

### .use(errorHandler([options]))

Currently no options.

### Errors

4xx errors are exposed to the client.
Properties exposed are:

- `message`
- `type`
- `name`
- `code`
- `status`

5xx errors are not exposed to the client.
Instead, they are given a generic `message` as well as the `type`.

[gitter-image]: https://badges.gitter.im/expressjs/api-error-handler.png
[gitter-url]: https://gitter.im/expressjs/api-error-handler
[npm-image]: https://img.shields.io/npm/v/api-error-handler.svg?style=flat-square
[npm-url]: https://npmjs.org/package/api-error-handler
[github-tag]: http://img.shields.io/github/tag/expressjs/api-error-handler.svg?style=flat-square
[github-url]: https://github.com/expressjs/api-error-handler/tags
[travis-image]: https://img.shields.io/travis/expressjs/api-error-handler.svg?style=flat-square
[travis-url]: https://travis-ci.org/expressjs/api-error-handler
[coveralls-image]: https://img.shields.io/coveralls/expressjs/api-error-handler.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/expressjs/api-error-handler
[david-image]: http://img.shields.io/david/expressjs/api-error-handler.svg?style=flat-square
[david-url]: https://david-dm.org/expressjs/api-error-handler
[license-image]: http://img.shields.io/npm/l/api-error-handler.svg?style=flat-square
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/api-error-handler.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/api-error-handler
[gittip-image]: https://img.shields.io/gratipay/jonathanong.svg?style=flat-square
[gittip-url]: https://gratipay.com/expressjs/
npm package: @horacehylee/firebase-db
Description: Firebase database CRUD helper
Author: Horace Lee
Latest version: 1.0.11

# Firebase-db

[![npm version](https://badge.fury.io/js/%40horacehylee%2Ffirebase-db.svg)](https://badge.fury.io/js/%40horacehylee%2Ffirebase-db)

Firebase database CRUD helper

## Installation

```
npm install --save @horacehylee/firebase-db
```

## Documentation

https://horacehylee.github.io/firebase-db/

## License

MIT © [Horace Lee](https://github.com/horacehylee)
npm package: @horacehylee/react-app-rewire-css-modules
Description: Add [CSS Module](https://github.com/css-modules/css-modules) loaders to your [create-react-app](https://github.com/facebookincubator/create-react-app) via [react-app-rewired](https://github.com/timarney/react-app-rewired).
Latest version: 1.0.1

# react-app-rewire-css-modules

Add [CSS Module](https://github.com/css-modules/css-modules) loaders to your [create-react-app](https://github.com/facebookincubator/create-react-app) via [react-app-rewired](https://github.com/timarney/react-app-rewired).

CSS Module styles can be written in CSS or SASS.

## Installation

This package is not yet published to the npm registry. Install from GitHub:

```
yarn add --dev codebandits/react-app-rewire-css-modules sass-loader node-sass
```

OR

```
npm install --save-dev codebandits/react-app-rewire-css-modules sass-loader node-sass
```

## Usage

Use the following file extensions for any CSS Modules styles:

- `*.module.css`
- `*.module.sass`
- `*.module.scss`

Files with the following file extensions will load normally, without the CSS Modules loader:

- `*.css`
- `*.sass`
- `*.scss`

### Example

In your react-app-rewired configuration:

```javascript
/* config-overrides.js */

const rewireCssModules = require('react-app-rewire-css-modules');

module.exports = function override(config, env) {
    // ...
    config = rewireCssModules(config, env);
    // ...
    return config;
}
```

In your React application:

```scss
// src/App.module.scss

.app {
  color: aqua;
  
  &:hover {
    color: lawngreen;
  }
}
```

```jsx harmony
// src/App.js

import React from 'react';
import styles from './App.module.scss';

export default ({text}) => (
    <div className={styles.app}>{text}</div>
)
```
npm package: @horacehylee/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 3.1.6

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @horacehylee/react-scripts-webpack-config-editor
Description: edit the react-scripts webpack config for dev and prod builds!
Author: cdaringe
Latest version: 1.0.3

# react-scripts-webpack-config-editor

edit the react-scripts webpack config at runtime.

[ ![Codeship Status for cdaringe/react-scripts-webpack-config-editor](https://app.codeship.com/projects/88ce0a90-004e-0135-9570-3e56087fa495/status?branch=master)](https://app.codeship.com/projects/212544) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## install

`npm install --save-dev react-scripts-webpack-config-editor`

## usage

- update your package.json and add an install script

```js
// package.json
{
  "scripts": {
    "install": "react-scripts-webpack-config-editor <my-webpack-transformer.js>"
  }
}
```

- add your transformer

```js
// my-webpack-transformer.js
module.exports = function editWebpackConfig (webpackConfig) {
  // webpackConfig is the parsed JS webpack config from react-scrips.
  // modify it here synchronously, & return it.
  return Object.assign({}, webpackConfig, {
    ...my-webpack-customizations
  })
}
```

## why

you love [create-react-app](https://github.com/facebookincubator/create-react-app), but need just a tiny tweak to the build process.

## why not

the whole point of sticking with react-scripts is offloading the complexity of the build system (webpack), and getting rolling updates.  tweaking it implies that you want ownership of the build process!

## justification

if you **must** change the build used by react-scripts (create-react-app) you can either fork the project, or `react-scripts eject`.  **until now!**

- forking stinks. rolling updates come with a cost of you or your team pulling down the upstream project. further, **git conflicts are bound to follow**.
- ejecting stinks.  you get a ton of code pushed into your codebase & immediately onboard technical debt by absorbing all of that code.

your custom modifications are sure to break when you bump react-scripts. however, the amount of modifications should be _limited_, so hopefully you only need to patch a few lines in your transformer.
npm package: @horacehylee/swiper
Description: Most modern mobile touch slider and framework with hardware accelerated transitions
Author: Vladimir Kharlampidi
Latest version: 3.4.3

[![Join the chat at https://gitter.im/nolimits4web/Swiper](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/nolimits4web/Swiper)
[![Build Status](https://travis-ci.org/nolimits4web/Swiper.svg?branch=master)](https://travis-ci.org/nolimits4web/Swiper)
[![devDependency Status](https://david-dm.org/nolimits4web/swiper/dev-status.svg)](https://david-dm.org/nolimits4web/swiper#info=devDependencies)

Swiper
==========

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

# Getting Started
  * [Getting Started Guide](http://www.idangero.us/swiper/get-started/)
  * [API](http://www.idangero.us/swiper/api/)
  * [Demos](http://www.idangero.us/swiper/demos/)
  * [Forum](http://www.idangero.us/swiper/forum/)

# Dist / Build

On production use files (JS and CSS) only from `dist/` folder, there will be the most stable versions, `build/` folder is only for development purpose

### Build

Swiper uses `gulp` to build a development (build) and dist versions.

First you need to have `gulp-cli` which you should install globally.

```
$ npm install --global gulp
```

Then install all dependencies, in repo's root:

```
$ npm install
```

And build development version of Swiper:
```
$ gulp build
```

The result is available in `build/` folder.

### Dist/Release

After you have made build:

```
$ gulp dist
```

Distributable version will available in `dist/` folder.

# Contributing

All changes should be committed to `src/` files. Swiper uses LESS for CSS compilations, and concatenated JS files (look at gulpfile.js for concat files order)

Swiper 2.x.x
==========

If you still using Swiper 2.x.x or you need old browsers support, you may find it in [Swiper2 Branch](https://github.com/nolimits4web/Swiper/tree/Swiper2)
* [Download Latest Swiper 2.7.6](https://github.com/nolimits4web/Swiper/archive/v2.7.6.zip)
* [Source Files](https://github.com/nolimits4web/Swiper/tree/Swiper2/src)
* [API](https://github.com/nolimits4web/Swiper/blob/Swiper2/API.md)
npm package: @horacio/learnstorybook-design-system
Description: learning how to build design systems
Author: Horacio Herrera
Latest version: 0.1.2

# The Learn Storybook design system

The Learn Storybook design system is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more at [Learn Storybook](https://learnstorybook.com).
npm package: @horacioh/gatsby-theme-mdx
Description: <p align="center">   <a href="https://www.gatsbyjs.org">     <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />   </a> </p>
Author: Horacio Herrera
Latest version: 0.1.1

<p align="center">
  <a href="https://www.gatsbyjs.org">
    <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
  </a>
</p>

<h1 align="center">
  Gatsby theme MDX
</h1>

Gatsby theme that let you create pages from `.mdx` files inside the `pages` directory

## Installation

- Install the theme

```bash
npm i --save @horacioh/gatsby-theme-mdx
# or
yarn add @horacioh/gatsby-theme-mdx
```

- Add the theme to yout `gatsby-config.js` files

```bash
# gatsby-config.js

module.exports = {
  // ...
  plugins: [
    // ...
    `@horacioh/gatsby-theme-mdx`,
  ]
}
```

- Create `.mdx` files on your `src/pages` folder and you are all set.

```mdx
// pages/index.mdx

# Hello MDX page
```

## This theme includes

- `gatsby-plugin-mdx`: to transform `.mdx` files to pages. [docs](https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/)
- `gatsby-plugin-prismjs`: to style codeblocks properly. [docs](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/)
- `gatsby-plugin-theme-ui`: base & extensable styles for theme components. [docs](https://theme-ui.com/gatsby-plugin/)

## Issues & feedback

Any questions or feedback is welcome!. please if you don't understand something or need more documentation os some utility please file [an issue](https://github.com/horacioh/gatsby-theme-mdx/issues) or send me [a tweet](https://twitter.com/hhg2288).

Happy Theming!!
npm package: @horacioh/slate-plugin-with-markdown-parser
Description: This Slate plugin allows you to paste markdown content into the editor and convert it to slate nodes.
Author: Horacio Herrera
Latest version: 0.1.0

# Slate plugin `withMarkdownParser`

This Slate plugin allows you to paste markdown content into the editor and convert it to slate nodes.

## [DEMO](https://codesandbox.io/s/slate-reproductions-typxd) (TODO)

## Installation

```shell

yarn add @horacioh/slate-plugin-with-markdown-parser
# or
npm install @horacioh/slate-plugin-with-markdown-parser --save
```

## TODOs

- [ ] remove all `any` types :man_facepalming:
- [ ] docs
- [ ] examples
- [ ] contributing guidelines
- [ ] tests
- [ ] CI/CD Github actions
- [ ] Storybook examples
npm package: @horanf/begonia-theme
Description: Vue 3 decorative background components — fluid gradient shader & begonia flower art
Latest version: 0.1.0

# @horanf/begonia-theme

> 取一抹秋海棠红，绘几枝数字花开。

Vue 3 装饰性背景组件库 —— 流体渐变着色器 & 海棠花生成艺术。

## 灵感

- **配色** 源自 [中国色 · 秋海棠红](https://zhongguose.com/#qiuhaitanghong) `#ec2b24`
- **花枝动画** 受 [antfu.me](https://antfu.me/) 生成艺术风格启发

## 特性

- 🎨 GLSL 流体渐变着色器，基于 Simplex 噪声的程序化色彩流动
- 🌺 Canvas 2D 递归生长的海棠花枝 —— 不对称花瓣、径向渐变、花蕊与叶片
- 🌓 深色 / 浅色主题自适应（深色偏绛红，浅色偏珊瑚粉）
- 🖱️ 轻微鼠标视差交互
- 📦 不依赖 Tailwind CSS 或 Pinia，完全独立

## 安装

本包发布在 [GitHub Packages](https://github.com/horanf/begonia-theme/packages)，需要先配置 registry。

**1. 创建或编辑项目根目录的 `.npmrc`：**

```ini
@horanf:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
```

**2. 安装：**

```bash
npm install @horanf/begonia-theme
```

## 使用

### 快速开始

```vue
<script setup lang="ts">
import { BegoniaTheme } from '@horanf/begonia-theme'
import '@horanf/begonia-theme/style.css'

const isDark = ref(false)
</script>

<template>
  <BegoniaTheme :is-dark="isDark" />
  <main>
    <!-- 你的页面内容 -->
  </main>
</template>
```

### 单独使用子组件

```vue
<script setup lang="ts">
import { ThreeBackground, BegoniaArt } from '@horanf/begonia-theme'
import '@horanf/begonia-theme/style.css'
</script>

<template>
  <!-- 仅流体渐变 -->
  <ThreeBackground :is-dark="isDark" />

  <!-- 仅海棠花枝 -->
  <BegoniaArt :is-dark="isDark" />
</template>
```

## 组件

| 组件 | 说明 |
|------|------|
| `BegoniaTheme` | 组合容器，同时渲染渐变背景与海棠花枝 |
| `ThreeBackground` | Three.js GLSL 流体渐变着色器，程序化噪声 + 鼠标视差 |
| `BegoniaArt` | Canvas 2D 递归海棠花枝 —— 花瓣、花蕊、叶片、曲线枝干 |

## Props

所有组件接受相同的 prop：

| Prop | 类型 | 必填 | 说明 |
|------|------|------|------|
| `isDark` | `boolean` | 是 | 当前是否为深色主题 |

## Peer Dependencies

```json
{
  "vue": ">=3.3.0",
  "three": ">=0.150.0"
}
```

## License

[MIT](./LICENSE) © [horanf](https://github.com/horanf)
npm package: @horat1us/bing-translator
Description: ## Using in Code ```javascript import { BingTranslator } from "@horat1us/bing-translator";
Latest version: 1.0.0

# Bing Microsoft Translator 

## Using in Code
```javascript
import { BingTranslator } from "@horat1us/bing-translator";

const translator = new BingTranslator({source: "en", target: "uk"});
translator.evaluate('Hello, World!')
    .then((translated) => {
        console.log(translated);
        return translator.release();
    })
    .catch((error) => console.error(error));
```

## CLI Package
```bash
npm i -g @horat1us/bing-translator

cat ~/document.txt | bing-translate
## or interactive
bing-translate
```

## From sources
### Local NodeJS and Chromium
Requires NodeJS >=12, Chrome installed.
```bash
git clone https://github.com/Horat1us/bing-translator.git
npm i
npm test
npm start
cat ./document.txt | npm start
```
### Docker
```bash
## Install Dependencies
docker run -w $PWD -v $PWD:$PWD -e BROWSER_ARGS="--no-sandbox" catsoss/node-headless-chrome:13.6.0-1 npm i
## Execute Tests
docker run -w $PWD -v $PWD:$PWD -e BROWSER_ARGS="--no-sandbox" catsoss/node-headless-chrome:13.6.0-1 npm test
## Translate Texts from user input
docker run -it -w $PWD -v $PWD:$PWD -e BROWSER_ARGS="--no-sandbox" catsoss/node-headless-chrome:13.6.0-1 npm start
### or
docker run -it -w $PWD -v $PWD:$PWD -e BROWSER_ARGS="--no-sandbox" catsoss/node-headless-chrome:13.6.0-1 bash -c "cat ./document.txt | npm start" 
```
npm package: @horat1us/detect-ad-block
Description: Browser Ad Block add-ons detector
Author: Alexander
Latest version: 1.0.0

# Detect Ad Block
Simple module to detect advertising block add-on in browser using Promise.

 - Promise-based
 - TypeScript
 - ESM/CommonJS support

*Require *Promise* to be supported or polifylled.*

Inspired by [FuckAdBlock@4.0.0-beta3](https://github.com/sitexw/FuckAdBlock/tree/4.0.0-beta.3).

## Installation
Using [npm](https://npmjs.com/package/detect-ad-block):
```bash
npm i @horat1us/detect-ad-block@^1.0
```

## Usage

```javascript
import { DetectAdBlock } from "@horat1us/detect-ad-block";

function detect() {
    const detectAdBlock = DetectAdBlock();
    detectAdBlock.perform({ timeout: 1000 })
        .then((result) => {
            console.log(result ? `AdBlock Detected` : `AdBlock Not Found`);
        })
        .catch((error) => {
            console.error(`Error while AdBlock checking: `, error);
        });
}
const timeout = 5000;

// You may use window.onload, document.onreadystatechange etc.
if (window.requestIdleCallback) {
    window.requestIdleCallback(detect, timeout);
} else {
    setTimeout(detect, timeout)
}
```

*Note: You should not run adblock checking directly on or after page load.*

### DetectPlugin
You may use built-in plugins:
- [http:ajax](./src/plugins/Http.ts) *(default)* - http request block detection using XMLHttpRequest (AJAX)
- [html](./src/plugins/Html.ts) *(default)* - html element block detection
- [http:script](./src/plugins/Http.ts) - http request block detection using script tag (<script src="/ad/.... />)

Also, you may implement custom plugin using [DetectPlugin](./src/plugins/DetectPlugin.ts) interface.

```javascript
import { DetectAdBlock, plugins } from "@horat1us/detect-ad-block";

const detectAdBlock = DetectAdBlock([
    // your plugins list
    plugins.ajax,
    plugins.script,
    plugins.html,
    // using built-in plugin with custom options
    plugins.Html({
        name: "custom-html",
        baitStyle: "...",
        baitClass: "...",
        interval: 100,
        timeout: 950,
    }),
    // or custom plugin
    {
        name: "custom-plugin",
        version: 1,
        detect(resolve) {
            const result = performSomeCheck();
            resolve(result);
        },
    },
])
```

## Contributors
- [Alexander <horat1us> Letnikow](mailto:reclamme@gmail.com)
- [Valentin Allaire](mailto:valentin.allaire@sitexw.fr) - as author of [FuckAdBlock](https://github.com/sitexw/FuckAdBlock)

## License
[MIT](./LICENSE)
npm package: @horat1us/react-hooks
Description: React Hooks Collection
Author: Alexander
Latest version: 1.14.1

# React Hooks
[![npm version](https://badge.fury.io/js/%40horat1us%2Freact-hooks.svg)](https://badge.fury.io/js/%40horat1us%2Freact-hooks)
[![Build Status](https://travis-ci.org/Horat1us/react-hooks.svg?branch=master)](https://travis-ci.org/Horat1us/react-hooks)


Collection of React Hooks and Utils

## Install
```bash
npm i @horat1us/react-hooks
```

## Usage
```typescript jsx
import { useOpenState } from "./src";

export const Component = () => {
    const [isOpen, changeOpenState] = useOpenState();
    return (
        <button className={isOpen ? "is-open" : "is-close"} onClick={changeOpenState}>
            {isOpen ? "Close" : "Open"}
        </button>
    );
};
```

## Contents
- [useOpenState](./src/use-open-state.ts)
- [useWindowWidth](./src/use-window-width.ts)
- [useWindowSize](./src/use-window-size.ts)
- [useInterval](./src/use-interval.ts)
- [useTimeout](./src/use-timeout.ts)
- [useSubmitCallback](./src/use-submit-callback.ts) - handle FormEvent with custom callback
and `event.preventDefault()` call.
- [useInputState](./src/use-input-state.ts) - controlling input value using state and onChange callback.
- [useScrollEffect](./src/use-scroll-effect.ts) - auto scroll to element bottom on changes
- [useMutationObserver](./src/use-mutation-observer.ts) - MutationObserver effect hook with HTMLElement state
- [useDocumentTitleEffect](./src/use-document-title-effect.ts) - auto scroll to element bottom on changes.
Can be used as stateless component:
```jsx harmony
<DocumentTitle value="string" />
  ```
- [usePageMeta](./src/use-page-meta.ts) - changes or adds meta tag.
- [usePageInfo](./src/use-page-info.ts) - combines useDocumentTitleEffect and usePageMeta.

- [usePrint](./src/use-input-state.ts) - prints selected DOM element.
When use you may use [printable.min.css](./styles/printable.min.css).

## Contributors
- [Alexander <Horat1us> Letnikow](https://github.com/Horat1us)

## License
[MIT](./LICENSE)
npm package: @horat1us/request-idle-callback
Description: Request Idle Callback Polyfill
Author: Alexander
Latest version: 1.0.6

# IdleCallback

Available as *commonjs* and *esm* module with typescript typings.  
See [Using requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback)
for details.

This package implements the [es-shim API](https://github.com/es-shims/api) interface. It works in an ES3-supported environment and complies with the [spec](http://www.ecma-international.org/ecma-262/6.0/).

Includes **TypeScript** typings and source code.

## Installation
Using [npm](https//npmjs.com/package/@horat1us/request-idle-callback):
```bash
npm i @horat1us/request-idle-callback
```

## Usage
Most common usage:
```javascript

var handler = require('@horat1us/request-idle-callback')();
	/* or */
handler = require('@horat1us/request-idle-callback/polyfill')(); 

// returns native requestIdleCallback/cancelIdleCallback if compliant
handler.requestIdleCallback;
handler.cancelIdleCallback;
```
ESM module also available:
```javascript
import { requestIdleCallback, cancelIdleCallback } from "@horat1us/request-idle-callback"
```

To shim (replace global) you need to use:
```javascript
require("@horat1us/request-idle-callback").shim();
// or
require("@horat1us/request-idle-callback/auto");
```
Or ESM (prefered):
```javascript
import {shim} from "@horat1us/request-idle-callback/esm";
shim();
```

### IdlePromise
You can also use [IdlePromise](./src/IdlePromise.ts).  
*Note: Promise support in runtime environment is required*
```javascript
import { IdlePromise, IdlePromiseCancel } from "./src/IdlePromise";

// Create Promise
const promise = IdlePromise({
    timeout: 5000,
});

// Process event, handle rejections
promise
    .then((deadline) => {
        // resolved, same as requestIdleCallback
        console.log(deadline)
    })
    .catch((error) => {
        if (error.message === "Idle Promise Cancel") {
            // handle cancellation
            return;
        }
        // handle rejection
    });

// You can also cancel idleCallack resolving
promise.cancel("Some Reason");
```

## License
[MIT](./LICENSE)
npm package: @horat1us/sass-mixins
Description: SASS Mixins
Author: Alexander
Latest version: 0.0.1

# Horat1us SASS Mixins
[![Build Status](https://travis-ci.org/Horat1us/sass-mixins.svg?branch=master)](https://travis-ci.org/Horat1us/sass-mixins)

Personal custom mixins collection. You are welcome to use.

*Includes 100% coverage compilation tests using node-sass, typescript and jest.*

## Usage
```bash
npm i @horat1us/sass-mixins
```
```scss
@import "~@horat1us/sass-mixins";
```

### Breakpoint
[Tests / Examples](./tests/breakpoint.test.ts)

```scss
// You can configure values as you want
$breakpoints: (
        'xsmall': (min-width: 370px),
        'small': (min-width: 767px),
        'medium': (min-width: 992px),
        'large': (min-width: 1200px),
        'xlarge': (min-width: 1600px),
) !default;

// if you want to use only breakpoint
@import "~@horat1us/sass-mixins/breakpoint";

.selector {
  color: red;
    
  @include match('small') {
     color: blue;
  }
  
  @include not-match('xlarge') {
    color: yellow;
  }
}
```

## Contributors
- [Alexander Letnikow](mailto:reclamme@gmail.com)

## License 
[MIT](./LICENSE)
npm package: @horchatajs/hjs-multiselect
Description: It's a multiselect `vue.js` component. [Demo](https://cdn.rawgit.com/HorchataJS/hjs-multiselect/master/index.html)
Author: Emilio Forrer
Latest version: 0.1.4

# hjs-multiselect

It's a multiselect `vue.js` component. [Demo](https://cdn.rawgit.com/HorchataJS/hjs-multiselect/master/index.html)

![Example](screenshot.png)

####  Warning!

This is an example of how to create and publish a npm package and it was created for learning purposes and as an example for horchata js conference, **DON'T USE IT ON PRODUCTION**

If you want to read the **gitbook** about, "How to create a Node js package", go [here](https://emilioforrer.gitbooks.io/creacion-y-distribucion-de-un-paquete-de-nodejs/content/) (it's in spanish)




## Install

**npm:**

```
  npm install @horchatajs/hjs-multiselect --save
```


**yarn:**

```
  yarn add @horchatajs/hjs-multiselect
```

## Usage

### HTML

```html
<div id="app">
  <p><label for="">Países</label></p>
  <hjs-multiselect placeholder="Please select countries" v-bind:items="items" v-bind:select="select"  @change="onChange"></hjs-multiselect>
</div>
<div id="preview"></div>
```

### Javascript

```javascript

Vue.use(HjsMultiselect); // Register the global UI component

new Vue({
  el: '#app',
  data: {

    select: [{ text: 'El Salvador', value: 'SV' }],
    items: [
      {text: "El Salvador", value: "SV"},
      {text: "Guatemala", value: "GT"},
      {text: "Honduras", value: "HN"}
    ]
  },
  methods: {
    onChange: function(item, items){
      let preview = document.getElementById('preview');
      preview.innerHTML = "<p>On change event, preview of selected items: "+JSON.stringify(items)+ "</p>"
    }
  }
})
```

## Contributors

* [@emilioforrer](https://github.com/emilioforrer)
* [@ricardoerl](https://github.com/ricardoerl)
npm package: @horihiro/textlint-rule-azure-naming-convention
Latest version: 0.0.1-alpha.0

# textlint-rule-az-res-name-convention



## Install

Install with [npm](https://www.npmjs.com/):

    npm install textlint-rule-az-res-name-convention

## Usage

Via `.textlintrc.json`(Recommended)

```json
{
    "rules": {
        "az-res-name-convention": true
    }
}
```

Via CLI

```
textlint --rule az-res-name-convention README.md
```

### Build

Builds source codes for publish to the `lib` folder.
You can write ES2015+ source codes in `src/` folder.

    npm run build

### Tests

Run test code in `test` folder.
Test textlint rule by [textlint-tester](https://github.com/textlint/textlint-tester).

    npm test

## License

MIT ©
npm package: @horin-tools/gen-ics4course
Description: Generate an ics file for subscribing courses
Author: Horace Liu
Latest version: 0.1.2

# gen-ics4course

>Generate an ics file for subscribing courses

## Usage

```bash
npx @horin-tools/gen-ics4course --if source.csv --of result.ics

# or use pnpm

pnpm dlx @horin-tools/gen-ics4course --if source.csv --of result.ics
```

get more help:

```bash
npx @horin-tools/gen-ics4course --help

# or

npx @horin-tools/gen-ics4course -h
```

|field|description|
|------|------|
|title|The title of the event.|
|startDate|The start date of the event, in the format: YYYY-MM-DD.|
|startTime|The start time of the event, in the format: HH:MM (24-hour format).|
|endDate|The end date of the event, in the format: YYYY-MM-DD.|
|endTime|The end time of the event, in the format: HH:MM (24-hour format).|
|description|A detailed description of the event (optional).|
|location|The location of the event (optional).|

you can get the sample files from [here](https://github.com/liuhq/gen-ics4course/releases)

## Thanks

- [fast-csv](https://github.com/C2FO/fast-csv)
- [xlsx](https://github.com/SheetJS/sheetjs)
- [ics](https://github.com/adamgibbons/ics)
- [date-fns](https://github.com/date-fns/date-fns)
- [yargs](https://github.com/yargs/yargs)

## License

[MIT](./LICENSE)
npm package: @horin-tools/subparser
Description: The subscribe parser
Author: Horace Liu
Latest version: 0.1.1

# subparser

The subscribe parser

# Usage

```sh
npx @horin-tools/subparser <your_subscribe_link> <save_file_path>

# or use pnpm

pnpm dlx @horin-tools/subparser <your_subscribe_link> <save_file_path>
```

# License

[MIT](./LICENSE)