open-index/open-npm huggingface dataset:
npm package: @marlonmarcello/snowpack-plugin-pug
Description: This plugin adds support for the [Pug](https://pugjs.org/) template engine to Snowpack.
Author: Marlon Marcello
Latest version: 1.0.3

# @marlonmarcello/snowpack-plugin-pug

This plugin adds support for the [Pug](https://pugjs.org/) template engine to Snowpack.

### Install

```
npm install --save-dev @marlonmarcello/snowpack-plugin-pug
```

### Usage

Add `@marlonmarcello/snowpack-plugin-pug` to your [Snowpack config file](https://www.snowpack.dev/reference/configuration):

```json
{
  "plugins": ["@marlonmarcello/snowpack-plugin-pug"]
}
```

### Options

You can pass all default [Pug Options](https://pugjs.org/api/reference.html#options) plus:

- `data: object` - Any data that you would like available globaly to templates

### Example

```json
{
  "plugins": [
    [
      "@marlonmarcello/snowpack-plugin-pug",
      {
        "data": {
          "meta": {
            "title": "My website"
          }
        }
      }
    ]
  ]
}
```

```pug
doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title!=meta.title
  body
    //- template
```
npm package: @marlonmarcello/vite-plugin-pug
Description: This plugin adds support for the Pug template engine to Vite.
Author: Marlon Marcello
Latest version: 1.0.3

# @marlonmarcello/vite-plugin-pug

This plugin adds support for the [Pug](https://pugjs.org/) template engine to [Vite](https://vitejs.dev/).

### Install

```
npm install --save-dev @marlonmarcello/vite-plugin-pug
```

### Usage

Add `@marlonmarcello/vite-plugin-pug` to your [Vite config file](https://vitejs.dev/config/):

```js
// vite.config.js
import vitePluginPug from "@marlonmarcello/vite-plugin-pug";

export default {
  plugins: [vitePluginPug()],
};
```

### Options

You can pass all default [Pug Options](https://pugjs.org/api/reference.html#options) plus:

- `data: object` - Any data that you would like available globaly to templates

### Example

```js
import vitePluginPug from "@marlonmarcello/vite-plugin-pug";

export default {
  plugins: [
    vitePluginPug({
      data: {
        meta: {
          title: "My awesome website",
        },
      },
    }),
  ],
};
```

```pug
doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title!=meta.title
  body
    //- template
```
npm package: @marlonwiss/nuxt-directives
Description: A Nuxt 3 module that automatically installs a collection of useful Vue 3 directives into your application.
Author: Marlon Wisskirchen
Latest version: 1.0.13

# @marlonwiss/nuxt-directives

A Nuxt 3 module that automatically installs a collection of useful Vue 3 directives into your application.

Powered by [vue-directives](https://github.com/MarlonWiss2212/vue-directives/blob/main/packages/vue-directives/Readme.md) and designed for seamless integration with Nuxt.

---

## Installation

Install the module using your favorite package manager:

### Using **pnpm**
```bash
pnpm add @marlonwiss/nuxt-directives
```

### Using **yarn**
```bash
yarn add @marlonwiss/nuxt-directives
```

### Using **npm**
```bash
npm install @marlonwiss/nuxt-directives
```

---

## Setup

Add `@marlonwiss/nuxt-directives` to your `nuxt.config.ts`:

```ts
export default defineNuxtConfig({
  modules: [
    '@marlonwiss/nuxt-directives'
  ]
})
```

That's it! All custom directives are now globally available in your project.

---

## 📚 Usage / Directives Documentation

See the full list of available directives [here](https://github.com/MarlonWiss2212/vue-directives/blob/main/Directives.md).

---

## 📚 Changelog

See the full changelog [here](https://github.com/MarlonWiss2212/vue-directives/blob/main/packages/nuxt-directives/CHANGELOG.md).

---

## 📚 Monorepo Documentation

See the documentation of the monorepo [here](https://github.com/MarlonWiss2212/vue-directives/blob/main/Readme.md).

---

## License
[MIT License](https://github.com/MarlonWiss2212/vue-directives/blob/main/LICENSE)
npm package: @marlospomin/mango
Description: A small medium-like javascript library to zoom your images.
Author: Marlos Pomin
Latest version: 1.0.4

# Mango

> A small medium-like javascript library to zoom your images.

## Demo

Feel free to check the demo on CodePen [here](https://codepen.io/marlospomin/full/YzyexoX).

## Install

```bash
# Using npm
npm install @marlospomin/mango

# Using yarn
yarn add @marlospomin/mango
```

Now include mango and you should be good to go.

```js
// es6
import mango from '@marlospomin/mango'

// commonjs
const mango = require('@marlospomin/mango')
```

## Usage

Add ```data-mango``` to your images as it follows below.

```html
<img data-mango src="path/to/image/image.jpg" alt="">...</img>
```

Add mango **required** ```css``` to your document/styles.

```css
.mango-overlay {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  transition: opacity 0.2s ease;
}

.mango-image--open {
  position: relative;
  cursor: zoom-out !important;
}

.mango--open .mango-overlay {
  cursor: zoom-out;
  opacity: 1;
}

.mango-image {
  cursor: zoom-in;
  transition: transform 0.2s ease;
}
```

Call mango anywhere in your code:

```js
// Call me
mango()
```

Additionally add a high-res image as a ```data-src``` attribute, like the example below:

```html
<img data-mango src="" data-src="path/to/image/high.jpg" alt="">...</img>
```

## Configuring

Pass options to mango like the example below:

```js
// Custom options
mango({
  selector: '[data-mango]',
  background: 'white',
  margin: 50
})
```

### Supported parameters

* ```selector``` *type* ```string``` *default* ```[data-mango]```.

* ```background``` *type* ```string``` *default* ```white```.

* ```margin``` *type* ```integer``` *default* ```50```.

* ```interruptKeys``` *type* ```array``` *default* ```[27, 37, 39]```.

## Running Tasks

You can run tasks with ```yarn``` command like the example below:

```bash
# Build task
$ yarn build

# Lint task
$ yarn lint
```

## Contributing

Create a pull request or open an issue and we will go from there.

## License

Code released under the [MIT](LICENSE) license.
npm package: @marlospomin/sight
Description: A simple package to trigger an animation using Animate.css.
Author: Marlos Pomin
Latest version: 1.0.2

# Sight

> A simple package to trigger an animation using Animate.css.

## Features

* Using intersection Observer API.
* Simple and small.
* Performant.
* **Requires** [animate.css](https://github.com/daneden/animate.css) to do anything.

## Install

```bash
# Using npm
npm install @marlospomin/sight

# Using yarn
yarn add @marlospomin/sight
```

Now include the script and you should be good to go.

``` js
// es6
import sight from '@marlospomin/sight'

// commonjs
const sight = require('@marlospomin/sight')
```

## Usage

Add ```data-sight``` to your elements and the animate class you wish to use, like the example below.

```html
<img data-sight src="" alt="" class="shake">...</img>
```

Call sight anywhere in your code:

```js
// Call me
sight()
```

## Configuring

Pass options to sight like the example below:

```js
// Custom options
sight({
  selector: '[data-sight]',
  threshold: [0, 0.25, 0.5, 0.75, 1]
})
```

## Browser Support

You can check the supported browsers [here](http://caniuse.com/#feat=intersectionobserver).

## License

Code released under the [MIT](LICENSE) license.
npm package: @marlospomin/smoothie
Description: A vanilla smooth-scrolling javascript plugin with no dependencies.
Author: Marlos Pomin
Latest version: 1.0.6

# Smoothie [![Build Status](https://travis-ci.org/marlospomin/smoothie.svg?branch=master)](https://travis-ci.org/marlospomin/smoothie)

> A vanilla smooth-scrolling JavaScript plugin with no dependencies.

## Features

* Blazing fast. (Using [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView))
* Lightweight.
* No dependencies.

## Demo

Example page on [CodePen](https://codepen.io/marlospomin/pen/jadaQB).

## Install

```bash
# Using npm
npm install @marlospomin/smoothie

# Using yarn
yarn add @marlospomin/smoothie
```

Now include smoothie in your project and you should be good to go.

```js
// es6
import smoothie from '@marlospomin/smoothie'

// commonjs
const smoothie = require('@marlospomin/smoothie')
```

## Usage

Add ```data-smoothie``` to your anchor tags and the target's ```id``` in the *href* value as it follows below.

```html
<a data-smoothie href="#example">...</a>

<!-- Somewhere below -->

<section id="example">
  ...
</section>
```

Call smoothie anywhere in your code:

```js
// Call me
smoothie()
```

## Configuring

To configure the plugin just pass the desired option(s) as an object like the example below:

```js
// Pass options like this
smoothie({
  behavior: 'auto'
})
```

## Running Tasks

You can run tasks with the ```yarn``` command like the example below:

```bash
# Build task
yarn build

# Lint task
yarn lint
```

## Browser Support

You can check the browser support [here](https://caniuse.com/#search=scrollIntoView).

If your desired browser is not in the list consider using this [polyfill](https://github.com/iamdustan/smoothscroll).

## Contributing

Contributing is really easy, just make a pull request or open an issue and we will go from there.

## License

Code released under the [MIT](LICENSE) license.
npm package: @marlospomin/turtle
Description: A blazing fast javascript plugin to lazy-load your images with no dependencies.
Author: Marlos Pomin
Latest version: 1.0.6

# Turtle [![Build Status](https://travis-ci.com/marlospomin/turtle.svg?token=PosttrboZuYSHkXP2Lm8&branch=master)](https://travis-ci.com/marlospomin/turtle)

> Turtle is a blazing fast & modern javascript plugin to lazy-load your images with no dependencies.

### Features

* Extremely fast. (Using Intersection Observer)
* Lightweight.
* No dependencies.

## Demo

Example page on CodePen [here](https://codepen.io/marlospomin/pen/EbYXqe).

## Install

```bash
# Using npm
$ npm install @marlospomin/turtle

# Using yarn
$ yarn add @marlospomin/turtle
```

Now include turtle and you should be good to go.

```js
// es6
import turtle from '@marlospomin/turtle'

// commonjs
const turtle = require('@marlospomin/turtle')
```

## Usage

Add ```.turtle ``` class to your element(s) and the image path using ```data-src``` attribute according to the example below.

```html
<img class="turtle" data-src="image.jpg" alt="">
```

If you want to use a *placeholder* for the real image refer it in the ```src``` attribute:

```html
<img class="" src="placeholder.jpg" data-src="" alt="">
```

Call turtle anywhere in your code.

```js
// Call turtle
turtle()
```

### Configuring

These are the current default options, change them as you see fit.

| Option | Default | Description |
| --- | --- | --- |
| `selector` | `.turtle` | A selector that indicates which class to search elements from. |
| `rootMargin` | `50px` | Distance (Y axis) from the element for the event to occur. |
| `treshold` | `0` | Not used by turtle at this time. |

Update the default config:

```js
// Custom options
turtle('.mySelector', config = {
  rootMargin: '0px',
  treshold: 0
})
```

## Running Tasks

You can run tasks with the ```yarn``` command like the example below:

``` bash
# Build task
$ yarn build

# Lint task
$ yarn lint
```

## Browser Support

You can check the browser support [here](http://caniuse.com/#feat=intersectionobserver).

Note: IE 11 is not supported.

## Contributing

Make a pull request and/or open an issue and we will go from there.

## License

Code released under the [MIT](LICENSE) license.
npm package: @marlow/vue-svg-loader
Description: Use SVG files as Vue Components
Author: Marlow Nickell
Latest version: 0.0.3

# vue-svg-loader <img src="https://img.shields.io/npm/dt/vue-svg-loader.svg">
A webpack loader that allows to use SVG files as Vue Components.

## Installation
```
npm install --save-dev vue-svg-loader
yarn add --dev vue-svg-loader
```

## Configuration
```js
{
  test: /\.svg$/,
  loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
}
```

## Example code

```html
<template>
  <nav id="menu">
    <a href="...">
      <SomeIcon class="icon" />
      Some page
    </a>
  </nav>
</template>

<script>
import SomeIcon from './assets/some-icon.svg';

export default {
  name: 'menu',
  components: {
    SomeIcon,
  },
};
</script>
```
---
*The idea behind this was inspired by [react-svg-loader](https://github.com/boopathi/react-svg-loader)*.