open-index/open-npm huggingface dataset:
npm package: @glorious/cookie
Description: The tiniest cookie library
Author: Rafael Camargo
Latest version: 0.3.0

# Glorious Cookie

[![CircleCI](https://circleci.com/gh/rafaelcamargo/glorious-cookie.svg?style=svg)](https://circleci.com/gh/rafaelcamargo/glorious-cookie)
[![codecov](https://codecov.io/gh/rafaelcamargo/glorious-cookie/branch/master/graph/badge.svg)](https://codecov.io/gh/rafaelcamargo/glorious-cookie)
[![Code Climate](https://codeclimate.com/github/rafaelcamargo/glorious-cookie/badges/gpa.svg)](https://codeclimate.com/github/rafaelcamargo/glorious-cookie)

## Install

Glorious Cookie is available via npm:
```
npm i @glorious/cookie --save
```

Once installed, you just need import it in your module:
``` javascript
import gcookie from '@glorious/cookie';
```
or you may include it on your html:
``` html
<script src="/node_modules/@glorious/cookie/dist/gcookie.min.js"></script>
```

## Usage

Intending to be as simple as possible, Glorious Cookie has only three methods.

### Set

``` javascript
/*
** @key: String [required]
** @value: String [required]
** @days: Number [optional] - If not provided, cookie is removed when the user closes the browser.
** @path: String [optional] - If not provided, cookie is valid for the entire site.
*/
gcookie.set(key, value, days, path);
```

### Get

``` javascript
/*
** @key: String [optional] - If not provided, all cookies will be returned.
*/
gcookie.get(key);
```

### Remove

``` javascript
/*
** @key: String [required]
** @path: String [optional] - If you have specified a path on gcookie.set(),
**                            it will be required here.
*/
gcookie.remove(key, path);
```

**Note:** If cookies are not available, a warning will be logged when trying to set or remove a cookie.
npm package: @glorious/fyzer
Description: Listen when some element just appears above the page fold
Author: Rafael Camargo
Latest version: 0.1.10

# Fyzer
> The easiest way to be notified when some element appears above the page fold

[![CircleCI](https://circleci.com/gh/glorious-codes/glorious-fyzer.svg?style=svg)](https://circleci.com/gh/glorious-codes/glorious-fyzer)
[![Coverage Status](https://coveralls.io/repos/github/glorious-codes/glorious-fyzer/badge.svg?branch=master)](https://coveralls.io/github/glorious-codes/glorious-fyzer?branch=master)

## Installation

```
$ npm install -S @glorious/fyzer
```

## Usage

``` javascript
import fyzer from '@glorious/fyzer';

const element = document.querySelector('#myElement');

const subscriptionId = fyzer.subscribe(element, () => {
  // This function will be called every time
  // element appears above the fold.
});

// When you no longer needs to observe the element's position,
// you can unsubscribe from Fyzer:
fyzer.unsubscribe(subscriptionId);
```

## Contributing

1. Install [Node](https://nodejs.org/en/). Download the "Recommend for Most Users" version.

2. Clone the repo:
``` bash
git clone git@github.com:glorious-codes/glorious-fyzer.git
```

3. Go to the project directory:
``` bash
cd glorious-fyzer
```

4. Install the project dependencies:
``` bash
npm install
```

## Tests

Ensure that all code that you have added is covered with unit tests:
``` bash
npm run test -- --coverage
```
npm package: @glorious/pitsby
Description: Docs generator for AngularJS, React, Vue and Vanilla components
Author: Rafael Camargo
Latest version: 1.37.2

# Pitsby
> Docs generator for AngularJS, React, Vue and Vanilla components.

[![CircleCI](https://circleci.com/gh/glorious-codes/glorious-pitsby/tree/master.svg?style=svg)](https://circleci.com/gh/glorious-codes/glorious-pitsby/tree/master)
[![Coverage Status](https://coveralls.io/repos/github/glorious-codes/glorious-pitsby/badge.svg?branch=master)](https://coveralls.io/github/glorious-codes/glorious-pitsby?branch=master)

## Installation

```
$ npm install @glorious/pitsby -g
```

## Usage

### Setup

Pitsby is based on two types of file:

- [Configuration File](https://github.com/glorious-codes/glorious-pitsby/blob/master/docs/configuration.md) (pitsby.config.js)
  - Responsible for telling Pitsby where the documentation files are and for informing all the assets that should be included in the documentation.
- [Documentation File](https://github.com/glorious-codes/glorious-pitsby/blob/master/docs/documentation.md) (eg. button.doc.js)
  - Used by Pitsby to build the page that contains all the component details.

### Build

Since you have set up the `pitsby.config.js` for your project and, at least, one documentation file, you can easily generate the documentation running:
```
$ pitsby build
```

Once built, you can see the result serving the files just created using [http-server](https://www.npmjs.com/package/http-server) or any other lib that you prefer:
```
$ http-server ./pitsby -p 7000
```

To keep Pitsby watching the changes that you make on any file listed on `pitsby.config.js`, run:
```
$ pitsby build --watch
```

*Go to `http://localhost:7000` and see the documentation that has been just created.*

## Contributions

If you are interested in contributing to this project, refer to the [Contributing Steps](https://github.com/glorious-codes/glorious-pitsby/blob/master/docs/contributing.md).
npm package: @glorious/rasket
Description: A simple pub-sub implementation
Author: Rafael Camargo
Latest version: 0.1.3

# Rasket
> A simple Pub-Sub implementation.

[![CircleCI](https://circleci.com/gh/glorious-codes/glorious-rasket.svg?style=svg)](https://circleci.com/gh/glorious-codes/glorious-rasket/tree/master)
[![Coverage Status](https://coveralls.io/repos/github/glorious-codes/glorious-rasket/badge.svg?branch=master)](https://coveralls.io/github/glorious-codes/glorious-rasket?branch=master)

## Installation

```
$ npm install -S @glorious/rasket
```

## Usage

### Subscribe

``` javascript
/*
** @eventName: String [required]
** @callback: Function [required]
*/

import rasket from '@glorious/rasket';

const eventName = 'user:updated';
const callback = data => {
  // This function will be called every time 'user:updated' is published.
}

const subscriptionId = rasket.subscribe(eventName, callback);
```

### Unsubscribe

``` javascript
/*
** @subscriptionId: String [required]
*/

import rasket from '@glorious/rasket';

const subscriptionId = rasket.subscribe('event:name', data => {});

// When you no longer needs to listen the event,
// you can unsubscribe from it:
rasket.unsubscribe(subscriptionId);
```

### Publish

``` javascript
/*
** @eventName: String [required]
** @data: Any [optional]
*/

import rasket from '@glorious/rasket';

const eventName = 'user:updated';
const data = { name: 'John Duo', email: 'john@gmail.com' };

rasket.publish(eventName, data);
// At this moment, every piece of code subscribed on 'user:updated'
// will be notified with that data.
```

## Contributing

1. Install [Node](https://nodejs.org/en/). Download the "Recommend for Most Users" version.

2. Clone the repo:
``` bash
git clone git@github.com:glorious-codes/glorious-rasket.git
```

3. Go to the project directory:
``` bash
cd glorious-rasket
```

4. Install the project dependencies:
``` bash
npm install
```

## Tests

Ensure that all code that you have added is covered with unit tests:
``` bash
npm run test -- --coverage
```
npm package: @glorious/taslonic
Description: A glorious UI library available for React and Vue
Author: Rafael Camargo
Latest version: 1.6.4
Deprecated: @glorious/taslonic is no longer maintained. From March 31, 2023 onwards, @glorious/taslonic got split into the following packages: @glorious/taslonic-react and @glorious/taslonic-vue.

## ⚠️ **IMPORTANT**

From **March 31, 2023** onwards, `@glorious/taslonic` got split into the following packages:

- [@glorious/taslonic-react](https://www.npmjs.com/package/@glorious/taslonic-react)
- [@glorious/taslonic-vue](https://www.npmjs.com/package/@glorious/taslonic-vue)
npm package: @glorious/taslonic-react
Description: A glorious UI library for React
Author: Rafael Camargo
Latest version: 1.1.1

# Taslonic React
> Glorious components for React.

## Usage

To get started with Taslonic in your React project, please refer to the [instructions](https://taslonic.com/react) found on the Taslonic's Official Website.

## Contributing

**IMPORTANT**: Run the following commands from repository root.

1. Install [Node](https://nodejs.org/en/). Download the "Recommend for Most Users" version.

2. Clone the repo:
``` bash
git clone git@github.com:glorious-codes/glorious-taslonic.git
```

3. Go to the project directory
``` bash
cd glorious-taslonic
```

4. Install the project dependencies
``` bash
npm install
```

5. In one terminal tab run:
``` bash
npm run build -w=packages/react -- --watch
```

6. In another run:
``` bash
npm run start
```

Docs will be running on `http://localhost:7000`.

## Tests

1. Ensure that all code that you have added is covered with unit tests:
``` bash
npm run test -w=packages/react
```

2. You can optionally generate coverage report after running tests:
``` bash
npm run test -w=packages/react -- --coverage
```
npm package: @glorious/taslonic-vue
Description: A glorious UI library for Vue
Author: Rafael Camargo
Latest version: 1.1.1

# Taslonic Vue
> Glorious components for Vue.

## Usage

To get started with Taslonic in your Vue project, please refer to the [instructions](https://taslonic.com/vue) found on the Taslonic's Official Website.

## Contributing

**IMPORTANT**: Run the following commands from repository root.

1. Install [Node](https://nodejs.org/en/). Download the "Recommend for Most Users" version.

2. Clone the repo:
``` bash
git clone git@github.com:glorious-codes/glorious-taslonic.git
```

3. Go to the project directory
``` bash
cd glorious-taslonic
```

4. Install the project dependencies
``` bash
npm install
```

5. In one terminal tab run:
``` bash
npm run build -w=packages/vue -- --watch
```

6. In another run:
``` bash
npm run start
```

Docs will be running on `http://localhost:7000`.

## Tests

1. Ensure that all code that you have added is covered with unit tests:
``` bash
npm run test -w=packages/vue
```

2. You can optionally generate coverage report after running tests:
``` bash
npm run test -w=packages/vue -- --coverage
```
npm package: @gloriousky/tailwindcss-localization
Description: This plugin adds a new variant called `{language}` that can be used to style elements based on their language. This can be useful for creating multilingual websites or applications.
Author: gloriousky
Latest version: 1.1.0

## Tailwind CSS Variant Plugin

This plugin adds a new variant called `{language}` that can be used to style elements based on their language. This can be useful for creating multilingual websites or applications.

## Installation

1. Install the plugin using npm or Yarn:

   ```bash
   # Using npm
   npm install -D @gloriousky/tailwindcss-localization

   # Using Yarn
   yarn add -D @gloriousky/tailwindcss-localization
   ```

2. Add the plugin to your `tailwind.config.js` file. The default language is bn (Chinese traditional). You can add as many language as you like using the `languages` option in theme configuration.

   ```js
   // tailwind.config.js
   module.exports = {
     theme: {
       languages: ["tw", "en"],
     },
     plugins: [require("@gloriousky/tailwindcss-localization")],
   };
   ```

3. The plugin assumes that you have a `lang` attribute in your HTML tag and it is handles by your application or website. You can then use the `{language}` variant in your HTML like this:

   ```html
   <html lang="en">
     <body>
       <h1 class="en:text-lg">Hello, world!</h1>
     </body>
   </html>
   ```

   This will generate in the following CSS:

   ```css
   [lang="en"] .en\:text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
   ```

## Feature

If you want a prefix that is different from the attribute value, specify the languages as an object:

```js
// tailwind.config.js
module.exports = {
  theme: {
    languages: {
      taiwan: "tw",
      english: "en",
    },
  },
  plugins: [require("@gloriousky/tailwindcss-localization")],
};
```

```html
<html lang="en">
  <body>
    <h1 class="english:text-lg">Hello, world!</h1>
    <p class="taiwan:text-lg">Hello, world!</p>
  </body>
</html>
```

This will generate in the following CSS:

```css
[lang="en"] .english\:text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
[lang="tw"] .taiwan\:text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
```

## Changelog

- `1.1.0`: Feature - Use different prefixes
- `1.0.0`: Initial release