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.
@@ -1,66 +0,0 @@
1
- /**
2
- * Copyright (c) 2017-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
- // See https://docusaurus.io/docs/site-config for all the possible
9
- // site configuration options.
10
-
11
- const repoUrl = 'https://github.com/clay/amphora-html';
12
- projectName = process.env.PROJECT_NAME || 'amphora-html';
13
-
14
- const siteConfig = {
15
- title: 'Amphora html', // Title for your website.
16
- tagline: 'HTML renderer for component data structures',
17
- url: 'https://clay.github.io', // Your website URL
18
- baseUrl: '/amphora-html/', // Base URL for your project */
19
-
20
- // Used for publishing and more
21
- projectName,
22
- organizationName: 'clayplatform',
23
-
24
- // For no header links in the top nav bar -> headerLinks: [],
25
- headerLinks: [],
26
-
27
- /* path to images for header/footer */
28
- headerIcon: 'img/logo.svg',
29
- footerIcon: '',
30
- favicon: '',
31
-
32
- /* Colors for website */
33
- colors: {
34
- primaryColor: '#607d8b',
35
- secondaryColor: '#1976d2',
36
- },
37
-
38
- // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
39
- copyright: `Copyright © ${new Date().getFullYear()} New York Media`,
40
-
41
- highlight: {
42
- // Highlight.js theme to use for syntax highlighting in code blocks.
43
- theme: 'default',
44
- },
45
-
46
- // Add custom scripts here that would be placed in <script> tags.
47
- scripts: ['https://buttons.github.io/buttons.js'],
48
-
49
- docsSideNavCollapsible: true,
50
- // On page navigation for the current documentation page.
51
- onPageNav: 'separate',
52
- // No .html extensions for paths.
53
- cleanUrl: true,
54
-
55
- // Open Graph and Twitter card images.
56
- ogImage: '#99D3DF',
57
- twitterImage: '#99D3DF'
58
-
59
- // Show documentation's last contributor's name.
60
- // enableUpdateBy: true,
61
-
62
- // Show documentation's last update time.
63
- // enableUpdateTime: true,
64
- };
65
-
66
- module.exports = siteConfig;
@@ -1,16 +0,0 @@
1
- /* your custom css */
2
-
3
- @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
4
- }
5
-
6
- @media only screen and (min-width: 1024px) {
7
- }
8
-
9
- @media only screen and (max-width: 1023px) {
10
- }
11
-
12
- @media only screen and (min-width: 1400px) {
13
- }
14
-
15
- @media only screen and (min-width: 1500px) {
16
- }
@@ -1,13 +0,0 @@
1
- <svg width="225" height="81" xmlns="http://www.w3.org/2000/svg">
2
- <g fill="none" fill-rule="evenodd">
3
- <path d="M87.6426136 70.8706169c-12.0309253 0-19.575-7.8297078-19.575-18.1439124V18.638474c0-10.31274348 7.5440747-18.14245127 19.575-18.14245127 12.0309254 0 18.8116074 7.82970779 18.8116074 18.14245127v6.3971591c0 1.3375812-1.146916 2.4823052-2.483036 2.4823052h-8.2124999c-1.3375812 0-2.4823052-1.144724-2.4823052-2.4823052V18.638474c0-3.151461-1.7189124-6.3978896-5.6337663-6.3978896-4.2976461 0-6.1107954 3.2464286-6.1107954 6.3978896v34.0882305c0 3.1514611 1.8131493 6.3986202 6.1107954 6.3986202 3.9148539 0 5.6337663-3.2464286 5.6337663-6.3986202v-6.397159c0-1.3361202 1.144724-2.4823052 2.4823052-2.4823052h8.2124999c1.33612 0 2.483036 1.146185 2.483036 2.4823052v6.397159c0 10.3142046-6.780682 18.1439124-18.8116074 18.1439124zm51.3270294-1.1461851h-25.971429c-1.338311 0-2.482305-1.1469156-2.482305-2.4823052V3.93311688c0-1.33758117 1.144724-2.38733766 2.482305-2.38733766h8.593831c.634822-.00657467 1.245536.24326299 1.694806.69180195.448539.44926948.698376 1.05998377.691802 1.69480519V55.5925325c0 1.3368506 1.143993 2.3873376 2.482305 2.3873376h12.508685c1.335389 0 2.481575 1.1454546 2.481575 2.4823052v6.7799513c.00073 1.3353896-1.146186 2.4823052-2.481575 2.4823052zm29.978328-50.1311688c-.094237-.6691559-.669156-1.0497565-1.146185-1.0497565-.47703 0-1.049757.3806006-1.049757 1.0497565l-3.055032 22.2494318c-.191396 1.3353896.666964 2.3873377 2.099513 2.3873377h4.10625c1.33612 0 2.101704-1.0512176 2.004545-2.3873377l-2.959334-22.2494318zm19.194399 50.1311688h-8.69026c-1.432548 0-2.673701-1.050487-2.865097-2.3887987l-2.006007-10.7897727c-.285633-1.3361201-1.526785-2.4823052-2.865097-2.4823052h-7.733279c-1.432549 0-2.673701 1.1461851-2.865098 2.4823052l-2.004545 10.7897727c-.286364 1.3383117-1.527516 2.3887987-2.865097 2.3887987h-8.688799c-1.432549 0-2.196672-1.050487-1.910309-2.3887987l13.559903-63.40324674c.285633-1.33758117 1.526786-2.38733766 2.959334-2.38733766h11.363962c1.33612 0 2.673701 1.04975649 2.960064 2.38733766l13.559173 63.40324674c.287094 1.3390422-.572728 2.3887987-1.908848 2.3887987zm23.847809-32.6578734c-.191397.6691559-.47703 1.6239448-.669156 2.4844968-.094237.8583604-.189935 1.6217532-.189935 2.2909091v25.4001623c0 1.3353896-1.050487 2.4823052-2.483036 2.4823052h-8.594562c-1.335389 0-2.481574-1.1469156-2.481574-2.4823052V41.7469968c0-.7648539-.094968-1.6239449-.286364-2.5780033-.095698-.7641234-.287094-1.6239448-.571997-2.1966721L184.585471 3.83668831c-.382792-1.2411526.286363-2.29090909 1.624675-2.29090909h7.830438c1.81315 0 2.959335.95478896 3.245698 2.29090909l6.015828 20.91258119c.190666.6691558.666965.9555195 1.049757.9555195.47776 0 .859091-.2863637 1.050487-.9555195l6.111526-20.91258119c.382792-1.33612013 1.337581-2.29090909 3.15073-2.29090909h7.926867c1.431088 0 2.099513 1.04975649 1.622484 2.29090909L211.990179 37.0665584z" fill="#A59B8B"/>
4
- <g transform="translate(0 1.461039)">
5
- <path d="M31.9383117 49.6358766c-.0701299.2060065-.1848214.5771104-.3272727 1.0979708-.2344968.8532468-.466802 1.8321429-.6830358 2.925-1.4778409 7.4659091-1.4778409 15.7565747.9905845 24.076461.2615259.8897728 1.1900162 1.3931007 2.0717532 1.1293832.881737-.2651786 1.3828734-1.2002435 1.1198864-2.0885552-2.2967533-7.7362013-2.2967533-15.4921267-.9138799-22.4598215.1979708-1.0110389.412013-1.9110389.6260552-2.6861201.074513-.2688312.1409903-.5018669.2016234-.6969156.0328734-.1117695.0569805-.1818993.0664772-.2111201.2958604-.8751623-.1680194-1.8306818-1.0373376-2.1301948-.8729708-.2987825-1.8204546.1672889-2.117776 1.0446428h.0029221v-.0007305zm21.5335227 1.087013c.0102273.0284903.0328734.1000812.0664773.2118507.0613636.1943181.1285714.4266233.2008928.6939935.2133117.7758117.4273539 1.6765422.6275163 2.6861201 1.3806818 6.9691558 1.3806818 14.7243506-.9138799 22.462013-.2651786.8883117.2344968 1.8226461 1.1184253 2.0892857.881737.262987 1.8109578-.2410714 2.0746754-1.1293831 2.4669642-8.3228085 2.4669642-16.6142046.9883928-24.0793831-.2147727-1.0943182-.4485389-2.0717533-.6815747-2.925-.1431818-.5223215-.2571428-.8919643-.3272727-1.0972403-.2965909-.8773539-1.2477273-1.3441558-2.1163149-1.0453734-.8707792.299513-1.3339286 1.2564935-1.0373377 2.1331169zM3.61461039 52.4388799c.31339286-6.8398539 3.09155844-11.1090098 7.57183441-13.5051137 1.6378247-.8766233 3.4056818-1.4427759 5.1866883-1.7532467.6348214-.1095779 1.2301948-.1789773 1.7656656-.2176948.3331169-.0226461.5800325-.0299513.7232143-.0284903h-.0021916c.9197241.0153409 1.6794643-.7210227 1.6955357-1.6487825.0160715-.9277597-.715909-1.6911525-1.6356331-1.708685h-.0277597c-.2271916 0-.5595779.0073052-.9818182.0372565-.6472403.0445617-1.3543831.1278409-2.1068182.2586039-2.1068182.3681818-4.2070617 1.0380682-6.18311686 2.0958604-5.50081169 2.9439935-8.96712662 8.2709415-9.3375 16.3161526-.0409091.9255681.67061688 1.7116071 1.58961039 1.7532467.91972402.0438312 1.69918831-.6720779 1.74082792-1.5991071h.00146104zm86.09099021-.1541396c-.3703733-8.0459416-3.8344967-13.3721591-9.3375-16.3161526-1.9760551-1.0570617-4.0755681-1.7284091-6.1801948-2.0951299-.7531655-.130763-1.4610389-.2140422-2.1082792-.2586039-.4222402-.0299513-.7531656-.0372565-.9825487-.0372565h-.0248376c-.9211851.0175325-1.6546267.7809253-1.6385552 1.7086851.0160714.9270292.7758117 1.6641233 1.6955357 1.6480519-.0051137 0-.0051137 0 0 0 .1417208-.0021915.3879058.0051137.7195617.0270292.5383928.0372565 1.1323052.1081169 1.7678571.2191559 1.7788149.3112013 3.5488636.8751623 5.1866883 1.7532467 4.480276 2.3946429 7.2584416 6.6652598 7.572565 13.5051137.0416396.9255682.8218344 1.6422078 1.7408279 1.5983766.919724-.0423701 1.6297889-.8276786 1.5881493-1.7532468l.0007305.0007306z" fill="#C8B585"/>
6
- <path d="M44.6902597 64.4515422c20.4333604 0 36.9986202-6.6119318 36.9986202-27.1899351C81.6896104 16.6814123 61.8823052 0 44.6902597 0 27.4989448 0 7.69163961 16.6814123 7.69163961 37.2608766S24.2561688 64.4515422 44.6902597 64.4515422z" fill="#DDCFAC"/>
7
- <path d="M41.0391234 40.3794643c.2425324 1.5983766 1.6005682 2.7935065 3.2106331 2.7935065 1.611526 0 2.9710227-1.198052 3.2106331-2.7978896.0423701-.2768669-.1482954-.5325487-.4200487-.5719968-.2717532-.0445617-.5274351.1453734-.5676136.4193182-.1680195 1.1133117-1.1111202 1.9446429-2.2229708 1.9446429-1.1111201 0-2.0534903-.8306007-2.2222403-1.9402598-.0423701-.2739448-.2965909-.4624188-.5676136-.4207792-.2739448.0401786-.4616883.2987825-.4200487.5719967v.0014611h-.0007305z" fill="#907E59"/>
8
- <ellipse fill="#907E59" cx="27.6457792" cy="29.0681006" rx="2.66566558" ry="4.1961039"/>
9
- <ellipse fill="#907E59" cx="60.9866883" cy="29.0681006" rx="2.66566558" ry="4.1961039"/>
10
- <path d="M52.967776 1.24334416C65.4150974 6.92678571 76.1303571 19.8233766 76.1303571 34.8231331c0 20.2558442-16.3409902 26.7647727-36.4982142 26.7647727-8.2906656 0-15.9333604-1.1030844-22.0609578-3.8074675 6.7741071 4.9280844 16.6112824 6.8274351 27.5617694 6.8274351 20.4318994 0 36.9964286-6.6104708 36.9964286-27.1892046C82.1286526 19.9263799 67.8170455 5.25170455 52.967776 1.24334416" fill="#C8B585"/>
11
- </g>
12
- </g>
13
- </svg>
@@ -1,94 +0,0 @@
1
- ---
2
- id: version-4.0.0-integration
3
- title: Integration
4
- sidebar_label: Integration
5
- original_id: integration
6
- ---
7
-
8
- ---
9
- ## Basic Configuration
10
-
11
- 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.
12
-
13
- ```javascript
14
- const amphoraHtml = require('amphora-html');
15
- ```
16
-
17
- 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.
18
-
19
- ```javascript
20
- // Register a root path for Amphora HTML
21
- amphoraHtml.addRootPath(path.dirname(path.resolve('./package.json')));
22
- ```
23
- ---
24
- ## Handlebars Helpers
25
-
26
- 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:
27
-
28
- ```javascript
29
- // My helpers
30
- const helpers = {
31
- // set up handlebars helpers that rely on internal services
32
- 'nameOfHelper': () => {
33
- // helper that does something you need.
34
- return 'foobar';
35
- }
36
- };
37
-
38
- // Register helpers
39
- amphoraHtml.addHelpers(helpers);
40
- ```
41
- ---
42
- ## Amphora HTML Plugins
43
-
44
- 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:
45
-
46
- ```javascript
47
-
48
- module.exports.render = (ref, data, locals) => {
49
- // you have the option to mutate `data` here
50
- // do **not** attempt to mutate `locals`
51
-
52
- // return `data` or a promise for `data`
53
- return data;
54
- };
55
-
56
- module.exports.postRender = (ref, html, locals) => {
57
- // you have the option to mutate `html` here
58
- // do **not** attempt to mutate `locals`
59
-
60
- // return `html` or a promise for `html`
61
- return html;
62
- };
63
- ```
64
-
65
- You can add Amphora HTML plugins like this:
66
-
67
- ```javascript
68
- amphoraHtml.addPlugins([
69
- { render: plugin1 },
70
- { postRender: plugin2 }
71
- ]);
72
- ```
73
-
74
- 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.
75
-
76
- ---
77
- ## Register Amphora HTML with your Amphora Instance
78
-
79
- 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/`.
80
-
81
- ```javascript
82
- return amphora({
83
- app: app,
84
- renderers: {
85
- html: amphoraHtml,
86
- default: 'html'
87
- },
88
- providers: ['apikey', amphoraProvider],
89
- sessionStore: redisStore,
90
- plugins: [
91
- amphoraSearch
92
- ]
93
- });
94
- ```
@@ -1,22 +0,0 @@
1
- ---
2
- id: version-4.0.0-intro
3
- title: Amphora HTML
4
- sidebar_label: Amphora HTML
5
- original_id: intro
6
- ---
7
-
8
- ---
9
- The HTML renderer for Clay components that use [Handlebars](http://handlebarsjs.com/) templates.
10
-
11
- ---
12
- ## Why?
13
-
14
- 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.
15
-
16
- ---
17
-
18
- ## Installation
19
-
20
- ---
21
-
22
- `$ npm install --save amphora-html`
@@ -1,48 +0,0 @@
1
- ---
2
- id: version-4.0.0-style
3
- title: Styleguides
4
- sidebar_label: Styleguides
5
- original_id: style
6
- ---
7
-
8
- ---
9
-
10
-
11
- 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`.
12
-
13
- ---
14
-
15
- ## Get component variations
16
-
17
- Using the site name, `amphora-html` builds the specific style path that we need to have all the required stylesheets:
18
- `styleguides/siteName/components`
19
-
20
- 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.
21
-
22
- 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`
23
-
24
- Furthermore, if the component variation is no set we will have the name of the component as a default style.
25
-
26
- 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.
27
-
28
- ---
29
-
30
- ## Set component default variations
31
-
32
- 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:
33
-
34
- - 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.
35
-
36
- - The component has no variation set; render the component with the default variation.
37
-
38
- - 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.
39
-
40
- 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.
41
-
42
- ---
43
-
44
- ## Compose data
45
-
46
- 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/).
47
-
48
- 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.
@@ -1,13 +0,0 @@
1
- {
2
- "version-4.0.0-docs": {
3
- "Introduction": [
4
- "version-4.0.0-intro"
5
- ],
6
- "Integration": [
7
- "version-4.0.0-integration"
8
- ],
9
- "Styleguide": [
10
- "version-4.0.0-style"
11
- ]
12
- }
13
- }
@@ -1,3 +0,0 @@
1
- [
2
- "4.0.0"
3
- ]