open-index/open-npm huggingface dataset:
npm package: @financial-times/disk-space
Description: Find the used and total size of the file system in kilobytes
Author: Mejdi Ourir
Latest version: 1.0.0

# @financial-times/disk-space
This module wraps the `df -BK` (or `df -bk` if on OS X) command which shows the amount of disk space available on the file system that a given file is stored on. It returns the used size and total size of the file system in kilobytes.

# Usage example

```
const diskSpace = require('@financial-times/disk-space');
diskSpace('/' , function(error, data) {
  console.log(data);  // returns { usedSize: 20, totalSize: 30 } in Kilobytes
});

```
npm package: @financial-times/dotcom-build-base
Description: The Page Kit CLI
Latest version: 13.9.2

# @financial-times/dotcom-build-base

This package exports a Webpack plugin to configure it with the ability to build client-side assets to Page Kit conventions.

## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```sh
npm install --save-dev @financial-times/dotcom-build-base
```

After installing the module you must add it to the list of plugins in your project's `webpack.config.js` configuration file:

```js
const { PageKitBasePlugin } = require('@financial-times/dotcom-build-base');

module.exports = {
	plugins: [
		new PageKitBasePlugin()
	]
}
```

This package enhances your Webpack config to do:

- Basic Javascript compilation and bundling
- [Brotli and gzip compression](https://webpack.js.org/plugins/compression-webpack-plugin/) of output files
- Generating a [manifest of the output files](https://github.com/danethurber/webpack-manifest-plugin) for other tools such as [`dotcom-server-asset-loader`](../dotcom-server-asset-loader/README.md) to consume
- [Cleaning up out-of-date output files](https://github.com/johnagan/clean-webpack-plugin)

### Development and production modes

In production mode the generated output will be optimised, file names hashed, and full source maps, gzip and brotli compressed assets generated. Production mode is the default.

To enable development mode you can use the `--mode` Webpack flag. This will disable several optimisations in favour of providing faster builds and rebuilds. See the [Webpack mode documentation] for further information about modes.

```sh
webpack --mode=development
```

[Webpack mode documentation]: https://webpack.js.org/concepts/mode/
npm package: @financial-times/dotcom-build-bower-resolve
Description: This package exports a Webpack plugin to configure it with a way to find and load dependencies installed with [Bower].
Latest version: 2.6.2

# @financial-times/dotcom-build-bower-resolve

This package exports a Webpack plugin to configure it with a way to find and load dependencies installed with [Bower].

[Bower]: https://bower.io/

## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```sh
npm install --save-dev @financial-times/dotcom-build-bower-resolve
```

After installing the package you must add it to the list of plugins in your project's `webpack.config.js` configuration file:

```diff
+ const { PageKitBowerResolvePlugin } = require('@financial-times/dotcom-build-bower-resolve')

module.exports {
  "plugins": [
+    new PageKitBowerResolvePlugin()
  ]
}
```

Once setup, this plugin will enable you to use Bower dependencies in your source code.

## Scope

This plugin adds several properties to Webpack's [resolve configuration] instructing it to look for modules within the `bower_components` directory and use the `bower.json` manifest file if present.

This plugin also adds the [bower-resolve-webpack-plugin].

_Please note that Bower dependencies will be favoured over dependencies installed with npm._

[resolve configuration]: https://webpack.js.org/configuration/resolve/
[bower-resolve-webpack-plugin]: https://www.npmjs.com/package/bower-resolve-webpack-plugin

## Options

There are currently no additional options for this plugin.
npm package: @financial-times/dotcom-build-code-splitting
Description: This package exports a Webpack plugin to configure it with code splitting functionality in accordance with the [FT.com code splitting] strategy.
Latest version: 13.9.2

# @financial-times/dotcom-build-code-splitting

This package exports a Webpack plugin to configure it with code splitting functionality in accordance with the [FT.com code splitting] strategy.

[FT.com code splitting]: ../../docs/design-decisions/code-splitting-strategy.md

## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```
npm install --save-dev @financial-times/dotcom-build-code-splitting
```

After installing the package you must add it to the list of plugins in your project's `webpack.config.js` configuration file:

```diff
+ const { PageKitCodeSplittingPlugin } = require('@financial-times/dotcom-build-code-splitting')

module.export = {
  plugins: [
+    new PageKitCodeSplittingPlugin()
  ]
}
```

Once setup, this plugin will automatically split your JavaScript code into several separate bundle files based upon the [FT.com code splitting] strategy.

## Options

There are currently no additional options for this plugin.
npm package: @financial-times/dotcom-build-css
Description: This package exports a Webpack plugin to configure it with a way to load CSS source files.
Latest version: 13.9.2

# @financial-times/dotcom-build-css

This package exports a Webpack plugin to configure it with a way to load CSS source files.

## Getting started

This package is compatible with Node 18+ and is distributed on npm.

```sh
npm install --save-dev @financial-times/dotcom-build-css
```

After installing the package you must add it to the list of plugins in your project's `webpack.config.js` configuration file:

```diff
+ const { PageKitCssPlugin } = require('@financial-times/dotcom-build-css')

