open-index/open-npm huggingface dataset:
npm package: @hazmi35/extract-docker-baseimg-recipe
Description: Docker (OCI Format) base images recipe extractor.
Author: Hazmi35
Latest version: 2.0.2
Deprecated: Not used anymore. And will not be updated.

# extract-docker-baseimg-recipe
Docker (OCI Format) base images recipe extractor.

## FAQ
**Question:** What is this?

**Answer**: This is a simple program to extract Docker (OCI Format) base images recipe for example: tags, platforms, versions etc.
##

**Question**: Where do you use this?

**Answer**: It is used in my *Docker (OCI Format) base images build system*, for example [Hazmi35/docker-node](https://github.com/Hazmi35/docker-node).
It isn't made to be used by public. But you can use/modify it anyway
##

**Question:** How does this works?

**Answer:** It reads a comment in line 1, 2 and 3 for image tags, variant, and target platforms respectively and it extracts the version from the line 4 which is a FROM instruction, for example: `FROM node:16.13.1-alpine`, it will extract the version `16.13.1`.

This is intended, because most of my base images are just Docker official images with some modifications in it, atleast for now, because this will probably change when [Hazmi35/devcontainer](https://github.com/Hazmi35/devcontainer) is finished.
npm package: @hazmihaz/paginate
Description: Paginate - generate ellipsis-separated truncated pagination - fast and easy
Author: Hazmi Hafiz
Latest version: 0.3.1

# paginate

Simple and fast truncated pagination generator

![shield](https://img.shields.io/github/workflow/status/hazmihaz/paginate/Node.js%20CI)
![shield](https://img.shields.io/npm/v/@hazmihaz/paginate)
![shield](https://img.shields.io/npm/l/@hazmihaz/paginate)


## Usage

```javascript
paginate(31, 100)
// => [1, '...', 30, 31, 32, '...', 100]
```


## Installation

```sh-session
npm i @hazmihaz/paginate
```

or

```sh-session
yarn add @hazmihaz/paginate
```


### Params

| Param   | Type                | Default   | Description                                   |
| ------- | ------------------- | --------- | --------------------------------------------- |
| current | <code>Number</code> | undefined | Current page                                  |
| total   | <code>Number</code> | undefined | Total pages                                   |
| delta   | <code>Number</code> | 1         | Number of pages before and after current page |
| separator   | <code>String</code> | "..."         | Separator |

### Examples

```javascript
import paginate from 'paginate'

const pagination = paginate(30, 100, 2, '_')
// => [1, '_', 28, 29, 30, 31, 32, '_', 100]
```

```javascript
paginate(1, 100)
// => [1, 2, 3, '...', 100]
```

```javascript
paginate(10, 100, 2, '🐍')
// => [1, '🐍', 8, 9, 10, 11, 12, '🐍', 100]
```

```javascript
paginate(5, 50, 3)
// => [1, 2, 3, 4, 5, 6, 7, 8, '...', 50]
```

### Vue Example

```vue
<template>
  <ul>
    <li
      v-for="(page, i) in paging"
      :key="i"
      :class="{ disabled: page === '_' }"
    >
      {{ page }}
    </li>
  </ul>
</template>

<script>
import paginate from '@hazmihaz/paginate'

const makePaging = (current, total) => {
  return paginate(current, total, 2, '_')
}

export default {
  computed: {
    paging() {
      return makePaging(10, 60)
    },
  },
}
</script>

```

### React Example

```javascript
import React from 'react'
import paginate from '@hazmihaz/paginate'

class Page extends React.Component {
  render() {
    const Paging = paginate(10, 50).map(el => (
      <li>{el}</li>
    ))

    return (
      <div>
        <ul>
        {Paging}
        </ul>
      </div>
    )
  }
}
```

## Changelog

### 0.3.0
- Added separator parameter

### 0.2.0

-   Added delta parameter
-   Default delta changed from 2 to 1

## Acknowledgment

This library is based on solution by @narthur
https://gist.github.com/kottenator/9d936eb3e4e3c3e02598#gistcomment-3413141

## License

MIT
npm package: @haztivity/hz-carousel
Description: Recurso de carousel
Author: Davinchi
Latest version: 0.7.0

# hz-carousel
hz-carousel is a resource to create a carousel of images and/or contents.\
hz-carousel uses [slick-carousel](http://kenwheeler.github.io/slick/) under the hood.

## Dependencies
- JQuery
- slick-carousel
- haztivity/core

## Get started
- [Wiki](https://github.com/haztivity/hz-carousel/wiki/Home)
npm package: @haztivity/hz-crossword
Description: Haztivity resource wrapper for jq-crossword
Author: Davinchi
Latest version: 0.7.1

# hz-crossword
hz-crossword is an haztivity resource wrapper for jq-crossword

hz-crossword uses [jq-crossword](https://github.com/davinchi-finsi/jq-crossword) under the hood.
## Install
### NPM
```npm i --save @haztivity/hz-crossword```
## Dependencies
- JQuery
- jq-crossword
- @haztivity/core

## Usage
1. Import @haztivity/hz-crossword
2. Add HzCrossword to the page
3. Set ```data-hz-resource="HzCrossword"```
### Ts
```typescript
import {PageFactory, Page, PageController, PageRegister} from "@haztivity/core";
import template from "./page.pug";
import {HzCrosswordResource} from "@haztivity/hz-crossword";
export let page: PageRegister = PageFactory.createPage(
    {
        name: "myPage",
        resources: [
            HzCrosswordResource
        ],
        template: template
    }
);
```
### Pug
```pug
div
    -
       var definition = {
           "height":8,//height of the board, 8 cells
           "width":5,//width of the board, 5 cells
           "acrossClues":[
               {
                   "number":1, //number to identify the world, must be unique
                   "x":1,//The x position where the word starts, starting from 1
                   "y":2,//The y position where the word starts, starting from 1
                   "answer":"Hello",//the word itself
                   "clue":"A common greeting",//the clue
                   "hints":[2],//the letter 'e' is a hint. Starting from 1
               },
               {
                   "number":2,
                   "x":3,
                   "y":5,
                   "answer":"Old",
                   "clue":"Having lived for a long time; no longer young."
               }
           ],
           "downClues":[
               {
                   "number":1,//this clue starts in the same cell that "Hello", so it must have the same number
                   "x":1,
                   "y":2,
                   "answer":"History",
                   "clue":"The study of past events, particularly in human affairs.",
                   "hints":[2,7]
               },
               {
                   "number":3,
                   "x":5,
                   "y":1,
                   "answer":"World",
                   "clue":"The earth is our _____"
               }
           ]
       }
    div(data-hz-resource="HzCrossword", data-opt-jq-crossword-definition=definition)

```
## Options
### jq-crossword options
All the options of jq-crossword **except** functions could be specified by attributes using:

```pug
    data-opt-jq-crossword-[option]=[value]
```

If the option have multiple words, use dashes, for example ```acrossListTitle``` have to be provided as ```across-list-title```

For more info please visit [jq-crossword](https://github.com/davinchi-finsi/jq-crossword)
npm package: @haztivity/hz-fillgaps
Description: Recurso para completar huecos
Author: Davinchi
Latest version: 0.7.2

# hz-fillgaps

hz-fillgaps is an haztivity resource.\
hz-fillgaps uses [jquery ui droppable](http://api.jqueryui.com/droppable/) and  [jquery ui draggable](http://api.jqueryui.com/draggable/) under the hood.
## Install
### NPM
```npm i --save @haztivity/hz-fillgaps```
## Dependencies
- JQuery
- JQuery UI dialog
- @haztivity/core
## Usage
1. Import @haztivity/hz-fillgaps
2. Add HzFillgaps to the page
3. Add de html
### Ts
```typescript
import {PageFactory, Page, PageController, PageRegister} from "@haztivity/core";
import template from "./page.pug";
import {HzFillgapsResource} from "@haztivity/hz-fillgaps";
export let page: PageRegister = PageFactory.createPage(
    {
        name: "myPage",
        resources: [
            HzFillgapsResource 
        ],
        template: template
    }
);
```
### Pug
```pugç
div
    .hz-fillgaps(data-hz-resource="HzFillgaps")
        | Lorem ipsum dolor sit amet,
        span.hz-fillgaps__gap consectetur
        | adipiscing elit, sed do eiusmod tempor
        span.hz-fillgaps__gap incididunt
        | ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        span.hz-fillgaps__gap ullamco
        | laboris nisi ut aliquip ex ea commodo consequat.

```
or
### HTML
```html
    <div class="hz-fillgaps" data-hz-resource="HzFillgaps">Lorem ipsum dolor sit amet,<span class="hz-fillgaps__gap">consectetur</span>adipiscing elit, sed do eiusmod tempor<span class="hz-fillgaps__gap">incididunt</span>ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis<span class="hz-fillgaps__gap">ullamco</span>laboris nisi ut aliquip ex ea commodo consequat.</div>
```
## Options
 
 --
npm package: @haztivity/hz-navbar
Description: Navbar component for haztivity
Author: Davinchi
Latest version: 0.7.7

# hz-navbar
hz-navbar is an haztivity component to manage the navigation in a sco.\
hz-navbar is synchronized with haztivity flow in each page.

## Features
- Auto disable during the transition of the page
- Auto disable next page navigation until complete the all the resources of the page
- Show the progress made
- Navigation buttons with the current and total pages
- A service to interact with the navbar

## Dependencies
- JQuery
- JQuery UI
- @haztivity/core

## Get started
- [Wiki](https://github.com/haztivity/hz-navbar/wiki/Home)
npm package: @haztivity/hz-questions-for-pages
Description: A component to ask random questions to the user depending on the page.
Author: Davinchi
Latest version: 0.7.0

# hz-timecontrol
 HzTimeControl allows to "require" the user to spend a certain time in the pages by disabling the navigation until the specified time passes.

## Install
### NPM
```npm i --save @haztivity/hz-time-control```
## Dependencies
- @haztivity/core

## Usage
1. Import @haztivity/hz-time-control
2. Add HzTimeControl to the sco
3. Set ```data-hz-component="HzTimeControl"```
### Ts
```typescript
/**
 * @license
 * Copyright Davinchi. All Rights Reserved.
 */
import template from "./sco.pug";
import "./main.scss";
import "./markdown.scss";
import "./prism-github.scss";
import {ScoFactory, Sco, ISco} from "@haztivity/core";
import {HzTimeControlComponent} from "../components/hz-time-control/HzTimeControlComponent";
import {HzNavbarComponent} from "@haztivity/hz-navbar";
import {page as page6611} from "./pages/6611/page";
import {page as page6612} from "./pages/6612/page";
import {page as page6613} from "./pages/6613/page";
let sco: ISco = ScoFactory.createSco(
    {
        name: "1221",
        template:template,
        pages: [
            page6611,
            page6612,
            page6613
        ],
        components: [
            HzNavbarComponent,
            HzTimeControlComponent
        ]
    }
);
sco.run();

```
### Pug
```pug
include node:@haztivity/hz-navbar/src/_hzNavbar
div(data-hz-pages)
-
    let times = {
        "6611":{
            "weight":1
        },
        "6612":{
            "weight":1
        },
        "6613":{
            "weight":0
        }
    }
div(data-hz-component="HzTimeControl", data-opt-hz-time-control-time="1", data-opt-hz-time-control-times=times)
+hz-navbar

```
## Options
### options
All the options of hz-time-control could be specified by attributes using:

```pug
    data-opt-hz-time-control-[option]=[value]
```
npm package: @haztivity/hz-time-control
Description: A component to control the time that a user must spend.
Author: Davinchi
Latest version: 0.7.4

# hz-timecontrol
 HzTimeControl allows to "require" the user to spend a certain time in the pages by disabling the navigation until the specified time passes.

## Install
### NPM
```npm i --save @haztivity/hz-time-control```
## Dependencies
- @haztivity/core

## Usage
1. Import @haztivity/hz-time-control
2. Add HzTimeControl to the sco
3. Set ```data-hz-component="HzTimeControl"```
### Ts
```typescript
/**
 * @license
 * Copyright Davinchi. All Rights Reserved.
 */
import template from "./sco.pug";
import "./main.scss";
import "./markdown.scss";
import "./prism-github.scss";
import {ScoFactory, Sco, ISco} from "@haztivity/core";
import {HzTimeControlComponent} from "../components/hz-time-control/HzTimeControlComponent";
import {HzNavbarComponent} from "@haztivity/hz-navbar";
import {page as page6611} from "./pages/6611/page";
import {page as page6612} from "./pages/6612/page";
import {page as page6613} from "./pages/6613/page";
let sco: ISco = ScoFactory.createSco(
    {
        name: "1221",
        template:template,
        pages: [
            page6611,
            page6612,
            page6613
        ],
        components: [
            HzNavbarComponent,
            HzTimeControlComponent
        ]
    }
);
sco.run();

```
### Pug
```pug
include node:@haztivity/hz-navbar/src/_hzNavbar
div(data-hz-pages)
-
    let times = {
        "6611":{
            "weight":1
        },
        "6612":{
            "weight":1
        },
        "6613":{
            "weight":0
        }
    }
div(data-hz-component="HzTimeControl", data-opt-hz-time-control-time="1", data-opt-hz-time-control-times=times)
+hz-navbar

```
## Options
### options
All the options of hz-time-control could be specified by attributes using:

```pug
    data-opt-hz-time-control-[option]=[value]
```
npm package: @haztivity/hz-video
Description: Haztivity wrapper for plyr
Author: Davinchi
Latest version: 0.7.1

# hz-video
hz-video is an haztivity resource to manage videos from different sources.\
hz-video uses [plyr](https://github.com/sampotts/plyr) under the hood.
## Install
### NPM
```npm i --save @haztivity/hz-video```
## Dependencies
- plyr
- @haztivity/core
## Usage
1. Import @haztivity/hz-video
2. [Optional] You could import the default theme for plyr `import "plyr/dist/plyr.css";`
3. Add HzVideoResource to the page
4. [Config plyr](https://github.com/sampotts/plyr#quick-setup)
5. Set ```data-hz-resource="HzVideo"```
### Ts
```typescript
import {PageFactory, Page, PageController, PageRegister} from "@haztivity/core";
import template from "./page.pug";
//Import the default theme of plyr
import "plyr/dist/plyr.css";
import {HzVideoResource} from "@haztivity/hz-video";
export let page: PageRegister = PageFactory.createPage(
    {
        name: "myPage",
        resources: [
            HzVideoResource
        ],
        template: template
    }
);
```
### Pug
```pug
// Youtube
// Video id is the id of the youtube video
div(data-hz-resource="HzVideo", data-type="youtube" data-video-id="C0DPdy98e4c")
```
or
### HTML
```html
<!-- Youtube -->
<!-- Video id is the id of the youtube video -->
<div data-hz-resource="HzVideo", data-type="youtube", data-video-id="C0DPdy98e4c"></div>
```
## Options
### plyr options
All the options of jqQuiz quiz **except** functions could be specified by attributes using:
```pug
    data-opt-plyr-[option]=[value]
```
If the option have multiple words, use dashes, for example ```loadSprite``` have to be provided as ```load-sprite```\
For more info please visit [plyr](https://github.com/sampotts/plyr#options)
npm package: @hazycora/vite-plugin-svelte-svg
Description: Vite plugin to load SVG files as Svelte components
Author: hazycora
Latest version: 2.4.3

# Vite Svelte SVG

Vite plugin to transform SVGs into Svelte components.

It also optimizes your SVGs by running them thru [svgo](https://github.com/svg/svgo).

![npm](https://img.shields.io/npm/v/@hazycora/vite-plugin-svelte-svg)

```svelte
<script>
  import MyIcon from '$lib/assets/my-icon.svg?component';
  // or import MyIcon from '$lib/assets/my-icon.svg?c';
</script>

<MyIcon width={42} height={42} />
```

## Install

<details>
<summary>NPM</summary>

```
npm install @hazycora/vite-plugin-svelte-svg --save-dev
```

</details>
<details>
<summary>Yarn</summary>

```
yarn add -D @hazycora/vite-plugin-svelte-svg
```

</details>
<details>
<summary>pnpm</summary>

```
pnpm add -D @hazycora/vite-plugin-svelte-svg
```

</details>

## Setup

### `vite.config.js`

```js
import svelteSVG from "@hazycora/vite-plugin-svelte-svg";

export default {
  plugins: [
    svelteSVG({
      svgoConfig: {}, // See https://github.com/svg/svgo#configuration
      requireSuffix: true, // Set false to accept '.svg' without the '?component'
    }),
  ],
};
```

## Credits

This plugin is based on the work from the following projects:

- https://github.com/codefeathers/rollup-plugin-svelte-svg
- https://github.com/visualfanatic/vite-svg

## License

MIT