patlolla-sai-charan-reddy / react-amp-template

AMP template generator

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

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]

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 [email protected]: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

Try bellow examples

• npm start
• npm run examples
• cd examples/simple && yarn && npm start

License

This project is licensed under the Apache License, Version 2.0. Copyright (c) 2016 Ariel Fernando Rodriguez. For more information see LICENSE.md.