module.exports = {
  plugins: [
+    new PageKitCssPlugin()
  ]
}
```

Once setup, this plugin will enable you to use CSS files (`.css`) as entry points into your source code.

```js
const { PageKitCssPlugin } = require('@financial-times/dotcom-build-css')

module.exports = {
   entry: {
      styles: path/to/styles.css
   },
   plugins: [new PageKitCssPlugin()]
}
```

## Scope

This plugin adds a [rule] to the Webpack configuration to handle `.css` files. It calls the [css-loader] package to load and parse the source files. The CSS is optimised using [css-minimizer-webpack-plugin], which runs [cssnano] under the hood. The [mini-css-extract-plugin] is added to generate `.css` files and the [webpack-fix-style-only-entries] to clean up any empty JavaScript bundles.

The CSS loader has `url()` resolution disabled as we don't use, nor recommend, the function currently.

[rule]: https://webpack.js.org/configuration/module/#rule
[css-loader]: https://github.com/webpack-contrib/css-loader
[css-minimizer-webpack-plugin]: https://github.com/webpack-contrib/css-minimizer-webpack-plugin
[mini-css-extract-plugin]: https://github.com/webpack-contrib/mini-css-extract-plugin
[webpack-fix-style-only-entries]: https://github.com/fqborges/webpack-fix-style-only-entries
[cssnano]: https://cssnano.co/
npm package: @financial-times/dotcom-build-esnext
Description: This package extends the [Page Kit CLI build action][cli] (`page-kit build`) with the ability to build JavaScript that makes use of features that fall under the [`esnext`] banner
Latest version: 0.3.5
Deprecated: This package is no longer required and is not supported by the Page Kit team

# @financial-times/dotcom-build-esnext

This package extends the [Page Kit CLI build action][cli] (`page-kit build`) with the ability to build JavaScript that makes use of features that fall under the [`esnext`] banner

[cli]: https://github.com/Financial-Times/dotcom-page-kit/tree/master/packages/dotcom-page-kit-cli#build
[`esnext`]: https://www.freelancinggig.com/blog/2017/07/04/what-is-esnext-is-it-same-as-ecmascript/


## Getting started

This package is compatible with Node 8+ and is distributed on npm.

```sh
npm install --save-dev @financial-times/dotcom-build-esnext
```

After installing the package you must add it to the list of plugins in your project's `page-kit.config.js` configuration file:

```diff
+ const esnext = require('@financial-times/dotcom-build-esnext')

module.exports = {
  plugins: [
+    esnext.plugin()
  ]
}
```

Once setup, this plugin will enable you to use the following `esnext` features within your JavaScript code.

* [Class properties](https://github.com/tc39/proposal-class-public-fields)
* [Dynamic import syntax](https://developers.google.com/web/updates/2017/11/dynamic-import)


## Options

There are currently no additional options for this plugin.


## Hooks

This plugin exposes the following hooks as extension points. They are available as constants on the exported `hooks` object.

```js
import { hooks } from '@financial-times/dotcom-build-esnext'
```

_Please note: The hooks below are listed in the order they will be executed._

### `BABEL_PLUGIN_CLASS_PROPERTIES_OPTIONS`

Configuration options for the [@babel/plugin-proposal-class-properties] plugin.

[@babel/plugin-proposal-class-properties]: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

### `BABEL_PLUGIN_SYNTAX_DYNAMIC_IMPORT_OPTIONS`

Configuration options for the [@babel/plugin-syntax-dynamic-import] plugin.

[@babel/plugin-syntax-dynamic-import]: https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

### `BABEL_PLUGIN_TRANSFORM_RUNTIME_OPTIONS`

Configuration options for the [@babel/plugin-transform-runtime] plugin.

[@babel/plugin-transform-runtime]: https://babeljs.io/docs/en/babel-plugin-transform-runtime
npm package: @financial-times/dotcom-build-images
Description: This package exports a Webpack plugin to provide support for static image assets in our asset pipeline. The plugin will copy all image files contained in the `client/` directory, and any of its subdirectories, into the configured public directory.
Latest version: 13.9.2

# @financial-times/dotcom-build-images

This package exports a Webpack plugin to provide support for static image assets in our asset pipeline.
The plugin will copy all image files contained in the `client/` directory, and any of its subdirectories, into the configured public directory. 

## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```sh
npm install --save-dev @financial-times/dotcom-build-images
```

After installing the module you must add it to the list of plugins in your project's `webpack.config.js` configuration file:

```js
const { PageKitImagesPlugin } = require('@financial-times/dotcom-build-base');

