<commit_before>---
title: Writing and consuming plugins for Phenomic
---

For now, Phenomic supports plugins via the ``phenomicLoader``.

You can easily do almost anything you want with a plugin to affect a file
consumed by the ``phenomicLoader``.

A plugin is just a function that accepts some parameters and that must return
a modified collection item that will be added to the collection.

The idea is to work on this kind of object:

```js
{
  // front-matter data
  head: {
    title: "Phenomic Is Using React, You'll Never Guess What Happened Next!",
    date: "2016-12-31",
    clickbait: true,
  },
  // content of the file below the front-matter
  body: "React means the website is not static, but dynamic! Blah blah [...]",
}
```

Plugin might be used to transform the content depending on its format(
[Markdown](https://en.wikipedia.org/wiki/Markdown),
[AsciiDoc](https://en.wikipedia.org/wiki/AsciiDoc),
[Textile](https://en.wikipedia.org/wiki/Textile_(markup_language)).
[Txt2tags](https://en.wikipedia.org/wiki/Txt2tags)
[LaTeX](https://en.wikipedia.org/wiki/LaTeX).)

See the last section to know how to write a plugin (spoiler: it's easy).

## Existing Plugins

For now, plugins are accessible in ``phenomic/lib/loader-plugin-*``.

```js
import initHeadPropertyFromConfig from "phenomic/lib/loader-plugin-init-head-property-from-config"
```

*This might change if phenomic is split into multiple packages.*
See [#598](https://github.com/MoOx/phenomic/issues/598) for more informations.

### ``phenomic/lib/loader-plugin-init-body-property-from-content``

This plugin initializes the ``body`` property from data retrieved in the file.
It takes the content of the input that is below the front-matter.

### ``phenomic/lib/loader-plugin-init-head-property-from-config``

This plugin initializes in the ``head`` property from ``defaultConfig`` in the
webpack ``phenomic`` configuration section.
It won't override existing key/values in the ``head`` if there is any.

### ``phenomic/lib/loader-plugin-init-head-property-from-content``

This plugin initializes in the ``head`` property from data retrieved in the file.
It takes the front-matter of the input and map it as key => value.

### ``phenomic/lib/loader-plugin-init-raw-property-from-content``

This plugin initializes in a ``raw`` property.
This property contains the entire file as raw data.
Useful if you front-end need to handle the content of the file.

### ``phenomic/lib/loader-plugin-init-rawBody-property-from-content``

This plugin initializes in a ``rawBody`` property.
This property contains the content of the file that is below the front-matter,
as raw data.
Useful if you front-end need to handle the content of the file.

### ``phenomic/lib/loader-plugin-markdown-init-head.description-property-from-content``

This plugin initializes a ``description`` property in the ``head``, based on the
content accessible below the front-matter.
This plugin assumes your content is markdown and will try to strip the markdown
in order to offer raw text, handy for meta description, content preview etc.
By default will strip to 140 characters (but it won't cut into the middle of a word).
You can pass options to ``phenomic`` section in webpack configuration.

```
{
  pruneLength: 140, // max length of the description
  pruneString: "…", // string to append after the description
}
```

### ``phenomic/lib/loader-plugin-markdown-transform-body-property-to-html``

This plugin will transform the ``body`` property into html.
This plugin will assumes your content is markdown and will use
[``remark``](http://remark.js.org/) with
[some plugins](https://github.com/MoOx/phenomic/blob/master/src/phenomic/lib/loader-plugin-markdown-transform-body-property-to-html/index.js) for the transformation.


## Presets

A preset is just an array of plugins. It's handy to share a collection of
plugins.
To use a preset, just spread it into the ``plugins`` options:

```js
// ..
    plugins: [
      ...myPreset,
      anotherPlugin,
    ]
```

⚠️ If you don't know what spread operator is (``...``), you can see it as a way
to concat to arrays.
You can write this as ``plugins: myPreset.concat(anotherPlugin)`` but this
notation is more verbose, especially if you have multiple plugins.
<commit_msg>Docs: fix a link to default markdown transformation<commit_after>---
title: Writing and consuming plugins for Phenomic
---

For now, Phenomic supports plugins via the ``phenomicLoader``.

You can easily do almost anything you want with a plugin to affect a file
consumed by the ``phenomicLoader``.

A plugin is just a function that accepts some parameters and that must return
a modified collection item that will be added to the collection.

The idea is to work on this kind of object:

```js
{
  // front-matter data
  head: {
    title: "Phenomic Is Using React, You'll Never Guess What Happened Next!",
    date: "2016-12-31",
    clickbait: true,
  },
  // content of the file below the front-matter
  body: "React means the website is not static, but dynamic! Blah blah [...]",
}
```

Plugin might be used to transform the content depending on its format(
[Markdown](https://en.wikipedia.org/wiki/Markdown),
[AsciiDoc](https://en.wikipedia.org/wiki/AsciiDoc),
[Textile](https://en.wikipedia.org/wiki/Textile_(markup_language)).
[Txt2tags](https://en.wikipedia.org/wiki/Txt2tags)
[LaTeX](https://en.wikipedia.org/wiki/LaTeX).)

See the last section to know how to write a plugin (spoiler: it's easy).

## Existing Plugins

For now, plugins are accessible in ``phenomic/lib/loader-plugin-*``.

```js
import initHeadPropertyFromConfig from "phenomic/lib/loader-plugin-init-head-property-from-config"
```

*This might change if phenomic is split into multiple packages.*
See [#598](https://github.com/MoOx/phenomic/issues/598) for more informations.

### ``phenomic/lib/loader-plugin-init-body-property-from-content``

This plugin initializes the ``body`` property from data retrieved in the file.
It takes the content of the input that is below the front-matter.

### ``phenomic/lib/loader-plugin-init-head-property-from-config``

This plugin initializes in the ``head`` property from ``defaultConfig`` in the
webpack ``phenomic`` configuration section.
It won't override existing key/values in the ``head`` if there is any.

### ``phenomic/lib/loader-plugin-init-head-property-from-content``

This plugin initializes in the ``head`` property from data retrieved in the file.
It takes the front-matter of the input and map it as key => value.

### ``phenomic/lib/loader-plugin-init-raw-property-from-content``

This plugin initializes in a ``raw`` property.
This property contains the entire file as raw data.
Useful if you front-end need to handle the content of the file.

### ``phenomic/lib/loader-plugin-init-rawBody-property-from-content``

This plugin initializes in a ``rawBody`` property.
This property contains the content of the file that is below the front-matter,
as raw data.
Useful if you front-end need to handle the content of the file.

### ``phenomic/lib/loader-plugin-markdown-init-head.description-property-from-content``

This plugin initializes a ``description`` property in the ``head``, based on the
content accessible below the front-matter.
This plugin assumes your content is markdown and will try to strip the markdown
in order to offer raw text, handy for meta description, content preview etc.
By default will strip to 140 characters (but it won't cut into the middle of a word).
You can pass options to ``phenomic`` section in webpack configuration.

```
{
  pruneLength: 140, // max length of the description
  pruneString: "…", // string to append after the description
}
```

### ``phenomic/lib/loader-plugin-markdown-transform-body-property-to-html``

This plugin will transform the ``body`` property into html.
This plugin will assumes your content is markdown and will use
[``remark``](http://remark.js.org/) with
[some plugins](https://github.com/MoOx/phenomic/blob/master/src/loader-plugin-markdown-transform-body-property-to-html/index.js) for the transformation.


## Presets

A preset is just an array of plugins. It's handy to share a collection of
plugins.
To use a preset, just spread it into the ``plugins`` options:

```js
// ..
    plugins: [
      ...myPreset,
      anotherPlugin,
    ]
```

⚠️ If you don't know what spread operator is (``...``), you can see it as a way
to concat to arrays.
You can write this as ``plugins: myPreset.concat(anotherPlugin)`` but this
notation is more verbose, especially if you have multiple plugins.

{'fraction_non_alphanumeric': 0.11285229797684482, 'fraction_numerical': 0.005145597006198105, 'mean_word_length': 4.253071253071253, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 14, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7039049', 'n_tokens_mistral': 2557, 'n_tokens_neox': 2421, 'n_words': 1005}