open-index/open-npm huggingface dataset:
npm package: @fireflysemantics/fs-gist
Description: A web component for including gists in html content
Author: Ole Ersoy
Latest version: 1.0.17

# fs-gist

Web component for embedding gists in html content

## Installation

`npm i @fireflysemantics/fs-gist`

## Usage

Include `fs-gist` via CDN like this in your html page:

```
<script src="https://unpkg.com/@fireflysemantics/fs-gist"></script>
```

To show this gist url:

`https://gist.github.com/fireflysemantics/054716730103cd205c39167054542f68` 

configure the component `gistURL` like this:

```
<body style="height: 100vh;">
  <fs-gist gistURL="https://gist.github.com/fireflysemantics/054716730103cd205c39167054542f68">
  </fs-gist>
</body>
```

or 
configure the component `gistID` like this:

```
<body style="height: 100vh;">
  <fs-gist gistID="fireflysemantics/054716730103cd205c39167054542f68">
  </fs-gist>
</body>
```

Note that we set the `height` of the body to `100vh` in order to allow
`fs-gist` to expand.

A height property is also supported.  For example:

```
<body style="height: 100vh;">
  <fs-gist height="10rem" gistID="fireflysemantics/054716730103cd205c39167054542f68">
  </fs-gist>
</body>

```