module.exports = {
	plugins: [
		new PageKitImagesPlugin()
	]
}
```
## Scope

The directory path for each image will be retained e.g.

`image.jpg` -> `image.jpg`
`images/image.jpg` -> `images/image.jpg`
`images/subdir/image.jpg` -> `images/subdir/image.jpg`

The public image paths are automatically added to the generated `manifest.json`, meaning that they're available via the `dotcom-server-asset-loader` e.g.

```
assetLoader.getPublicURL('images/subdir/image.jpg')
```

The image file names are hashed in production, e.g. `image.76f59deb1275.jpg`, to allow us to set longer cache times.

The plugin can be configured to look in a custom location for the images by passing in the relevant base path:

```js
new PageKitImagesPlugin({ basePath: path.join(__dirname, '/path', '/to', '/images') })
```

## Options

| Option     | Type    | Default       | Description                     |
|------------|---------|---------------|---------------------------------|
| `basePath` | String  | `"./client/"` | Directory to look in for images |

## Caveats

- This works by creating a new "fake" entry point and will output a useless
  JS file - this was necessary because the manifest plugin used by Page Kit
  doesn't recognise the type of dependencies added by Webpack's copy plugin
  (so you wouldn't be able to access images via the asset loader, boo!)

- It is possible to use the copy plugin, but that would mean swapping the
  manifest plugin: https://gist.github.com/i-like-robots/9a460b55bcc34a38866b9cc163787639
npm package: @financial-times/dotcom-build-js
Description: This package exports a Webpack plugin to configure it with the ability to build JavaScript that makes use of features that are specific to [ft.com].
Latest version: 13.9.2

# @financial-times/dotcom-build-js

This package exports a Webpack plugin to configure it with the ability to build JavaScript that makes use of features that are specific to [ft.com].

[ft.com]: https://www.ft.com/

## Getting started

This module is compatible with Node 12+ and is distributed on npm.

```
npm install --save-dev @financial-times/dotcom-build-js
```

After installing the module you must add it to the list of plugins in your project's `webpack.config.js` configuration file:

```diff
+ const { PageKitJsPlugin } = require('@financial-times/dotcom-build-js')

module.exports = {
  plugins: [
+    new PageKitJsPlugin(options)
  ]
}
```

## Babel

This plugin configures [Babel](https://babeljs.io/) to compile JavaScript syntax and features that aren't supported by every browser into JavaScript that is. The browsers we target are:

* the latest version of Chrome
* the lastest version of Edge
* Safari 9.1
* Firefox Extended Support Release

As well as features in current JavaScript standards, we also compile these non-standard features:

* [JSX](https://reactjs.org/docs/introducing-jsx.html)
* [Typescript](https://www.typescriptlang.org/)
* [Class properties](https://github.com/tc39/proposal-class-public-fields)
* [Dynamic import syntax](https://developers.google.com/web/updates/2017/11/dynamic-import)

`dotcom-build-js` can be configured with [options](#options). Other methods of configuring Babel are not supported by Page Kit, because it's possible to produce output that doesn't work in the browsers we support, or to hurt performance by producing inconsistent output between apps, reducing caching effectiveness.

## Options

| Option                 | Type    | Default      | Description                                                          |
|------------------------|---------|--------------|----------------------------------------------------------------------|
| `jsxPragma`            | String  | `"h"`        | See https://babeljs.io/docs/en/babel-preset-react#pragma             |
| `jsxPragmaFrag`        | String  | `"Fragment"` | See https://babeljs.io/docs/en/babel-preset-react#pragmafrag         |

[1]: https://www.npmjs.com/package/babel-plugin-transform-require-default
npm package: @financial-times/dotcom-middleware-app-context
Description: This package provides an [Express] compatible middleware which appends an instance of [app context] to each request and configures it with details automatically inferred from the running application.
Latest version: 13.9.2

# @financial-times/dotcom-middleware-app-context

This package provides an [Express] compatible middleware which appends an instance of [app context] to each request and configures it with details automatically inferred from the running application.

[Express]: https://expressjs.com/
[app context]: ../dotcom-server-app-context/README.md


## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```sh
npm install --save @financial-times/dotcom-middleware-app-context
```

After installing the package create a new instance of the middleware and register it with your application. The middleware can be configured with several [options](#options):

```diff
const express = require('express')
const app = express()

+const appContext = require('@financial-times/dotcom-middleware-app-context')
+app.use(appContext.init())
```

Once registered an `appContext` property will be added to the [response locals]:

```js
app.get('/', (request, response) => {
  const appContextData = response.locals.appContext.getAll()
})
```

See the [app context] package documentation for more information.

[response locals]: https://expressjs.com/en/api.html#res.locals


## Options

The middleware accepts the following parameters:

### `appContext`

An app context data object, see the [app context schema] for more information. This can be used to append extra properties or override any of the properties automatically inferred from the running application.

[app context schema]: ../dotcom-server-app-context/schema.md
npm package: @financial-times/dotcom-middleware-asset-loader
Description: This package provides an [Express] compatible middleware which integrates the [asset loader] package into your application and adds it to each response making it available to your application's route handlers. The asset loader helps applications to locate
Latest version: 13.9.2

# @financial-times/dotcom-middleware-asset-loader

This package provides an [Express] compatible middleware which integrates the [asset loader] package into your application and adds it to each response making it available to your application's route handlers. The asset loader helps applications to locate their static assets from wherever they are stored on the file system or web.

In addition this package can also be used to [serve static files].

[Express]: https://expressjs.com/
[asset loader]: https://github.com/Financial-Times/dotcom-page-kit/tree/HEAD/packages/dotcom-server-asset-loader
[serve static files]: https://expressjs.com/en/starter/static-files.html


### Getting started

This package is compatible with Node 12+ and is distributed on npm.

```sh
npm install --save @financial-times/dotcom-middleware-asset-loader
```

After installing the package create a new instance of the middleware and register it with your application. The middleware can be configured with several [options](#options):

```diff
const express = require('express')
const app = express()

