Issue 6210 - Implement Subscription (Double-opt-in) template for newsletter

gulpfile.js

 /*!
- * This file is part of adblockplus.org.

[juliandoucette, 2018/01/04 02:34:22]

This is actually part of eyeomail.com?

[ire, 2018/01/04 11:14:41]

Done.

+ * This file is part of eyeomail.com.
  * Copyright (C) 2017-present eyeo GmbH
  *
- * adblockplus.org is free software: you can redistribute it and/or modify
+ * eyeomail.com is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
- * adblockplus.org is distributed in the hope that it will be useful,
+ * eyeomail.com is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
- * along with adblockplus.org.  If not, see <http://www.gnu.org/licenses/>.
+ * along with eyeomail.com.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 const gulp = require("gulp");
 const gutil = require("gulp-util");
 const rename = require("gulp-rename");
 const sass = require("gulp-sass");
 const postcss = require("gulp-postcss");
 const scss = require("postcss-scss");
 const autoprefixer = require("autoprefixer");
 const replace = require("replace");
-const fs = require('fs');
+const fs = require("fs");
+const readFilePromise = require("fs-readfile-promise");
 
 /******************************************************************************
  * CSS
  ******************************************************************************/
 
 gulp.task("compileCss", function() {
-  return gulp.src("./scss/main.scss")
+  return gulp.src("./src/scss/main.scss")
     .pipe(postcss([autoprefixer()], {syntax: scss}).on("error", gutil.log))
     .pipe(sass({outputStyle: "compact"}).on("error", gutil.log))

[juliandoucette, 2018/01/04 02:34:19]

I don't think we should minify without source maps (which I am assuming that we
will not include inline because that would kindof defeat the purpose of
minifying in the first place / there is not a lot of css).

[ire, 2018/01/04 11:14:41]

This isn't minifying?

-    .pipe(gulp.dest("./css"));
+    .pipe(gulp.dest("./dist"));
 });
 
-gulp.task("inlineCss", function() {
-  return fs.readFile('./css/main.css', 'utf8', function (err, styles) {

[juliandoucette, 2018/01/04 02:34:22]

NIT: single quotes.

[ire, 2018/01/04 11:14:40]

Done.

+gulp.task("inlineCss", ["compileCss", "moveTemplates"], function() {
+  return fs.readFile("./dist/main.css", "utf8", function (err, styles) {
     if (err) throw err;
 
     const replacement = `<!-- styles:start -->

[juliandoucette, 2018/01/04 02:34:23]

NIT: Why not shorten this e.g. `<style>${styles}</style>` and place it below?

[ire, 2018/01/04 11:14:41]

I think it looks better when the styles start on their own line. Like:

```
<style>
  // styles here
</style>
```

This is consistent with how we nest other HTML elements

 <style>
 ${styles}
 </style>
 <!-- styles:end -->`;
 
     replace({
       regex: /<!-- styles:start -->([\s\S]*?)<!-- styles:end -->/,

[juliandoucette, 2018/01/04 02:34:23]

NIT: Why not shorten this? e.g. `<!-- styles /-->`

[ire, 2018/01/04 11:14:40]

This is "sort of" (in mega quotes) a convention for autogenerated inlined
content in my experience.

Also, I prefer a different format to make it clear that this is injected
content. 

       replacement: replacement,
-      paths: ['./index.html', 'backclick.html'],

[juliandoucette, 2018/01/04 02:34:22]

NIT: Can't we *just* do this to backclick.html?

[ire, 2018/01/04 11:14:42]

I was keeping the other file around so that we can test the HTML/CSS without
needing backclick, but we probably don't need that anymore. Removed.

+      paths: ["dist/signup.html"],
       recursive: true,

[juliandoucette, 2018/01/04 02:34:21]

NIT: I don't think recursive or silent are necessary for one replacement.

[ire, 2018/01/04 11:14:40]

I just copied the default example here. Is there a reason to *not* use these
options?

       silent: true,
     });
   });
 });
 
-gulp.task("css", ["compileCss", "inlineCss"]);
+gulp.task("css", ["inlineCss"]);
+
+/******************************************************************************
+ * Template
+ ******************************************************************************/
+
+gulp.task("moveTemplates", function() {
+  const templateFiles = ["./src/templates/signup.html", 
+                         "./src/templates/confirm-email.html", 
+                         "./src/templates/subscription-confirmed-email.html"];
+
+  return gulp.src(templateFiles).pipe(gulp.dest("./dist"));
+});
+
+gulp.task("backclick", function() {
+  const templateFiles = ["./dist/signup.html", 
+                         "./dist/confirm-email.html", 
+                         "./dist/subscription-confirmed-email.html"];
+
+  return Promise.all(templateFiles.map((file) => readFilePromise(file)))
+    .then((buffers) => Promise.all(buffers.map((buffer) => buffer.toString())))
+    .then((contents) => {
+      fs.writeFile("./dist/backclick.html", contents.join(""));
+    });
+});
+
+gulp.task("template", ["css"]);
 
 /******************************************************************************
  * Watch
  ******************************************************************************/
 
 gulp.task("watch", function() {
-  gulp.watch("./scss/**/*.scss", ["css"]);
+  gulp.watch("./src/scss/**/*.scss", ["css"]);
+  gulp.watch("./src/templates/*.html", ["template", "backclick"]);
 });
 
 /******************************************************************************
  * Default
  ******************************************************************************/
 
-gulp.task("default", ["css", "watch"]);
+gulp.task("default", ["template", "css", "watch"]);