generator-politico-embeds
v0.4.0
Published
Yeoman generator for embeddable interactives at POLITICO.
Downloads
1
Keywords
Readme
generator-politico-embeds
A Yeoman generator to scaffold a development environment for building POLITICO embeddable interactives.
What it does:
- 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.
What you'll need installed
Make sure you have node installed as well as the yarn package manager.
Then install gulp, yeoman and this generator, globally*:
$ npm install -g gulp-cli yo generator-politico-embeds
* You may need to prefix with sudo
How to use
Starting a new project
Create a fresh directory for your project and move into it in your console.
$ mkdir my-project
$ cd my-project
Now run the generator and answer the questions it asks to build your dev environment.
$ yo politico-embeds
Run gulp to start the development server.
$ gulp
Develop files in the src
directory and they will be automatically compiled to the dist
directory, which are the files that will actually be published.
When you're ready to publish, complete the share information in meta.json
, then run the publish command through gulp.
$ gulp publish
If you need to invalidate files you've previously published in CloudFront, add the --invalidate
flag to the publish
command:
$ gulp publish --invalidate
Restarting a project
- Clone the project from github and
cd
into the project folder. - Install dependencies:
$ yarn install
- If your project is using ArchieML, run
gulp archie
to reconfigure :$ gulp archie
- Start
gulp
!
Working with templates
Templates are rendered using Nunjucks templating syntax. See Nunjucks' template inheritance, tags and builtin filters for more information.
Put data in templates/data.json
and it will be rendered as context with your templates. For example:
// templates/data.json
{
"headline": "My headline"
}
<!-- A template -->
<h1>{{headline}}</h1>
There is also an extra filter specifically for rendering Markdown:
<!-- Render context data with markdown -->
{{someText|markdown}}
<!-- Remove the outer paragraph tags with strip option -->
<h1>{{sectionTitle|markdown(strip=true)}}</h1>
ArchieML
Optionally, there is a gulp task available which allows you to use ArchieML and Google Docs to render content into your templates.
You will be asked if you want to use ArchieML when you start the generator. You can also add it to a project later by running:
$ yo politico-interactives:archie
To setup the ArchieML task you will need API credentials from a project in the Google Developers Console. Ask a developer for the client ID and secret keys. You will also need to provide the ID for the Google doc you wish to use, which you can get from the URL of your doc:
https://docs.google.com/document/d/yourgoogleIDhere/edit
These credentials are put into archie.json
, which you can change at any time.
Your document must have access set to "Anyone with the link can view" to use this task.
The archie gulp task will access your Google doc and overwrite templates/data.json
with ArchieML data. To run it:
$ gulp archie
On first running the task, you will need to authorize access to the document through Google. The task will open the authorization dialogue in your browser. Follow the prompts and then copy and paste the code returned in the redirect URL, which will look like this in the URL bar:
http://localhost:6006/?code=COPY-THIS-CODE-HERE
This access token will be saved in google-token.json
so that you can run the task subsequently without needing to re-authorize.
Note: If you've added ArchieML after the project was already created, you'll also need to add the task to your gulpfile. Simply edit it into the array of other tasks in gulpfile.js
:
const gulp = require('./gulp')([
'aws',
'archie', // Add this line
// ...
]);