+ const assetLoader = require('@financial-times/dotcom-middleware-asset-loader')
+ app.use(assetLoader.init())
```

Once registered an `assetLoader` property will be added to the [response locals] object which provides an instance of the asset loader (used to locate your static assets.)

```js
app.get('/', (request, response) => {
  const { assetLoader } = response.locals

  // Get the absolute file system path to an asset
  const filePath = assetLoader.getFileSystemPath('main.css')

  // Get the public URL to an asset
  const publicURL = assetLoader.getPublicURL('main.css')

  response.send('<p>My awesome page</p>')
})
```

See the [asset loader] package documentation for a complete list of available methods.

[response locals]: https://expressjs.com/en/api.html#res.locals


## Options

The middleware accepts the following parameters. All options will be passed along to the asset loader:

### `hostStaticAssets`

Enable static static assets to be served from a local directory. Uses the [Express static] middleware to load assets from the configured `fileSystemPath` and serve them from the configured `publicPath`. Defaults to `false`.

[Express static]: https://expressjs.com/en/starter/static-files.html

### `manifestFileName`

See the [asset loader documentation] for more details.

### `publicPath`

See the [asset loader documentation] for more details.

### `cacheFileContents`

See the [asset loader documentation] for more details.

### `fileSystemPath`

See the [asset loader documentation] for more details.

[asset loader documentation]: https://github.com/Financial-Times/dotcom-page-kit/tree/HEAD/packages/dotcom-server-asset-loader#options
npm package: @financial-times/dotcom-middleware-navigation
Description: This package provides an [Express] compatible middleware which integrates the [FT Navigation] package into your application and adds the navigation data, including editions data, to each response making it available to your application's route handlers. T
Latest version: 13.9.2

# @financial-times/dotcom-middleware-navigation

This package provides an [Express] compatible middleware which integrates the [FT Navigation] package into your application and adds the navigation data, including editions data, to each response making it available to your application's route handlers. This data is required to render the navigation components [header] and [footer].

[Express]: https://expressjs.com/
[FT Navigation]: ../dotcom-server-navigation/README.md
[header]: ../dotcom-ui-header/README.md
[footer]: ../dotcom-ui-footer/README.md


## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```sh
npm install --save @financial-times/dotcom-middleware-navigation
```

After installing the package create a new instance of the middleware and register it with your application. The middleware can be configured with several [options](#options):

```diff
const express = require('express')
const app = express()

+ const navigation = require('@financial-times/dotcom-middleware-navigation')
+ app.use(navigation.init())
```

Once registered, a `navigation` property will be added to the [response locals] object containing the navigation data.

```js
app.get('/', (request, response) => {
  console.log(response.locals.navigation) // { ... }
})
```

[response locals]: https://expressjs.com/en/api.html#res.locals


## Options

The middleware accepts the following parameters. All options will be passed along to the [FT Navigation] package:

### `enableSubNavigation`

Enables fetching hierarchical navigation data for the current path including any parent and child pages. Defaults to `false`.

### `getCurrentPath`

Enables overriding of the default current path logic. Defaults to:

```js
  (request) => normalizePath(request.get('ft-vanity-url') || request.path)
