├── .editorconfig ├── .gitignore ├── .npmignore ├── .nvmrc ├── .travis.yml ├── LICENSE.md ├── README.md ├── config ├── .babelrc └── .eslintrc.json ├── coverage.lcov ├── examples └── simple-server │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── docs │ └── preview.png │ ├── package-lock.json │ ├── package.json │ ├── server │ ├── assets │ │ └── bg.png │ ├── data.json │ ├── index.js │ └── render.js │ └── src │ ├── App.jsx │ ├── Components │ ├── Body.jsx │ ├── Head.jsx │ ├── Heading.jsx │ ├── PostCard.jsx │ └── SocialShare.jsx │ └── globalStyles.js ├── package-lock.json ├── package.json ├── src ├── Components │ ├── Head.jsx │ ├── Link.jsx │ ├── Meta.jsx │ ├── Script.jsx │ ├── Tag.jsx │ ├── Title.jsx │ └── index.js ├── constants.js ├── index.jsx └── store.js └── test ├── Components ├── Components.test.js ├── Head.test.js └── snapshots │ ├── Components.test.js.md │ ├── Components.test.js.snap │ ├── index.test.js.md │ └── index.test.js.snap ├── index.test.js └── snapshots ├── index.test.js.md └── index.test.js.snap /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | # https://github.com/jokeyrhyme/standard-editorconfig 3 | 4 | # top-most EditorConfig file 5 | root = true 6 | 7 | # Unix-style newlines with a newline ending every file 8 | [*] 9 | end_of_line = lf 10 | insert_final_newline = true 11 | 12 | # Set default charset 13 | [*] 14 | charset = utf-8 15 | 16 | # Other good defaults 17 | [*] 18 | indent_size = 2 19 | indent_style = space 20 | trim_trailing_whitespace = true 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | coverage/** 2 | node_modules/** 3 | npm-debug.log 4 | .DS_Store 5 | yarn-error.log 6 | lib 7 | dist 8 | examples/build 9 | examples/simple/node_modules 10 | test-debug.html 11 | .nyc_output 12 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .travis.yml 2 | examples 3 | .nyc_output 4 | src 5 | .editorconfig 6 | yarn-error.log 7 | tmp 8 | coverage 9 | test 10 | config 11 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 6 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "stable" 4 | cache: 5 | yarn: false 6 | script: 7 | - npm install 8 | - npm test 9 | after_script: 10 | - npm install -g codecov 11 | - npm run report-coverage 12 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 Ariel Fernando Rodriguez 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |

RAMPT v4

3 |

AMP components aliases and shims for React SSR 16+ & styled-components v3

4 |
5 | 6 |
7 | 8 |
9 | 10 | 11 | 12 | 13 | Build Status 14 | 15 | 16 | npm version 17 | 18 | 19 |
20 | 21 | 22 | Write AMP pages using React syntaxt right the way and style with your preferred style manager 23 | 24 |
25 |
:zap: AMP elements
26 |
Ready to render any AMP component
27 |
:nail_care: Modular CSS
28 |
Style with the power of Styled Components or Aphrodite or Your Own custom StyleManager!
29 |
30 | 31 | 32 | 33 | 34 | ## Contents 35 | 36 | - [Usage](#usage) 37 | - [Demo](#demo) 38 | - [API](#api) 39 | - [Configuration](#configuration) 40 | - [Contribute](#contributing) 41 | 42 | 43 | ## Usage 44 | 45 | ### Install 46 | 47 | - `npm i react-amp-template` 48 | 49 | ### Static Render 50 | 51 | ```javascript 52 | import React, { Fragment } from 'react' 53 | import styled from 'styled-components' 54 | import { renderToString, AMP } from 'react-amp-template' 55 | 56 | const { Title, Link, Carousel } = AMP 57 | 58 | const Body = styled.body` 59 | margin: 0 1rem; 60 | ` 61 | 62 | const App = ({ title }) => ( 63 | 64 | {title} 65 | 66 | 67 |

Hello World

68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | ) 76 | 77 | export default props => renderToString() 78 | ``` 79 | 80 | 81 | ## Demo 82 | [See complete example here](https://github.com/Ariel-Rodriguez/react-amp-template/tree/master/examples/simple-server) 83 | 84 | 85 | ## API 86 | 87 | ### renderToString 88 | 89 | ```javascript 90 | /** 91 | * Transform React component into HTML AMP format. 92 | * 93 | * @returns {String} html 94 | * @param {Class|Object} body React component to render 95 | * @param {Object} options Settings 96 | * @property {string} options.cdnURI absolute URL to AMP CDN 97 | * @property {string} options.boilerplate HTML string which contains AMP boilerplate styles 98 | * @property {object} options.extensions Key map of references to specify an extension version 99 | * @property {object} options.extensions.default default version for all amp-extensions e.g '0.1' 100 | * @property {object} options.extensions.extension [extension-name] 101 | ** specify custom version for derived extension e.g: 'amp-sticky-ad': '1.0' 102 | import { renderToString } from 'react-amp-template' 103 | ``` 104 | 105 | #### AMP components 106 | 107 | ```javascript 108 | import { AMP } from 'react-amp-template' 109 | 110 | const AdUnit = () => 111 | ``` 112 | - RAMPT provides shorthands for amp-custom-elements. A \[ get \] operation on { AMP } module returns Node element and automatically registers the `␊ 16 | title␊ 17 | ␊ 18 | ␊ 19 | ␊ 20 | ␊ 21 | ␊ 22 | ` 23 | -------------------------------------------------------------------------------- /test/snapshots/index.test.js.snap: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ariel-Rodriguez/react-amp-template/cb3fba4e2dd274383dc4f5dcf89ed903c71df3bc/test/snapshots/index.test.js.snap --------------------------------------------------------------------------------