├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .travis.yml ├── .vscode └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── lib ├── next-amp-demo │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── jest.config.js │ ├── jest.setup.js │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── pages │ │ ├── components │ │ │ ├── AmpAnalytics.tsx │ │ │ ├── AmpAnimation.tsx │ │ │ ├── AmpDynamicCssClasses.tsx │ │ │ ├── AmpForm.tsx │ │ │ ├── AmpIframe.tsx │ │ │ ├── AmpImg.tsx │ │ │ ├── AmpList.tsx │ │ │ ├── AmpMustache.tsx │ │ │ ├── AmpScript.tsx │ │ │ └── AmpState.tsx │ │ ├── index.tsx │ │ └── types │ │ │ └── amp-img.tsx │ ├── server.js │ ├── test │ │ ├── EndToEnd.test.js │ │ └── out │ │ │ ├── components │ │ │ ├── AmpAnalytics.out │ │ │ ├── AmpAnimation.out │ │ │ ├── AmpDynamicCssClasses.out │ │ │ ├── AmpForm.out │ │ │ ├── AmpIframe.out │ │ │ ├── AmpImg.out │ │ │ ├── AmpList.out │ │ │ ├── AmpMustache.out │ │ │ ├── AmpScript.out │ │ │ └── AmpState.out │ │ │ ├── index.out │ │ │ └── types │ │ │ └── amp-img.out │ └── tsconfig.json └── next-amp │ ├── .gitignore │ ├── CODE_OF_CONDUCT.md │ ├── CONTRIBUTING.md │ ├── LICENSE │ ├── README.md │ ├── build │ ├── amp.js │ ├── generate.js │ ├── generateComponents.js │ ├── generateTypes.js │ ├── generateVersionMapping.js │ ├── intrinsic-elements.json │ ├── intrinsicElements.ts │ └── strings.js │ ├── package.json │ ├── src │ ├── components │ │ ├── AmpAccess.tsx │ │ ├── AmpAnalytics.tsx │ │ ├── AmpAnimation.tsx │ │ ├── AmpDynamicCssClasses.tsx │ │ ├── AmpForm.tsx │ │ ├── AmpMustache.tsx │ │ ├── AmpScript.tsx │ │ └── AmpState.tsx │ └── helpers │ │ └── TemplateHelper.tsx │ └── tsconfig.json ├── package.json ├── prettier.config.d.ts ├── prettier.config.js ├── templates └── travel │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── components │ ├── ActivitiesPanel.js │ ├── ActivityButton.js │ ├── ActivityInfo.js │ ├── AnglesArtwork.js │ ├── DiscoverSection.js │ ├── HomeButton.js │ ├── LikeButton.js │ ├── PopularPanel.js │ ├── TravelHero.js │ ├── TravelHeroSearch.js │ └── svg │ │ ├── ActiveSvg.js │ │ ├── ArtisticSvg.js │ │ ├── DrinksSvg.js │ │ ├── FashionSvg.js │ │ ├── FoodSvg.js │ │ ├── HomeIconSvg.js │ │ ├── MusicSvg.js │ │ ├── NatureSvg.js │ │ ├── NightlifeSvg.js │ │ ├── PinSvg.js │ │ ├── ToursSvg.js │ │ └── WaterSvg.js │ ├── package.json │ ├── pages │ ├── dollars.js │ ├── index.js │ └── results.js │ ├── public │ ├── css │ │ ├── page.css │ │ ├── travel-results.css │ │ └── travel.css │ └── img │ │ └── travel │ │ ├── activity │ │ ├── authentic-tapas.jpg │ │ ├── authentic-tapas@2x.jpg │ │ ├── bake-traditional-sweet-bread.jpg │ │ ├── bake-traditional-sweet-bread@2x.jpg │ │ ├── beer-excursion-mexico-city.jpg │ │ ├── beer-excursion-mexico-city@2x.jpg │ │ ├── best-coffee-mexico.jpg │ │ ├── best-coffee-mexico@2x.jpg │ │ ├── bike-around-volcano.jpg │ │ ├── bike-around-volcano@2x.jpg │ │ ├── dinner-in-sky.jpg │ │ ├── dinner-in-sky@2x.jpg │ │ ├── discover-electronic-scene.jpg │ │ ├── discover-electronic-scene@2x.jpg │ │ ├── golfing-with-pro.jpg │ │ ├── golfing-with-pro@2x.jpg │ │ ├── kait-loggins-294474.jpg │ │ ├── kait-loggins-294474@2x.jpg │ │ ├── learn-photography.jpg │ │ ├── learn-photography@2x.jpg │ │ ├── mexican-meat-market.jpg │ │ ├── mexican-meat-market@2x.jpg │ │ ├── motorcycle-coast.jpg │ │ ├── motorcycle-coast@2x.jpg │ │ ├── national-museum-archeologist.jpg │ │ ├── national-museum-archeologist@2x.jpg │ │ ├── parque-zoologico.jpg │ │ ├── parque-zoologico@2x.jpg │ │ ├── roads-of-city.jpg │ │ ├── roads-of-city@2x.jpg │ │ ├── run-through-mexico.jpg │ │ ├── run-through-mexico@2x.jpg │ │ ├── sail-around-coast.jpg │ │ ├── sail-around-coast@2x.jpg │ │ ├── skateboard-around-city.jpg │ │ ├── skateboard-around-city@2x.jpg │ │ ├── surf-day.jpg │ │ ├── surf-day@2x.jpg │ │ ├── swim-with-dolphins.jpg │ │ ├── swim-with-dolphins@2x.jpg │ │ ├── top-fashion-instagram.jpg │ │ ├── top-fashion-instagram@2x.jpg │ │ ├── tour-beaches-cancun.jpg │ │ └── tour-beaches-cancun@2x.jpg │ │ ├── blogpost-thumbnail.jpg │ │ ├── city │ │ ├── barcelona.jpg │ │ ├── cancun.jpg │ │ ├── chicago.jpg │ │ ├── la-paz.jpg │ │ ├── mexico-city.jpg │ │ ├── new-york.jpg │ │ ├── oaxaca.jpg │ │ ├── paris.jpg │ │ ├── reykjavik.jpg │ │ ├── tijuana.jpg │ │ └── tokyo.jpg │ │ ├── hero-1-preview.jpg │ │ ├── hero-1.jpg │ │ ├── hero-2-preview.jpg │ │ ├── hero-2.jpg │ │ ├── hero-3-preview.jpg │ │ ├── hero-3.jpg │ │ └── icon │ │ ├── boat.svg │ │ ├── bus.svg │ │ ├── calendar.svg │ │ ├── caret-down-small.svg │ │ ├── checkmark-purple.png │ │ ├── checkmark.svg │ │ ├── cocktail.svg │ │ ├── cutlery.svg │ │ ├── filters.svg │ │ ├── guitar.svg │ │ ├── heart.svg │ │ ├── jacket.svg │ │ ├── logo.svg │ │ ├── map-pin-outline-gray.png │ │ ├── map-pin-outline.svg │ │ ├── map-pin-transparent.png │ │ ├── map-pin.svg │ │ ├── menu.svg │ │ ├── moon.svg │ │ ├── paintbrush.svg │ │ ├── pine.svg │ │ ├── plane-landing-transparent.png │ │ ├── plane-landing.svg │ │ ├── plane-taking-off-transparent.png │ │ ├── plane-taking-off.svg │ │ ├── run.svg │ │ ├── sad-face-gray.png │ │ ├── star-green.png │ │ ├── star-silver.png │ │ └── star.svg │ ├── server │ ├── search.js │ └── server.js │ └── templates │ ├── travel-results.amp.html │ └── travel.amp.html ├── tsconfig.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib/next-amp/dist 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | module.exports = { 18 | plugins: [ 19 | "html" 20 | ], 21 | parser: "@typescript-eslint/parser", // Specifies the ESLint parser 22 | extends: [ 23 | "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react 24 | "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin 25 | "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier 26 | "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. 27 | ], 28 | parserOptions: { 29 | ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features 30 | sourceType: "module", // Allows for the use of imports 31 | ecmaFeatures: { 32 | jsx: true // Allows for the parsing of JSX 33 | } 34 | }, 35 | rules: { 36 | // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs 37 | "react/prop-types": "off", 38 | "@typescript-eslint/no-use-before-define": "off", 39 | "react/jsx-key": "off", 40 | "react/react-in-jsx-scope": "off", 41 | "react/display-name": "off" 42 | }, 43 | settings: { 44 | react: { 45 | version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use 46 | } 47 | }, 48 | overrides: [ 49 | { 50 | files: [ 51 | '**/*.js', 52 | '**/*.jsx' 53 | ], 54 | rules: { 55 | // specifically for rules - default exports makes the tooling easier 56 | 'import/no-default-export': 'off', 57 | '@typescript-eslint/no-var-requires': 'off' 58 | } 59 | } 60 | ], 61 | }; 62 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | package-lock.json 4 | yarn.lock 5 | !/yarn.lock 6 | test/node_modules 7 | 8 | # logs & pids 9 | *.log 10 | pids 11 | 12 | # coverage 13 | .nyc_output 14 | coverage 15 | 16 | # test output 17 | test/**/out* 18 | test/**/next-env.d.ts 19 | .DS_Store 20 | 21 | # Editors 22 | **/.idea 23 | 24 | # example output 25 | examples/**/out 26 | 27 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "12" 4 | cache: 5 | directories: 6 | - node_modules # NPM packages 7 | - /home/travis/.local/bin 8 | install: 9 | - yarn 10 | script: 11 | - yarn test 12 | after_success: 13 | branches: 14 | only: 15 | - production 16 | - master 17 | - ampstart-2.0 18 | env: 19 | - CXX=g++-4.8 20 | addons: 21 | apt: 22 | sources: 23 | - ubuntu-toolchain-r-test 24 | packages: 25 | - g++-4.8 26 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.autoFixOnSave": true, 3 | "eslint.validate": [ 4 | "javascript", 5 | "javascriptreact", 6 | { "language": "typescript", "autoFix": true }, 7 | { "language": "typescriptreact", "autoFix": true } 8 | ], 9 | "editor.formatOnSave": true, 10 | "[javascript]": { 11 | "editor.formatOnSave": false 12 | }, 13 | "[javascriptreact]": { 14 | "editor.formatOnSave": false 15 | }, 16 | "[typescript]": { 17 | "editor.formatOnSave": false 18 | }, 19 | "[typescriptreact]": { 20 | "editor.formatOnSave": false 21 | }, 22 | "editor.codeActionsOnSave": { 23 | "source.fixAll.eslint": true 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | See https://github.com/ampproject/meta/blob/master/CODE_OF_CONDUCT.md 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to become a contributor and submit your own code 2 | 3 | ## Contributor License Agreements 4 | 5 | We'd love to accept your patches and doc suggestions! Before we can take them, we 6 | have to jump a couple of legal hurdles. 7 | 8 | Please fill out either the individual or corporate Contributor License Agreement 9 | (CLA). 10 | 11 | * If you are an individual writing original source code and you're sure you 12 | own the intellectual property, then you'll need to sign an [individual CLA] 13 | (https://developers.google.com/open-source/cla/individual). 14 | * If you work for a company that wants to allow you to contribute your work, 15 | then you'll need to sign a [corporate CLA] 16 | (https://developers.google.com/open-source/cla/corporate). 17 | 18 | Follow either of the two links above to access the appropriate CLA and 19 | instructions for how to sign and return it. Once we receive it, we'll be able to 20 | accept your pull requests. 21 | 22 | ## Contributing A Patch 23 | 24 | 1. Submit an issue describing your proposed change to the repo in question. 25 | 1. The repo owner will respond to your issue promptly. 26 | 1. If your proposed change is accepted, and you haven't already done so, sign a 27 | Contributor License Agreement (see details above). 28 | 1. Fork the desired repo, develop and test your code changes. 29 | 1. Ensure that your code adheres to the existing style in the sample to which 30 | you are contributing. Refer to the 31 | [Google Cloud Platform Samples Style Guide] 32 | (https://github.com/GoogleCloudPlatform/Template/wiki/style.html) for the 33 | recommended coding standards for this organization. 34 | 1. Ensure that your code has an appropriate set of unit tests which all pass. 35 | 1. Submit a pull request. 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2015, Google Inc. 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [AMP Start](https://ampstart.com/) ⚡ 2 | 3 | A collection of quick-start templates to build your AMP page quickly and easily. 4 | AMP Start is built on top of [Basscss](http://basscss.com/) a low-level CSS toolkit. 5 | 6 | ## Workspace Setup 7 | 8 | ### Installation 9 | 10 | 1. Install the latest [NodeJS LTS version](https://nodejs.org). 11 | 2. Install `yarn` ([instructions](https://yarnpkg.com/lang/en/docs/install/)) 12 | 3. In the repo directory, run `yarn` command to install the required npm packages. 13 | 14 | ## Supported browsers 15 | 16 | In general we support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari and Opera. We support desktop, phone, tablet and the web view version of these respective browsers. 17 | 18 | Beyond that, the core AMP library and builtin elements should aim for very wide browser support and we accept fixes for all browsers with market share greater than 1 percent. 19 | 20 | In particular, we try to maintain "it might not be perfect but isn't broken" - support for the Android 4.0 system browser and Chrome 28+ on phones. 21 | 22 | # Who makes AMP Start? 23 | 24 | AMP Start is made by the [AMP Project](https://www.ampproject.org/), and is licensed 25 | under the [Apache License, Version 2.0](LICENSE). 26 | 27 | ### [Code of conduct](CODE_OF_CONDUCT.md) 28 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | module.exports = function(api) { 18 | api.cache(true); 19 | 20 | const presets = ['next/babel', ['@babel/preset-typescript', {isTSX: true, allExtensions: true}]]; 21 | 22 | const plugins = []; 23 | 24 | return { 25 | presets, 26 | plugins, 27 | }; 28 | }; 29 | -------------------------------------------------------------------------------- /lib/next-amp-demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"] 3 | } 4 | -------------------------------------------------------------------------------- /lib/next-amp-demo/.gitignore: -------------------------------------------------------------------------------- 1 | .next 2 | -------------------------------------------------------------------------------- /lib/next-amp-demo/README.md: -------------------------------------------------------------------------------- 1 | # AMP Next.js Client Library - Demo & Test 2 | 3 | This is a sample project for using the AMP Next.js client library. 4 | -------------------------------------------------------------------------------- /lib/next-amp-demo/jest.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | module.exports = { 18 | moduleFileExtensions: ['ts', 'tsx', 'js'], 19 | testMatch: ['**/*.(test|spec).(js|jsx)'], 20 | coveragePathIgnorePatterns: ['/node_modules/'], 21 | setupFilesAfterEnv: ['/jest.setup.js'], 22 | }; 23 | -------------------------------------------------------------------------------- /lib/next-amp-demo/jest.setup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | const {configure} = require('enzyme'); 18 | const ReactSixteenAdapter = require('enzyme-adapter-react-16'); 19 | 20 | configure({adapter: new ReactSixteenAdapter()}); 21 | -------------------------------------------------------------------------------- /lib/next-amp-demo/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /lib/next-amp-demo/next.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | const path = require('path'); 18 | const withPlugins = require('next-compose-plugins'); 19 | const withCustomBabelConfig = require('next-plugin-custom-babel-config'); 20 | const withTranspileModules = require('next-plugin-transpile-modules'); 21 | 22 | function withCustomWebpack(config = {}) { 23 | const {webpack} = config; 24 | 25 | config.webpack = (config, ...rest) => { 26 | // Workaround for issue https://github.com/wellcometrust/next-plugin-transpile-modules/issues/11 27 | // TODO: upgrade next-plugin-transpile-modules when the issue is fixed 28 | // TODO: remove this workaround when next-plugin-transpile-modules is upgraded 29 | config.externals = config.externals || []; 30 | 31 | return webpack(config, ...rest); 32 | }; 33 | 34 | return config; 35 | } 36 | 37 | const plugins = [ 38 | [withTranspileModules, {transpileModules: ['@ampproject']}], 39 | [withCustomBabelConfig, {babelConfigFile: path.resolve('../../babel.config.js')}], 40 | [withCustomWebpack], 41 | ]; 42 | 43 | const config = {}; 44 | 45 | module.exports = withPlugins(plugins, config); 46 | -------------------------------------------------------------------------------- /lib/next-amp-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ampproject/toolbox-next-amp-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "next", 8 | "build": "next build", 9 | "test": "NODE_ENV=production jest", 10 | "test:snapshot": "SNAPSHOT=true test" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "@ampproject/toolbox-next-amp": "1.0.0", 17 | "@babel/preset-typescript": "7.7.7", 18 | "next": "9.1.6", 19 | "next-compose-plugins": "2.2.0", 20 | "next-plugin-custom-babel-config": "1.0.2", 21 | "next-plugin-transpile-modules": "2.0.0", 22 | "react": "16.12.0", 23 | "react-dom": "16.12.0" 24 | }, 25 | "devDependencies": { 26 | "@babel/core": "7.7.7", 27 | "@babel/preset-env": "7.7.7", 28 | "@types/enzyme": "g3.1.15", 29 | "@types/express": "4.17.2", 30 | "@types/jest": "g23.3.13", 31 | "@types/node": "12.12.21", 32 | "@types/node-fetch": "2.5.4", 33 | "@types/react": "16.9.16", 34 | "@types/react-dom": "16.9.4", 35 | "babel-jest": "24.9.0", 36 | "cheerio": "1.0.0-rc.3", 37 | "enzyme": "g3.8.0", 38 | "enzyme-adapter-react-16": "g1.7.1", 39 | "express": "g4.17.1", 40 | "glob": "7.1.6", 41 | "jest": "g23.6.0", 42 | "typescript": "3.7.3" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/components/AmpAnalytics.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from 'react'; 18 | import {AmpAnalytics} from '@ampproject/toolbox-next-amp'; 19 | 20 | export const config = {amp: true}; 21 | 22 | export default () => ( 23 | 24 | {{ 25 | vars: { 26 | /* eslint-disable-next-line @typescript-eslint/camelcase */ 27 | gtag_id: '', 28 | config: { 29 | '': {groups: 'default'}, 30 | }, 31 | }, 32 | }} 33 | 34 | ); 35 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/components/AmpAnimation.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from 'react'; 18 | import {AmpAnimation} from '@ampproject/toolbox-next-amp'; 19 | 20 | export const config = {amp: true}; 21 | 22 | export default () => ( 23 | <> 24 | 25 | {[ 26 | { 27 | selector: '.target-class', 28 | duration: '4s', 29 | delay: 'var(--delay, 100ms)', 30 | }, 31 | ]} 32 | 33 | 34 | {[ 35 | { 36 | selector: '.target-class', 37 | duration: '4s', 38 | delay: 'var(--delay, 100ms)', 39 | }, 40 | ]} 41 | 42 | 43 | ); 44 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/components/AmpDynamicCssClasses.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from 'react'; 18 | import {AmpDynamicCssClasses} from '@ampproject/toolbox-next-amp'; 19 | 20 | export const config = {amp: true}; 21 | 22 | export default () => ( 23 | <> 24 | 25 |
26 | Referrer: pinterest-com 27 |
28 |
29 | Referrer: google.com 30 |
31 |
32 | Referrer: twitter.com 33 |
34 | 41 | 42 | ); 43 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/components/AmpForm.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from 'react'; 18 | import {AmpForm} from '@ampproject/toolbox-next-amp'; 19 | export const config = {amp: true}; 20 | 21 | export default () => ( 22 | 23 | 24 | 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/components/AmpIframe.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import * as React from 'react'; 18 | import {AmpIframe, AmpImg} from '@ampproject/toolbox-next-amp'; 19 | 20 | export const config = {amp: true}; 21 | 22 | export default () => ( 23 | 34 | 39 | 40 | ); 41 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/components/AmpImg.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from 'react'; 18 | import {AmpImg} from '@ampproject/toolbox-next-amp'; 19 | 20 | export const config = {amp: true}; 21 | 22 | export default () => ( 23 | 30 | ); 31 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/components/AmpList.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from 'react'; 18 | import {AmpList, AmpMustache} from '@ampproject/toolbox-next-amp'; 19 | 20 | export const config = {amp: true}; 21 | 22 | export default () => ( 23 | 29 | 30 |
31 | {`{{ title }}`} 32 |
33 | 34 | 35 | ); 36 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/components/AmpMustache.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import {NextPage} from 'next'; 18 | import * as React from 'react'; 19 | import {AmpMustache, AmpList, AmpIncludeCustomElement} from '@ampproject/toolbox-next-amp'; 20 | 21 | export const config = {amp: true}; 22 | 23 | const initialItems = { 24 | context: { 25 | items: [ 26 | { 27 | name: 'amp.dev', 28 | url: 'https://amp.dev', 29 | }, 30 | { 31 | name: 'Next.js', 32 | url: 'https://nextjs.org', 33 | }, 34 | ], 35 | }, 36 | }; 37 | 38 | const AmpMustacheSample: NextPage<{}> = () => { 39 | const {clientSideTemplate, serverSideTemplate} = AmpMustache.universal( 40 | 41 | {`{{#items}}`} 42 |
43 | {`{{name}}`} 44 |
45 | {`{{/items}}`} 46 | , 47 | initialItems 48 | ); 49 | 50 | return ( 51 | <> 52 | 53 | 61 | {clientSideTemplate} 62 | 63 |
{serverSideTemplate}
64 | 82 | 83 | ); 84 | }; 85 | 86 | export default AmpMustacheSample; 87 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/components/AmpScript.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from 'react'; 18 | import {AmpScript} from '@ampproject/toolbox-next-amp'; 19 | 20 | export const config = {amp: true}; 21 | 22 | const Page = props => ( 23 | <> 24 |

External script

25 | 30 | 31 | 32 | 33 |

Inline script

34 | 45 | 46 | 47 | 48 | ); 49 | 50 | // amp-script requires absolute URLs, so we create a property `host` which we can use to calculate the script URL. 51 | Page.getInitialProps = async ({req}) => { 52 | // WARNING: This is a generally unsafe application unless you're deploying to a managed platform like ZEIT Now. 53 | // Be sure your load balancer is configured to not allow spoofed host headers. 54 | return {host: `${getProtocol(req)}://${req.headers.host}`}; 55 | }; 56 | 57 | function getProtocol(req) { 58 | if (req.connection.encrypted) { 59 | return 'https'; 60 | } 61 | const forwardedProto = req.headers['x-forwarded-proto']; 62 | if (forwardedProto) { 63 | return forwardedProto.split(/\s*,\s*/)[0]; 64 | } 65 | return 'http'; 66 | } 67 | 68 | export default Page; 69 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/components/AmpState.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from 'react'; 18 | import {AmpState} from '@ampproject/toolbox-next-amp'; 19 | 20 | export const config = {amp: true}; 21 | 22 | export default () => ( 23 | 24 | {{ 25 | message: 'hello world', 26 | }} 27 | 28 | ); 29 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import {NextPage} from 'next'; 18 | import * as React from 'react'; 19 | 20 | export const config = {amp: true}; 21 | 22 | type Sample = { 23 | path: string; 24 | name: string; 25 | }; 26 | 27 | const Home: NextPage<{samples: Sample[]}> = ({samples}) => { 28 | return ( 29 | <> 30 |

Hello Next.js!

31 |
    32 | {samples.map(s => ( 33 |
  • 34 | {s.name} 35 |
    • 36 | ))} 37 |
38 | 39 | ); 40 | }; 41 | 42 | Home.getInitialProps = async ({req}) => { 43 | return {samples: []}; 44 | }; 45 | 46 | export default Home; 47 | -------------------------------------------------------------------------------- /lib/next-amp-demo/pages/types/amp-img.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from 'react'; 18 | 19 | export const config = {amp: true}; 20 | 21 | export default () => ( 22 | 28 | ); 29 | -------------------------------------------------------------------------------- /lib/next-amp-demo/server.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** 18 | * @file a simple express server for serving the Next app for testing. 19 | */ 20 | const next = require('next'); 21 | const express = require('express'); 22 | 23 | const dev = process.env.NODE_ENV !== 'production'; 24 | const port = Number.parseInt(process.env.PORT) || dev ? 3000 : 3001; 25 | 26 | const server = express(); 27 | const app = next({dev, dir: __dirname}); 28 | 29 | server.get('*', (req, res) => app.getRequestHandler()(req, res)); 30 | 31 | module.exports = app 32 | .prepare() 33 | .then(() => server.listen(port, () => console.log(`Listening on port ${port}`))) 34 | .catch(e => console.log('error', e)); 35 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/EndToEnd.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 The AMP HTML Authors. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS-IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /* eslint-env jest */ 18 | 19 | const serverPromise = require('../server'); 20 | const fetch = require('node-fetch'); 21 | const {writeFileSync, mkdirSync, readFileSync} = require('fs'); 22 | const {dirname, join, resolve} = require('path'); 23 | const prettier = require('prettier'); 24 | const cheerio = require('cheerio'); 25 | 26 | const glob = require('glob').sync; 27 | 28 | const PAGES_DIR = resolve(__dirname, '../pages/'); 29 | const OUT_DIR = join(__dirname, 'out'); 30 | const OUT_EXT = '.out'; 31 | const WRITE_SNAPSHOT = process.env.SNAPSHOT; 32 | if (WRITE_SNAPSHOT) { 33 | console.log('[INFO] Creating new snapshot'); 34 | } 35 | 36 | // options is optional 37 | const pagesFiles = glob(PAGES_DIR + '/**/*.tsx').map(f => 38 | f.replace(PAGES_DIR, '').replace('.tsx', '') 39 | ); 40 | 41 | let httpServer; 42 | 43 | beforeAll(async () => { 44 | httpServer = await serverPromise; 45 | }); 46 | 47 | test.each(pagesFiles)('%s', async pageFile => { 48 | const res = await fetch(`http://localhost:${httpServer.address().port}${pageFile}`); 49 | const actual = normalize(await res.text()); 50 | 51 | if (WRITE_SNAPSHOT) { 52 | writeSnapshot(pageFile, actual); 53 | } else { 54 | const snapshot = readSnapshot(pageFile); 55 | expect(actual).toBe(snapshot); 56 | } 57 | }); 58 | 59 | afterAll(() => httpServer.close()); 60 | 61 | function normalize(html) { 62 | // remove v0.css and boilerplate css to make divs more readable 63 | const $ = cheerio.load(html); 64 | const head = $('head'); 65 | ['style[amp-runtime]', 'style[amp-boilerplate]'].forEach(selector => { 66 | head.find(selector).remove(); 67 | }); 68 | html = $.html(); 69 | html = prettier.format(html, {parser: 'html'}); 70 | return html; 71 | } 72 | 73 | function writeSnapshot(path, snapshot) { 74 | const outFilePath = createOutFilePathFrom(path); 75 | mkdirSync(dirname(outFilePath), {recursive: true}); 76 | writeFileSync(outFilePath, snapshot, 'utf-8'); 77 | } 78 | function readSnapshot(path) { 79 | const outFilePath = createOutFilePathFrom(path); 80 | try { 81 | return readFileSync(outFilePath, 'utf-8'); 82 | } catch (e) { 83 | // no snapshot yet, return an empty string to show a diff after the test run 84 | return ''; 85 | } 86 | } 87 | 88 | function createOutFilePathFrom(path) { 89 | return join(OUT_DIR, path + OUT_EXT); 90 | } 91 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/components/AmpAnalytics.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/components/AmpAnimation.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/components/AmpDynamicCssClasses.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 17 | 24 | 25 | 35 | 36 | 37 | 38 |
39 | Referrer: pinterest-com 40 |
41 |
42 | Referrer: google.com 43 |
44 |
45 | Referrer: twitter.com 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/components/AmpForm.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/components/AmpIframe.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/components/AmpImg.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/components/AmpList.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 17 | 22 | 23 | 24 | 25 | 26 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/components/AmpMustache.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 17 | 22 | 27 | 28 | 29 | 30 | 31 | 47 |
48 |
49 | 50 | 51 |
52 |
53 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/components/AmpScript.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 18 | 19 | 20 | 21 |

