open-index/open-npm huggingface dataset:
npm package: @layest/config
Description: Framework-agnostic configuration loading for Deno and Node.js.
Latest version: 0.2.2

# @layest/config

Framework-agnostic configuration loading for applications.

Features:

- YAML profile loading with deep merge
- Config references like `${keycloak.url}`
- Unified placeholder resolution `${NAME}` / `${NAME:default}`
- Resolution order: env -> secret provider -> default
- Optional Azure Key Vault and AWS Secrets Manager providers
- Works in both Deno and Node.js

## Deno

```ts
import { ConfigManager } from "jsr:@layest/config";
```

## Node.js / npm

```ts
import { ConfigManager } from "@layest/config";
```

Provider subpaths:

```ts
import { AzureKeyVaultProvider } from "@layest/config/providers/azure-keyvault";
import { AwsSecretsManagerProvider } from "@layest/config/providers/aws-secrets-manager";
```
npm package: @layflags/parcel-plugin-metaimage
Description: Set absolute url for og:image and twitter:image meta tags.
Author: Lay Flags
Latest version: 1.2.5

# parcel-plugin-metaimage

> Set absolute URL for all og:image and twitter:image meta tags.

*This plugin is based on [Luke Childs](https://github.com/lukechilds/parcel-plugin-ogimage), [nothingrandom](https://github.com/nothingrandom/parcel-plugin-ogimage) and [Eliepse](https://github.com/Eliepse/parcel-plugin-metaimage) code.*

Sets absolute URLs for all `og:image` and `twitter:image` meta tags. This is required by the spec and relative URLs will not work on some sites such as Facebook or Twitter.

You can fix this directly in parcel by using `--public-url https://example.com`, however now all your URLs are hardcoded to absolute URLs which may be undesirable and can break things like prerendering.

This plugin uses the value of the `og:url` (or non-standard `origin`) meta tag to convert `og:image` to an absolute URL.

## Install

```shell
npm install @layflags/parcel-plugin-metaimage
```

## Usage

Just install this package as a development dependency. Parcel will automatically call it when building your application.

You **must** have both `og:image` and `og:url` (or `origin`) meta tags:

```html
<meta name="twitter:image" content="card.png">
<meta property="og:image" content="card.png">
<meta property="og:url" content="https://example.com">
```

Parcel will generate that into something like this:

```html
<meta name="twitter:image" content="/card.9190ce93.png">
<meta property="og:image" content="/card.9190ce93.png">
<meta property="og:url" content="https://example.com">
```

`@layflags/parcel-plugin-metaimage` will then update the `og:image` and `twitter:image` with an absolute URL:

```html
<meta name="twitter:image" content="https://example.com/card.9190ce93.png">
<meta property="og:image" content="https://example.com/card.9190ce93.png">
<meta property="og:url" content="https://example.com">
```

## License

MIT @ layflags

From [Luke Childs](https://github.com/lukechilds/parcel-plugin-ogimage) and [nothingrandom](https://github.com/nothingrandom/parcel-plugin-ogimage) and [Eliepse](https://github.com/Eliepse/parcel-plugin-metaimage) code
npm package: @layflags/pretty-bytes
Description: Convert bytes to a human readable string: 1337 → 1.34 kB
Author: Sindre Sorhus
Latest version: 5.1.0

# pretty-bytes [![Build Status](https://travis-ci.org/sindresorhus/pretty-bytes.svg?branch=master)](https://travis-ci.org/sindresorhus/pretty-bytes)

> Convert bytes to a human readable string: `1337` → `1.34 kB`

Useful for displaying file sizes for humans.

*Note that it uses base-10 (e.g. kilobyte).
[Read about the difference between kilobyte and kibibyte.](https://web.archive.org/web/20150324153922/https://pacoup.com/2009/05/26/kb-kb-kib-whats-up-with-that/)*


## Install

```
$ npm install pretty-bytes
```


## Usage

```js
const prettyBytes = require('pretty-bytes');

prettyBytes(1337);
//=> '1.34 kB'

prettyBytes(100);
//=> '100 B'

// Display file size differences
prettyBytes(42, {signed: true});
//=> '+42 B'

// Localized output using German locale
prettyBytes(1337, {locale: 'de'});
//=> '1,34 kB'
```


## API

### prettyBytes(input, [options])

#### input

Type: `number`

The number to format.

#### options

Type: `Object`

##### signed

Type: `boolean`<br>
Default: `false`

Include plus sign for positive numbers. If the difference is exactly zero a space character will be prepended instead for better alignment.


##### locale

Type: `boolean` `string`<br>
Default: `false` *(No localization)*

- If `true`: Localize the output using the system/browser locale.
- If `string`: Expects a [BCP 47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag) (For example: `en`, `de`, …)

**Note:** Localization should generally work in browsers. Node.js needs to be [built](https://github.com/nodejs/node/wiki/Intl) with `full-icu` or `system-icu`. Alternatively, the [`full-icu`](https://github.com/unicode-org/full-icu-npm) module can be used to provide support at runtime.


## Related

- [pretty-bytes-cli](https://github.com/sindresorhus/pretty-bytes-cli) - CLI for this module


## License

MIT © [Sindre Sorhus](https://sindresorhus.com)
npm package: @layflags/react-crossfade-image
Description: Simple React component for crossfading images
Author: Khang Lu
Latest version: 1.1.3

# react-crossfade-image

![](https://img.shields.io/npm/v/react-crossfade-image.svg)

Simple component for crossfading images. Just pass it a new src prop and enjoy the fade!

![alt react-crossfade-image-example](https://media.giphy.com/media/xUPGcHDL5FJaQXz2EM/giphy.gif)

## Usage

```javascript
npm install react-crossfade-image
```
Clone and run `npm start` for demo.

Sample component:

```javascript
<CrossfadeImage src={imageSrc} />
```

## Props

### src
Image source as string - required

### duration
Duration of the fade, in ms - default to 300

### timingFunction
Support all CSS timing functions - default to 'ease'

### delay
Duration of the delay before fading, in ms - default to 0

### style
Custom styling for the image - default to { maxWidth: '100%', maxHeight: '100%' } for responsive image scaling

## License
MIT
npm package: @layflags/react-redux-snackbar
Description: A snackbar (displays toasts) for reactjs, using the redux state container
Author: wireforce
Latest version: 1.1.0

# react-redux-snackbar [![Gemnasium](https://img.shields.io/gemnasium/mathiasbynens/he.svg)]() [![gzipped size](https://img.shields.io/badge/gzipped-2.5kb-brightgreen.svg)]()
A snackbar (displays toasts) for reactjs, using the redux state container. Follows the [material design guidelines](https://material.io/guidelines/components/snackbars-toasts.html).
Its flexible and customizable at less than 2.5kB gzipped, and has no dependencies (other than that you must use React and Redux in your app of course).

## Install

Install using yarn:

`yarn add react-redux-snackbar`

Or npm:

`npm install --save react-redux-snackbar`

### Implementation

1) Add the reducer

```javascript
// Somewhere where you create your redux-store:
import { createStore, combineReducers } from 'redux';
import { snackbarReducer } from 'react-redux-snackbar'; // Import it
const reducers = {
  // ... reducers ...
  snackbar: snackbarReducer // Make sure its mounted using the "snackbar" key
  // ... reducers ...
};
const reducer = combineReducers(reducers);
const store = createStore(reducer);
```

2) Add the React-component somewhere in your app

```javascript
import { Provider }  from 'react-redux';
import { Snackbar } from 'react-redux-snackbar';

<Provider store={store}>
	// This is maybe in your App.js or something
	// Just put the component somewhere in your app
	<Snackbar />
</Provider>
```

3) Then use it by dispatching the redux-actions, anywhere in your app

```javascript
import { showSnack, dismissSnack } from 'react-redux-snackbar';

dispatch(showSnack('myUniqueId', {
	label: 'Yay, that actually worked!',
	timeout: 7000,
	button: { label: 'OK, GOT IT' }
}));

// Should you want to remove it programatically:

dispatch(dismissSnack('myUniqueId'));
```
## More docs coming soon

### [Changelog](CHANGELOG.md)
npm package: @layflags/rolling-number
Description: <layflags-rolling-number> is an easy-to-use inline Web Component that shows a nice rolling digit animation and automatically adapts to the surrounding font style
Author: Lay Flags
Latest version: 1.0.0

# &lt;layflags-rolling-number&gt;

This easy-to-use inline Web Component shows a nice rolling digit animation and automatically adapts to the surrounding font style.

![Rolling Number Screen Recording](rolling-number.gif)

**See a DEMO here: https://layflags.github.io/rolling-number/**

This project makes use of the latest browser features ([Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components), [module scripts](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), etc.) which are well supported in current versions of [Google Chrome](https://www.google.com/chrome/), [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/), [Apple Safari](https://www.apple.com/safari/) and [Microsoft Edge](https://www.microsoft.com/en-us/edge). If you need to target older browser versions or Microsoft Internet Explorer, you need to provide appropriate polyfills.

## Installation

### Self hosted

Add the following to an HTML document:

```html
<script type="module" src="path/to/rolling-number.js"></script>
```

### CDN

Add the following to an HTML document:

```html
<script
  type="module"
  src="https://unpkg.com/@layflags/rolling-number@1.0.0/rolling-number.js"
></script>
```

### [NPM](https://www.npmjs.com/package/@layflags/rolling-number)

Run `npm i @layflags/rolling-number`.

## Usage

```html
<!-- value by fallback -->
<layflags-rolling-number>123</layflags-rolling-number>

<!-- value w/o fallback -->
<layflags-rolling-number value="123"></layflags-rolling-number>

<!-- customize roll duration -->
<layflags-rolling-number
  style="--roll-duration:750ms"
  value="123"
></layflags-rolling-number>
```

## License

[MIT License](LICENSE)