open-index/open-npm huggingface dataset:
npm package: @plaa/metascraper
Description: A library to easily scrape metadata from an article on the web using Open Graph metadata, regular HTML metadata, and series of fallbacks.
Latest version: 5.4.0

# metascraper

[![npm](https://img.shields.io/npm/v/metascraper.svg?style=flat-square)](https://www.npmjs.com/package/metascraper)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper)

> A library to easily scrape metadata from an article on the web using Open Graph metadata, regular HTML metadata, and series of fallbacks.

## Install

```bash
$ npm install metascraper --save
```

## License

**metascraper** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-amazon
Description: metascraper integration with Amazon
Latest version: 5.4.0

# metascraper-amazon

[![npm](https://img.shields.io/npm/v/metascraper-amazon.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-amazon)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-amazon&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-amazon)

> metascraper integration with Amazon.

## Install

```bash
$ npm install metascraper-amazon --save
```

## License

**metascraper-amazon** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-amazon/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-amazon/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-audio
Description: Get audio property from HTML markup
Latest version: 5.4.0

# metascraper-audio

[![npm](https://img.shields.io/npm/v/metascraper-audio.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-audio)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-audio&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-audio)

> Get audio property from HTML markup.

## Install

```bash
$ npm install metascraper-audio --save
```

## License

**metascraper-audio** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-audio/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-audio/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-author
Description: Get author property from HTML markup
Latest version: 5.4.0

# metascraper-author

[![npm](https://img.shields.io/npm/v/metascraper-author.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-author)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-author&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-author)

> metascraper integration with Amazon.

## Install

```bash
$ npm install metascraper-author --save
```

## License

**metascraper-author** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-author/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-author/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-clearbit-logo
Description: metascraper integration with Clearbit Logo API
Latest version: 5.4.0

# metascraper-clearbit-logo

[![npm](https://img.shields.io/npm/v/metascraper-clearbit-logo.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-clearbit-logo)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-clearbit-logo&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-clearbit-logo)

> metascraper integration with Clearbit Logo API.

## Install

```bash
$ npm install metascraper-clearbit-logo --save
```

## API

### clearbitLogo([options])

#### options

##### size

Type: `string`<br>
Default: `128`

Length of longest side in pixels.

##### format

Type: `string`<br>
Default: `png`

Image format, either "png" or "jpg".

##### greyscale

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

Desaturates image if set to `true`.

## License

**metascraper-clearbit-logo** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-clearbit-logo/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-clearbit-logo/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-date
Description: Get date property from HTML markup
Latest version: 5.4.0

# metascraper-date

[![npm](https://img.shields.io/npm/v/metascraper-date.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-date)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-date&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-date)

> Get date property from HTML markup.

## Install

```bash
$ npm install metascraper-date --save
```

## License

**metascraper-date** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-date/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-date/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-description
Description: Get description property from HTML markup
Latest version: 5.4.0

# metascraper-description

[![npm](https://img.shields.io/npm/v/metascraper-description.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-description)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-description&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-description)

> Get description property from HTML markup.

## Install

```bash
$ npm install metascraper-description --save
```

## License

**metascraper-description** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-description/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-description/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-helpers
Description: Collection of helper functions used by metascraper
Latest version: 5.4.0

# metascraper-helpers

[![npm](https://img.shields.io/npm/v/@metascraper/helpers.svg?style=flat-square)](https://www.npmjs.com/package/@metascraper/helpers)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-helpers&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-helpers)

> Collection of helper functions used by metascraper.

## Install

```bash
$ npm install @metascraper/helpers --save
```

## License

**metascraper-helpers** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-helpers/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-helpers/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-image
Description: Get image property from HTML markup
Latest version: 5.4.0

# metascraper-image

[![npm](https://img.shields.io/npm/v/metascraper-image.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-image)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-image&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-image)

> Get image property from HTML markup.

## Install

```bash
$ npm install metascraper-image --save
```

## License

**metascraper-image** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-image/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-image/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-lang
Description: Get lang property from HTML markup
Latest version: 5.4.0

# metascraper-lang

[![npm](https://img.shields.io/npm/v/metascraper-lang.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-lang)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-lang&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-lang)

> Get lang property from HTML markup.

## Install

```bash
$ npm install metascraper-lang --save
```

## License

**metascraper-lang** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-lang/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-lang/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-logo
Description: Get logo property from HTML markup
Latest version: 5.4.0

# metascraper-logo

[![npm](https://img.shields.io/npm/v/metascraper-logo.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-logo)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-logo&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-logo)

> Get logo property from HTML markup.

## Install

```bash
$ npm install metascraper-logo --save
```

## License

**metascraper-logo** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-logo/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-logo/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-logo-favicon
Description: metascraper logo favicon fallback
Latest version: 5.4.0

# metascraper-logo-favicon

[![npm](https://img.shields.io/npm/v/metascraper-logo-favicon.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-logo-favicon)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-logo-favicon&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-logo-favicon)

> metascraper logo favicon fallback.

## Install

```bash
$ npm install metascraper-logo-favicon --save
```

## License

**metascraper-logo-favicon** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-logo-favicon/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-logo-favicon/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-media-provider
Description: Get video property from HTML markup
Latest version: 5.4.0

# metascraper-media-provider

[![npm](https://img.shields.io/npm/v/metascraper-media-provider.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-media-provider)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-media-provider&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-media-provider)

> Get specific video provider url (Facebook/Twitter/Vimeo/etc).

## Install

```bash
$ npm install metascraper-media-provider --save
```

## Usage

.constructor([options])

### options

#### cacheDir

Type: `string`

It specifies cache based on file system to be used by [youtube-dl](youtube-dl).

#### onError

Type: `function`

A function to be called when something wrong happens.

It will receive `error` and `url`.

#### proxies

Type: `array`

When it is specified, a proxy will be used for each of the requests using [luminati-tunnel](https://github.com/Kikobeats/luminati-tunnel).

#### userAgent

Type: `string`

It specifies a custom user agent.

## License

**metascraper-media-provider** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq//blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq//contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-publisher
Description: Get publisher property from HTML markup
Latest version: 5.4.0

# metascraper-publisher

[![npm](https://img.shields.io/npm/v/metascraper-publisher.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-publisher)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-publisher&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-publisher)

> Get publisher property from HTML markup.

## Install

```bash
$ npm install metascraper-publisher --save
```

## License

**metascraper-publisher** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-publisher/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-publisher/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-readability
Description: A Readability connector for metascraper
Latest version: 5.4.0

# metascraper-readability

[![npm](https://img.shields.io/npm/v/metascraper-readability.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-readability)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-readability&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-readability)

> A Readability connector for metascraper

## Install

```bash
$ npm install metascraper-readability --save
```

## License

**metascraper-readability** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-readability/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-readability/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-soundcloud
Description: metascraper integration with SoundCloud
Latest version: 5.4.0

# metascraper-soundcloud

[![npm](https://img.shields.io/npm/v/metascraper-soundcloud.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-soundcloud)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-soundcloud&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-soundcloud)

> metascraper integration with SoundCloud.

## Install

```bash
$ npm install metascraper-soundcloud --save
```

## License

**metascraper-soundcloud** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-soundcloud/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-soundcloud/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-title
Description: Get title property from HTML markup
Latest version: 5.4.0

# metascraper-title

[![npm](https://img.shields.io/npm/v/metascraper-title.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-title)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-title&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-title)

> Get title property from HTML markup.

## Install

```bash
$ npm install metascraper-title --save
```

## License

**metascraper-title** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-title/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-title/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-url
Description: Get url property from HTML markup
Latest version: 5.4.0

# metascraper-url

[![npm](https://img.shields.io/npm/v/metascraper-url.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-url)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-url&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-url)

> Get url property from HTML markup.

## Install

```bash
$ npm install metascraper-url --save
```

## License

**metascraper-url** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-url/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-url/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-video
Description: Get video property from HTML markup
Latest version: 5.4.0

# metascraper-video

[![npm](https://img.shields.io/npm/v/metascraper-video.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-video)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-video&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-video)

> Get video property from HTML markup.

## Install

```bash
$ npm install metascraper-video --save
```

## License

**metascraper-video** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-video/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-video/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plaa/metascraper-youtube
Description: metascraper integration with YouTube
Latest version: 5.4.0

# metascraper-youtube

[![npm](https://img.shields.io/npm/v/metascraper-youtube.svg?style=flat-square)](https://www.npmjs.com/package/metascraper-youtube)
[![Dependency Status](https://david-dm.org/microlinkhq/metascraper.svg?path=packages/metascraper-youtube&style=flat-square)](https://david-dm.org/microlinkhq/metascraper?path=packages/metascraper-youtube)

> metascraper integration with YouTube.

## Install

```bash
$ npm install metascraper-youtube --save
```

## License

**metascraper-youtube** © [microlink.io](https://microlink.io), Released under the [MIT](https://github.com/microlinkhq/metascraper-youtube/blob/master/LICENSE.md) License.<br>
Authored and maintained by microlink.io with help from [contributors](https://github.com/microlinkhq/metascraper-youtube/contributors).

> [microlink.io](https://microlink.io) · GitHub [@microlink.io](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)
npm package: @plabs/envars
Description: envars
Author: Pedroso Labs
Latest version: 0.1.3

# Tools for managing Environment Variables

This package implements code for managing environment variables

## Installation

```bash
yarn add @plabs/envars
```

## Example

```ts
import { initEnvars } from '@plabs/envars';

const envars = {
  APP_NAME: '',
};

// load APP_NAME from process.env
initEnvars(envars);
```
npm package: @plabs/envars-cli
Description: envars-cli
Author: Pedroso Labs
Latest version: 0.3.0

# Envars CLI

`envars` is a tool to set Environment Variables using a JSON database file.

The command line tool reads `ENVARS_JSON_PATH` and sets the variables for a project whose name is equal to the current directory.

## Database of variables (e.g. envars.json)

The path of the database file must be specified by an environment variable named `ENVARS_JSON_PATH`.

```json
{
  "myapp": {
    "dev": {
      "APP_NAME": "my application 😄",
      "EMPTY_VAR": ""
    },
    "prod": {
      "APP_NAME": "my application 😄 [production]",
      "EMPTY_VAR": "<must-not-be-empty>"
    }
  }
}
```

## Dependencies

- chalk — colorizes the output
- clui — draws command-line tables, gauges and spinners
- figlet — creates ASCII art from text
- inquirer — creates interactive command-line user interface
- minimist — parses argument options
- configstore — easily loads and saves config without you having to think about where and how.
npm package: @placardi/avatar
Description: Placardi UI avatar component
Author: Alexander Zakharov
Latest version: 0.2.0

# @placardi/avatar

An avatar is a visual representation of a user or entity.

## Installation

```bash
npm i @placardi/avatar
```

## Dependencies

- react
- styled-components
- @placardi/theme

## Usage

### Basic usage

In order to use the avatar component, wrap the application in global theme provider from `@placardi/theme`. Then, use the avatar as any regular component.

Avatar uses the abbreviation element (`<abbr>`) under the hood. Initials will show up once `title` prop is provided to the component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Avatar from '@placardi/avatar';

const App: FC = () => (
  <ThemeProvider>
    <Avatar title='John Doe' />
  </ThemeProvider>
);

export default App;
```

### Avatar size

Avatar size can be customised using the `Size` enum that comes packaged with the avatar component. Pass a `size` prop to the avatar in order to change its size. The default is set to `Size.MEDIUM`.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Avatar, { Size } from '@placardi/avatar';

const App: FC = () => (
  <ThemeProvider>
    <Avatar title='John Doe' size={Size.LARGE} />
  </ThemeProvider>
);

export default App;
```

### Avatar colour

Avatar colour can be customised using the `Colour` enum that comes packaged with the brand theme. Pass a `colour` prop to the avatar in order to change its colour. The default is set to `Colour.BLUE`.

```tsx
import React, { FC } from 'react';
import ThemeProvider, { Colour } from '@placardi/theme';
import Avatar from '@placardi/avatar';

const App: FC = () => (
  <ThemeProvider>
    <Avatar title='John Doe' colour={Colour.BLUE} />
  </ThemeProvider>
);

export default App;
```

### Pointable avatar

Avatar can respond to pointer events. Pass one of the following props: [`pointable`, `onClick`] to the avatar in order to change its pointer bahaviour. By default, all pointer events are ignored.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Avatar from '@placardi/avatar';

const App: FC = () => (
  <ThemeProvider>
    <Avatar title='John Doe' pointable />
  </ThemeProvider>
);

export default App;
```
npm package: @placardi/breadcrumbs
Description: Placardi UI breadcrumbs component
Author: Alexander Zakharov
Latest version: 0.1.4

# @placardi/breadcrumbs

Breadcrumbs provide users with an alternative way to navigate an application.

## Installation

```bash
npm i @placardi/breadcrumbs
```

## Dependencies

- react
- styled-components
- @placardi/theme

## Usage

### Basic usage

In order to use the breadcrumbs component, wrap the application in global theme provider from `@placardi/theme`. Then, use the breadcrumbs as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Breadcrumbs, { Breadcrumb } from '@placardi/breadcrumbs';

const App: FC = () => (
  <ThemeProvider>
    <Breadcrumbs>
      <Breadcrumb>
        Path 1
      </Breadcrumb>
      <Breadcrumb>
        Path 2
      </Breadcrumb>
      <Breadcrumb active>
        Path 3
      </Breadcrumb>
    </Breadcrumbs>
  </ThemeProvider>
)

export default App;
```

### Custom separator

Breadcrumbs separator is fully customisable and accepts both text and element nodes.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Breadcrumbs, { Breadcrumb } from '@placardi/breadcrumbs';
import FavoriteIcon from '@material-ui/icons/Favorite';

const App: FC = () => (
  <ThemeProvider>
    <Breadcrumbs separator={<FavoriteIcon />}>
      <Breadcrumb>
        <a href="/path/1">Path 1</a>
      </Breadcrumb>
      <Breadcrumb>
        <a href="/path/2">Path 2</a>
      </Breadcrumb>
      <Breadcrumb active>
        <a href="/path/3">Path 3</a>
      </Breadcrumb>
    </Breadcrumbs>
  </ThemeProvider>
)

export default App;
```

### Custom breadcrumbs

Breadcrumbs can be customised by passing any arbitrary text or element child to Breadcrumb component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Breadcrumbs, { Breadcrumb } from '@placardi/breadcrumbs';

const App: FC = () => (
  <ThemeProvider>
    <Breadcrumbs>
      <Breadcrumb>
        <a href="/path/1">Path 1</a>
      </Breadcrumb>
      <Breadcrumb>
        <a href="/path/2">Path 2</a>
      </Breadcrumb>
      <Breadcrumb active>
        <a href="/path/3">Path 3</a>
      </Breadcrumb>
    </Breadcrumbs>
  </ThemeProvider>
)

export default App;
```
npm package: @placardi/carousel
Description: Placardi UI carousel component
Author: Alexander Zakharov
Latest version: 0.1.2

# @placardi/carousel

A carousel can be used to display a set of images one at a time.

## Installation

```bash
npm i @placardi/carousel
```

## Dependencies

- react
- styled-components
- @placardi/theme

## Usage

### Basic usage

In order to use the carousel component, wrap the application in global theme provider from `@placardi/theme`. Then, use the carousel as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Carousel, { CarouselItem } from '@placardi/carousel';

const App: FC = () => (
  <ThemeProvider>
    <Carousel>
      <CarouselItem>
        <img src="img1.jpeg" />
      </CarouselItem>
      <CarouselItem>
        <img src="img2.jpeg" />
      </CarouselItem>
    </Carousel>
  </ThemeProvider>
);

export default App;
```
npm package: @placardi/graphql
Description: Placardi collection of reusable GraphQL modules.
Author: Alexander Zakharov
Latest version: 0.10.1

# @placardi/graphql

Placardi collection of reusable GraphQL modules.

## Installation

```bash
npm i @placardi/graphql
```

## Dependencies

- graphql
- apollo-server
- validator

## Usage

### Directives

The following directives are available:
  - `@shape` - allows adding constraints to GraphQL fields

In order to add a directive to the schema, do the following:
  - Add directive-specific type definitions to schema
  - Register directive with schema
npm package: @placardi/header
Description: Placardi UI header component
Author: Alexander Zakharov
Latest version: 0.1.4

# @placardi/header

A header is a component that combines branding and some useful functionality.

## Installation

```bash
npm i @placardi/header
```

## Dependencies

- react
- styled-components
- @placardi/theme

## Usage

### Basic usage

In order to use the header component, wrap the application in global theme provider from `@placardi/theme`. Then, use the header as any regular component. Header has support for slots (i.e. logo and avatar) that accept arbitrary child nodes.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Header, { LogoSlot, AvatarSlot } from '@placardi/header';

const App: FC = () => (
  <ThemeProvider>
    <Header>
      <LogoSlot>Greetings!</LogoSlot>
      <AvatarSlot>JD</AvatarSlot>
    </Header>
  </ThemeProvider>
)

export default App;
```
npm package: @placardi/logo
Description: Placardi UI logo component
Author: Alexander Zakharov
Latest version: 0.3.1

# @placardi/logo

Placardi logo is the face of our brand. It was designed to be simpe, concise and memorable.

## Installation

```bash
npm i @placardi/logo
```

## Dependencies

- react
- styled-components

## Usage

### Basic usage

In order to use Placardi logo in an application, simply import it from `@placardi/logo` and use it as any regular component.

```tsx
import React, { FC } from 'react';
import Logo from '@placardi/logo';

const App: FC = () => (
  <header>
    <Logo />
  </header>
)

export default App;
```

### Minimal logo variant

In orer to use the minimal version of the logo, pass a `minimal` prop to the logo component. This will render the logo as only a brand glyph.

```tsx
import React, { FC } from 'react';
import Logo from '@placardi/logo';

const App: FC = () => (
  <header>
    <Logo minimal />
  </header>
)

export default App;
```

### Changing logo height

Logo height, and therefore overall size can be customised by providing it a `height` prop. It takes in a value for height in pixels. Note that the minimum allowed height is 30px, which is also the default height.

```tsx
import React, { FC } from 'react';
import Logo from '@placardi/logo';

const App: FC = () => (
  <header>
    <Logo height={50} />
  </header>
)

export default App;
```

### Logo on dark background

Placardi logo can be used on a dark background. In order to make sure logo text is still visible, it is important to render the light version of the logo by passing a `light` prop to `Logo` component.

```tsx
import React, { FC } from 'react';
import Logo from '@placardi/logo';

const App: FC = () => (
  <header>
    <Logo light />
  </header>
)

export default App;
```
npm package: @placardi/masonry-grid
Description: Placardi UI masonry grid component
Author: Alexander Zakharov
Latest version: 0.1.1

# @placardi/masonry-grid

Masonry grid component is used to create masonry layouts for fixed width elements.

## Installation

```bash
npm i @placardi/masonry-grid
```

## Dependencies

- react
- styled-components

## Usage

### Basic usage

Masonry grid can be used as a standalone component and has no external dependencies. In order to use the masonry grid component, add a MasonryGrid wrapper and populate it with MasonryGridItem children. Do not forget to specify sizes array, which describes grid behaviour at different breakpoints.

```tsx
import React, { FC } from 'react';
import MasonryGrid, { MasonryGridItem } from '@placardi/masonry-grid';

const App: FC = () => (
  <MasonryGrid>
    <MasonryGridItem>child 1</MasonryGridItem>
    <MasonryGridItem>child 2</MasonryGridItem>
    <MasonryGridItem>child 3</MasonryGridItem>
  </MasonryGrid>
)

export default App;
```
npm package: @placardi/modal
Description: Placardi UI modal component
Author: Alexander Zakharov
Latest version: 0.1.6

# @placardi/modal

A modal can be used to display some content on top of another.

## Installation

```bash
npm i @placardi/modal
```

## Dependencies

- react
- styled-components
- @placardi/theme

## Usage

### Basic usage

In order to use the modal component, wrap the application in global theme provider from `@placardi/theme`. Then, use the modal as any regular component.

```tsx
import React, { FC, useState } from 'react';
import ThemeProvider from '@placardi/theme';
import Modal from '@placardi/modal';

const App: FC = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <ThemeProvider>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        Take me places!
      </Modal>
    </ThemeProvider>
  );
};

export default App;
```

### Disabling body scroll when modal is open

By default, modal will not prevent scroll on the document body element. In order to enable that behaviour, pass it a `disableBodyScroll` prop.

```tsx
import React, { FC, useState } from 'react';
import ThemeProvider from '@placardi/theme';
import Modal from '@placardi/modal';

const App: FC = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <ThemeProvider>
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        disableBodyScroll
      >
        Take me places!
      </Modal>
    </ThemeProvider>
  );
};

export default App;
```
npm package: @placardi/theme
Description: Placardi UI theme
Author: Alexander Zakharov
Latest version: 0.4.4

# @placardi/theme

Common theme module that provides global styles and design tokens.

## Installation

```bash
npm i @placardi/theme
```

## Dependencies

- react
- styled-components

## Usage

### Basic usage

In order to add global styles and expose design tokens to the application, wrap the application in a theme provider component exposed by the library.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';

const App: FC = () => (
  <ThemeProvider>
    <div>App</div>
  </ThemeProvider>
)

export default App;
```

### Custom target for global styles

By default, theme provider will add global styles to document head. However, this behaviour can be overridden by providing another HTML element as `target` prop to theme provider.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';

const App: FC = () => (
  <ThemeProvider target={document.head}>
    <div>App</div>
  </ThemeProvider>
)

export default App;
```

### Design token selectors

Design tokens can be accessed through various selectors exposed by the library.

```ts
import styled from 'styled-components';
import { theme, Colour } from '@placardi/theme';

const Box = styled.div`
  font-family: ${theme.fontFamily()};
  font-size: ${theme.fontSize('FS16')};
  font-weight: ${theme.fontWeight('FW500')};
  color: ${theme.colour(Colour.NEUTRAL, 'N60')};
`;

export default { Box }
```

### Extending default theme

In a rare case when default theme needs to be extended, it is possible to provide a `theme` prop to theme provider. Provided theme will be merged with the default theme, therefore, make sure not to overwrite any existing values.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';

const theme = {
  additionalColour: 'red'
};

const App: FC = () => (
  <ThemeProvider theme={theme}>
    <div>App</div>
  </ThemeProvider>
)

export default App;
```
npm package: @placatus/monaco-typescript
Description: TypeScript and JavaScript language support for Monaco Editor
Author: Microsoft Corporation
Latest version: 4.10.0

# Monaco TypeScript for ThingWorx Monaco Editor

This repo is a fork of https://github.com/microsoft/monaco-typescript/ for usage in https://github.com/ptc-iot-sharing/MonacoEditorTWX.

The following are the features different from the upstream branch:
* Worker features:
  * getting a list of referenced thingworx entities in a script
  * capability to hide models from each other
  * generating a code outline

## Issues

Please file issues concerning `monaco-typescript` in the [`monaco-editor` repository](https://github.com/ptc-iot-sharing/MonacoEditorTWX).

## Installing

This npm module is bundled and distributed in the [monaco-editor](https://www.npmjs.com/package/monaco-editor) npm module.

## Development

- `git clone https://github.com/placatus/monaco-typescript`
- `cd monaco-typescript`
- `npm install .`
- `npm run compile`
- `npm run watch`
- open `$/monaco-typescript/test/index.html` in your favorite browser.

## Updating TypeScript

- change typescript's version in `package.json`.
- execute `npm install .`
- execute `npm run import-typescript`
- adopt new APIs
npm package: @place-framework/place-block-image
Description: A utility package for generating CSS custom properties from image dimensions to prevent layout shift
Author: Brian Kelley
Latest version: 1.0.1

# @place-framework/place-block-image

A webpack plugin that generates CSS custom properties from image dimensions to prevent layout shift and automatically creates components for React and Vue.

## Overview

This package provides a webpack plugin that:

- Scans your project for images
- Extracts image dimensions automatically
- Generates CSS custom properties (CSS variables) for width, height, and aspect ratio
- Creates optimized components for React and Vue frameworks
- Prevents cumulative layout shift (CLS) by providing image dimensions upfront

## Features

- **Automatic Image Processing**: Automatically detects and processes images in your project
- **CSS Custom Properties**: Generates CSS variables for image dimensions
- **Framework Components**: Creates ready-to-use components for React (JSX/TSX) and Vue
- **Layout Shift Prevention**: Helps maintain stable layouts by providing image dimensions
- **TypeScript Support**: Full TypeScript support with type definitions
- **Webpack Integration**: Seamless integration with your webpack build process

## Installation

```bash
npm install @place-framework/place-block-image
```

## Usage

### Webpack Configuration

Add the plugin to your webpack configuration:

```javascript
const PlaceBlockImagePlugin = require('@place-framework/place-block-image');

module.exports = {
  // ... your webpack config
  plugins: [
    new PlaceBlockImagePlugin({
      // Plugin options
    })
  ]
};
```

### Generated CSS Variables

The plugin generates CSS custom properties like:

```css
:root {
  --image-example-width: 800px;
  --image-example-height: 600px;
  --image-example-aspect-ratio: 1.333;
}
```

### Generated Components

#### React (JSX/TSX)
```jsx
import { ImageExample } from './generated/images';

function MyComponent() {
  return <ImageExample alt="Example image" />;
}
```

#### Vue
```vue
<template>
  <ImageExample alt="Example image" />
</template>

<script>
import { ImageExample } from './generated/images';

export default {
  components: {
    ImageExample
  }
};
</script>
```

## Benefits

- **Performance**: Prevents layout shift by providing image dimensions upfront
- **Developer Experience**: Automatically generates components, reducing boilerplate
- **Maintainability**: Centralized image dimension management
- **SEO**: Better Core Web Vitals scores through CLS prevention

## Configuration Options

The plugin accepts various configuration options to customize its behavior:

- Image source directories
- Output paths for generated files
- Component template customization
- CSS variable naming conventions

## Requirements

- **Webpack**: >= 5.0.0
- **React**: >= 16.8.0 (optional, for React components)
- **Vue**: >= 3.0.0 (optional, for Vue components)

## License

MIT

## Author

Brian Kelley