[Stackblitz Demo](https://stackblitz.com/edit/typescript-fs-gist-set-body-height-demo?file=index.html)

## Development

### Baseline

The project baseline is based on the [Lit Element Typescript Starter Project](https://fireflysemantics.medium.com/lit-element-resources-94038d5f2506).

### Package

This project uses the build configuration
from the [rollup starter app](https://github.com/rollup/rollup-starter-app/blob/master/package.json) as well as the `rollup.config.js` example configuration found in the [Lit Element Typescript Starter Project](https://fireflysemantics.medium.com/lit-element-resources-94038d5f2506).
npm package: @fireflysemantics/fs-image
Description: A web component for rendering background images in html content
Author: Ole Ersoy
Latest version: 1.0.1

# fs-image

Web component for embedding background rendered images in html content.

## Installation

`npm i @fireflysemantics/fs-image`

## Usage

Include `fs-image` via CDN like this in your html page:

```
<script src="https://unpkg.com/@fireflysemantics/fs-image"></script>
```
  <fs-image height="10rem;" scale="50%" url="https://fireflysemantics.github.io/i/404/crash-5435071_1920.png">
  </fs-image>
```

[Stackblitz Demo](https://stackblitz.com/edit/typescript-fs-image?file=index.html)

## Development

## Design

The image is rendered with this CSS:

```
  static styles = css`
    :host {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;    
    }
  `;

```

### Baseline

The project baseline is based on the [Lit Element Typescript Starter Project](https://fireflysemantics.medium.com/lit-element-resources-94038d5f2506).

### Package

This project uses the build configuration
from the [rollup starter app](https://github.com/rollup/rollup-starter-app/blob/master/package.json) as well as the `rollup.config.js` example configuration found in the [Lit Element Typescript Starter Project](https://fireflysemantics.medium.com/lit-element-resources-94038d5f2506).
npm package: @fireflysemantics/fs-link-preview
Description: A web component for creating previews of html page content
Author: Ole Ersoy
Latest version: 1.0.15

# fs-link-preview

Web component for rendering link-previews in html content.

## Installation

`npm i @fireflysemantics/fs-link-preview`

## CDN 

Include `fs-link-preview` via CDN like this in the head tag of your html page:

<script src="https://unpkg.com/@fireflysemantics/fs-link-preview"></script>

## Usage

[Creating Link Previews With the Firefly Semantics fs-link-preview Web Component](https://developer.fireflysemantics.com/tasks/tasks--web-component--creating-link-previews-with-the-fs-link-preview-web-component)

```
<fs-link-preview imageURL="https://raw.githubusercontent.com/fireflysemantics/slice/master/logoslicelogo.png"
  title="@fireflysemantics/slice"
  description="Lightweight Web Application State Management"
  domain="www.npmjs.com"
  url="">
</fs-link-preview>
```

[Stackblitz Demo](https://stackblitz.com/edit/typescript-fs-link-preview)

## Development

### Baseline

The project baseline is based on the [Lit Element Typescript Starter Project](https://fireflysemantics.medium.com/lit-element-resources-94038d5f2506).

### Package

This project uses the build configuration
from the [rollup starter app](https://github.com/rollup/rollup-starter-app/blob/master/package.json) as well as the `rollup.config.js` example configuration found in the [Lit Element Typescript Starter Project](https://fireflysemantics.medium.com/lit-element-resources-94038d5f2506).
npm package: @fireflysemantics/join
Description: [![Build Status](https://travis-ci.org/fireflysemantics/join.svg?branch=master)](https://travis-ci.org/fireflysemantics/join)
Author: Ole Ersoy
Latest version: 1.0.14

[![Build Status](https://travis-ci.org/fireflysemantics/join.svg?branch=master)](https://travis-ci.org/fireflysemantics/join)


# Join

## Install

```
npm i -S @fireflysemantics/join
npm i -S tslib
```

## Usage

```
import { join } from '@fireflysemantics/join'
console.log(join('http://www.example.com/', '/pity/the/foo/'))
console.log(join('http://www.example.com/','', '/pity/the/foo/'))

```

[Stackblitz Demo](https://stackblitz.com/edit/fireflysemantics-join?file=index.ts)
## Build

Run `npm run b` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `npm run b`, run `npm run p` to publish.

## Running unit tests

Run `npm t` to execute the unit tests via [Jest](https://jestjs.io/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @fireflysemantics/material-base-module
Description: Kitchen sink module containing all the Angular Material components.
Latest version: 15.2.2

# Kitchen Sink Angular Material Base Module

Kitchen sink module containing all the Angular Material
components.

# Origin

The [Angular Material Stackblitz demoes](https://stackblitz.com/edit/angular-9wehjf?file=src%2Fmaterial.module.ts) come with a `material.module`.

## Install

```
npm i @fireflysemantics/material-base-module
```

## Usage

Import and include the module in the module where you need the Angular Material components.

```
import { MaterialBaseModule } from '@fireflysemantics/material-base-module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
      ...
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

## Versioning

We will use semantic versioning so that the versions of this module match Angular Material.

## Documentation

[Module Creation Process](https://fireflysemantics.medium.com/creating-a-angular-material-kitchen-sink-base-module-6a00245b5ca9)
npm package: @fireflysemantics/math
Description: [![Build Status](https://travis-ci.org/fireflysemantics/collections.svg?branch=master)](https://travis-ci.org/fireflysemantics/collections)
Author: Ole Ersoy
Latest version: 1.0.4

[![Build Status](https://travis-ci.org/fireflysemantics/collections.svg?branch=master)](https://travis-ci.org/fireflysemantics/collections)

# @fireflysemantics/math

Typescript math library.

## Usage

See the [test cases](https://github.com/fireflysemantics/math/blob/master/src/index.spec.ts).

## API Documentation

See [Typedoc API Documentation](https://fireflysemantics.github.io/math/)
npm package: @fireflysemantics/ng-amplify
Description: Angular AWS Amplify Resources
Author: Ole Ersoy
Latest version: 11.0.1

# AWS Amplify Angular Resources 

This package contains the following Angular specific resources updated to work with AWS Amplify:
- tsconfig.app.json
- polyfills.ts
- index.html
- main.ts

# Overview

As [detailed here](https://developer.fireflysemantics.com/tasks/tasks--angular--getting-angular-ready-for-aws-amplify) Angular needs to have some resources updated when using [AWS Amplify](https://aws.amazon.com/amplify/).

So we could followed the [steps detailed here](https://developer.fireflysemantics.com/tasks/tasks--angular--getting-angular-ready-for-aws-amplify) and do these updates manually, but it's much easier to just copy in updated versions from this package.

# Usage

This project also has AWS Amplify as a dependency with a `*` version, so `npm i @fireflysemantics/ng-amplify` will also install the latest version of AWS Amplify.

Within the Angular project run:

```
npm i @fireflysemantics/ng-amplify
cd node_modules/@fireflysemantics/ng-amplify/ && npm i
node cp.js
```
The node script `cp.js` will copy over the relevant resources.

# The Catch

You'll notice that inside `index.html` the `title` is set to `CHANGE THIS TITLE`.  So update the title and any other SEO properties that need updating.
npm package: @fireflysemantics/sass-logger
Description: SASS Logging Utilities
Author: Ole Ersoy
Latest version: 1.0.2

# @fireflysemantics/sass-logger

Utility functions for logging with SASS.

## Installation

`npm i @fireflysemantics/sass-logger`

## Usage

This demo will create a Angular Material Palette `$theme-primary` 
and log the contents by first using the `logger` to structure
the map data containing the result and then outputting that 
result with `@debug`.

```
@use '@angular/material' as mat;
@use '@fireflysemantics/sass-logger' as logger;

// ============================================
// Palettes: https://material.io/design/color/
// ============================================
$theme-primary: mat.define-palette(mat.$indigo-palette);
$result: logger.pretty-map($theme-primary);
@debug ($result);

$theme: mat.define-light-theme($theme-primary, $theme-primary, $theme-primary);
//$result: logger.pretty-map($theme);
```

## Output

The above usage demo will output the following:

```
         50: #e8eaf6,  
         100: #c5cae9,  
         200: #9fa8da,  
         300: #7986cb,  
         400: #5c6bc0,  
         500: #3f51b5,  
         600: #3949ab,  
         700: #303f9f,  
         800: #283593,  
         900: #1a237e,  
         A100: #8c9eff,  
         A200: #536dfe,  
         A400: #3d5afe,  
         A700: #304ffe,  
 contrast: (  
         50: rgba(0, 0, 0, 0.87),  
         100: rgba(0, 0, 0, 0.87),  
         200: rgba(0, 0, 0, 0.87),  
         300: white,  
         400: white,  
         500: white,  
         600: white,  
         700: white,  
         800: white,  
         900: white,  
         A100: rgba(0, 0, 0, 0.87),  
         A200: white,  
         A400: white,  
         A700: white,  
 ),  
         default: #3f51b5,  
         lighter: #c5cae9,  
         darker: #303f9f,  
         text: #3f51b5,  
         default-contrast: white,  
         lighter-contrast: rgba(0, 0, 0, 0.87),  
         darker-contrast: white,  
         50-contrast: rgba(0, 0, 0, 0.87),  
         100-contrast: rgba(0, 0, 0, 0.87),  
         200-contrast: rgba(0, 0, 0, 0.87),  
         300-contrast: white,  
         400-contrast: white,  
         500-contrast: white,  
         600-contrast: white,  
         700-contrast: white,  
         800-contrast: white,  
         900-contrast: white,  
         A100-contrast: rgba(0, 0, 0, 0.87),  
         A200-contrast: white,  
         A400-contrast: white,  
         A700-contrast: white,  
         contrast-contrast: , 
```

## Stackblitz

[Stackblitz Demo](https://stackblitz.com/edit/angular-r9tzuk-ov8kx4?file=src%2Fstyles.scss)