open-index/open-npm huggingface dataset:
npm package: @firstandthird/ab-test
Description: Simple A/B testing using Domodule and Micro Metrics
Author: First+Third
Latest version: 2.0.0

# AB Test ![npm](https://img.shields.io/npm/v/@firstandthird/ab-test.svg)

Simple A/B Testing library using [Domodule](https://github.com/firstandthird/domodule) and [Micro Metrics](https://github.com/firstandthird/micro-metrics-browser)

## Installation

```sh
npm install @firstandthird/ab-test
```

## Usage

### JavaScript

```js
import '@firstandthird/ab-test'
```

### HTML

```html
<body>
  <!-- Additional given data will be passed along too -->
  <div data-module="ABTest" data-module-name="backgroundColor" data-module-value="red">
    <a href="" data-action="success" data-action-text="Test">Test</a>
    <a href="" data-action="success" data-action-text="Foo">Foo</a>
  </div>

  <!-- If action is not defined, assume click on element -->
  <a href="" data-module="ABTest" data-module-name="ctaText" data-module-value="Sign up Now">Sign up now</a>
</body>
```

It needs to receive some options or they should be defined on the window object:

* `url`: `data-module-url` as an option or have `metricsEndpoint` defined on the `window` object.
* `session`: `data-module-session-id` as an option or have `metricsSession` defined on the `window` object.
npm package: @firstandthird/arc-nunjucks
Description: arc nunjucks
Author: First+Third
Latest version: 2.4.0-alpha0.4

# Nunjucks + Pagedata for Arcitect

This library assists in loading nunjucks views, helpers and static assets.

## Installation

Run `npm install @firstandthird/arc-nunjucks` in your http route directory.

### Render

Example http route:

```javascript
process.env.VIEWS_PATH = '/main/views';
process.env.SHARED_PATH = '/main/shared';

const arcJucks = require('@firstandthird/arc-nunjucks');

exports.handler = async function http(req) {
  if (req.path !== '/') {
    return {
      statusCode: '404',
      headers: { 'content-type': 'text/html; charset=utf8' },
      // will try to render /main/views/not-found.njk with the indicated context:
      body: await arcJucks.render('not-found', { attemptedPath: req.path })
    }
  }

  return {
    headers: { 'content-type': 'text/html; charset=utf8' },
    // will try to render /main/views/homepage.njk with the indicated context:
    body: await arcJucks.render('homepage', { userName: 'karen' })
  };
}
```

### Helpers

Example use of custom filters:

#### /main/views/helpers/shorten.js:

```javascript
// a standard nunjucks filter:
module.exports = function(str, count) {
  return str.slice(0, count || 5);
};```

#### /main/views/shorten.njk:
```nunjucks
hi there <b> {{name|shorten}} </b>
```
#### /src/shared/route.js
```javascript
process.env.VIEWS_PATH = '/main/views';
process.env.SHARED_PATH = '/main/shared';

const arcJucks = require('@firstandthird/arc-nunjucks');

exports.handler = async function http(req) {
  return {
    headers: { 'content-type': 'text/html; charset=utf8' },
    // will try to render /main/views/homepage.njk with the indicated context:
    body: await arcJucks.render('shorten', { userName: 'karenwestington' })
  };
}
```

will render as:
```
  hi there <b> karen </b>
```

## Static Assets:

arc.codes will upload static assets (listed in the ```public/``` directory) and host them on s3 in the respective production/staging server. arc-nunjucks provides a ```static``` filter that will handle mapping the asset name to either the file location (in local mode) or to the appropriate URL on s3 (when in staging or production mode):

```json
{
  "/homepageStyle": "/s3/bucket1/folder1/style.css"
}
```

The asset can now be referred to from within your nunjucks views:

```njk
load this css: {{ asset("/homepageStyle")}}
```

This will always load the correct location for the CSS whether in local, staging or production mode.
npm package: @firstandthird/arc-rapptor
Description: arc-rapptor for serving pages on AWS Lambda
Author: First & Third
Latest version: 8.0.0

# arc-rapptor
A helper for serving webpages on Lambda using [arc.codes](https://www.npmjs.com/package/@architect/architect)

## installation

```bash
npm install arc-rapptor
```

## usage

```javascript
const { config, log, aug, logRequest, reply } = require('arc-rapptor');
```

These work as follows:

### config

config will be an object containing configuration information. It will include the contents of
```@architect/shared/conf/default.json``` as well as ```conf/default.json```.  You can also specify
conditional config info in ```conf/dev.json```, ```conf/staging.json ```, ```conf/prod.json``` and arc-rapptor will include the appropriate configuration depending on what
NODE_ENV you are using. This helps development by making it easy to switch between production and development credentials. In addition you can use in-line json variables like so:
```
{
  "character": {
    "name": "garfield",
    "type": "cat",
  },
  "fullName": "{{character.name}} the {{character.title}}"
}
```

### log

```javascript
  log(['warning'], 'something is not right!')
```
  ```log``` is a logging function provided by [logr-all](https://github.com/firstandthird/logr-all) that comes with a number of plugins that can send logged info to a variety of outputs. It can be configured using ```config.log``` in your configuration. If you do not specify anything, by default logr-all will have the following settings in config:
  ```
  log: {
    initLog: false,
    unhandledRejection: true,
    uncaughtException: true
  }
  ```

## aug
[aug](https://github.com/firstandthird/aug) is an object merging and cloning function. It works similar to ```Object.assign``` except that it merges sub-objects:
```
const obj1 = {
  subobj: {
    var1: 'this comes from obj1',
    var2: 'this comes from obj1'
  },
  name: 'comes from obj1'
};
const obj2 = {
  subobj: {
    var1: 'this was overwritten by obj2 during merge'
  },
  match: 'comes from obj2'
};
const mergedObject = aug({}, obj1, obj2);
  /*
  mergedObjecdt will be:
  {
    subobj: {
      var1: 'this was overwritten by obj2 during merge',
      var2: 'this comes from obj1'
    },
    name: 'comes from obj1',
    match: 'comes from obj2'    
  }
  */
```
## logRequest
```logrequest``` is just a simple helper for logging info from the incoming HTTP request objects:
```javascript
  logRequest(request);
  /*
  will call:
    log(['request'], { message: `${request.method} ${request.path}`, path: request.path, query: request.query });
  */
```
## reply
is a useful tool for returning valid HTTP responses with the appropriate headers and body:
```javascript
return reply.html('<body> hi </body>', 201);
.
.
.
return reply.json({ error: 'This is an HTTP 500 error', reason: 'because' }, 500);
.
.
.
return reply.redirect('https://firstandthird.com', 'permanent');
```
npm package: @firstandthird/bounce
Description: Show elements on mouse out to increase conversion rates
Author: First+Third
Latest version: 2.4.0

# Bounce ![npm](https://img.shields.io/npm/v/@firstandthird/bounce.svg)

Simple module to show elements if it appears that user is leaving the page.

## Installation

```sh
npm install @firstandthird/bounce
```

## Usage

### JavaScript

```js
import '@firstandthird/bounce'
```

### HTML

```html
  ...

  <body>
    <div id="modal" data-bounce>
      <div class="overlay" data-bounce-close></div>
      <div class="modal">
        <div class="modal-title">
          <h3>Modal's Title</h3>
        </div>

        <div class="modal-body">
          Modal's body
        </div>
      </div>
    </div>
  </body>
</html>
```

See the [complete example](./example/index.html).
npm package: @firstandthird/can-autoplay
Description: Detects autoplay capabilities being Safe for SSR
Author: First+Third
Latest version: 1.2.0

# can-autoplay.js

The auto-play feature detection in HTMLMediaElement (`<audio>` or `<video>`).

Table of contents:

- [Installation](#installation)
- [Files](#files)
- [API](#api)
- [Example](#example)
- [Media](#media)
- [Implementation Details](#implementation-details)

## Installation

```
npm install can-autoplay
```

## Files

Build files are available in the `dist/` directory. Bundlers will choose get the correct file chosen for them but if you just want to include it on the page, grab the `dist/can-autoplay.js` file.

## API

### `audio(options)`

Parameters:

- options.inline `<Boolean>`, check if auto-play is possible for an inline playback, default value is `false`
- options.muted `<Boolean>`, check if auto-play is possible for a muted content
- options.timeout `<Number>`, timeout for a check, default value is `250` ms

Returns:

- `<Promise>`, resoles to a `<Object>`:
  - `result <Boolean>`, `true` - if auto-play is possible
  - `error <Error>`, internal or timeout Error object


```js
canAutoplay().then(({result}) => {
  if (result === true) {
    // Can auto-play
  } else {
    // Can not auto-play
  }
})
```

## Media

- `video.mp4`. Source: https://github.com/mathiasbynens/small
npm package: @firstandthird/carousel
Description: Simple carousel
Author: First+Third
Latest version: 2.1.0

# Carousel ![npm](https://img.shields.io/npm/v/@firstandthird/carousel.svg)

Simple Carousel.

## Installation

```sh
npm install @firstandthird/carousel
```

## Module Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `autoslide` | _{Number}_ | `0` | Disabled by default. Number of milliseconds to autoslide to next one |
| `match` | _{String}_ | - | Media query on which the carousel shouldn't work with touch events. Useful if you want to disable touch events on tablets |
| `transformsEnabled` | _{Boolean}_ | `false` | By default, slides won't have a transform animation. If this is `true` they'll have a transform applied to them whenever the page is changed |
| `transformOn` | _{String}_ | - | This overwrites the above an only enables transform on a given media query |

## Methods

### play()

Starts autosliding the carousel.

### pause()

Stops the carousel.

### goToPage(index)

Navigates the carousel to a given slide. Needs parameter `index` (1 based).

#### Parameters

`index` - _{Number}_ - Slide index

### goPrev()

Allows an element (preferably a button) to go to the previous slide once clicked (if possible).

### goNext()

Allows an element (preferably a button) to go to the next slide once clicked (if possible).

## Events

A custom event `carousel:slide:change` is fired on every slide change.

## Example markup

```html
<section class="carousel" data-module="Carousel" data-module-autoslide="4000">
  <div data-carousel-slides>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
  </div>

  ... content

  <div data-carousel-slides>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
    <div data-carousel-slide></div>
  </div>


  <ul class="carousel-controls">
    <li><button class="carousel-control" data-action="changeSlide" data-action-index="1" aria-selected="true"></button></li>
    <li><button class="carousel-control" data-action="changeSlide" data-action-index="2" aria-selected="false"></button></li>
    <li><button class="carousel-control" data-action="changeSlide" data-action-index="3" aria-selected="false"></button></li>
    <li><button class="carousel-control" data-action="changeSlide" data-action-index="4" aria-selected="false"></button></li>
  </ul>
</section>
```

There are [more examples here](./example/index.html).
npm package: @firstandthird/complete
Description: Super simple autocomplete library for domodule
Author: First+Third
Latest version: 2.3.0

# Complete [![Build Status](https://travis-ci.org/firstandthird/complete.svg?branch=master)](https://travis-ci.org/firstandthird/complete) ![npm](https://img.shields.io/npm/v/@firstandthird/complete.svg)

Super simple autocomplete library for domodule

## Installation

```sh
npm install @firstandthird/complete
```

## Usage

```js
import '@firstandthird/complete';
// or
import Complete from '@firstandthird/complete';
```

## Example HTML

```html
<div data-module="Complete" data-module-endpoint="/api/autocomplete?q=${term}">
  <input type="text" data-name="input" data-action="search" data-action-type="input" placeholder="Search for something">
  <div data-name="resultsContainer"></div>
</div>
```
npm package: @firstandthird/cookie-monster
Description: Cookie manager
Author: First+Third
Latest version: 3.2.0

# Cookie Monster

[![Build Status](https://travis-ci.org/firstandthird/cookie-monster.svg?branch=master)](https://travis-ci.org/firstandthird/cookie-monster)
![npm](https://img.shields.io/npm/v/@firstandthird/cookie-monster.svg)

Cookie manager

## Installation

```sh
npm install @firstandthird/cookie-monster
```

## Usage

```js
import CookieMonster from '@firstandthird/cookie-monster';

const name = 'cookiename'; // required
const value = 'somevalue'; // required - may also be an object
const expires = 10; // optional - Days cookie is valid
const path = '/test'; // optional - defaults to /
const domain = 'blog.example.com'; // optional
const isSecure = false; // optional - sets secure flag
const sameSite = 'Strict'; // optional - defaults to 'Strict' - Valid values: 'None', 'Lax', 'Strict'

// Set cookie
CookieMonster.set(name, value, expires, path, domain, isSecure, sameSite);

// Get cookie
CookieMonster.get(name);

// Remove cookie

CookieMonster.remove(name);

// Increment a counter cookie
CookieMonster.increment(name, expires);

// Decrement a counter cookie

CookieMonster.decrement(name, expires);
```

Methods can also be imported as needed:

```js
import { get, remove } from '@firstandthird/cookie-monster';

get(name);

remove(name);
```
npm package: @firstandthird/countup
Description: Easily animate numbers
Author: First+Third
Latest version: 2.0.0

# CountUp ![npm](https://img.shields.io/npm/v/@firstandthird/countup.svg)

Easily animate numbers.

## Installation

`npm install --save @firstandthird/countup`

## Usage

CountUp has two exports. `default` one is a [Domodule](https://github.com/firstandthird/domodule) library and there's a named export by `animateNumber` which the Domodule library leverages.

### `animateNumber`

This function takes an object with the following keys:

| Option      | Type       | Default       | Description                                                          |
|-------------|------------|---------------|----------------------------------------------------------------------|
| `target`    | `Number`   | N/A           | The number you intend to reach by the end of the animation.          |
| `start`     | `Number`   | `0`           | The number the animation starts from.                                |
| `duration`  | `Number`   | N/A           | The amount of ms the animation should take.                          |
| `callback`  | `Function` | Noop Function | Function to be called once the animation finishes.                   |
| `interval`  | `Function` | N/A           | Function to be called with every interval. Useful to update the DOM. |

#### Example

```js
import { animateNumber } from '@firstandthird/countup';

animateNumber({
  target: 20,
  interval: value => {
    someElement.innerHTML = value;
  }
});
```

### `CountUp` module

CountUp has a module that can be used in the DOM and that also plays nice with [ScrollTriggers](https://github.com/firstandthird/scroll-triggers).

| Option     | Default                   | Description                                                                                                                            |
|------------|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------|
| `target`   | N/A **Has to be defined** | The number you intend to reach by the end of the animation.                                                                            |
| `start`    | `0`                       | The number the animation starts from.                                                                                                  |
| `duration` | N/A                       | The amount of ms the animation should take.                                                                                            |
| `template` | `'$D'`                    | Template to be used to format the number. `$D` will be replaced with the number. You could use `$D%` to animate a percent for example. |

#### Example

```html
<div data-module="Countup"
     data-module-target="20"
     data-module-template="$D%"></div>
```

See [examples](/example/index.html) for more usage examples.
npm package: @firstandthird/faqs
Description: Accessible FAQs module
Author: First+Third
Latest version: 1.0.1

<h1 align="center">FAQs</h1>

<p align="center">
  <a href="https://github.com/firstandthird/domodule/actions">
    <img src="https://img.shields.io/github/workflow/status/firstandthird/faqs/Lint/main?label=Lint&style=for-the-badge" alt="Lint Status"/>
  </a>
  <img src="https://img.shields.io/npm/v/@firstandthird/faqs.svg?label=npm&style=for-the-badge" alt="NPM" />
</p>

Accessible FAQs module.

## Installation

```sh
npm install @firstandthird/faqs
```

## Usage

In your project import the library:

```javascript
import '@firstandthird/faqs'

// or

import Faqs from '@firstandthird/faqs'
```

## Module Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `animateHeight` | _{Boolean}_ | `false` | Enable expand/collapse height animation (requires CSS, [see example](styles.css)) |
| `closeOthers` | _{Boolean}_ | `true` | Only allows one expanded element at a time |
| `hash` | _{Boolean}_ | `true` | Expand elements whose ID matches the current URL hash |

## Example markup

```html
<dl data-module="Faqs"
    data-module-animate-height="false"
    data-module-close-others="true"
    data-module-hash="true">
  <dt>
    <button
      type="button"
      aria-expanded="false"
      aria-controls="question-1"
      data-action="toggle">Question 1?</button>
  </dt>
  <dd id="question-1" aria-hidden="true">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  </dd>
</dl>
```

Full [example here](./example/index.html).

---

<a href="https://firstandthird.com"><img src="https://firstandthird.com/_static/ui/images/safari-pinned-tab-62813db097.svg" height="32" width="32" align="right"></a>

_A [First + Third](https://firstandthird.com) Project_
npm package: @firstandthird/hapi-healthcheck
Description: Server monitoring
Author: First+Third
Latest version: 1.0.0

# hapi-healthcheck
server monitoring


### Options:
  - `token` - Optional token to secure the endpoint.
  - `endpoint` - Route to use. Defaults to `/health`
  - `checks` - array objects for each check.
    - `name` - Name of the check, used as the key in the response json.
    - `method` - server method to call. Will be called as `async method(request, options)`. Function should return json.
    - `options` - optional data to pass to the method.

### Example output:

```json
{
  "host": "sorrynotsorry.local",
  "env": "test",
  "uptime": 0,
  "cpu": { "user": 384085, "system": 48978 },
  "memory": {
    "rss": 47497216,
    "heapTotal": 32874496,
    "heapUsed": 18066608,
    "external": 518509
  },
  "customCheck": { "test": 1 }
}
```
npm package: @firstandthird/hapi-mongodb
Description: A simple Hapi MongoDB connection plugin.
Latest version: 8.0.0

[![npm version](https://badge.fury.io/js/hapi-mongodb.svg)](http://badge.fury.io/js/hapi-mongodb)
[![Build Status](https://secure.travis-ci.org/Marsup/hapi-mongodb.svg)](http://travis-ci.org/Marsup/hapi-mongodb)
[![Dependencies Status](https://david-dm.org/Marsup/hapi-mongodb.svg)](https://david-dm.org/Marsup/hapi-mongodb)
[![DevDependencies Status](https://david-dm.org/Marsup/hapi-mongodb/dev-status.svg)](https://david-dm.org/Marsup/hapi-mongodb#info=devDependencies)

# Hapi-MongoDB

This is a plugin to share a common MongoDB connection pool across the whole Hapi server.

Options can be a single object with the following keys or an array of the same kind if you need multiple connections :

- url: *Optional.* MongoDB connection string (eg. `mongodb://user:pass@localhost:27017`).
    - defaults to `mongodb://localhost:27017`
- settings: *Optional.* Provide extra settings to the connection, see [documentation](http://mongodb.github.io/node-mongodb-native/2.2/api/MongoClient.html#.connect).
- decorate: *Optional.* Rather have exposed objects accessible through server and request decorations. You cannot mix different types of decorations.
    - If `true`, `server.mongo` or `request.mongo`
    - If it's a string, `server.<string>` or `request.<string>`

Several objects are exposed by this plugin :

- `db` : connection object to the database, if an array was provided for the configuration, it will be an array of connections in the same order
- `lib` : mongodb library in case you need to use it
- `ObjectID` : mongodb ObjectID constructor in case you need to use it

Usage example :
```js
const Hapi = require('hapi');
const Boom = require('boom');

const launchServer = async function() {
    
    const dbOpts = {
        url: 'mongodb://localhost:27017/test',
        settings: {
            poolSize: 10
        },
        decorate: true
    };
    
    const server = Hapi.server();
    
    await server.register({
        plugin: require('hapi-mongodb'),
        options: dbOpts
    });

   server.route( {
        method: 'GET',
        path: '/users/{id}',
        async handler(request) {

            const db = request.mongo.db;
            const ObjectID = request.mongo.ObjectID;

            try {
                const result = await db.collection('users').findOne({  _id: new ObjectID(request.params.id) });
                return result;
            }
            catch (err) {
                throw Boom.internal('Internal MongoDB error', err);
            }
        }
    });

    await server.start();
    console.log(`Server started at ${server.info.uri}`);
};

launchServer().catch((err) => {
    console.error(err);
    process.exit(1);
});
```

## Compatibility level

* Hapi >= 17
* Node.js >= 8

Ships with `mongodb` >= 2.
npm package: @firstandthird/hapi-require-https
Description: hapi http -> https redirection
Author: Ben Drucker
Latest version: 2.1.0

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

> hapi plugin that adds http to https redirection

By default, any incoming request with `'http'` in `X-Forwarded-Proto` will be redirected (301) to the same host and path with `'https'` as the protocol. You can optionally disable proxy mode and redirect based on the actual request protocol.

## Usage

Just [load the plugin](http://hapijs.com/tutorials/plugins#loading-a-plugin) and go!

```js
server.register({
  register: require('hapi-require-https'),
  options: {}
})
```

## API

#### `plugin.register(server, [options], next)`

Registers the plugin to run `onRequest` in the [request lifecycle](http://hapijs.com/api#request-lifecycle). 

##### options

Type: `object`  
Default: `{}`

###### proxy

Type: `boolean`  
Default: `true`

Indicates whether the server expects requests coming from a reverse proxy (a common Node web server setup) or directly from the Internet. Set this to `false` if you'd like to redirect based on the *actual* protocol instead of the [`X-Forwarded-Proto`](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields#Common_non-standard_response_fields) header.

## License

MIT © [Ben Drucker](http://bendrucker.me)