ampify.js

'use strict';

const recursive = require('recursive-readdir');
const fs = require('fs');
const path = require('path');
const ampify = require('ampifyjs');

const GA_TRACKING_ID = 'UA-121350932-1';
const sass = require('node-sass');

function ensureDirectoryExistence(filePath) {
  var dirname = path.dirname(filePath);
  if (fs.existsSync(dirname)) {
    return true;
  }
  ensureDirectoryExistence(dirname);
  fs.mkdirSync(dirname);
}

//  The director that we will be creating an amp verion of.
//  Creating an amp version ultimately means creating an 'amp'
//  directory in that with amp versions of each file from the source.
const inputDir = 'public';

// This is where we will populate the last of files to convert
let filesToConvert = [];

// Get a list of all the files in the public directory. But ignore the amp dir
recursive(inputDir, [], (err, files) => {
  // Files is an array of file paths. Lets just get the html files
  for (let file of files) {
    // Only select files that end in '.html'.
    if (file.endsWith('.html')) {
      filesToConvert.push(file);
    }
  }

  // For each file, modify it to add the amp page reference and then create the amp
  // version
  for (let fileToConvert of filesToConvert) {
    const urlPath = fileToConvert.replace(inputDir, 'public/amp'); // No inputDir in the URL
    const originalPath = fileToConvert.replace(inputDir, 'https://yeisondaza.com').replace("/index.html", '/');
    const contents = fs.readFileSync(fileToConvert, 'utf8');
    ensureDirectoryExistence(urlPath)
    
    // Add the amp url link to the top of the page then Save the file
    fs.writeFileSync(urlPath, ampify(contents, originalPath, ($) => {
      /**************************************************************************************
       * Replace certain elements on the page for AMP specifically
       *************************************************************************************/
      $('amp-iframe').attr('sandbox', 'allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox');
      $('amp-iframe').attr('layout', 'responsive');
      $('amp-video').attr('layout', 'responsive');
      $('amp-video').attr('height', '270');
      $('amp-video').attr('width', '480');
      $('amp-img').attr('layout', 'responsive');
      $('amp-img').attr('width', '480');
      $('amp-img').attr('height', '270');

      // Google Analytics
      $('head').append('<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>');
      $('amp-analytics').remove();
      $('body').prepend('<amp-analytics type="googleanalytics" id="analytics1">\
        <script type="application/json">{"vars": {"account": "'+ GA_TRACKING_ID + '"},"triggers": {"trackPageview": {"on": "visible","request": "pageview"}}}</script>\
        </amp-analytics>');

      /**************************************************************************************
       * STYLES
       *************************************************************************************/
      // We are using Sass so we need to get each of the styles we need for the amp version of the pages
      // and compile it to minified sass.
      let css = '';
      css = sass.renderSync({ file: 'css/amponly.scss', outputStyle: 'compressed' }).css.toString() +
        sass.renderSync({ file: 'node_modules/prismjs/themes/prism-solarizedlight.css', outputStyle: 'compressed' }).css.toString();

      // Remove all important tags since they are not permitted in amp styles
      css = css.replace(/!important/g, '');

      // Add our new style to the head as required my amp
      $('head').prepend(`<style amp-custom>${css}</style>`);
    }), 'utf8');
  }
  console.log('The site is now AMP ready');
});