-
Notifications
You must be signed in to change notification settings - Fork 0
Getting Started
We'll assume you have installed Node. You'll then need two global dependencies, bundle-module and time-interactive:
npm install -g bundle-module
npm install -g TimeMagazine/time-interactive
(Note: You shouldn't have to use sudo to use the -g (global) flag. If you do, see this article).
When globally installed, the module will bootstrap a project in the local directory in a new directory with the id you provide:
time-interactive [project_id]
By convention, all interactives are lowercase with underscores. There is no namespace, so they should be descriptive and unique. Years make for good descriptive elements, in case you made the same thing last year and have forgotten. This will be the id of a div in which the interactive lives, so it must be HTML5 compliant.
If the script detects an existing time-interactive project in the local directory by that name with an older version of time-interactive, it will ask you if you want to update it, which will update dependencies and any improvements to the transpilation we might have made.
We have a dedicated WordPress shortcode called time-interactive that can be placed in the body of any standard article at the desired location, like so:
[time-interactive id=my_great_app_2021]
This shortcode generates just a small amount of markup:
<div id="my_great_app_2021" class="time-interactive">
<img src="//assets.time.com/interactives/my_great_app_2021/screenshot.png" class="screenshot" style="width:100%;">
</div>
<script defer type="text/javascript" src="//assets.time.com/interactives/my_great_app_2021/script-min.js"></script>
That's all! Everything you develop will self-assemble and build itself inside this div, removing the screenshot in the process. By default, this screenshot is included as a 1px-tall white line, but it's a good idea to eventually include a high-quality screenshot just in case the JavaScript doesn't load. Note that interactives are deferred in loading so as not to interfere with ads and everything else.
Next: Development