open-index/open-npm huggingface dataset:
npm package: @intofilm/signature
Description: The Into Film Signature Generator
Author: Chris
Latest version: 0.1.3

# The Into Film Signature Generator

The Into Film Signature Generator allows developers to create unique signature for any arrays and to be sure it is always the same for the same arrays. It doesn't depend on elements or keys order.

# Installation

## Requirements PHP

1. PHP 7+ compiled with the cURL extension
2. A recent version of cURL 7.16.2+ compiled with OpenSSL and zlib

## Composer

The recommended way to install the Into Film SDK is via [Composer](http://getcomposer.org). Composer is a tool for dependency management in PHP. It allows you to declare the dependent libraries your project needs and it will install them in your project for you.

```sh
# Install Composer
curl -sS https://getcomposer.org/installer | php
```

After installing you will need to add the Into Film Signature to the `composer.json`.
Due to this it is currently necessary to include a `repositories` section in the `composer.json`.

### Example composer.json

```json
{
  "repositories": [
    {
      "type": "git",
      "url": "ssh://git@bitbucket.org/intofilm/intofilm-signature.git"
    }
  ],
  "require": {
    "intofilm/intofilm-signature": "0.1.*"
  }
}
```

### Install dependencies

```sh
php composer.phar install
```

## Examples

### Using array input

```php
<?php
require_once 'vendor/autoload.php';

use IntoFilm\Signature\Signature;

$input = ['key1'=>'value1', 'key2'=>'value2'];
$generator = new Signature();
$signature = $generator->generate($input);
```

### Using json encoded string input

```php
<?php
require_once 'vendor/autoload.php';

use IntoFilm\Signature\Signature;

$input = '{"key1":"value1","key2":"value2"}';
$generator = new Signature();
$signature = $generator->generate($input);
```

## In Node.js

Using npm:

```shell
$ npm i @intofilm/signature
```

### Example

In Node.js:

```js
// Load the lib.
const signature = require("@intofilm/signature");

const hash = signature({ key1: "value1", key2: "value2" });
```
npm package: @intor/reader-json5
Description: JSON5 reader for intor.
Author: Yiming Liao
Latest version: 0.1.1

<h1 align="center">@intor/reader-json5</h1>

<div align="center">

JSON5 reader for **intor**.

</div>

<div align="center">

[![NPM version](https://img.shields.io/npm/v/@intor%2freader-json5?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@intor%2freader-json5)
[![TypeScript](https://img.shields.io/badge/TypeScript-%E2%9C%94-blue?style=flat&colorA=000000&colorB=000000)](https://www.typescriptlang.org/)
[![License](https://img.shields.io/npm/l/@intor%2freader-json5?style=flat&colorA=000000&colorB=000000)](LICENSE)

</div>

## Installation

```bash
# npm
npm install @intor/reader-json5

# yarn
yarn add @intor/reader-json5

# pnpm
pnpm add @intor/reader-json5
```

## Example

**Setup**

```ts
import { json5Reader } from "@intor/reader-json5";

const { t } = await getTranslator(intorConfig, {
  locale,
  readers: { json5: json5Reader },
});
```

**Message file**

`messages/en/example.json5`

```json5
{
  // This is a comment
  text: "Coding is fun",
}
```

**Usage**

```ts
t("example.text");
// → "Coding is fun"
```
npm package: @intor/reader-md
Description: Markdown reader for intor.
Author: Yiming Liao
Latest version: 0.1.5

<h1 align="center">@intor/reader-md</h1>

<div align="center">

Markdown reader for **intor**.

</div>

<div align="center">

[![NPM version](https://img.shields.io/npm/v/@intor%2freader-md?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@intor%2freader-md)
[![TypeScript](https://img.shields.io/badge/TypeScript-%E2%9C%94-blue?style=flat&colorA=000000&colorB=000000)](https://www.typescriptlang.org/)
[![License](https://img.shields.io/npm/l/@intor%2freader-md?style=flat&colorA=000000&colorB=000000)](LICENSE)

</div>

## Installation

```bash
# npm
npm install @intor/reader-md

# yarn
yarn add @intor/reader-md

# pnpm
pnpm add @intor/reader-md
```

## Example

**Setup**

```ts
import { mdReader } from "@intor/reader-md";

const { t } = await getTranslator(intorConfig, {
  locale,
  readers: { md: mdReader },
});
```

**Message file**

`messages/en/example.md`

```md
### Coding is fun
```

**Usage**

```ts
// Markdown content is exposed under the `content` key by default
t("example.content");
// → "### Coding is fun"
```
npm package: @intor/reader-toml
Description: TOML reader for intor.
Author: Yiming Liao
Latest version: 0.1.1

<h1 align="center">@intor/reader-toml</h1>

<div align="center">

TOML reader for **intor**.

</div>

<div align="center">

[![NPM version](https://img.shields.io/npm/v/@intor%2freader-toml?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@intor%2freader-toml)
[![TypeScript](https://img.shields.io/badge/TypeScript-%E2%9C%94-blue?style=flat&colorA=000000&colorB=000000)](https://www.typescriptlang.org/)
[![License](https://img.shields.io/npm/l/@intor%2freader-toml?style=flat&colorA=000000&colorB=000000)](LICENSE)

</div>

## Installation

```bash
# npm
npm install @intor/reader-toml

# yarn
yarn add @intor/reader-toml

# pnpm
pnpm add @intor/reader-toml
```

## Example

**Setup**

```ts
import { tomlReader } from "@intor/reader-toml";

const { t } = await getTranslator(intorConfig, {
  locale,
  readers: { toml: tomlReader },
});
```

**Message file**

`messages/en/example.toml`

```toml
text = "Coding is fun"
```

**Usage**

```ts
t("example.text");
// → "Coding is fun"
```
npm package: @intor/reader-yaml
Description: YAML reader for intor.
Author: Yiming Liao
Latest version: 0.1.2

<h1 align="center">@intor/reader-yaml</h1>

<div align="center">

YAML reader for **intor**.

</div>

<div align="center">

[![NPM version](https://img.shields.io/npm/v/@intor%2freader-yaml?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@intor%2freader-yaml)
[![TypeScript](https://img.shields.io/badge/TypeScript-%E2%9C%94-blue?style=flat&colorA=000000&colorB=000000)](https://www.typescriptlang.org/)
[![License](https://img.shields.io/npm/l/@intor%2freader-yaml?style=flat&colorA=000000&colorB=000000)](LICENSE)

</div>

## Installation

```bash
# npm
npm install @intor/reader-yaml

# yarn
yarn add @intor/reader-yaml

# pnpm
pnpm add @intor/reader-yaml
```

## Example

**Setup**

```ts
import { yamlReader } from "@intor/reader-yaml";

const { t } = await getTranslator(intorConfig, {
  locale,
  readers: { yaml: yamlReader },
});
```

**Message file**

`messages/en/example.yaml`

```yaml
text: "Coding is fun"
```

**Usage**

```ts
t("example.text");
// → "Coding is fun"
```
npm package: @intothesource/date-to-w3c-string
Description: Converts JavaScript Date Objects to W3C Strings
Latest version: 0.0.4

# node-date-to-w3c-string

Converts JavaScript Date Objects to W3C Strings

This is an NPM package based on [this Gist](https://gist.github.com/tristanlins/6585391).
Also modified a bit to avoid modifying the Date Object.

## Todo

- [ ] Add tests
- [ ] Add d.ts
npm package: @intothesource/express-csv-redirect-middleware
Description: ExpressJS Middleware that handles redirects from a CSV file
Latest version: 1.3.0

# express-csv-redirect-middleware

ExpressJS Middleware that handles redirects from a CSV file

## Example

`foo.csv`:

```csv
/foo/	307	/bar/
/foo/	307 /
/foo/	410
```

`server.js`:

```js
import { readFileSync } from 'fs'
import { join } from 'path'
import express from 'express'
import csvRedirectMiddleware from '@intothesource/express-csv-redirect-middleware'

const csv = readFileSync(join(__dirname, 'foo.csv'))
const app = express()
app.use(csvRedirectMiddleware(csv))
```
npm package: @intothesource/feedback-animation
Description: Gives feedback to button clicks etc. Think Material style ripple effects.
Author: Ramon Valk
Latest version: 1.1.2

# @intothesource/feedback-animation

Gives feedback to button clicks etc. Think Material style ripple effects.

## Example


Imports
```html
<script type="module"
	src="../feedback-animation.js">
</script>
<link rel="stylesheet"
  	type="text/css"
  	href="../feedback-animation.css">
```

Usage
```html
<button class="example-button"
 	 data-its-feedback-animation='ripple'
 	 data-its-feedback-color="#81c784">
	<span>Test button</span>
</button>
```
Note: Using a containing element for button text is needed.

```css
.example-button {
border: none;
outline: 0;
width: 80px;
height: 44px;
transition: background 300ms ease-in-out;
}

.example-button:hover {
  background: #c8e6c9;
}

.example-button:focus {
  background: #a5d6a7
}
```
npm package: @intothesource/hashtag-shredder
Description: Shreds hashtags
Latest version: 1.0.3

# @intothesource/hashtag-shredder

Shreds hashtags 🤘

## Usage

```js
import { HashtagShredder } from '@intothesource/hashtag-shredder';

const original = 'Foo #Hash Bar';
const shredded = HashtagShredder.shred(original);

t.is(shredded, 'Foo Bar');
```

## Publishing Changes

```console
$ npm run release -- [patch|minor|major]
```

## Update the docs on https://intothesource.github.io/hashtag-shredder/

```console
$ npm run deploy:gh-pages
```
npm package: @intothesource/slider
Description: Slider for sliding things.
Latest version: 1.2.4

# @intothesource/slider

Slider for sliding things.

## Example

```html
<div data-its-slider>
    <div data-its-slider-slides-container>
        <div data-its-slider-slide> <!-- Slide 1 Content --> </div>
        <div data-its-slider-slide> <!-- Slide 2 Content --> </div>
        <div data-its-slider-slide> <!-- Slide 3 Content --> </div>
    </div>
    <button data-its-slider-button
        data-its-slider-button-prev
        data-its-slider-button-disabled
        disabled>prev</button>
    <button data-its-slider-button
        data-its-slider-button-next
        data-its-slider-button-disabled
        disabled>next</button>
</div>
<script src="slider.js"></script>
<script>
    var sliders = slider.Slider.init();
</script>
```

For a more complete example: See [index.ejs](examples/index.ejs).

## Progressive enhancement

You'll want to make sure that the content of the slider doesn't jump around the
page before the slider JS has fully loaded. To mitigate this, make sure to
include the following CSS in your project CSS (or inline it on the page).

The following CSS is most of how this slider is supposed to work. The additional
CSS and JS from this component is to make sure that the navigation buttons are
activated/de-activated and scroll snapping is implemented for devices that
support it.

```css
[data-its-slider-slides-container] {
    display: flex;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

[data-its-slider-slides-container]::-webkit-scrollbar {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    [data-its-slider-slides-container] {
        -webkit-overflow-scrolling: touch;
    }
}
```

The plugin adds a `data-its-slider-enhanced` attribute after it's been
initialized. If you want to hide the navigation buttons until they're ready to
use (or if JavaScript is even enabled):

```css
[data-its-slider]:not([data-its-slider-enhanced]) [data-its-slider-button] {
    display: none;
}
```

## Polyfill smooth scrolling

If you want Safari and IE to use smooth scrolling, you'll need to include a
polyfill to your project.

```html
<script 
    src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.js">
</script>
```

## Building

```console
$ npm run build
```

## Publishing changes

```console
$ npm version [patch|minor|major]
$ npm publish
```

## Update the docs on https://intothesource.github.io/slider/

```
$ npm run deploy:gh-pages
```
npm package: @intothesource/snackbar
Description: Small fadein notifications
Author: Ramon Valk
Latest version: 1.0.2

# @intothesource/snackbar

Small fadein notifications

## Example

```javascript
import { Snackbar } from '../snackbar.js';
const triggerNotification = () => {
    Snackbar('Notification text', 6000, 'button text', Callback);
}
```
and
```css
[data-its-snackbar] {
  position: absolute;
  width: fit-content;
  left: 0;
  right: 0;
  bottom: -100px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  transition: bottom 400ms ease-in-out;
}

[data-its-snackbar].active {
    bottom: 20%;
}
```
for a material style snackbar you can use or modify this
```css
[data-its-snackbar] {
  position: absolute;
  width: fit-content;
  left: 0;
  right: 0;
  bottom: -100px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  background: #323232;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  display: flex;
  align-items: center;
  font-size: 14px;
  transition: bottom 400ms ease-in-out;
}

[data-its-snackbar].active {
    bottom: 20%;
}

[data-its-snackbar-content] {
  padding: 14px;
}

[data-its-snackbar-button] {
  padding: 7px 8px;
  margin: 7px 8px;
  height: 36px;
  background: none;
  border: none;
  text-transform: uppercase;
  line-height: 10px;
  font-weight: 500;
}
```