```

### `interval`

See the [FT navigation documentation] for more details.

### `subNavigationUrl`

See the [FT navigation documentation] for more details.

### `menuUrl`

See the [FT navigation documentation] for more details.

[FT navigation documentation]: https://github.com/Financial-Times/dotcom-page-kit/tree/HEAD/packages/dotcom-server-navigation#options
npm package: @financial-times/dotcom-server-app-context
Description: This package provides tools to define FT app context data and a [JSON schema] definition to validate it with. It is used to define and distribute useful information to other components including ads and tracking.
Latest version: 13.9.2

# @financial-times/dotcom-server-app-context

This package provides tools to define FT app context data and a [JSON schema] definition to validate it with. It is used to define and distribute useful information to other components including ads and tracking.

To learn more about why this feature exists please review the [design document]. To find out which properties can be defined please refer to the [app context schema].

If you want to share application specific data with the client, consider using [@financial-times/dotcom-ui-data-embed](../dotcom-ui-data-embed).

[JSON schema]: https://json-schema.org/
[design document]: ../../docs/design-decisions/app-context.md
[app context schema]: schema.md


## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```bash
npm install -S @financial-times/dotcom-server-app-context
```

This package provides a single class which can be configured using [options](#options):

```js
import { AppContext } from '@financial-times/dotcom-server-app-context'
const appContext = new AppContext()
```

The app context instance provides methods to get and set app context data:

```js
appContext.set('appName', 'my-application')
const property = appContext.get('appName') // "my-application"
const contextData = appContext.getAll() // { appName: "my-application" }
```


## API

### `get(property: string): any`

Returns the value of the requested property.

### `set(property: string, value: any)`

Sets the value of the specified property. The provided value will be validated against the [app context schema]. If the value is invalid this method will throw an error.

### `getAll(): object`

Returns an immutable copy of the app context data.


## Options

The `AppContext` class accepts the following parameters. All parameters are optional:

### `appContext`

An app context data object, see the [app context schema] for more information. Defaults to `{}`.
npm package: @financial-times/dotcom-server-navigation
Description: This package provides tools to fetch and format navigation data for FT.com.
Latest version: 13.9.2

# @financial-times/dotcom-server-navigation

This package provides tools to fetch and format navigation data for FT.com.

It is primarily intended to be consumed via the [`dotcom-middleware-navigation`](https://github.com/Financial-Times/dotcom-page-kit/tree/HEAD/packages/dotcom-middleware-navigation) package which can be used by Express applications.

Data for the menus will be periodically fetched and updated from the [Next Navigation API](https://github.com/Financial-Times/next-navigation-api). This data is managed by editorial staff and is used to render the navigation components across FT.com including the header, drop-down menus, drawer, and footer.


## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```bash
npm install -S @financial-times/dotcom-server-navigation
```

This package provides a single class which can be configured using [options](#options).

```js
import { Navigation } from '@financial-times/dotcom-server-navigation'
const navigation = new Navigation()
```

The navigation instance provides methods to retrieve global navigation data and navigation for a specific page:

```js
const menusData = await navigation.getMenusData()
const menusDataForPage = await navigation.getMenusFor('/companies/health', 'uk')
```


## API

### `getMenusData(): Promise<TNavMenus>`

Resolves all menus data, refreshed by a poller. This data has been deep-frozen to prevent accidental mutation as it gets passed around. If you need to modify any part of the data, you should first clone the parts you need and then work with your cloned object.

### `getMenusFor(currentPath: string, currentEdition?: string): Promise<TNavMenusForEdition>`

Resolves the menus data for the current edition with any links to the current path marked as selected and URL placeholders updated. If no edition is provided it will default to `"uk"`.

### `getSubNavigationFor(currentPath: string): Promise<TNavSubNavigation>`

Resolves any sub-navigation data for the current path which may include ancestors and children (a.k.a. crumbtrail and subsections).

### `getEditionsFor(currentEdition?: string): TNavEditions`

Returns the available FT editions with the current edition selected. If no edition is provided it will default to `"uk"`.


## Options

The `Navigation` class accepts the following parameters. All parameters are optional:

 ### `menuUrl`

The URL to the navigation service endpoint which provides the global navigation data. Defaults to `"http://next-navigation.ft.com/v2/menus"`.

### `subNavigationUrl`

The URL to the navigation service endpoint which provides navigation data for a given path. Defaults to `"http://next-navigation.ft.com/v2/hierarchy"`.

### `interval`

Time in milliseconds to wait between polling navigation data. Defaults to `900000` (15 minutes).
npm package: @financial-times/dotcom-server-resource-hints
Description: This package provides functions to help applications track and send [resource hints] for the assets they use. Resource hints enable developers to optimise the delivery of certain resources.
Latest version: 0.5.8

# @financial-times/dotcom-server-resource-hints

This package provides functions to help applications track and send [resource hints] for the assets they use. Resource hints enable developers to optimise the delivery of certain resources.

[resource hints]: https://www.w3.org/TR/resource-hints/


### Getting started

This package is compatible with Node 8+ and is distributed on npm.

```bash
npm install -S @financial-times/dotcom-server-resource-hints
```

This package provides a single class which can be configured using [options](#options).

```js
import { ResourceHints } from '@financial-times/dotcom-server-resource-hints'
const resourceHints = new ResourceHints()
```

The resource hints instance provides methods to maintain a list of assets used for the lifecycle of a request and then format this list into a string suitable for use as a `Link` header:

```js
resourceHints.add('styles.css')
resourceHints.add('scripts.js')

resourceHints.toString() // <styles.css>; as="style"; rel="preload"; nopush, <scripts.js>; as="script"; rel="preload"; nopush
```

Below is an example demonstrating how this package may be used within an [Express] application to track any assets used during the lifecycle of a request and send a `Link` header along with the response:

```js
import { ResourceHints } from '@financial-times/dotcom-server-resource-hints'

