migrate boilerplate generator

getzaymo · Jan 30, 2019 · 0dbd041 · 0dbd041
1 parent 12580ef
commit 0dbd041
Show file tree

Hide file tree

Showing 49 changed files with 1,791 additions and 5,327 deletions.
diff --git a/boilerplate/.gitignore b/boilerplate/.gitignore
@@ -0,0 +1,2 @@
+dist
+
diff --git a/boilerplate/backend/index.js b/boilerplate/backend/index.js
@@ -0,0 +1,27 @@
+/**
+* Copyright 2019 The AMPHTML Authors
+*
+* 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.
+*/
+
+const path = require('path');
+const express = require('express');
+// eslint-disable-next-line new-cap
+const playground = express.Router();
+
+playground.use(express.static(
+    path.join(__dirname, '../dist'),
+    {extensions: ['html']},
+));
+
+module.exports = playground;
diff --git a/boilerplate/build.js b/boilerplate/build.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2018 Google Inc. 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.
+ */
+
+'use strict';
+
+const ampOptimizer = require('amp-toolbox-optimizer');
+const runtimeVersion = require('amp-toolbox-runtime-version');
+const path = require('path');
+
+const io = require('./lib/io');
+const templates = require('./lib/templates');
+
+const DIST_DIR = 'dist';
+const AMP_PATH = 'amp';
+const INPUT_FILE = 'templates/index.html';
+
+const generatorTemplate = io.readFile(INPUT_FILE);
+const config = initConfig();
+const generatorPage = templates.render(generatorTemplate, config);
+generateOptimizedAmpFiles(generatorPage);
+
+function initConfig() {
+  const config = {
+    categories: require('./data/categories.json'),
+    formats: require('./data/formats.json'),
+    templates: templates.find('./templates/files'),
+    highlightTheme: io.readFile(path.join(__dirname, '../node_modules/highlight.js/styles/monokai.css')),
+  };
+  // assign default template
+  let defaultTemplate;
+  config.formats.forEach(format => {
+    format.template = config.templates[format.id];
+    if (format.default) {
+      defaultTemplate = format.template;
+    }
+  });
+  // server-side render initial boilerplate code
+  config.initialCode = templates.render(defaultTemplate, {});
+  return config;
+}
+
+async function generateOptimizedAmpFiles(output) {
+  const optimized = await optimizeAmp(output);
+  io.writeFile(DIST_DIR, 'index.html', optimized);
+  io.writeFile(DIST_DIR, AMP_PATH, 'index.html', output);
+}
+
+async function optimizeAmp(html) {
+  const ampRuntimeVersion = await runtimeVersion.currentVersion();
+  return await ampOptimizer.transformHtml(html, {
+    ampUrl: './' + AMP_PATH,
+    ampRuntimeVersion,
+  });
+}
diff --git a/boilerplate/data/categories.json b/boilerplate/data/categories.json
@@ -0,0 +1,184 @@
+[
+  {
+    "label": "PWA",
+    "formats": [ "websites"],
+    "checkbox": true,
+    "options": [
+      {
+        "id": "manifest",
+        "label": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/Manifest\">Web App Manifest</a>",
+        "description": "Add a <a href=\"https://developers.google.com/web/fundamentals/web-app-manifest/\">web app manifest</a>.",
+        "values": [
+          {
+            "key": "manifestPath",
+            "label": "Manifest Path",
+            "value": "/manifest.json"
+          }
+        ],
+        "default": false
+      },
+      {
+        "id": "serviceworker",
+        "label": "<a href=\"https://www.ampproject.org/docs/reference/components/amp-install-serviceworker\">amp-install-serviceworker</a>",
+        "default": false,
+        "values": [
+          {
+            "key": "swPath",
+            "label": "Path",
+            "value": "/"
+          },
+          {
+            "key": "js",
+            "label": "JS Filename",
+            "value": "sw.js"
+          },
+          {
+            "key": "iframe",
+            "label": "Iframe Filename",
+            "value": "install-sw.html"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "label": "Media",
+    "formats": [ "websites", "stories"],
+    "checkbox": true,
+    "options": [
+      {
+        "id": "heroImage",
+        "label": "Hero image",
+        "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content\">Preload</a> an important image in the first viewport to improve page load time.",
+        "values": [
+          {
+            "key": "heroImageSrc",
+            "label": "Image URL",
+            "value": "hero-img.jpg"
+          }
+        ],
+        "default": false
+      },
+      {
+        "id": "heroVideo",
+        "label": "Hero video",
+        "component": "ampVideo",
+        "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content\">Preload</a> a hero video's post image in the first viewport to improve page load time.",
+        "values": [
+          {
+            "key": "heroVideoPoster",
+            "label": "Poster URL",
+            "value": "poster.jpg"
+          }
+        ],
+        "default": false
+      }
+    ]
+  },
+  {
+    "label": "Fonts",
+    "formats": [ "websites", "stories", "ads"],
+    "checkbox": true,
+    "options": [
+      {
+        "id": "googleFonts", 
+        "formats": [ "websites", "stories", "ads"],
+        "label": "Google Fonts",
+        "values": [
+          {
+            "key": "fonts",
+            "label": "Font(s)",
+            "value": "Montserrat"
+          }
+        ],
+        "default": false
+      }
+    ]
+  },
+  {
+    "label": "Analytics",
+    "formats": [ "websites", "stories", "ads"],
+    "checkbox": true,
+    "options": [
+      {
+        "id": "adobeAnalytics",
+        "label": "Adobe Analytics",
+        "component": "ampAnalytics",
+        "default": false,
+        "values": [
+          {
+            "key": "trackingServer",
+            "label": "Tracking Server",
+            "value": "metrics.example.com"
+          },
+          {
+            "key": "reportSuiteID",
+            "label": "Report Suite ID",
+            "value": "reportSuiteID"
+          }
+        ]
+      },
+      {
+        "id": "googleAnalytics",
+        "label": "Google Analytics",
+        "component": "ampAnalytics",
+        "default": false,
+        "values": [
+          {
+            "key": "trackingId",
+            "label": "Tracking Id",
+            "value": "UA-XXXXX-Y"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "label": "Structured Data",
+    "categoryId": "structured-data",
+    "formats": [ "websites"],
+    "radio": "true",
+    "help": "Provide information about your page and classify the page content using <a href=\"https://developers.google.com/search/docs/guides/intro-structured-data\">structured data</a>.",
+    "options": [
+      {
+        "id": "jsonWebpage",
+        "label": "<a href=\"https://schema.org/WebPage\">Webpage</a>",
+        "default": false
+      },
+      {
+        "id": "jsonNewsArticle",
+        "label": "<a href=\"https://developers.google.com/search/docs/data-types/article#type_definitions\">Article</a>",
+        "default": false
+      },
+      {
+        "id": "jsonVideo",
+        "label": "<a href=\"https://developers.google.com/search/docs/data-types/video\">Video</a>",
+        "default": false
+      },
+      {
+        "id": "jsonRecipe",
+        "label": "<a href=\"https://developers.google.com/search/docs/data-types/recipe\">Recipe</a>",
+        "default": false
+      }
+    ]
+  },
+  {
+    "id": "render-delaying-extensions",
+    "formats": [ "websites", "stories", "ads"],
+    "label": "Render-delaying Extensions",
+    "checkbox": true,
+    "help": "<a href=\"https://github.com/ampproject/amphtml/blob/7d307ab8a12e4d58360d430b2d61327e39b4846b/src/render-delaying-services.js\">Render-delaying extensions</a> affect the static layout of the page. Hence, the AMP runtime must wait until these are downloaded, before it can start rendering the page to avoid annoying page jumps. To improve page load time, it's best to download these extensions with a higher priority using a <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content\">preload directive</a>.",
+    "options": [
+      {
+        "id": "ampDynamicCss",
+        "label": "<a href=\"https://www.ampproject.org/docs/reference/components/amp-dynamic-css-classes\">amp-dynamic-css-classes</a>",
+        "default": false
+      },
+      {
+        "id": "ampExperiment",
+        "label": "<a href=\"https://www.ampproject.org/docs/reference/components/amp-experiment\">amp-experiment</a>",
+        "default": false
+      }
+    ]
+  }
+]
diff --git a/boilerplate/data/formats.json b/boilerplate/data/formats.json
@@ -0,0 +1,19 @@
+[
+  {
+    "id": "websites",
+    "name": "Websites",
+    "default": true
+  },
+  {
+    "id": "stories",
+    "name": "Stories"
+  },
+  {
+    "id": "email",
+    "name": "Email"
+  },
+  {
+    "id": "ads",
+    "name": "Ads"
+  }
+]
diff --git a/boilerplate/lib/io.js b/boilerplate/lib/io.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2016 Google Inc. 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.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+function listFiles(currentDirPath, result = [], recursive = false) {
+  fs.readdirSync(currentDirPath).forEach(name => {
+    const filePath = path.join(currentDirPath, name);
+    const stat = fs.statSync(filePath);
+    if (stat.isFile() && !path.basename(filePath).startsWith('.')) {
+      result.push(filePath);
+    } else if (stat.isDirectory() && recursive) {
+      listFiles(filePath, result, true);
+    }
+  });
+  return result;
+}
+
+function writeFile() {
+  if (arguments.length < 2) {
+    throw new Error('expect path segments followed by content');
+  }
+  const filePath = Array.prototype.slice.call(arguments, 0, -1).join(path.sep);
+  const content = arguments[arguments.length - 1];
+  mkdir(path.dirname(filePath));
+  fs.writeFileSync(filePath, content, 'utf-8');
+}
+
+function readFile(filePath) {
+  return fs.readFileSync(filePath, 'utf-8');
+}
+
+function mkdir(dirPath) {
+  try {
+    fs.mkdirSync(dirPath);
+  } catch (err) {
+    if (err.code !== 'EEXIST') {
+      throw err;
+    }
+  }
+}
+
+function fileExists(filePath) {
+  return fs.existsSync(filePath);
+}
+
+module.exports.listFiles = listFiles;
+module.exports.writeFile = writeFile;
+module.exports.readFile = readFile;
+module.exports.mkdir = mkdir;
+module.exports.fileExists = fileExists;