{"id":17629872,"url":"https://github.com/ariel-rodriguez/react-amp-template","last_synced_at":"2025-10-09T15:07:29.200Z","repository":{"id":48034018,"uuid":"74713601","full_name":"Ariel-Rodriguez/react-amp-template","owner":"Ariel-Rodriguez","description":"AMP template generator","archived":false,"fork":false,"pushed_at":"2022-12-02T01:44:29.000Z","size":7091,"stargazers_count":83,"open_issues_count":6,"forks_count":16,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-11T00:04:42.674Z","etag":null,"topics":["amp","amp-html","aphrodite","javascript-library","preact","react","styled-components"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ariel-Rodriguez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-25T00:41:15.000Z","updated_at":"2024-02-23T16:16:39.000Z","dependencies_parsed_at":"2023-01-23T21:30:40.510Z","dependency_job_id":null,"html_url":"https://github.com/Ariel-Rodriguez/react-amp-template","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ariel-Rodriguez%2Freact-amp-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ariel-Rodriguez%2Freact-amp-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ariel-Rodriguez%2Freact-amp-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ariel-Rodriguez%2Freact-amp-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ariel-Rodriguez","download_url":"https://codeload.github.com/Ariel-Rodriguez/react-amp-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248765999,"owners_count":21158296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amp","amp-html","aphrodite","javascript-library","preact","react","styled-components"],"created_at":"2024-10-23T00:49:03.285Z","updated_at":"2025-10-09T15:07:24.149Z","avatar_url":"https://github.com/Ariel-Rodriguez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e\u003cstrong\u003eRAMPT v4\u003c/strong\u003e\u003c/h1\u003e\n  \u003cdiv align=\"center\"\u003e\u003cp\u003eAMP components aliases and shims for React SSR 16+ \u0026 styled-components v3\u003c/p\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- maintainability --\u003e\n  \u003ca href=\"https://codeclimate.com/github/Ariel-Rodriguez/react-amp-template/maintainability\"\u003e\u003cimg src=\"https://api.codeclimate.com/v1/badges/ff07a1f7148b05304caf/maintainability\" /\u003e\u003c/a\u003e\n  \u003c!-- Build Status --\u003e\n  \u003ca href=\"https://travis-ci.org/Ariel-Rodriguez/react-amp-template\"\u003e\n    \u003cimg src=\"https://travis-ci.org/Ariel-Rodriguez/react-amp-template.svg?branch=master\" alt=\"Build Status\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- npm ver --\u003e\n  \u003ca href=\"https://badge.fury.io/js/react-amp-template\"\u003e\u003cimg src=\"https://badge.fury.io/js/react-amp-template.svg\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n  \u003c!-- cover --\u003e\n  \u003ca href=\"https://codecov.io/gh/Ariel-Rodriguez/react-amp-template\"\u003e\u003cimg src=\"https://codecov.io/gh/Ariel-Rodriguez/react-amp-template/branch/master/graph/badge.svg\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\nWrite AMP pages using React syntaxt right the way and style with your preferred style manager\n\n\u003cdl\u003e\n  \u003cdt\u003e:zap: AMP elements\u003c/dt\u003e\n  \u003cdd\u003eReady to render any \u003ca href=\"https://amp.dev/documentation/components/\"\u003eAMP component\u003c/a\u003e\u003c/dd\u003e\n  \u003cdt\u003e:nail_care: Modular CSS\u003c/dt\u003e\n  \u003cdd\u003eStyle with the power of \u003ca href=\"https://github.com/styled-components/styled-components\"\u003eStyled Components\u003c/a\u003e or \u003ca href=\"https://github.com/Khan/aphrodite\"\u003eAphrodite\u003c/a\u003e or Your Own custom StyleManager!\u003c/dd\u003e\n\u003c/dl\u003e\n\n\n\n\n## Contents\n\n- [Usage](#usage)\n- [Demo](#demo)\n- [API](#api)\n- [Configuration](#configuration)\n- [Contribute](#contributing)\n\n\n## Usage\n\n### Install\n\n- `npm i react-amp-template`\n\n### Static Render\n\n```javascript\nimport React, { Fragment } from 'react'\nimport styled from 'styled-components'\nimport { renderToString, AMP } from 'react-amp-template'\n\nconst { Title, Link, Carousel } = AMP\n\nconst Body = styled.body`\n  margin: 0 1rem;\n`\n\nconst App = ({ title }) =\u003e (\n  \u003cFragment\u003e\n    \u003cTitle\u003e{title}\u003c/Title\u003e\n    \u003cLink rel=\"canonical\" href=\"http://localhost\" /\u003e\n    \u003cBody\u003e\n      \u003ch1\u003eHello World\u003c/h1\u003e\n      \u003cCarousel lightbox width=\"400\" height=\"300\" layout=\"responsive\" type=\"slides\"\u003e\n        \u003camp-img src=\"/img/image1.jpg\" width=\"400\" height=\"300\" layout=\"responsive\"\u003e\u003c/amp-img\u003e\n        \u003camp-img src=\"/img/image2.jpg\" width=\"400\" height=\"300\" layout=\"responsive\"\u003e\u003c/amp-img\u003e\n        \u003camp-img src=\"/img/image3.jpg\" width=\"400\" height=\"300\" layout=\"responsive\"\u003e\u003c/amp-img\u003e\n      \u003c/Carousel\u003e\n    \u003c/Body\u003e\n  \u003c/Fragment\u003e\n)\n\nexport default props =\u003e renderToString(\u003cApp title=\"AMP demo\" /\u003e)\n```\n\n\n## Demo\n[See complete example here](https://github.com/Ariel-Rodriguez/react-amp-template/tree/master/examples/simple-server)\n\n\n## API\n\n### renderToString\n\n```javascript\n/**\n * Transform React component into HTML AMP format.\n *\n * @returns {String} html\n * @param {Class|Object} body React component to render\n * @param {Object} options Settings\n * @property {string} options.cdnURI absolute URL to AMP CDN\n * @property {string} options.boilerplate HTML string which contains AMP boilerplate styles\n * @property {object} options.extensions Key map of references to specify an extension version\n * @property {object} options.extensions.default default version for all amp-extensions e.g '0.1'\n * @property {object} options.extensions.extension [extension-name]\n ** specify custom version for derived extension e.g: 'amp-sticky-ad': '1.0'\nimport { renderToString } from 'react-amp-template'\n```\n\n#### AMP components\n\n```javascript\nimport { AMP } from 'react-amp-template'\n\nconst AdUnit = () =\u003e \u003cAMP.AdUnit /\u003e\n```\n- RAMPT provides shorthands for amp-custom-elements. A \\[ get \\] operation on { AMP } module returns Node element and automatically registers the `\u003cscript /\u003e` tag required by AMP.\n\n- The following components could be used in case of need to ad elements into `\u003chead\u003e` element\n\n```javascript\n  \u003cLink /\u003e \u003cMeta /\u003e \u003cTitle /\u003e \u003cScript /\u003e \u003cTag _name=\"custom-tag\" /\u003e\n```\n\n- By default every amp-script address to version 0.1. However it can be customized.\n\n```javascript\nrenderToString(\u003cApp /\u003e, {\n  extensions: {\n   default: 0.2,\n   'amp-sticky-unit': 1.0,\n  }\n})\n```\n\n#### LD+JSON\n\n```javascript\n\u003cAMP.Script\n  type=\"application/ld+json\"\n  dangerouslySetInnerHTML={{ __html: JSON.stringify(json) }}\n/\u003e\n```\n\n\n## Configuration\n\n### Babel\n- Setup the environment as recomends React and Styled-Components server rendering.\n\n#### React | Styled Components\n\n`npm i -D babel-plugin-styled-components babel-preset-react`\n\n```json\n{\n  \"presets\": [\n    \"stage-0\",\n    \"react\"\n  ],\n  \"plugins\": [\n    [\"babel-plugin-styled-components\", { \"ssr\": true }]\n  ]\n}\n```\n\n\n## Contributing\n\n- Fork the repository\n- `npm install`\n- `npm run dev`\n- Create pull request\n\n### Build examples\n\n- `cd examples/simple-server`\n- `npm install \u0026\u0026 npm start`\n\n## License\n\nThis project is licensed under the Apache License, Version 2.0. Copyright (c) 2016 Ariel Fernando Rodriguez. For more information see `LICENSE.md`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fariel-rodriguez%2Freact-amp-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fariel-rodriguez%2Freact-amp-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fariel-rodriguez%2Freact-amp-template/lists"}