Ampstart 2.0 (#891)

* AMPStart 2.0: Initial commit

* create new layout

* clean up

* support universal templates

* fix travis

* unignore build dir

Author: sebastianbenz

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+lib/next-amp/dist

.eslintrc.js

@@ -0,0 +1,61 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+  plugins: [
+    "html"
+  ],
+  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+  extends: [
+    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    "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.
+  ],
+  parserOptions: {
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: "module", // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true // Allows for the parsing of JSX
+    }
+  },
+  rules: {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    "react/prop-types": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "react/jsx-key": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/display-name": "off"
+  },
+  settings: {
+    react: {
+      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
+    }
+  },
+  overrides: [
+    {
+      files: [
+        '**/*.js',
+        '**/*.jsx'
+      ],
+      rules: {
+        // specifically for rules - default exports makes the tooling easier
+        'import/no-default-export': 'off',
+        '@typescript-eslint/no-var-requires': 'off'
+      }
+    }
+  ],
+};

.firebaserc

@@ -1,11 +1,26 @@
-.DS_Store
-.g4ignore
-build
-dist
+# dependencies
 node_modules
-npm-debug.log
-.tm_properties
-.vscode
-.archive
-.idea
-**/.tmp
+package-lock.json
+yarn.lock
+!/yarn.lock
+test/node_modules
+
+# logs & pids
+*.log
+pids
+
+# coverage
+.nyc_output
+coverage
+
+# test output
+test/**/out*
+test/**/next-env.d.ts
+.DS_Store
+
+# Editors
+**/.idea
+
+# example output
+examples/**/out
+

.gitignore

@@ -1,25 +1,20 @@
 language: node_js
 node_js:
-- "7"
+- "12"
 cache:
   directories:
   - node_modules # NPM packages
-  - $(npm config get prefix)/bin/gulp
-  - $(npm config get prefix)/bin/firebase
   - /home/travis/.local/bin
 install:
-- npm install -g gulp
-- npm install -g firebase-tools
-- npm install
+- yarn
 script:
-- npm run build
+- yarn test
 after_success:
-- 'if [ "${TRAVIS_BRANCH}" = "production" ]; then firebase deploy --non-interactive --token "$FIREBASE_TOKEN" --project ampstart-8dc54; fi'
-- 'if [ "${TRAVIS_BRANCH}" = "master" ]; then firebase deploy --non-interactive --token "$FIREBASE_TOKEN" --project ampstart-staging; fi'
 branches:
   only:
   - production
   - master
+  - ampstart-2.0
 env:
   - CXX=g++-4.8
 addons:

.travis.yml

@@ -0,0 +1,25 @@
+{
+  "eslint.autoFixOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    { "language": "typescript", "autoFix": true },
+    { "language": "typescriptreact", "autoFix": true }
+  ],
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.formatOnSave": false
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "[typescript]": {
+    "editor.formatOnSave": false
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

.vscode/settings.json

@@ -3,47 +3,13 @@
 A collection of quick-start templates to build your AMP page quickly and easily.
 AMP Start is built on top of [Basscss](http://basscss.com/) a low-level CSS toolkit.
 
-
 ## Workspace Setup
 
 ### Installation
 
-1. Install [NodeJS](https://nodejs.org).
-2. In the repo directory, run `npm i` command to install the required npm packages.
-
-### Build & Test
-| Command                                                                 | Description                                                           |
-| ----------------------------------------------------------------------- | --------------------------------------------------------------------- |
-| `npm run build`<sup>[[1]](#footnote-1)</sup>                            | Builds the AMP library.                                               |
-| `npm run clean`                                                         | Removes build output.                                                 |
-| `npm run www`                                                           | Recompile www to build directory.                                     |
-| `npm run highlight`                                                     | Build HTML for code highlighting.                                     |
-| `npm run watch`<sup>[[1]](#footnote-1)</sup>                            | Watches for changes in files, re-builds development files.            |
-| `npm run serve`                                                         | Serves content in repo dist/ dir over http://localhost:8000/. Also, watches/livereloads for file changes. Port number can be changed with `-- --port="PORT_NUMBER_HERE"` |
-| `npm run configurator`                                                  | Serves only the amp start configurator livereload/development server at http://localhost:8080/. Port number can be changed with `-- --port="PORT_NUMBER_HERE"` |
-
-<a id="footnote-1">[1]</a> On Windows, this command must be run as administrator.
-
-### Deploying AMP on Cloud for testing on devices
-
-For deploying and testing local AMP builds on [Firebase](https://firebase.google.com), please follow the steps outlined in this [page](https://firebase.google.com/docs/hosting/deploying). Note that the firebase configuration is already created in the project.
-
-### Repository Layout
-| Directory                                                               | Description                                                           |
-| ----------------------------------------------------------------------- | --------------------------------------------------------------------- |
-|  components/      | CSS and HTML snippets (Mustache) for AMP Start components. |
-|  build/           | (generated) intermediate generated files. |
-|  css/             | CSS assets. |
-|  css/ampstart-base| CSS Base AMP Start elements like buttons. |
-|  css/templates    | CSS for AMP Start templates. |
-|  css/www          | CSS for www.ampstart.com. |
-|  dist/            | (generated). |
-|  hl-partials/     | Partials that help generate copy pastable html for www.ampstart.com/components.html. |
-|  img/             | Image assets. |
-|  tasks/           | Gulp tasks. |
-|  templates/       | AMP Start template HTML. |
-|  www/             | www.ampstart.com |
-
+1. Install the latest [NodeJS LTS version](https://nodejs.org).
+2. Install `yarn` ([instructions](https://yarnpkg.com/lang/en/docs/install/))
+3. In the repo directory, run `yarn` command to install the required npm packages.
 
 ## Supported browsers
 
@@ -53,20 +19,9 @@ Beyond that, the core AMP library and builtin elements should aim for very wide
 
 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.
 
-## Notes
-### amp-mustache
-Since ampstart uses the Mustache language to build files, it can conflict with the amp-mustache template. To fix this, use <% instead of {{:
-```
-  <template type="amp-mustache">
-      <%title%>
-      <amp-img src="<%imageUrl%>" width="50" height="50"></amp-img>
-  </template>
-```
-
 # Who makes AMP Start?
 
 AMP Start is made by the [AMP Project](https://www.ampproject.org/), and is licensed
 under the [Apache License, Version 2.0](LICENSE).
 
-
 ### [Code of conduct](CODE_OF_CONDUCT.md)

README.md

@@ -1,5 +1,5 @@
 /**
- * Copyright 2017 The AMP Start Authors. All Rights Reserved.
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,11 +14,15 @@
  * limitations under the License.
  */
 
-:root {
-  --space-5: 2.5rem; /* 40px */
-  --space-6: 3.5rem; /* 56px */
-  --space-7: 5rem; /* 80px */
+module.exports = function(api) {
+  api.cache(true);
 
-  --line-height-5: 2.5rem;
-  --line-height-6: 3.5rem;
-}
+  const presets = ['next/babel', ['@babel/preset-typescript', {isTSX: true, allExtensions: true}]];
+
+  const plugins = [];
+
+  return {
+    presets,
+    plugins,
+  };
+};