Skip to content
This repository has been archived by the owner on Sep 7, 2020. It is now read-only.

Switch to Webpack 2 #737

Merged
merged 15 commits into from
Sep 13, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,6 @@ coverage
# build
lib

# some tests output some files
src/phenomic-loader/__tests__/output/

# tests results
**/__tests__/_output*

Expand Down
41 changes: 10 additions & 31 deletions docs/content/docs/usage/configuration/build.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ is crucial (in the phenomic-theme-base, it's the first loader) :

- it allows you to control what text engine to use
(default to Markdown using [remark](http://remark.js.org/)
using a solid [default](https://github.com/MoOx/phenomic/blob/master/src/phenomic-loader-plugin-markdown-transform-body-property-to-html/index.js))
using a solid [default](https://github.com/MoOx/phenomic/blob/master/src/loader-plugin-markdown-transform-body-property-to-html/index.js))
and will generate JSON files, that will be consumed for the front-end,
- it handles the generation of the collection data,
- it allows you to generate some RSS feeds.
Expand All @@ -39,7 +39,7 @@ Here is a commented part of a webpack configuration that use all options
//...

import pkg from "./package.json"
import { phenomicLoader, phenomicLoaderPlugins } from "phenomic"
import { phenomicLoader } from "phenomic"

export const makeConfig = (config = {}) => {
return {
Expand Down Expand Up @@ -67,50 +67,29 @@ export const makeConfig = (config = {}) => {
// below are the default values,
// you don't need those by default
plugins: [
phenomicLoaderPlugins.initHeadPropertyFromConfig,
phenomicLoaderPlugins.initHeadPropertyFromContent,
phenomicLoaderPlugins.initBodyPropertyFromContent,
phenomicLoaderPlugins.markdownInitHeadDescriptionPropertyFromContent,
phenomicLoaderPlugins.markdownTransformBodyPropertyToHtml,
require("phenomic/lib/loader-plugin-init-head-property-from-config").default,
require("phenomic/lib/loader-plugin-init-head-property-from-content").default,
require("phenomic/lib/loader-plugin-init-body-property-from-content").default,
require("phenomic/lib/loader-plugin-markdown-init-head.description-property-from-content").default,
require("phenomic/lib/loader-plugin-markdown-transform-body-property-to-html").default,
// here you can add/replace any function you want
// for examples, see
// https://github.com/MoOx/phenomic/blob/master/src/
// eg: if you need the raw file content in your pages,
// you can add the following plugin that will add a `raw` property
// phenomicLoaderPlugins.addRawProperty,
// require("phenomic/lib/loader-plugin-init-raw-property-from-content").default,
// if you want raw body (text content without the front-matter)
// you can add the following plugin that will add a `rawBody` property
// phenomicLoaderPlugins.addRawBodyProperty,
// require("phenomic/lib/loader-plugin-init-rawBody-property-from-content").default,
]

// default values for `head`
// this value can be defined and used by the plugin
// initHeadPropertyFromConfig
// "phenomic/lib/loader-plugin-init-head-property-from-config"
defaultHead: {
layout: "Post",
comments: true,
}

// RSS global options
feedsOptions: {
title: pkg.name,
site_url: pkg.homepage,
},

feeds: {
// RSS
"feed.xml": {
collectionOptions: {
// here, you can filter using
// phenomic/lib/enhance-collection API
// see /docs/usage/collections/
filter: { layout: "Post" },
sort: "date",
reverse: true,
limit: 20,
},
},
},
},
// ...
}
Expand Down
60 changes: 35 additions & 25 deletions docs/content/docs/usage/feeds.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,46 @@ last 20 posts.
Here is a commented part of the webpack configuration that will help:

```js
import pkg from "./package.json"
import { phenomicLoader } from "phenomic"
import PhenomicLoaderFeedWebpackPlugin
from "phenomic/lib/loader-feed-webpack-plugin"

// ...

module: {
loaders: [
{
test: /\.md$/,
loader: phenomicLoader,
query: {
context: path.join(config.cwd, config.source),
loaders: [
{
test: /\.md$/,
loader: phenomicLoader,
query: {
context: path.join(config.cwd, config.source),
},

// here you define generic metadata for your feed
feedsOptions: {
title: pkg.name,
site_url: pkg.homepage,
},
feeds: {
// here we define one feed, but you can generate multiple, based
// on different filters
"feed.xml": {
collectionOptions: {
filter: { layout: "Post" },
sort: "date",
reverse: true,
limit: 20,
},
},
},
},
},
// ...
}
],
},
plugins: [
new PhenomicLoaderFeedWebpackPlugin({
// here you define generic metadata for your feed
feedsOptions: {
title: pkg.name,
site_url: pkg.homepage,
},
feeds: {
// here we define one feed, but you can generate multiple, based
// on different filters
"feed.xml": {
collectionOptions: {
filter: { layout: "Post" },
sort: "date",
reverse: true,
limit: 20,
},
},
},
}),
}
// ...
```
84 changes: 33 additions & 51 deletions docs/content/docs/usage/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,60 +36,45 @@ See the last section to know how to write a plugin (spoiler: it's easy).

## Existing Plugins

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

```js
import { phenomicLoaderPlugins } from "phenomic"

phenomicLoaderPlugins.[camelCasedNameOfThePlugin]
// eg: phenomic-loader-plugin-init-body-property-from-content
// will be accessible under
// phenomicLoaderPlugins.initBodyPropertyFromContent
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-loader-plugin-init-body-property-from-content``
### ``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.

*For now accessible via ``phenomicLoaderPlugins.initBodyPropertyFromContent``.*

### ``phenomic-loader-plugin-init-head-property-from-config``
### ``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.

*For now accessible via ``phenomicLoaderPlugins.initHeadPropertyFromConfig``.*

### ``phenomic-loader-plugin-init-head-property-from-content``
### ``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.

*For now accessible via ``phenomicLoaderPlugins.initHeadPropertyFromContent``.*

### ``phenomic-loader-plugin-init-raw-property-from-content``
### ``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.

*For now accessible via ``phenomicLoaderPlugins.initRawPropertyFromContent``.*

### ``phenomic-loader-plugin-init-rawBody-property-from-content``
### ``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.

*For now accessible via ``phenomicLoaderPlugins.initRawBodyPropertyFromContent``.*

### ``phenomic-loader-plugin-markdown-init-head.description-property-from-content``
### ``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.
Expand All @@ -105,16 +90,12 @@ You can pass options to ``phenomic`` section in webpack configuration.
}
```

*For now accessible via ``phenomicLoaderPlugins.markdownInitHeadDescriptionPropertyFromContent``.*

### ``phenomic-loader-plugin-markdown-transform-body-property-to-html``
### ``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-loader-plugin-markdown-transform-body-property-to-html/index.js) for the transformation.

*For now accessible via ``phenomicLoaderPlugins.markdownTransformBodyPropertyToHtml``.*
[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
Expand All @@ -140,21 +121,21 @@ notation is more verbose, especially if you have multiple plugins.

Phenomic provides the following presets:

### ``phenomic-loader-preset-default``
### ``phenomic/lib/loader-preset-default``

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

🛠 This preset is kind of the phenomic default requirement.
Use it if you want to use classic files with a front-matter and any text format.
**Feel free to take a look to markdown preset to implement your own engine!**

### ``phenomic-loader-preset-markdown``
### ``phenomic/lib/loader-preset-markdown``

- ``phenomic-loader-preset-default``
- ``phenomic-loader-plugin-markdown-init-head.description-property-from-content``
- ``phenomic-loader-plugin-markdown-transform-body-property-to-html``
- ``phenomic/lib/loader-preset-default``
- ``phenomic/lib/loader-plugin-markdown-init-head.description-property-from-content``
- ``phenomic/lib/loader-plugin-markdown-transform-body-property-to-html``

❤️ This preset is the one used by default in Phenomic. It allows you to consume
common markdown files that have a front-matter out of the box.
Expand All @@ -167,9 +148,7 @@ You can use some plugins, but not the one that will transform the markdown as
HTML.

```js
import { phenomicLoader, phenomicLoaderPresets } from "phenomic"
// or if you want to use some each plugins manually
// import { phenomicLoader, phenomicLoaderPlugins } from "phenomic"
import { phenomicLoader } from "phenomic"

// ...

Expand All @@ -183,18 +162,18 @@ import { phenomicLoader, phenomicLoaderPresets } from "phenomic"

plugins: [
// here are the unopininated default plugins
...phenomicLoaderPresets.default,
...require("phenomic/lib/loader-preset-default").default,

// Instead of specifing via the preset, you can cherry pick some,
// phenomicLoaderPlugins.initHeadPropertyFromConfig,
// phenomicLoaderPlugins.initHeadPropertyFromContent,
// phenomicLoaderPlugins.initBodyPropertyFromContent,
// require("phenomic/lib/loader-plugin-init-head-property-from-config").default,
// require("phenomic/lib/loader-plugin-init-head-property-from-content").default,
// require("phenomic/lib/loader-plugin-init-body-property-from-content").default,

// ...phenomicLoaderPresets.markdown
// ...require("phenomic/lib/loader-preset-markdown").default
// The commented preset above is part of the default renderer.
// You can also cherry pick on plugin or the other
// phenomicLoaderPlugins.markdownInitHeadDescriptionPropertyFromContent,
// phenomicLoaderPlugins.transformMdBodyPropertyToHtml,
// require("phenomic/lib/loader-plugin-markdown-init-head.description-property-from-content").default,
// require("phenomic/lib/loader-plugin-transform-md-body-property-to-html").default,

// here is an example of another transformation
({ result }) => {
Expand All @@ -210,10 +189,13 @@ import { phenomicLoader, phenomicLoaderPresets } from "phenomic"
// https://github.com/MoOx/phenomic/blob/master/src/
}
}
]
},
},
...
],
},
},

// ...
]
}
```

## Writing plugins
Expand Down
Loading