open-index/open-npm huggingface dataset:
npm package: @stefandorresteijn/gridsome-source-devto
Description: https://Dev.to source plugin for gridsome
Author: @perlatsp
Latest version: 0.0.2

# @perlatsp/gridsome-source-devto

> Gridsome plugin to retrieve posts from http://dev.to. This package is under development and
API might change before v1 is released.

## Install
 
 ```bash
 yarn add @perlatsp/gridsome-source-devto
 ```
or 
```bash
npm install @perlatsp/gridsome-source-devto
```

## Usage
- Get an API Key from https://dev.to/settings/account
- Add the plugin config inside `gridsome.config.js` plugins array.

<details open><summary><code>gridsome.config.js</code></summary>

```js
module.exports = {
  plugins: [
    ...other gridsome plugins
   {
      use: '@perlatsp/gridsome-source-devto',
      options: {
        typeName: 'Article',
        username:'DEVTO_USERNAME', //change username
        apiKey: process.env.DEVTO_API_KEY, //get your API key from https://dev.to/settings/account
        route: '/:slug',
      }
    }
  ]
}
```
</details>


## Loop Query
Inside  `<page-query>` add the following query to get all articles from http://dev.to




<details open>
<summary> <code>./src/Pages/Index.vue </code></summary>

```html
<template>
    <Layout>
        <div v-for="{ node } in $page.allArticle.edges" :key="node.id">
            <g-link :to="node.path" class="single-post-link"> {{node.title}}</g-link>
        </div> 
    </Layout>
</template>

<page-query>
  query Home($page: Int) {
    allArticle {
      edges {
        node {
        id
        title
        published_at
        description
        tag_list
        canonical_url
        cover_image
        }
      }
    }
  }
</page-query>

<script>
  export default {
    metaInfo: {
      title: 'Welcome to my blog :)'
    }
  }
</script>
<style lang="scss" scoped>
   
</style>

```

</details>

## Single Article

Normally, you need to create a `[typeName].vue` inside `./src/templates` of your gridsome project.
and then add the query for the post details. 

 <details open>
 <summary><code>./src/templates/Article.vue</code></summary>

```vue
<template>
  <Layout>
     {{$page.article}}
  </Layout>
</template>

<page-query>
query Post($path: String!) {
    article(path: $path) {
       id
        title
        published_at
        description
        tag_list
        canonical_url
        cover_image
    }
}
</page-query>

<script>
  export default {

    data(){
      return {
        headings:NodeList
      } 
    },
    metaInfo() { 
      return {
        title: this.$page.article.title
      }
    },
  }
</script>

<style lang="scss" scoped>
  

</style>
```

 </details>


## TODO
- [x] Get posts
- [ ] Create pagination
- [ ] Refactor
- [ ] ADD NEW FEATURE HERE 


Feel free to use this plugin.
npm package: @stefanfortuin/blackboardlib-test
Description: API for communication with Blackboard
Author: stefanfortuin
Latest version: 0.0.87