app.use('/', (request, response) => {
  const resourceHints = new ResourceHints()

  resourceHints.add('styles.css')
  resourceHints.add('scripts.js')

  response.set('Link', resourceHints.toString())

  response.send('<p>My awesome page</p>')
})
```

[Express]: https://expressjs.com/


## API

### `add(file: string)`

Add a file (either a complete URL or a path) to the list of resources to create hints for.

### `toString()`

Returns a formatted string of resource hints for use as a `Link` HTTP header.


## Options

The `ResourceHints` class accepts the following parameters. All parameters are optional:

_There are currently no options for this middleware package._
npm package: @financial-times/dotcom-types-generic
Description: Generic type and interface definitions that are common across packages
Latest version: 0.0.2
Deprecated: This package is no longer required and is not supported by the Page Kit team

# @financial-times/dotcom-types-generic

Generic type and interface definitions that are common across packages

## Installation

```
npm install --save-dev @financial-times/dotcom-types-generic
```
npm package: @financial-times/dotcom-types-navigation
Description: Generic type definitions for packages which consume navigation data from the [Origami Navigation Service](https://www.ft.com/__origami/service/navigation/v2).
Latest version: 13.9.2

# @financial-times/dotcom-types-navigation

Generic type definitions for packages which consume navigation data from the [Origami Navigation Service](https://www.ft.com/__origami/service/navigation/v2).

## Installation

```sh
npm install -S @financial-times/dotcom-types-navigation
```
npm package: @financial-times/dotcom-ui-app-context
Description: This package provides methods for embedding [app tracking context data] into your server-side rendered pages and safely retrieving it again in the browser.
Latest version: 13.9.2

# @financial-times/dotcom-ui-app-context

This package provides methods for embedding [app tracking context data] into your server-side rendered pages and safely retrieving it again in the browser.

[app tracking context data]: ../dotcom-server-app-context/schema.md

This package is _only_ for tracking context data. Any data you embed using it will be sent with clientside Spoor tracking events. If you want to share generic application-specific data with the client, consider using [@financial-times/dotcom-ui-data-embed](../dotcom-ui-data-embed).

## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```sh
npm install --save @financial-times/dotcom-ui-app-context
```

After installing the package you can use it to embed app-context data into your pages on the server-side. This data can then be retrieved and used in your client-side code.


### Server-side integration

If you are using React to render your app you can use the `AppContextEmbed` component to integrate the app context data with your pages:

```jsx
import { AppContextEmbed } from '@financial-times/dotcom-ui-app-context'
const appContext = { appName: 'app-name', contextProperty: 'my-property' }

export default (props) => (
  <html>
    <head>
      <meta charSet="utf-8" />
      <title>My Amazing Website</title>
    </head>
    <body>
      ...
      <AppContextEmbed appContext={appContext} />
    </body>
  </html>
)
```

Otherwise you can insert a JSON formatted string into a `<script>` element with an ID of `page-kit-app-context`.

```js
function page() {
  return `<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>My Amazing Website</title>
    </head>
    <body>
      ...
      <script type="application/json" id="page-kit-app-context">
        {"appName":"app-name","contextProperty":"my-property"}
      </script>
    </body>
  </html>`
}
```


### Client-side integration

Once you are delivering the [app context data] with your pages you can use the [app context client](#client-side-api) in your client-side code. The client provides methods for safely retrieving the status of individual context properties.

```js
import * as appContext from '@financial-times/dotcom-ui-app-context'

const appContext = appContext.init()

if (appContext.get('my-context-property')) {
  ...
}
```


## Client-side API

### `init()`

Initialises and returns a new [app context client](#app-context-client-api) which can be used to safely access the status of individual contexts.


## App context client API

### `get(property: string)`

Returns the value of the requested property. If the property is not found this will return `undefined`.

### `getAll()`

Returns all app context data.

_Please note_ that the [app context data] object is frozen so it cannot be modified.
npm package: @financial-times/dotcom-ui-base-styles
Description: This package provides the global document styles for FT.com, including normalisation styles, basic typography, and grid styles, provided by [Origami](https://github.com/financial-times/origami) components.
Latest version: 13.9.2

# @financial-times/dotcom-ui-base-styles

This package provides the global document styles for FT.com, including normalisation styles, basic typography, and grid styles, provided by [Origami](https://github.com/financial-times/origami) components.

## Getting started

```bash
npm install --save @financial-times/dotcom-ui-base-styles
```

After installing the package you can use it to embed the progressive font loading hooks and document styles into your pages on the server-side and initialise the font loading on client-side.

## Usage in apps

### Styles

`dotcom-ui-base-styles` provides styles which should be imported into your application's main stylesheet:

```scss
@import '@financial-times/dotcom-ui-base-styles/styles';
```

### Critical styles and font preloading

`dotcom-ui-base-styles` allows apps to HTTP-preload Origami's fonts, and provides baseline styles to be rendered as a `style` attribute on the `<html>` tag, to reduce [flash of unstyled content (FOUC)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content).

The package exports a `documentStyles` object, which should be rendered as the `style` attribute on the `<html>` tag. For example, if using React:

```jsx
import {
  documentStyles
} from '@financial-times/dotcom-ui-base-styles'

export default (props) => (
  <html style={documentStyles}>
    ...
  </html>
)
```

### Components

> [!WARNING]
> `n-ui-foundations`, the predecessor of `dotcom-ui-base-styles`, provided common Origami dependencies for apps and components. `dotcom-ui-base-styles` only supports apps. For components, you should directly depend on and use the Origami components you require.
npm package: @financial-times/dotcom-ui-data-embed
Description: This package provides methods for putting data into your server-side rendered pages and safely retrieving it again in the browser.
Latest version: 13.9.2

# @financial-times/dotcom-ui-data-embed

This package provides methods for putting data into your server-side rendered pages and safely retrieving it again in the browser.

## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```sh
npm install --save @financial-times/dotcom-ui-data-embed
```

After installing the package you can use it to embed data into your pages on the server-side. This data can then be retrieved and used in your client-side code.

### Server-side integration

If you are using React to render your app you can use the `DataEmbed` component to integrate the data embed data with your pages:

```jsx
import { DataEmbed } from '@financial-times/dotcom-ui-data-embed'
const DATA_EMBED_ID = 'data-embed'
const data = { property: 'value', secondProperty: 'second-value' }

