Package Exports

react-amp-template

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-amp-template) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-amp-template

Server side rendering with React + ModularCSS/JSCSS + AMP-custom-elements.

_{Another fun library to generate AMP documents.}

Install

react-amp-template is distributed via npm:

yarn add react-amp-template or $npm install --save react-amp-template

var React = require('react');
var RAMPT = require('react-amp-template').default;

var rampt = new RAMPT({
  template: {
    head: {
      title: 'react amp template',
      canonical: 'http',
    }
  }
});

var element = React.createElement('div', null, 'Hello World');

// add meta tag single mode.
addMeta({
  type: 'application/ld+json',
  content: "{'@context': 'http://schema.org', '@type': 'NewsArticle'}"
});

// register any amp-script. just an example.
addScript('amp-social-share');

rampt
  .renderStatic(element)
  .then(console.log)
  .catch(function(error){
    console.log('Errors founds! Use npm run debug for debug trace.');
    console.log('Document failed '+((error.validation) ? 'at AMP validations.' : 'at internal rendering.'));
    console.log('Markup output: ', error.markup);
    process.exit(1);
  });

PREVIEW:

See more examples

Features

⚡ AMP custom elements: Ready to render AMP components see more https://ampbyexample.com/#components
💅 Modular CSS: Style with the power of (Aphrodite)[https://github.com/Khan/aphrodite]
:suspect: Built-in AMP validation: By default, all content generated will be verified through (AMP validator)[https://github.com/ampproject/amphtml/tree/master/validator] to ensure safety.

API

💤

🐧 Contributing

$git clone git@github.com:Ariel-Rodriguez/react-amp-template.git
$yarn
create an issue, create a branch with issue initials
hack and ensure tests pass. Add unit tests if needed.
npm run build
npm run test
add descriptive commit & push

run examples

Build examples and github demo npm run dist
npm run demo or npm run examples
Complete example using npm:
- cd examples/simple && npm i && npm start