|package|version|status|
|-------|-------|------|
|blackboardlib|[![LatestVersion](https://img.shields.io/npm/v/blackboardlib/latest.svg)]()|[![Build Status](https://dev.azure.com/BBReverseEngineering/BlackboardLib%20CI/_apis/build/status/BlackboardLib%20Build%20Library?branchName=master)](https://dev.azure.com/BBReverseEngineering/BlackboardLib%20CI/_build/latest?definitionId=12&branchName=master)|
|blackboardlib-cli|[![LatestVersion](https://img.shields.io/npm/v/blackboardlib-cli/latest.svg)]()|[![Build Status](https://dev.azure.com/BBReverseEngineering/BlackboardLib%20CI/_apis/build/status/BlackboardLib%20Build%20CLI?branchName=master)](https://dev.azure.com/BBReverseEngineering/BlackboardLib%20CI/_build/latest?definitionId=11&branchName=master)|


# BlackboardAPI

An API to communicate with a Blackboard server. This can be used to build apps on the Blackboard platform that can either be hosten on-site or off-site through the use of special loaders.

This project is still in its infancy, meaning that it will not work fully until a stable release is published.

In the meantime you should be able to use the current product, however be aware of possible bugs.

## Getting started

### Documentation

To get started, these markdown files are probably of use:

- [The structure of the code](docs/project_structure.md)

- [How to create an assignment column using the API](docs/column_example.md)

- [How to send emails to course members using the API](docs/email.md)

- [Using the Blackboard CLI](docs/cli.md)

### Building
```
$ npm i # First run only
$ npm run build
```

### Usage
This library is available as NPM package.
Please refer to the examples to see how to use the library.

### Learn by example

[React-Example](https://github.com/Pieterv24/blackboard-webpack-example) is a
useful example on how to use the BlackboardAPI with a minimal webpack in react.

[Webpack-Example](https://github.com/Pieterv24/blackboard-webpack-example) is a
useful example on how to use the BlackboardAPI with a minimal webpack configuration.


## TSLint
```
$ npm run lint
```
npm package: @stefanfortuin/workout-creator
Description: A workout creator for mrc or erg file formats
Latest version: 0.0.20

# workout-creator
A javascript library where you can create workouts in the mrc or erg file formats

# Usage

## Creating a workout
This will create a empty workout
```js
import { Workout } from "@stefanfortuin/workout-creator"

let workout = new Workout();
```

## Creating an interval
An interval needs to have duration and a percentage of the workload you are going to do

An interval's start and end time will be converted to "minutes.seconds" where the seconds parameter is a total of 100 instead of 60

```js
  import { Interval } from "@stefanfortuin/workout-creator"
  let duration = 120; // duration in seconds
  let percentage = 70;
  let interval = new Interval(duration, percentage)
```


## Adding intervals to a Workout

### One interval
```js
import { Interval } from "@stefanfortuin/workout-creator"

let interval = new Interval(120, 80), // 2 min duration on 80%

workout.addInterval(interval);
```

### Multiple intervals
```js
import { Interval } from "@stefanfortuin/workout-creator"

let intervals = [
    new Interval(120, 80), // 2 min duration on 80%
    new Interval(10, 120), // 10 sec duration on 120%
    new Interval(120, 80), // 2 min duration on 80%
]

workout.addIntervals(intervals);
```


## Saving the file
Right now it only saves the whole workout to a string.
You can put the string in a blob to download the file from the web or save it in to a file.
For now only 'mrc' and 'erg' file formats are supported

```js
workout.save('mrc');
workout.save('erg');
```


```
[COURSE HEADER]
VERSION = 2
UNITS = ENGLISH
DESCRIPTION = A description
FILE NAME = blah.mrc
MINUTES PERCENT
[END COURSE HEADER]
[COURSE DATA]
0.00 50
6.60 50
6.60 140
7.98 140
7.98 50
9.07 50
9.07 150
10.10 150
10.10 50
14.07 50
14.07 115
22.07 115
22.07 50
32.08 50
32.08 115
40.08 115
40.08 50
51.88 50
[END COURSE DATA]
```
npm package: @stefanholzapfel/lit-helpers
Description: A utility library for Lit
Author: Stefan Holzapfel
Latest version: 2.2.8

# lit-helpers
A utility library for Lit 2

<h1>Installation</h1>

```
npm install @stefanholzapfel/lit-helpers
```

This package includes some helper controllers and directives.

<h2>Reactive controllers</h2>

<h3>DomDetachmentController</h3>

Programmatically add callbacks to execute when LitElement is detached from DOM.
```
@customElement('my-element')
export class MyElement extends LitElement{
    // Create the controller and store it
    private domDetachmentController = new DomDetachmentController(this);
    
    anyElementFunction() {
        this.domDetachmentController.addLogic(() => {
            // do something, e.g. clean up dynamically created subscriptions
        })
    }
}
```

<h2>Directives</h2>
npm package: @stefanholzapfel/lit-translate
Description: A lightweight translation directive for Lit
Author: Stefan Holzapfel
Latest version: 3.5.3

# lit-translate
A very basic and lightweight translation directive for Lit

<h1>Installation</h1>

```
npm install @stefanholzapfel/lit-translate
```

<h1>Initialize the service</h1>

Before using the directive register a "loader" with the service.

The loader is an async function telling the translator how to load any specific language.

It receives a language identifier (string) and must return a Strings object which is an arbitrarily deeply nested object with only string values.

```
import { TranslateService } from '@stefanholzapfel/lit-translate';

TranslateService.init(
    language => {
        // load and return translations for language here (e.g. fetch from a JSON file)
    });
```

<h1>Usage</h1>

<h3>Set language:</h3>

Set the language to use with use().

The function is async and can be awaited if you want to avoid translation identifiers flashing up in your app.

The translation identifier can be whatever string you want, but I suggest to stick to a standard like ISO639.
```
await TranslateService.use('en-GB');
```

<h3>Usage in lit-html:</h3>

The translate directive accepts an identifier in dot notation. For this Strings object:
```
{
    app: {
        my_string: "TEST"
    }
}
```



```
<span>translate('app.my_string')</span>
```

resolves to:
```
<span>TEST</span>
```

The directive will automatically listen for language changes and change all directive values accordingly.

Use ``translateUnsafeHTML()`` if you want HTML in translations to be interpreted (otherwise same interface).
Use ``translateUppercase()`` if you want the output in uppercase letters.

<h3>Interpolation:</h3>

You can have dynamic parts in your translations. Just mark them with {{ name }} e.g.:

```
{
    app: {
        my_string: "TEST {{ test_var }}"
    }
}
```


```
<span>translate('app.my_string', { test_var: "another test" })</span>
```

resolves to:
```
<span>TEST another test</span>
```

Use as many interpolation values as you want. Just add them as properties to the interpolation object.

Interpolations can be strings, TemplateResults or DirectiveResults. That means you can e.g. nest translate directives
in each other: 
```
<span>translate('app.my_string', { test_var: translate('app.nested_string') })</span>
```


<h3>Clear all cached Strings:</h3>

```
TranslateService.clearStrings();
```

<h1>Optional: Directly translate from objects</h1>

This library also offers a way to provide a translations object in-place and a directive that automatically renders the language currently active in the `TranslateService` from it:

A sample translations object:

```
const myTranslations = {
    'en-GB': 'Hi, I'm a translationsObject!',
    'de-DE': 'Hallo, ich bin ein translationsObject!'
};
```

Usage with the directive:

```
translateObject(myTranslations);
```

A fallback language identifier can be provided as second parameter to the directive.

Use ```translateObjectUnsafeHTML(myTranslations)``` to interpret HTML in translation strings.
npm package: @stefanini/configuration
Description: Manager configuration project in file json, database or static object
Author: Denys Fontenele
Latest version: 4.0.1

# ConfigurationModule

This allow define configuration in the app with object, file json (local or external) or custom strategy (ex: yaml)

## Using  in an Ionic 2 app

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

// import ConfigurationModule
import { ConfigurationModule } from '@stefanini/configuration';

export const APP_CONFIG = {
  'my-config': 'My Config',
  'my-config-env': {
    'dev': 'Config Dev',
    'prod': 'Config Dev'
  }
};

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    ConfigurationModule.initialize(APP_CONFIG, 'dev')
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule {}
```

Contributing

See [CONTRIBUTING.md](https://github.com/mbamobi/configuration/blob/master/.github/CONTRIBUTING.md)
npm package: @stefanini/url-resolver
Description: Configuration routes to object Http of the Angular4
Author: Denys Fontenele
Latest version: 4.0.1

# UrlResolverModule

This allow define configuration of objects request

## Using HttpModule in an Ionic 2 app

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

// import url-resolver module
import { UrlResolverModule } from '@stefanini/url-resolver';

export const APP_ROUTE = {
  '_defaults': {
    'host': 'http://api.example.com/'
  },
  'user': {
    'url': 'users/{id}',
    'method': 'GET',
    'headers': {
      'content-type': 'application/json'
    },
    'params': {
      'id': {
        'type': 'number',
        'required': true
      }
    }
  }
};

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    UrlResolverModule.initialize(APP_ROUTE),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule {}
```
npm package: @stefanjudis/sparkly-text
Description: A small web component for making your text spark.
Author: Stefan Judis
Latest version: 1.1.2

# `sparkly-text`

A small zero-dependency Web Component to add sparkles to text fragments.

## Examples

```html
<!-- Add sparkles  -->
<sparkly-text>Hello world</sparkly-text>

<!-- Increase the number of sparkles  -->
<sparkly-text number-of-sparkles="5">Hello world</sparkly-text>

<!-- Color the sparkles  -->
<sparkly-text style="--sparkly-text-color: orange">Hello world</sparkly-text>

<!-- Add rainbow colors   -->
<sparkly-text style="--sparkly-text-color: rainbow">Hello world</sparkly-text>

<!-- Increase the sparkle size  -->
<sparkly-text style="--sparkly-text-size: 2.5em">Hello world</sparkly-text>
```

## Installation

You have a few options (choose one of these):

- Install via [npm](https://www.npmjs.com/package/@stefanjudis/sparkly-text): npm install @stefanjudis/sparkly-text
- [Download the source](https://github.com/stefanjudis/sparkly-text/blob/main/sparkly-text.js) manually from GitHub into your project.
- Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

### Usage

```html
<!-- Host yourself -->
<script type="module" src="sparkly-text.js"></script>
```

```html
<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@stefanjudis/sparkly-text"
></script>
```

```html
<!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://esm.sh/@stefanjudis/sparkly-text"></script>
```

## Kudos

Big thanks goes to [Zach Leatherman](https://www.zachleat.com/) for all [his fancy components such as `table-saw`](https://github.com/zachleat/table-saw).
npm package: @stefanmartin/expo-video-compress
Description: trims the beginning of a video so the first video frame is always at t=0 of the video. Also converts video to h265 for android; ios already records with h265 by default.
Author: Stefan Martin
Latest version: 0.3.0

# expo-video-compress

An Expo native module that processes videos recorded on device:

1. **Trims leading dead frames** — Many device cameras produce videos where the first frame's presentation timestamp (PTS) is not at 0. This module detects that offset and trims the beginning so the first valid frame starts at t=0.
2. **Converts H.264 to H.265/HEVC** (Android only) — If the source video is not already HEVC-encoded, it re-encodes to H.265 for smaller file sizes. iOS devices record in HEVC natively so no conversion is needed.
3. **HDR tone-mapping** (Android only) — HDR videos are tone-mapped to SDR using OpenGL.

## API

### `trimVideo(videoPath: string): Promise<VideoCompressResult>`

Processes a video and returns metadata about what was done.

**Parameters:**
- `videoPath` — A local `file://` URI pointing to the source video.

**Returns** a `VideoCompressResult`:

```typescript
type VideoCompressResult = {
  uri: string;                 // file:// URI of the processed (or original) video
  trimmedStartSeconds: number; // seconds trimmed from the beginning (0 if no trim was needed)
  convertedToHevc: boolean;    // true if the video was re-encoded from H.264 to H.265
};
```

If no processing is needed (first frame is already at t=0 and codec is already HEVC), the original `videoPath` is returned as `uri` with `trimmedStartSeconds: 0` and `convertedToHevc: false`.

**Errors** include `trimmedStartSeconds` and `convertedToHevc` in the error message when those values are known at the point of failure.

### Usage

```typescript
import ExpoVideoCompress from 'expo-video-compress';

const result = await ExpoVideoCompress.trimVideo(videoUri);
console.log(result.uri);                 // "file:///path/to/processed.mp4"
console.log(result.trimmedStartSeconds); // e.g. 0.033
console.log(result.convertedToHevc);     // true on Android if source was H.264
```

## Installation

### Managed Expo projects

```
npx expo install expo-video-compress
```

### Bare React Native projects

Ensure you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) first.

```
npm install expo-video-compress
```

Then run `npx pod-install` for iOS.

## Platform support

| Feature | iOS | Android | Web |
|---|---|---|---|
| Trim leading frames | Yes | Yes | No |
| H.264 to H.265 | No (not needed) | Yes | No |
| HDR tone-mapping | No | Yes | No |

**Minimum versions:** iOS 15.1, Android SDK 33.
npm package: @stefanmartin/expo-video-watermark
Description: Creating video watermarks on locally stored videos
Author: Stefan Martin
Latest version: 1.0.0

# expo-video-watermark

An Expo native module for adding watermark images to videos on iOS and Android. The watermark is placed at the bottom of the video and stretched to fit the full width (left to right edges).

## Features

- Works on **iOS** and **Android** with the **Expo 54 new architecture**
- Supports **HDR** and **SDR** videos
- Supports **H.265 (HEVC)** and **H.264** codecs
- Watermark is positioned at the bottom of the video, stretched edge-to-edge

## Installation

```bash
npx expo install @stefanmartin/expo-video-watermark
```

## Usage

```typescript
import ExpoVideoWatermark from '@stefanmartin/expo-video-watermark';

// Add a watermark to a video
const outputPath = await ExpoVideoWatermark.watermarkVideo(
  '/path/to/source/video.mp4',
  '/path/to/watermark.png',
  '/path/to/output/video.mp4'
);

console.log('Watermarked video saved to:', outputPath);
```

## API

### `watermarkVideo(videoPath, imagePath, outputPath)`

Adds a watermark image onto a video and writes the result to the specified output path.

**Parameters:**

| Name | Type | Description |
|------|------|-------------|
| `videoPath` | `string` | Local filesystem path to the source MP4 video |
| `imagePath` | `string` | Local filesystem path to the PNG watermark image |
| `outputPath` | `string` | Local filesystem path where the output MP4 should be written |

**Returns:** `Promise<string>` - Resolves with the output path on success.

## Platform Support

| Platform | Supported |
|----------|-----------|
| iOS | Yes |
| Android | Yes |
| Web | No |

## License

MIT
npm package: @stefanmirck/card
Description: Stefan Mirck’s personal card
Author: Stefan Mirck
Latest version: 1.0.0

This is my npm card. 🪪

# How to use

```bash
npx @stefanmirck/card
```

## Acknowledgements

Based on [Tierney Cyren](https://github.com/bnb)’s
[npm card](https://github.com/bnb/bitandbang/).
npm package: @stefano-rainieri/yajs
Description: YET ANOTHER JAVASCRIPT SLIDER. ✨ Simple, lightweight, responsive slider carousel.
Author: Stefano Rainieri
Latest version: 1.0.0

<h1 align="center">
    <strong>YAJS</strong>
</h1>
<p align="center">
    YET ANOTHER JAVASCRIPT SLIDER ✨ Simple, lightweight, responsive slider carousel.<br/>
    Slide your photos, images, cards or whatever you want easier with this library.
</p>
<p align="center">
    <img src="https://raw.githubusercontent.com/stefano-rainieri/yajs/master/demo/demo.gif" height="150">
</p>

## Before
This library has no dependencies.
You only have to include a JS file.
This library is JS-centric, 'cause it is built with webpack. 
So the CSS applied to the elements, is added via the bundled JS and just in order to make the right positioning of the sliding elements.
No other rules will be applied (backgrounds, colors, shadows etc...).
Of course, you can add custom css to inside sliding elements, don't worry.


## Installation
Install Yajs with your favourite package manager:
```sh
$ yarn add @stefano-rainieri/yajs
```
or
```sh
$ npm install @stefano-rainieri/yajs --save
```

Include Yajs into your project:
```html
<script type="text/javascript" src="path/to/@stefano-rainieri/yajs/dist/main.bundle.js"></script>
```


## Usage
Add Yajs markup to auto-configure the slider carousel for your element: 
```html
<div class="yajs" data-yajs>
    <div class="yajs__arrow yajs__arrow--left">&lt;</div>
    <div class="yajs__container">
        <div>your first element in the slider</div>
        <div>your second element in the slider</div>
        <div>your third element in the slider</div>
        <div>...</div>
        <div>your nth element in the slider</div>
    </div>
    <div class="yajs__arrow yajs__arrow--right">&gt;</div>
</div>
```
That's all. Enjoy!


## Examples
Try some Yajs examples simply opening `index.html` under `demo/` folder.


## Test
Run Yajs test:
```sh
$ yarn test
```


## Work in progress
- configure autoplay *(now it's fixed on and scroll every 5s)*
- configure autoplay delay *(now no delay is applied)*
- dynamically add style on construction


## Contributing
Contributions are welcome! Feel free to file an [ISSUE](https://github.com/stefano-rainieri/yajs/issues) or open a [PR](https://github.com/stefano-rainieri/yajs/pulls) for this repo.


## License
Yajs is licensed under the MIT License - see the [LICENSE](https://github.com/stefano-rainieri/yajs/blob/master/LICENSE) file for details.


*Free Software, Hell Yeah!*
npm package: @stefano1990/socket-graphiql
Description: Socket GraphiQL Utilities fork by stefano1990
Author: Stefano Hug
Latest version: 0.2.1

# @absinthe/socket-graphiql

> Socket GraphiQL Utilities

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
<!-- END doctoc -->

- [Installation](#installation)
  - [Using npm](#using-npm)
  - [Using yarn](#using-yarn)
- [API](#api)
  - [createFetcher](#createfetcher)
    - [Parameters](#parameters)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

### Using [npm](https://docs.npmjs.com/cli/npm)

    $ npm install --save phoenix @absinthe/socket-graphiql

### Using [yarn](https://yarnpkg.com)

    $ yarn add phoenix @absinthe/socket-graphiql

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### createFetcher

Creates a Fetcher using the given arguments

#### Parameters

-   `apiUrl` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
-   `subscriptionsClient` **SubscriptionClient** 
-   `subscriptionSentMessage` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 

## License

[MIT](LICENSE.txt) :copyright: Jumpn Limited.
npm package: @stefano22/testapp
Description: npm private package w/scope test
Author: SL
Latest version: 1.0.2

updated image webpack loader to the latest release within this version

^ ---- latest stable release within this major version
* ---- latest release within this major version

semantic versioning (semver)
-------------------
(as the publisher of a package)

- package starting with zero means that your package isn't yet stable for
  initial release, when is ready for people to depend on it, and its functionality
  then starts with 1.0.0

- for minor fixes (minor bug fix), where changes don't break anything nor add any new   features, then is a patch release `1.0.1`
- minor releases add some functionality, so you increment the middle number
  `1.1.1`
- a change to the api that it's not backwards compatible, then you have a major
  release. `2.0.0`

  (as the user of a package)
  - what kind of updates you want to accept

  lets say you just want to accept patch changes

  ```
         1.0.0  -->  1.0.1
         1.0.0  -|-> 1.1.0

         //can be indicated in package.json file in a few different ways:
          1.0
          1.0.x   //an x in the place of the patch number
         ~1.0.4   //a tilda in front of the exact number


         //or download new features but nothing that is backwards incompatible

          1
          1.x   //an x in the place of the patch number
         ^1.0.4   //a tilda in front of the exact number

  ```

  #### do a patch with npm

- npm version patch
- npm publish
- npm publish --access=public

#### private packages in npm have a @scope
- usually @username/name-of-package
- npm init --scope=stefano22