open-index/open-npm huggingface dataset:
npm package: @gii0rdan/embed-instagram-feed
Description: Webcomponent embed-instagram-feed following open-wc recommendations
Author: nocodeapi
Latest version: 0.0.994

# Embed Instagram Feed ![MIT License](https://img.shields.io/npm/v/@nocodeapi/embed-instagram-feed)

![NoCodeAPI](https://nocodeapi.com/favicon-32x32.png)

This plugin is brought to you by [NoCodeAPI](https://nocodeapi.com/)

Embed Instagram Feed is a free plugin that makes is easy for you to embed your Instagram feed (using NoCodeAPI) in your websites, wordpress blog, shopify sites & basically any html site.

Works on all devices out of the box, phones, tablets & desktops.

This is reliable and secure method to embed your instagram feed into your static webpages without any coding.

## Preview

![Desktop](https://i.imgur.com/YLrM0mK.jpg)

## Features

- Responsive
- Lightweight

## Usage/Examples

1. Get your Instagram API endpoint via NoCodeAPI - [https://nocodeapi.com/instagram-api](https://nocodeapi.com/instagram-api)
2. Add this script into your webpage.

```html
<script
  type="module"
  src="https://unpkg.com/@nocodeapi/embed-instagram-feed@latest/embed-instagram-feed.js?module"
></script>
```

3. - Just place the `<embed-instagram-feed url="Your Instagram API from NoCodeAPI"></embed-instagram-feed>` into your webpage `<body>` where you want to display your Instagram feed.

### Full code sample

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Embed Instagram Feed</title>
    <script
      type="module"
      src="https://unpkg.com/@nocodeapi/embed-instagram-feed@latest/embed-instagram-feed.js?module"
    ></script>
  </head>
  <body>
    <embed-instagram-feed
      url="Your Instagram API from NoCodeAPI"
    ></embed-instagram-feed>
  </body>
</html>
```

## FAQ

#### Does this work with Wordpress?

Yes, this plugin works with all websites

#### Is this plugin free?

Yes, it is completely free and open source.

#### Do I need to write code for this?

No, we have handled this end to end, so all you need to do is, paste this in you website and you are good to go.

#### How do I customise the style?

You would need to tweak and override the css classes in order to do this.

## Support

For support, email hello@nocodeapi.com or join our [Telegram channel](https://t.me/NoCodeAPI).

## Contributing

Contributions are always welcome!

Please feel free to raise a PR, so we can look into it.

## Authors

- [@mddanishyusuf](https://www.twitter.com/mddanishyusuf)
- [@fayazara](https://www.twitter.com/fayazara)
npm package: @giimall/spectrum-colorpicker
Description: Spectrum: the no hassle jQuery colorpicker
Author: wyq
Latest version: 0.0.3
Deprecated: false

# Spectrum
## The No Hassle Colorpicker

See the demo and docs: http://bgrins.github.io/spectrum.

I wanted a colorpicker that didn't require images, and that had an API that made sense to me as a developer who has worked with color in a number of applications.  I had tried a number of existing plugins, but decided to try and make a smaller, simpler one.

I started using canvas, then switched to CSS gradients, since it turned out to be easier to manage, and provided better cross browser support.

### Basic Usage

Head over to the [docs](http://bgrins.github.io/spectrum) for more information.  There is a visual demo of the different options hosted at: http://bgrins.github.io/spectrum.

    <script src='spectrum.js'></script>
    <link rel='stylesheet' href='spectrum.css' />

    <input id='colorpicker' />

    <script>
    $("#colorpicker").spectrum({
        color: "#f00"
    });
    </script>

### npm

Spectrum is registered as package with npm.  It can be installed with:

    npm install spectrum-colorpicker

### Bower

Spectrum is registered as a package with [Bower](http://bower.io/), so it can be pulled down using:

    bower install spectrum

### Using spectrum with a CDN

CDN provided by [cdnjs](https://cdnjs.com/libraries/spectrum)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">

### Continuous Integration

[![Build Status](https://secure.travis-ci.org/bgrins/spectrum.png?branch=master)](http://travis-ci.org/bgrins/spectrum)

Visit https://travis-ci.org/bgrins/spectrum to view the status of the automated tests.

### Building Spectrum Locally

If you'd like to download and use the plugin, head over to http://bgrins.github.io/spectrum/ and click the 'Download Zip' button.

If you'd like to run the development version, spectrum uses Grunt to automate the testing, linting, and building.  Head over to http://gruntjs.com/getting-started for more information.  First, clone the repository, then run:

    npm install -g grunt-cli
    npm install

    # runs jshint and the unit test suite
    grunt

    # runs jshint, the unit test suite, and builds a minified version of the file.
    grunt build

### Internationalization

If you are able to translate the text in the UI to another language, please do!  You can do so by either [filing a pull request](https://github.com/bgrins/spectrum/pulls) or [opening an issue]( https://github.com/bgrins/spectrum/issues) with the translation.  The existing languages are listed at: https://github.com/bgrins/spectrum/tree/master/i18n.

For an example, see the [Dutch translation](i18n/jquery.spectrum-nl.js).
npm package: @giis/alfred-npms
Description: Alfred 3 workflow to search for npm packages with npms.io
Author: Sindre Sorhus
Latest version: 2.1.0

# alfred-npms

> [Alfred 3](https://www.alfredapp.com) workflow to search for npm packages with [npms.io](https://npms.io)

npms.io is a great npm package search with deep analysis of package quality using a myriad of metrics. Much better than the official npmjs.com search.

<img src="media/screenshot.png" width="694" height="440">


## Install

```
$ npm install --global alfred-npms
```

*Requires [Node.js](https://nodejs.org) 8+ and the Alfred [Powerpack](https://www.alfredapp.com/powerpack/).*


## Usage

In Alfred, type `npm`, <kbd>Enter</kbd>, and your query, to search for packages.

Select a package and press <kbd>Enter</kbd> to go to its GitHub repo.<br>
Hold <kbd>Alt</kbd> when pressing <kbd>Enter</kbd> to go to its npm page.<br>
Hold <kbd>Ctrl</kbd> when pressing <kbd>Enter</kbd> to copy the package name to the clipboard.<br>
Press <kbd>Command</kbd> to display additional information.<br>
Press <kbd>Shift</kbd> to view its readme in Quick Look.

The search is made with `boost-exact:false` by default. You may pass any npms.io [operators](https://api-docs.npms.io/#api-search-query).

<img src="media/screenshot2.png" width="694" height="440">


## Related

- [alfred-emoj](https://github.com/sindresorhus/alfred-emoj) - Find relevant emoji from text
- [alfred-dark-mode](https://github.com/sindresorhus/alfred-dark-mode) - Toggle the system dark mode
- [alfred-xcode](https://github.com/sindresorhus/alfred-xcode) - Open Xcode projects and workspaces
- [alfred-simple](https://github.com/sindresorhus/alfred-simple) - Simple theme
- [alfy](https://github.com/sindresorhus/alfy) - Create Alfred workflows with ease


## License

MIT © [Sindre Sorhus](https://sindresorhus.com)
npm package: @gijsbotje/md-to-prismic-richtext
Description: Converts markdown to Prismic RichText-compatible objects
Author: Gijsbotje
Latest version: 0.0.7

# Markdown to Prismic RichText

For when you're importing a bunch of markdown into a prismic richtext field. Based on the import docs from [Prismic.io](https://user-guides.prismic.io/import/import-full-import-reference).

## Usage

```shell
yarn add @gijsbotje/md-to-prismic-richtext
// or
npm i @gijsbotje/md-to-prismic-richtext
```

```javascript 

import convert from '@gijsbotje/md-to-prismic-richtext';

const richText = convert(yourMarkdown);

// for example use prismic-dom to render
RichText.asHtml(richText);
```

## Development 

```bash 

yarn test --watch

```

Big thanks to [ueno-llc](https://github.com/ueno-llc/) for creating [markdown-to-prismic-richtext](https://github.com/ueno-llc/markdown-to-prismic-richtext).
This is a direct copy of that package, with a fix for code blocks.
npm package: @gik/eslint-config
Description: GIK's general approach to EcmaScript
Latest version: 0.0.9

# eslint-config: *gik*
*GIK's approach to EcmaScript*

These are the common rules that all of our projects must comply.

Checkout our specialized configs that depend on this.

- __[@gik/cycle](http://github.com/gikmx/eslint-config-cycle)__ for CycleJS apps.
- __[@gik/node](http://github.com/gikmx/eslint-config-node)__ for generic NodeJS apps.

### Installation

```bash
npm i -D eslint @gik/eslint-config
```

### Usage

In the corresponding `.eslintrc` file (or equivalent) add the `extends` property.
``` json
{
  "extends": "@gik"
}
```
npm package: @gik/eslint-config-cycle
Description: GIK's cycle.js approach to EcmaScript
Latest version: 0.0.5

# eslint-config: *gik-cycle*
*GIK's approach to writing Cycle.js SPAs using valid EcmaScript*

These are the rules we use on all of our frontend project using CycleJS.

Checkout other configs similar to this.

- __[@gik](http://github.com/gikmx/eslint-config)__ the base rules that this project inherits.
- __[@gik/node](http://github.com/gikmx/eslint-config-node)__ for generic NodeJS apps.

### Installation

```bash
npm i -D eslint @gik/eslint-config-cycle
```

### Usage

In the corresponding `.eslintrc` file (or equivalent) add the `extends` property.
``` json
{
  "extends": "@gik/cycle"
}
```
npm package: @gik/eslint-config-node
Description: GIK's approach to write Node.js EcmaScript
Latest version: 0.0.10

# eslint-config: *@gik/node*
*GIK's approach to writing for Node.js using valid EcmaScript*

These are the rules we use on all of our backend projects using NodeJS.

Checkout other configs similar to this.

- __[@gik](http://github.com/gikmx/eslint-config)__ the base rules that this project inherits.
- __[@gik/cycle](http://github.com/gikmx/eslint-config-cycle)__ for frontend CycleJS apps.

### Installation

```bash
npm i -D eslint @gik/eslint-config-node
```

### Usage

In the corresponding `.eslintrc` file (or equivalent) add the `extends` property.
``` json
{
  "extends": "@gik/node"
}
```
npm package: @gik/eslint-config-react
Description: ESlint rules for React apps.
Latest version: 0.0.11

# eslint-config: *gik-react*
> ESlint rules for React apps.

These are the rules we use on all of our frontend project using ReactJS.

Checkout other configs similar to this.

- __[@gik](http://github.com/gikmx/eslint-config)__ the base rules that this project inherits.
- __[@gik/cycle](http://github.com/gikmx/eslint-config-cycle)__ for generic CycleJS apps.
- __[@gik/node](http://github.com/gikmx/eslint-config-node)__ for generic NodeJS apps.

### Installation

```bash
npm i -D eslint @gik/eslint-config-react
```

### Usage

In the corresponding `.eslintrc` file (or equivalent) add the `extends` property.
``` json
{
  "extends": "@gik/react"
}
```
npm package: @gik/redux-factory
Description: A shorthand for our redux/redux-thunk workflow
Latest version: 0.0.7

# [@gik/redux-factory](https://github.com/gikmx/redux-factory#readme) *0.0.7*
> A shorthand for our redux/redux-thunk workflow

##### Contributors
- [Héctor Menéndez](mailto:hector@gik.mx) []()

##### Supported platforms
- darwin
- linux

#### <a name="table-of-contents"></a> Table of contents
- **[Factory](#Factory)** `function` Actions and Reducers factory.
- **[Store](#Store)** `function` Store creator.


# <a name="Factory"></a> Factory
> global  function


Actions and Reducers factory.
Shorthand for reducing boilerplate needed to cerate reducers and actions.

###### Parameters
<table>
    <tr>
        <td style="white-space: nowrap;">
            <code>initState</code>
        </td>
        <td style="white-space: nowrap;">
                <a href="#Object">Object</a>
        </td>
        <td>The initial state for the reducer.</td>
    </tr><tr>
        <td style="white-space: nowrap;">
            <code>declarations</code>
        </td>
        <td style="white-space: nowrap;">
                <a href="#Object">Object</a>
        </td>
        <td>An object contaning an action and a reducer.</td>
    </tr><tr>
        <td style="white-space: nowrap;">
            <code>prefix</code>
        </td>
        <td style="white-space: nowrap;">
                <a href="#string">string</a>
        </td>
        <td>An optional prefix for the actions/reducers.</td>
    </tr>
</table>


###### Returns
 [`Object`](#Object) <span style="font-weight:normal"> - A { Actions, Reducers } object.</span>

<small>**[▲ Top](#table-of-contents)**</small>

---

# <a name="Store"></a> Store
> global  function


Store creator.
Shorthand for Redux's CreateStore.

###### Parameters
<table>
    <tr>
        <td style="white-space: nowrap;">
            <code>reducers</code>
        </td>
        <td style="white-space: nowrap;">
                <a href="#Object">Object</a> | 
                <a href="#function">function</a>
        </td>
        <td>Either a reducer or an object containing reducers.</td>
    </tr><tr>
        <td style="white-space: nowrap;">
            <code>initStore</code>
        </td>
        <td style="white-space: nowrap;">
                <a href="#Object">Object</a>
        </td>
        <td>The initial value of the store.</td>
    </tr><tr>
        <td style="white-space: nowrap;">
            <code>middleware</code>
        </td>
        <td style="white-space: nowrap;">
                <a href="#Array">Array</a>
        </td>
        <td>An array of middlewares to register.</td>
    </tr>
</table>


###### Returns
 [`ReduxStore`](#ReduxStore) <span style="font-weight:normal"> - The store to pass to the provider.</span>

<small>**[▲ Top](#table-of-contents)**</small>

---
npm package: @gik/tools-mapper
Description: Flattens an object to a key-val dictionary. Part of our [tools suite](http://github.com/gikmx/tools)
Latest version: 0.0.7

# [@gik/tools-mapper](http://gik.mx) *0.0.7*
> Flattens an object to a key-val dictionary. Part of our [tools suite](http://github.com/gikmx/tools)

##### Contributors
- [Héctor Menéndez](mailto:hector@gik.mx) []()

##### Supported platforms
- darwin
- linux

#### <a name="table-of-contents"></a> Table of contents
- **[mapper](#mapper)** Generates a flattened object containing a map for all the properties
- **[Types](#Types)** ``
  - **[MapperResult](#Types.MapperResult)** `typedef` A map to all the properties contained in an object.


# <a name="mapper"></a> mapper

Generates a flattened object containing a map for all the properties
available on `subject`.
> - [Standalone version](https://github.com/gikmx/tools-mapper).
> - [Report a Bug](https://github.com/gikmx/tools-mapper/issues).

###### Parameters
<table>
    <tr>
        <td style="white-space: nowrap;">
            <code>subject</code>
        </td>
        <td style="white-space: nowrap;">
                <a href="#Object">Object</a>
        </td>
        <td>The object you want to map.</td>
    </tr>
</table>


###### Returns
 [`mapperResult`](#mapperResult) <span style="font-weight:normal"> - A flattened object.</span>
###### Throws
- `mapperTypeError`

###### Example 
```js
const subject = {
    a: {
        b: {
           d: true,
           e:  {
               g: 'foo'
           }
        },
        f: undefined,
    }
};
const result = Mapper(subject);
// result:
// { 'a.b.d': true, 'a.b.e.g': 'foo', 'a.f': undefined }
```

<small>**[▲ Top](#table-of-contents)**</small>

---

# <a name="Types"></a> Types

###### Members

- [MapperResult](#Types.MapperResult)

<small>**[▲ Top](#table-of-contents)**</small>

---

## <a name="Types.MapperResult"></a> MapperResult
> static  typedef of [`Types`](#Types)


A map to all the properties contained in an object.



<small>**[▲ Top](#Types)**</small>

---
npm package: @gik/tools-populator
Description: Allows you to populate an object in a single pass. Part of our [tools suite](https://github.com/gikmx/tools).
Latest version: 0.0.5

# [@gik/tools-populator](http://gik.mx) *0.0.5*
> Allows you to populate an object in a single pass. Part of our [tools suite](https://github.com/gikmx/tools).

##### Contributors
- [Héctor Menéndez](mailto:hector@gik.mx) []()

##### Supported platforms
- darwin
- linux

#### <a name="table-of-contents"></a> Table of contents
- **[populator](#populator)** Allows properties in an object to inherit values from sibling properties.
- **[Types](#Types)** ``


# <a name="populator"></a> populator

Allows properties in an object to inherit values from sibling properties.
This specially useful when creating JSON configuration files.
> - [Standalone version](https://github.com/gikmx/tools-streamer).
> - [Report a Bug](https://github.com/gikmx/tools-streamer/issues).

###### Parameters
<table>
    <tr>
        <td style="white-space: nowrap;">
            <code>subject</code>
        </td>
        <td style="white-space: nowrap;">
                <a href="#Object">Object</a>
        </td>
        <td>The object you need to be populated.</td>
    </tr>
</table>


###### Returns
 [`Object`](#Object) <span style="font-weight:normal"> - An object copy with references replaced.</span>
###### Example 
```js
const subject = {
    a: { b: { c: 'world' } },
    d: "hello ${a.b.c}${e}",
    e: "!!!",
    f: ["${e}", "${a.b.c}"]
};
const result = Populator(subject);
// result:
// { a: { b: { c: 'world' } }, d: "hello world!!!", e: "!!!", f: ["!!!", "world"] };
```

<small>**[▲ Top](#table-of-contents)**</small>

---

# <a name="Types"></a> Types

###### Members

- [PupulatorParamError](#Types.PupulatorParamError)
- [PopulatorKeyError](#Types.PopulatorKeyError)

<small>**[▲ Top](#table-of-contents)**</small>

---

## <a name="Types.PupulatorParamError"></a> PupulatorParamError
> static  typedef of [`Types`](#Types)


The provided key cannot be used to populate the current property.



<small>**[▲ Top](#Types)**</small>

---

## <a name="Types.PopulatorKeyError"></a> PopulatorKeyError
> static  typedef of [`Types`](#Types)


The provided key cannot be used because is not a valid type.



<small>**[▲ Top](#Types)**</small>

---
npm package: @gik/tools-thrower
Description: Errors with pretty stack and customizable name. Part of our [tools suite](https://github.com/gikmx/tools).
Latest version: 0.1.12

# [@gik/tools-thrower](http://gik.mx) *0.1.12*
> Errors with pretty stack and customizable name. Part of our [tools suite](https://github.com/gikmx/tools).

##### Contributors
- [Héctor Menéndez](mailto:hector@gik.mx) []()

##### Supported platforms
- linux
- darwin

#### <a name="table-of-contents"></a> Table of contents
- **[thrower](#thrower)** Errors with pretty stack and customizable name.


# <a name="thrower"></a> thrower

Errors with pretty stack and customizable name.
> - [Standalone version](https://github.com/gikmx/tools-streamer).
> - [Report a Bug](https://github.com/gikmx/tools-streamer/issues).

###### Parameters
<table>
    <tr>
        <td style="white-space: nowrap;">
            <code>subject</code>
        </td>
        <td style="white-space: nowrap;">
                <a href="#string">string</a> | 
                <a href="#Array">Array</a> | 
                <a href="#Error">Error</a>
        </td>
        <td>The message or an Error instance to beautify.
When an array is sent, replace subject ALA printf. signature:<code>[subject, ...replacements]</code></td>
    </tr><tr>
        <td style="white-space: nowrap;">
            <code>[name]</code>
        </td>
        <td style="white-space: nowrap;">
                <a href="#string">string</a>
        </td>
        <td>An identifier for the error instance. <b>Default <code>'Error'</code></b></td>
    </tr><tr>
        <td style="white-space: nowrap;">
            <code>[throws]</code>
        </td>
        <td style="white-space: nowrap;">
                <a href="#boolean">boolean</a>
        </td>
        <td>If false, return error instance instead of throwing. <b>Default <code>true</code></b></td>
    </tr>
</table>


###### Returns
 [`Error`](#Error) <span style="font-weight:normal"> - A custom error instance with a pretty stack.</span>
###### Example 
```js
Thrower('test'); // A standard Error with prettified stack
Thrower(new TypeError('test2')); // Standard TypeError with prettified stack
Thrower('test3', 'TestError'); // Custom TestError with 'test3' as message
Thrower(['hola %s', 'mundo'], 'HelloError'); // HelloError with 'hola mundo' as message
const Err = Thrower('bad boy', 'CanineError', false); // Returns CanineError instance.
```

<small>**[▲ Top](#table-of-contents)**</small>

---