amphora-html 6.0.1-dev.0 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -0
- package/index.js +2 -0
- package/lib/clone-deep.js +181 -0
- package/lib/files.js +66 -0
- package/lib/media.js +83 -79
- package/lib/render.js +44 -19
- package/lib/setup.js +55 -28
- package/lib/styleguide.js +40 -15
- package/lib/utils.js +127 -0
- package/package.json +21 -44
- package/.circleci/config.yml +0 -44
- package/.eslintrc +0 -75
- package/.github/workflows/push.yml +0 -26
- package/.istanbul.yml +0 -51
- package/__mocks__/fileMock.js +0 -3
- package/docs/README.md +0 -31
- package/docs/integration.md +0 -93
- package/docs/intro.md +0 -21
- package/docs/style.md +0 -47
- package/lib/log.test.js +0 -42
- package/lib/media.test.js +0 -908
- package/lib/render.test.js +0 -295
- package/lib/setup.test.js +0 -153
- package/lib/styleguide.test.js +0 -268
- package/test/setupFile.js +0 -3
- package/website/README.md +0 -114
- package/website/core/Footer.js +0 -55
- package/website/package.json +0 -16
- package/website/pages/en/index.js +0 -103
- package/website/pages/en/versions.js +0 -92
- package/website/sidebars.json +0 -13
- package/website/siteConfig.js +0 -66
- package/website/static/css/custom.css +0 -16
- package/website/static/img/logo.svg +0 -13
- package/website/versioned_docs/version-4.0.0/integration.md +0 -94
- package/website/versioned_docs/version-4.0.0/intro.md +0 -22
- package/website/versioned_docs/version-4.0.0/style.md +0 -48
- package/website/versioned_sidebars/version-4.0.0-sidebars.json +0 -13
- package/website/versions.json +0 -3
package/docs/README.md
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
# Clay Documentation
|
|
2
|
-
|
|
3
|
-
On this directory, we have the pre-release documentation written using markdown. This file has the `.md` extension and as we mentioned before, these are pre-release if you haven't added a documentation version yet.
|
|
4
|
-
|
|
5
|
-
## Markdown options
|
|
6
|
-
|
|
7
|
-
These files have the following structure at the beginning of the file:
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
---
|
|
11
|
-
id: idOftheFile
|
|
12
|
-
title: Title of your file
|
|
13
|
-
sidebar_label: Title of the sidebar
|
|
14
|
-
---
|
|
15
|
-
|
|
16
|
-
My new content here..
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
The previous example has a couple of the most important part to identify the content that you wish to add to your documentation. Here is a more detailed explanation on the [Markdown feature](https://docusaurus.io/docs/en/doc-markdown) that you can use.
|
|
20
|
-
|
|
21
|
-
## Test documentation page
|
|
22
|
-
|
|
23
|
-
We have a local server that we use to test your current docs content. Here are the steps on how to set the [local server](https://github.com/clay/amphora-html/tree/master/website#run-the-local-server). Normally you will have access on your browser with a url like this:
|
|
24
|
-
|
|
25
|
-
`http://localhost:3000/amphora-html/docs/idOfTheDocs`
|
|
26
|
-
|
|
27
|
-
But if you already have a [version](https://github.com/clay/amphora-html/tree/master/website#versioning-the-code) on your docs you will need to add `next` on your url
|
|
28
|
-
|
|
29
|
-
`http://localhost:3000/amphora-html/docs/next/idOfTheDocs`
|
|
30
|
-
|
|
31
|
-
[Here](https://docusaurus.io/docs/en/versioning) are more insights about what to do when you already have documentation with version.
|
package/docs/integration.md
DELETED
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
id: integration
|
|
3
|
-
title: Integration
|
|
4
|
-
sidebar_label: Integration
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
## Basic Configuration
|
|
9
|
-
|
|
10
|
-
First, ensure that you have a compatible version of Amphora installed (v3.x or greater) and require `amphora-html` from wherever you are running Amphora.
|
|
11
|
-
|
|
12
|
-
```javascript
|
|
13
|
-
const amphoraHtml = require('amphora-html');
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
Second, register a `rootPath` with the renderer. This will allow the renderer to reference your components directory and static assets directory properly. Usually this is the root of your project, but that may not be the case for your implementation.
|
|
17
|
-
|
|
18
|
-
```javascript
|
|
19
|
-
// Register a root path for Amphora HTML
|
|
20
|
-
amphoraHtml.addRootPath(path.dirname(path.resolve('./package.json')));
|
|
21
|
-
```
|
|
22
|
-
---
|
|
23
|
-
## Handlebars Helpers
|
|
24
|
-
|
|
25
|
-
If your templates require any custom [Handlebars Helpers](http://handlebarsjs.com/block_helpers.html) you can register them with the renderer's Handlebars instance. Simply pass in an object whose keys are the names of your helpers and whose values are the helper themselves. Like so:
|
|
26
|
-
|
|
27
|
-
```javascript
|
|
28
|
-
// My helpers
|
|
29
|
-
const helpers = {
|
|
30
|
-
// set up handlebars helpers that rely on internal services
|
|
31
|
-
'nameOfHelper': () => {
|
|
32
|
-
// helper that does something you need.
|
|
33
|
-
return 'foobar';
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
// Register helpers
|
|
38
|
-
amphoraHtml.addHelpers(helpers);
|
|
39
|
-
```
|
|
40
|
-
---
|
|
41
|
-
## Amphora HTML Plugins
|
|
42
|
-
|
|
43
|
-
Amphora HTML plugins let you read and modify both the data sent to Handlebars and the HTML returned by Handlebars. An Amphora HTML plugin is an object with a `render` function that returns a modified `data` object and/or a `postRender` function that returns the rendered HTML string:
|
|
44
|
-
|
|
45
|
-
```javascript
|
|
46
|
-
|
|
47
|
-
module.exports.render = (ref, data, locals) => {
|
|
48
|
-
// you have the option to mutate `data` here
|
|
49
|
-
// do **not** attempt to mutate `locals`
|
|
50
|
-
|
|
51
|
-
// return `data` or a promise for `data`
|
|
52
|
-
return data;
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
module.exports.postRender = (ref, html, locals) => {
|
|
56
|
-
// you have the option to mutate `html` here
|
|
57
|
-
// do **not** attempt to mutate `locals`
|
|
58
|
-
|
|
59
|
-
// return `html` or a promise for `html`
|
|
60
|
-
return html;
|
|
61
|
-
};
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
You can add Amphora HTML plugins like this:
|
|
65
|
-
|
|
66
|
-
```javascript
|
|
67
|
-
amphoraHtml.addPlugins([
|
|
68
|
-
{ render: plugin1 },
|
|
69
|
-
{ postRender: plugin2 }
|
|
70
|
-
]);
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
One use case for Amphora HTML plugins is to skip rendering of certain components depending on query parameters, which are available in `locals.query`. Amphora HTML plugins do not run when rendering for edit mode.
|
|
74
|
-
|
|
75
|
-
---
|
|
76
|
-
## Register Amphora HTML with your Amphora Instance
|
|
77
|
-
|
|
78
|
-
Now that you have registered any helpers and plugins and have provided a root path which Amphora HTML can work from, you can register your renderer with Amphora. Registering consists of providing a `renderers` object whose keys are the extension of an HTTP request and whose values are the renderer. You can also specify a `default` property whose value is the extension that Amphora should default to when rendering. This is handy for rendering routes who don't end in extensions, such as `mycoolsite.com/about/`.
|
|
79
|
-
|
|
80
|
-
```javascript
|
|
81
|
-
return amphora({
|
|
82
|
-
app: app,
|
|
83
|
-
renderers: {
|
|
84
|
-
html: amphoraHtml,
|
|
85
|
-
default: 'html'
|
|
86
|
-
},
|
|
87
|
-
providers: ['apikey', amphoraProvider],
|
|
88
|
-
sessionStore: redisStore,
|
|
89
|
-
plugins: [
|
|
90
|
-
amphoraSearch
|
|
91
|
-
]
|
|
92
|
-
});
|
|
93
|
-
```
|
package/docs/intro.md
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
id: intro
|
|
3
|
-
title: Amphora HTML
|
|
4
|
-
sidebar_label: Amphora HTML
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
The HTML renderer for Clay components that use [Handlebars](http://handlebarsjs.com/) templates.
|
|
9
|
-
|
|
10
|
-
---
|
|
11
|
-
## Why?
|
|
12
|
-
|
|
13
|
-
HTML rendering was controlled entirely by [Amphora](https://github.com/nymag/amphora) in __v2.x__, which meant that Amphora was responsible for a lot of heavy lifting. Furthermore, rendering was handled by a module called [Multiplex Templates](https://www.npmjs.com/package/multiplex-templates) which did some :crystal_ball: dark magic :sparkles: to synchronously render component templates. This required some affordances from Amphora which added to the weight of the middleware. By separating renderers out into separate modules which can be plugged into Amphora __>v2.x__ we can create renderers for specific requirements (XML, Amp, etc.) _and_ the rendering process can be moved to separate machines to create more maintainable systems.
|
|
14
|
-
|
|
15
|
-
---
|
|
16
|
-
|
|
17
|
-
## Installation
|
|
18
|
-
|
|
19
|
-
---
|
|
20
|
-
|
|
21
|
-
`$ npm install --save amphora-html`
|
package/docs/style.md
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
id: style
|
|
3
|
-
title: Styleguides
|
|
4
|
-
sidebar_label: Styleguides
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
On `amphora-html` using the `data` and `meta` object that are instances of the components and site respectively. This site will expose the component variations on the state, then it will set these variations into a structure. Finally, [Kiln](https://docs.clayplatform.com/clay-kiln) will need then render the `HTML`.
|
|
11
|
-
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
## Get component variations
|
|
15
|
-
|
|
16
|
-
Using the site name, `amphora-html` builds the specific style path that we need to have all the required stylesheets:
|
|
17
|
-
`styleguides/siteName/components`
|
|
18
|
-
|
|
19
|
-
If the name of the site is not available, the `siteName` property will be replaced for `_default` and the list of the variation of the components will be returned.
|
|
20
|
-
|
|
21
|
-
If a component variation exists, we will receive a combination of the name of the component and the name of the variation separated by an underscore like this example: `componentName_variationName`
|
|
22
|
-
|
|
23
|
-
Furthermore, if the component variation is no set we will have the name of the component as a default style.
|
|
24
|
-
|
|
25
|
-
For more information on how to get the variations, you can check the [styleguide.js](https://github.com/clay/amphora-html/blob/master/lib/styleguide.js) file on the `amphora-html` repository.
|
|
26
|
-
|
|
27
|
-
---
|
|
28
|
-
|
|
29
|
-
## Set component default variations
|
|
30
|
-
|
|
31
|
-
After getting the list of the variations exposed on the state (or set on the data object that we receive), we can go through each component defining its default styleguide. The following are the conditions that we have to define in order to determine which is the variation that we will add:
|
|
32
|
-
|
|
33
|
-
- The component has a variation set, but it doesn't exist in the site's styleguide or the default styleguide; render the component with the default variation.
|
|
34
|
-
|
|
35
|
-
- The component has no variation set; render the component with the default variation.
|
|
36
|
-
|
|
37
|
-
- Finally, if the other conditions don't match to the current component, it means that we have a component variation defined and we are using it.
|
|
38
|
-
|
|
39
|
-
For more information on how to set the variations, you can check the [styleguide.js](https://github.com/clay/amphora-html/blob/master/lib/styleguide.js) file on the `amphora-html` repository.
|
|
40
|
-
|
|
41
|
-
---
|
|
42
|
-
|
|
43
|
-
## Compose data
|
|
44
|
-
|
|
45
|
-
After we got and set the variations on the components, we are going to compose the data into the structure that [Kiln](https://docs.clayplatform.com/clay-kiln/) needs; we got to this step after we finished getting all the variations of the components that are in the `data` object that we mentioned before and use it on [Kiln](https://docs.clayplatform.com/clay-kiln/).
|
|
46
|
-
|
|
47
|
-
For more information on how the kiln structure is formed and send; you can check the [render.js](https://github.com/clay/amphora-html/blob/master/lib/render.js) file on the `amphora-html` repository.
|
package/lib/log.test.js
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const dirname = __dirname.split('/').pop(),
|
|
4
|
-
filename = __filename.split('/').pop().split('.').shift(),
|
|
5
|
-
lib = require('./' + filename),
|
|
6
|
-
clayLog = require('clay-log'),
|
|
7
|
-
fakeLog = {};
|
|
8
|
-
|
|
9
|
-
describe(dirname, () => {
|
|
10
|
-
describe(filename, () => {
|
|
11
|
-
describe('init', () => {
|
|
12
|
-
const fn = lib['init'];
|
|
13
|
-
|
|
14
|
-
test('initializes a logger when non-exists', () => {
|
|
15
|
-
fn();
|
|
16
|
-
expect(clayLog.init.mock.calls.length).toBe(1);
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
test('returns if a log instance is set', () => {
|
|
20
|
-
lib.setLogger(fakeLog);
|
|
21
|
-
fn();
|
|
22
|
-
expect(clayLog.init.mock.calls.length).toBe(0);
|
|
23
|
-
});
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
describe('setup', () => {
|
|
27
|
-
const fn = lib['setup'];
|
|
28
|
-
|
|
29
|
-
test('calls clayLog.meta with a default when provided no meta', () => {
|
|
30
|
-
fn();
|
|
31
|
-
expect(clayLog.meta.mock.calls.length).toBe(1);
|
|
32
|
-
expect(clayLog.meta.mock.calls[0][0]).toEqual({});
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
test('passed meta through to clayLog.meta', () => {
|
|
36
|
-
fn({hello: 'world'});
|
|
37
|
-
expect(clayLog.meta.mock.calls.length).toBe(1);
|
|
38
|
-
expect(clayLog.meta.mock.calls[0][0]).toEqual({hello: 'world'});
|
|
39
|
-
});
|
|
40
|
-
});
|
|
41
|
-
});
|
|
42
|
-
});
|