export default (props) => (
  <html>
    <head>
      <meta charSet="utf-8" />
      <title>My Amazing Website</title>
    </head>
    <body>
      ...
      <DataEmbed id={DATA_EMBED_ID} data={data} />
    </body>
  </html>
)
```

Otherwise you can insert a JSON formatted string into a `<script>` element with an ID of `data-embed`.

```html
<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>My Amazing Website</title>
    </head>
    <body>
        ...
        <script type="application/json" id="data-embed">
        {"property":"value","secondProperty":"second-value"}
        </script>
    </body>
</html>
```

### Client-side integration

Once you have data embedded in your page you can use the [data embed client](#client-side-api) in your client-side code. The client provides methods for safely retrieving data.

```js
import * as dataEmbed from '@financial-times/dotcom-ui-data-embed'

const dataEmbedClient = dataEmbed.init({ id: 'data-embed' })

if (dataEmbedClient.get('property')) {
  ...
}
```

## Client-side API

### `init({ id }:{ id: string })`

Initialises and returns a new [data embed client](#data-embed-client-api) which can be used to safely access the data.

This method requires an `id` parameter within an options object.
This `id` should match the `id` attribute on the embed element within the page.

## Data Embed Client API

### `get(property: string)`

Returns the value of the requested property. If the property is not found this will return `undefined`.

### `getAll()`

Returns all data embed data.

_Please note_ that the data returned is frozen so it cannot be modified.
npm package: @financial-times/dotcom-ui-footer
Description: This package provides components which render variations on the footer component for FT.com.
Latest version: 13.9.2

# @financial-times/dotcom-ui-footer

This package provides components which render variations on the footer component for FT.com.


## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```bash
npm install --save @financial-times/dotcom-ui-footer
```

After installing the package you will need to configure your application to fetch data from the [Next Navigation API] required to render these UI components. Page Kit provides two packages for this:

1. [`dotcom-middleware-navigation`] (if you are using Express)
2. [`dotcom-server-navigation`] (if you are not using Express)

[Next Navigation API]: http://github.com/Financial-Times/next-navigation-api
[`dotcom-middleware-navigation`]: ../dotcom-middleware-navigation/README.md
[`dotcom-server-navigation`]: ../dotcom-server-navigation/README.md

### Server-side

This package provides two UI components to render different parts and styles of the FT.com footer:

- `<Footer />` the full footer with all navigation links and branding.
- `<LegalFooter />` a simple footer used to brand pages and link to the necessary legal pages.

Example:

```jsx
import { Footer } from '@financial-times/dotcom-ui-footer'

<Footer data={navigationData} />
```

_Please note_ that the footer components are designed to be used on the server-side and should not be rendered on the client-side. Although it is possible to render them on the client-side there is usually no reason to do so and it's not officially supported.

### Client-side

Once you are rendering the footer components in your page you will need to initialise the client-side code to add styles and interactive behaviour.

To initialise the client-side JavaScript import the package and call the `.init()` method:

```js
import * as footer from '@financial-times/dotcom-ui-footer'