External script

22 | 29 |

Inline script

30 | 39 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/components/AmpState.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/index.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

Hello Next.js!

18 |
    19 | 20 | 21 | -------------------------------------------------------------------------------- /lib/next-amp-demo/test/out/types/amp-img.out: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /lib/next-amp-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": "../", 5 | "rootDir": ".", 6 | "lib": ["dom", "es7"], 7 | "skipLibCheck": true, 8 | "strict": false, 9 | "forceConsistentCasingInFileNames": true, 10 | "noEmit": true, 11 | "esModuleInterop": true, 12 | "target": "esnext", 13 | "module": "esnext", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "jsx": "preserve" 17 | }, 18 | "exclude": ["node_modules", "test"], 19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "test/Component.test.js"], 20 | "references": [ 21 | { 22 | "path": "../next-amp" 23 | } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /lib/next-amp/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist 3 | .next 4 | src-gen 5 | -------------------------------------------------------------------------------- /lib/next-amp/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | See https://github.com/ampproject/meta/blob/master/CODE_OF_CONDUCT.md 2 | -------------------------------------------------------------------------------- /lib/next-amp/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to become a contributor and submit your own code 2 | 3 | ## Contributor License Agreements 4 | 5 | We'd love to accept your patches and doc suggestions! Before we can take them, we 6 | have to jump a couple of legal hurdles. 7 | 8 | Please fill out either the individual or corporate Contributor License Agreement 9 | (CLA). 10 | 11 | - If you are an individual writing original source code and you're sure you 12 | own the intellectual property, then you'll need to sign an [individual CLA](https://developers.google.com/open-source/cla/individual). 13 | - If you work for a company that wants to allow you to contribute your work, 14 | then you'll need to sign a [corporate CLA](https://developers.google.com/open-source/cla/corporate). 15 | 16 | Follow either of the two links above to access the appropriate CLA and 17 | instructions for how to sign and return it. Once we receive it, we'll be able to 18 | accept your pull requests. 19 | 20 | ## Contributing A Patch 21 | 22 | 1. Submit an issue describing your proposed change to the repo in question. 23 | 1. The repo owner will respond to your issue promptly. 24 | 1. If your proposed change is accepted, and you haven't already done so, sign a 25 | Contributor License Agreement (see details above). 26 | 1. Fork the desired repo, develop and test your code changes. 27 | 1. Ensure that your code adheres to the existing style in the sample to which 28 | you are contributing. Refer to the 29 | [Google Cloud Platform Samples Style Guide](https://github.com/GoogleCloudPlatform/Template/wiki/style.html) for the 30 | recommended coding standards for this organization. 31 | 1. Ensure that your code has an appropriate set of unit tests which all pass. 32 | 1. Submit a pull request. 33 | -------------------------------------------------------------------------------- /lib/next-amp/README.md: -------------------------------------------------------------------------------- 1 | # AMP Next.js Library 2 | 3 | Simplify building AMP pages in Next.js. 4 | 5 | # High-level APIs 6 | 7 | The high-level APIs provide wrapper components for all AMP extensions, which: 8 | 9 | - Take care of **always** importing the necessary AMP extensions. Developers should not have to worry about importing an extension. 10 | - Implement JSX specific workarounds (e.g. for rendering JSON in script tags). 11 | - Reduce syntactic noise (e.g. `` instead of `