diff --git a/README.md b/README.md
index 01a04e3..f27ea7a 100644
--- a/README.md
+++ b/README.md
@@ -4,11 +4,11 @@
-A [Yeoman](http://yeoman.io) generator to scaffold a development environment for building Politico interactives.
+A [Yeoman](http://yeoman.io) generator to scaffold a development environment for building POLITICO interactives.
### What it does:
-- Scaffolds your project's development directory, either for an embeddable feature or a complete interactive page.
+- Scaffolds your project's development directory.
- Compiles SCSS and bundles JS written in either ES5 or ES2015 using your choice of browserify or webpack.
- Creates responsive image sets optimized for mobile devices.
- Publishes your project to an Amazon S3 bucket.
@@ -102,6 +102,34 @@ There is also an extra filter specifically for rendering [Markdown](https://gith
{{sectionTitle|markdown(strip=true)}}
```
+#### UnCSS
+
+When building for production, this app uses [UnCSS](https://github.com/giakki/uncss) to remove unused styles. If you have rules that apply to classes set with JavaScript, you must explicitly tell UnCSS not to remove them with a special comment. By default, we also tell UnCSS to ignore any rules set inside a graphics section or with a class of `dataviz`.
+
+```CSS
+/* These rules will all be preserved by UnCSS */
+
+/* uncss:ignore */
+.myClass {
+ /* ... */
+}
+
+section.graphic{
+ /*...*/
+ .myClass {
+ /*...*/
+ }
+}
+
+.dataviz {
+ /*...*/
+ .myClass {
+ /*...*/
+ }
+}
+
+```
+
#### ArchieML
Optionally, there is a gulp task available which allows you to use [ArchieML](http://archieml.org/#demo) and Google Docs to render content into your templates.
@@ -162,16 +190,15 @@ To change styles, simply update the scss files in the following directory within
If you need to add a new SCSS file, ask a developer to help you write the line that loads your new file into a user's development directory.
-If you need to make changes to HTML templates, they are split between these folder, depending on what kind of project you're updating:
+If you need to make changes to HTML templates, they are here:
-- `generators/templates-embeddable/src/templates`
-- `generators/templates-interactive/src/templates`
+- `generators/templates/src/templates`
Again, if you need to add a new HTML file, rather than simply change an old one, talk to a developer.
#### Publishing
-Once you're satisfied with your changes, publish your updates through the following steps:
+Once you're satisfied with your changes and have tested your update, publish your updates through the following steps:
1. Increment the version number in `package.json`, e.g., `0.0.3` --> `0.0.4`
2. Commit your changes to github
3. Run:
diff --git a/generators/app/index.js b/generators/app/index.js
index f36f1fc..d24fe72 100644
--- a/generators/app/index.js
+++ b/generators/app/index.js
@@ -1,165 +1,30 @@
const Generator = require('yeoman-generator');
-const S = require('string');
module.exports = class extends Generator {
- constructor(args, opts) {
- super(args, opts);
- // Bundler options
- this.BROWSERIFY = 'browserify';
- this.WEBPACK = 'webpack';
- // Project type options
- this.EMBED = 'embed';
- this.PAGE = 'page';
- }
-
initializing() {
this.composeWith(require.resolve('../linters'));
this.composeWith(require.resolve('../gulp'));
this.composeWith(require.resolve('../styles'));
+ this.composeWith(require.resolve('../aws'));
}
prompting() {
const questions = [{
- type: 'list',
- name: 'projectType',
- message: 'Yo Politico! What do you want to make today?',
- choices: [
- {
- name: 'embeddable',
- value: this.EMBED,
- },
- {
- name: 'interactive page',
- value: this.PAGE,
- },
- ],
- }, {
type: 'input',
- name: 'projectTitle',
- message: 'OK, what do we call it?',
- }, {
- type: 'list',
- name: 'projectBundler',
- message: 'Which module bundler would you like to use?',
- default: this.BROWSERIFY,
- choices: [
- {
- name: 'Browserify (default)',
- value: this.BROWSERIFY,
- },
- {
- name: 'Webpack (ES2015 + SCSS)',
- value: this.WEBPACK,
- },
- ],
- }, {
- type: 'confirm',
- name: 'archieML',
- message: 'Would like to include an ArchieML configuration?',
- default: false,
- }, {
- name: 'awsAccessKey',
- message: 'What\'s your AWS access key?',
- store: true,
- }, {
- name: 'awsSecretKey',
- message: 'What\'s your AWS secret key?',
- store: true,
+ name: 'title',
+ message: 'Welcome to your new interactive. What will we call it?',
}];
return this.prompt(questions).then((answers) => {
- this.projectType = answers.projectType;
- this.projectTitle = answers.projectTitle;
- this.projectSlug = S(answers.projectTitle).slugify().s;
- this.projectBundler = answers.projectBundler;
- this.archieML = answers.archieML;
- this.awsAccessKey = answers.awsAccessKey;
- this.awsSecretKey = answers.awsSecretKey;
+ this.title = answers.title;
});
}
template() {
- switch (this.projectType) {
- case 'embed':
- this.composeWith(require.resolve('../templates-embeddable'), {
- title: this.projectTitle,
- webpack: this.projectBundler === this.WEBPACK,
- archie: this.archieML,
- });
- break;
- default:
- this.composeWith(require.resolve('../templates-page'), {
- title: this.projectTitle,
- webpack: this.projectBundler === this.WEBPACK,
- archie: this.archieML,
- });
- }
- }
- writing() {
- this.fs.copy(
- this.templatePath('aws.json.example'),
- this.destinationPath('aws.json.example'));
-
- this.fs.copy(
- this.templatePath('gitignore'),
- this.destinationPath('./.gitignore'));
-
- this.fs.copyTpl(
- this.templatePath('package.json'),
- this.destinationPath('package.json'), {
- slug: this.projectSlug,
- userName: this.user.git.name(),
- userEmail: this.user.git.email(),
- });
-
- const awsJSON = {
- accessKeyId: this.awsAccessKey,
- secretAccessKey: this.awsSecretKey,
- params: {
- Bucket: 'com.politico.interactives.politico.com',
- CloudFront: 'E3V6OHE700RHMR',
- },
- };
-
- const timestamp = new Date();
- const publishPath = this.projectType === 'embed' ?
- `${timestamp.getFullYear()}/embed/${this.projectSlug}/` :
- `${timestamp.getFullYear()}/${this.projectSlug}/`;
-
- const metaJSON = {
- id: (Math.floor(Math.random() * 100000000000) + 1).toString(),
- publishPath,
- url: `http://www.politico.com/interactives/${publishPath}`,
- share: {
- fbook: {
- card_title: this.projectTitle,
- card_description: '',
- author: 'politico',
- },
- twitter: {
- card_title: this.projectTitle,
- card_description: '',
- author: '@politico',
- },
- image: {
- url: `http://www.politico.com/interactives/${publishPath}images/share.jpg`,
- alt: '',
- type: 'image/jpeg',
- width: '600',
- height: '315',
- },
- keywords: 'Politico, News, Washington D.C.',
- },
- telium: {
- free_paid_content: 'free',
- site_section: 'white house',
- ad_unit_section: 'whitehouse',
- content_author: 'Polly Politico|Peter Politico',
- content_byline: 'By Polly Politico and Peter Politico',
- page_name: `${this.projectTitle} — POLITICO`,
- },
- };
-
- this.fs.writeJSON('aws.json', awsJSON);
- this.fs.writeJSON('meta.json', metaJSON);
+ this.composeWith(require.resolve('../meta'), {
+ title: this.title,
+ });
+ this.composeWith(require.resolve('../templates'), {
+ title: this.title,
+ });
}
};
diff --git a/generators/aws/index.js b/generators/aws/index.js
new file mode 100644
index 0000000..a3d935b
--- /dev/null
+++ b/generators/aws/index.js
@@ -0,0 +1,37 @@
+const Generator = require('yeoman-generator');
+
+module.exports = class extends Generator {
+ prompting() {
+ const questions = [{
+ name: 'awsAccessKey',
+ message: 'What\'s your AWS access key?',
+ store: true,
+ }, {
+ name: 'awsSecretKey',
+ message: 'What\'s your AWS secret key?',
+ store: true,
+ }];
+
+ return this.prompt(questions).then((answers) => {
+ this.awsAccessKey = answers.awsAccessKey;
+ this.awsSecretKey = answers.awsSecretKey;
+ });
+ }
+
+ writing() {
+ this.fs.copy(
+ this.templatePath('aws.json.example'),
+ this.destinationPath('aws.json.example'));
+
+ const awsJSON = {
+ accessKeyId: this.awsAccessKey,
+ secretAccessKey: this.awsSecretKey,
+ params: {
+ Bucket: 'com.politico.interactives.politico.com',
+ CloudFront: 'E3V6OHE700RHMR',
+ },
+ };
+
+ this.fs.writeJSON('aws.json', awsJSON);
+ }
+};
diff --git a/generators/app/templates/aws.json.example b/generators/aws/templates/aws.json.example
similarity index 100%
rename from generators/app/templates/aws.json.example
rename to generators/aws/templates/aws.json.example
diff --git a/generators/bundler-browserify/index.js b/generators/bundler-browserify/index.js
index 63817be..5eb3f35 100644
--- a/generators/bundler-browserify/index.js
+++ b/generators/bundler-browserify/index.js
@@ -4,12 +4,6 @@ module.exports = class extends Generator {
constructor(args, opts) {
super(args, opts);
- this.option('embed', {
- type: Boolean,
- required: false,
- default: false,
- desc: 'Whether building an embeddable',
- });
this.option('archie', {
type: Boolean,
required: false,
@@ -19,16 +13,6 @@ module.exports = class extends Generator {
}
writing() {
- if (this.options.embed) {
- this.fs.copy(
- this.templatePath('src/js/main-embed.js'),
- this.destinationPath('src/js/main.js'));
- } else {
- this.fs.copy(
- this.templatePath('src/js/main.js'),
- this.destinationPath('src/js/main.js'));
- }
-
this.fs.copyTpl(
this.templatePath('gulpfile.js'),
this.destinationPath('gulpfile.js'), {
@@ -66,9 +50,13 @@ module.exports = class extends Generator {
'fs-extra',
'gulp',
'gulp-babili',
+ 'gulp-cssnano',
+ 'gulp-env',
+ 'gulp-if',
'gulp-nunjucks-render',
'gulp-sass',
'gulp-sourcemaps',
+ 'gulp-uncss',
'gulp-util',
'marked',
'nunjucks',
@@ -78,9 +66,7 @@ module.exports = class extends Generator {
'vinyl-source-stream',
'watchify',
];
- if (this.options.embed) {
- dependencies.push('pym.js');
- }
+
this.yarnInstall(dependencies, { save: true });
}
};
diff --git a/generators/bundler-browserify/templates/gulp/tasks/nunjucks.js b/generators/bundler-browserify/templates/gulp/tasks/nunjucks.js
index 4b6f0f9..b5d6fc8 100644
--- a/generators/bundler-browserify/templates/gulp/tasks/nunjucks.js
+++ b/generators/bundler-browserify/templates/gulp/tasks/nunjucks.js
@@ -10,7 +10,8 @@ marked.setOptions({ smartypants: true });
const manageEnvironment = (environment) => {
environment.addFilter('markdown', (str, kwargs) => {
// strip outer