footer.init()
```

This component includes styles written in Sass which can be imported into your application's main Sass stylesheet.

```scss
@import '@financial-times/dotcom-ui-footer/styles';
```

_Please note_ that the exact usage of styles will depend on how you configure your Sass compiler.


## Options

All variants require a props object to be passed to the footer component. The component can be configured by setting properties on this object or by passing the desired property directly into the component: `<Footer {...footerData} theme="light"/>`.

|    PROP    |  TYPE   | DEFAULT |                                      DESCRIPTION                                      |
| ---------- | ------- | ------- | ------------------------------------------------------------------------------------- |
| theme      | string  | 'dark'  | Serve the specified variant of the footer - the `light` theme is a valid alternative. |
| legal-only | boolean | false   | Serve the shorter, 'legal-only' variant of the footer                                 |
| data       | object  |         | Navigation data for rendering the footer links fetched from the navigation API        |
npm package: @financial-times/dotcom-ui-polyfill-service
Description: This package provides URLs for the [Polyfill Service] which sets a consistent baseline for JavaScript code used by the user-facing applications which comprise FT.com. This package is integrated with the [shell component].
Latest version: 9.3.3
Deprecated: dotcom-ui-polyfill-service is deprecated. Use of polyfill.io in FT.com pages is no longer needed and is not recommended.

# @financial-times/dotcom-ui-polyfill-service

This package provides URLs for the [Polyfill Service] which sets a consistent baseline for JavaScript code used by the user-facing applications which comprise FT.com. This package is integrated with the [shell component].

[Polyfill Service]: https://polyfill.io/

## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```sh
npm install --save @financial-times/dotcom-ui-polyfill-service
```

After installing the package you can use it to create `<script>` tags or integrate it with the [JavaScript bootstrap].

[JavaScript bootstrap]: ../dotcom-ui-bootstrap/README.md


## Client-side API

There is no client-side integration required. The bootstrap component can only be used on the server-side.


## Server-side API

### `core()`

A script bundle URL configured to provide a limited set of features intended to be loaded by browsers which fail to [cut the mustard]. and should receive a "core" experience.

### `enhanced()`

A script bundle URL configured to provide a full set of features (up to ES2017) intended to be loaded by browsers which successfully [cut the mustard] and should receive an "enhanced" experience.

[cut the mustard]: ../dotcom-ui-bootstrap/README.md#cutting-the-mustard
[shell component]: ../dotcom-ui-shell/README.md
npm package: @financial-times/eslint-config-community
Description: Shared ESLint configuration for Community projects
Latest version: 1.0.1

# eslint-config-community

ESLint configuration for Community projects

## Usage

Reference the shared configuration in your repository's own `.eslintrc.js` like so:

```js
module.exports = {
	extends: ['@financial-times/eslint-config-community']
}
```

Avoid using `.eslintrc` file format since [it has been depracated.](https://eslint.org/docs/user-guide/configuring#configuration-file-formats-1)

You can find the docs for ESLint shareable configs [here](https://eslint.org/docs/developer-guide/shareable-configs).
npm package: @financial-times/eslint-config-de-tooling
Description: eslint config for de-tooling projects
Author: charlie.briggs@ft.com
Latest version: 3.1.1
Deprecated: This package is no longer supported

# eslint-config-de-tooling

This is an ESLint configuration which aims to ensure all de-tooling applications' source code is consistent in style.

This plugin extends [airbnb](https://www.npmjs.com/package/eslint-config-airbnb-base)'s base config along with extra rules provided by [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn).

## Usage

Install this package together with your application:

```shell
npm install --save-dev @financial-times/eslint-config-de-tooling
```

It's recommended to avoid global installs where possible, as eslint in particular can be volatile with dependency locations.

Extend the config using an [eslint config file](https://eslint.org/docs/user-guide/configuring). For example in an `.eslintrc.js` file:

```js
{
    "extends": [
        "@financial-times/de-tooling"
    ],
    "rules": {
        // Override any settings from the "parent" extended configuration
    }
}
```

### Mocha config

A mocha config is provided which can be used to extend the base config:

```js
{
    "extends": [
        "@financial-times/de-tooling",
        "@financial-times/de-tooling/test"
    ],
    "rules": {
        // Override any settings from the "parent" extended configuration
    }
}
```

This config adds `mocha` and `sinon` globals and additional rules for `mocha` based tests.

### React/JSX config

A jsx config is provided which replaces the base config, based on the full [airbnb](https://www.npmjs.com/package/eslint-config-airbnb) config:

```js
{
    "extends": [
        "@financial-times/de-tooling/react"
    ],
    "rules": {
        // Override any settings from the "parent" extended configuration
    }
}
```

## Dependencies

This package requires certain dependencies as `peerDependencies`. This is a decision consistent with eslint (see https://github.com/eslint/eslint/issues/2518, https://github.com/eslint/eslint/issues/3458). This means they should be installed wherever this package is consumed, with matching version ranges:

-   [eslint](https://www.npmjs.com/package/eslint)
-   [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import)
-   [eslint-plugin-mocha](https://www.npmjs.com/package/eslint-plugin-mocha) (only required when using test config)
-   [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-mocha) (only required when using react config, can otherwise be ignored)
-   [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-mocha) (only required when using react config, can otherwise be ignored)

It's possible to automatically install these by adapting the steps from [eslint-config-airbnb-base](https://www.npmjs.com/package/eslint-config-airbnb-base), e.g. for Linux/OSX:

```shell
(
  export PKG=@financial-times/eslint-config-de-tooling;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
```
npm package: @financial-times/eslint-config-ip-wxp
Description: the worker experience teams eslint config
Author: Internal Products
Latest version: 1.0.5
Deprecated: This package is no longer supported

# eslint-config-ip-wxp

[![npm version](https://badge.fury.io/js/%40financial-times%2Feslint-config-ip-wxp.svg)](https://badge.fury.io/js/%40financial-times%2Feslint-config-ip-wxp)
[![CircleCI](https://circleci.com/gh/Financial-Times/ip-wxp-eslint-config.svg?style=svg&circle-token=41075f15097315d87ada0094b0e1300a32a62af3)](https://circleci.com/gh/Financial-Times/ip-wxp-eslint-config)

This is the [eslint config](https://eslint.org/docs/developer-guide/shareable-configs) used by the worker experience team. 

It uses [airbnb](https://www.npmjs.com/package/eslint-config-airbnb-base) as it's base with the below extras:

- [parser](https://eslint.org/docs/user-guide/configuring#specifying-parser) - babel-eslint is used for better es6 support
- [environments](https://eslint.org/docs/user-guide/configuring#specifying-environments) - (browser, es6, mocha, node)
- [rules](https://eslint.org/docs/rules/) - `no-unused-expressions` is disabled so [chai](http://www.chaijs.com/) can be used

## Installation

Install via npm `npm i -D @financial-times/eslint-config-ip-wxp`


## Usage

This module can be used via `package.json`:

```json
  "eslintConfig": {
    "extends": [
      "@financial-times/ip-wxp"
    ]
  },
```

or `.eslintrc.js`
```js
{
  extends: [
    '@financial-times/ip-wxp'
  ]
}
```
## Licence
MIT