npm install
npm start
Go to http://localhost:8000
Fill out config.json
:
{
"title": "Title of your interactive",
"docData": "Any associated external data",
"path": "year/month/unique-title"
}
Then run
npm run deploy
You can check the deploy log by running
npm run log
NOTE: Updates can take up to 30 seconds to show in the logs
Run the command below, copy the URL into Composer and click embed.
npm run url
We use SASS for better CSS, Babel for next generation JavaScript and Rollup for bundling.
Interactive atoms have three components:
src/css/main.scss
src/render.js
should generate some HTML (by default returns the contents of src/templates/main.html
)src/js/main.js
, by default this simply loads src/js/app.js
Resources must be loaded with absolute paths, otherwise they won't work when deployed.
Use the template string <%= path %>
in any CSS, HTML or JS, it will be replaced
with the correct absolute path.
<img src="<%= path %>/assets/image.png" />
.test {
background-image: url('<%= path %>/assets/image.png');
}
var url = '<%= path %>/assets/image.png';
Interactive atoms are baked into the initial page response so you need to be careful about how much weight you are adding. While CSS and HTML are unlikely to ever be that large, you should worry about the size of your JS.
The difference between src/js/main.js
and src/js/app.js
is that the former is baked into
the page and the latter is not. Never load large libraries (such as d3) in src/js/main.js
.
In most cases, the majority of the work should happen in src/js/app.js
and src/js/main.js
should be reserved for simple initialisation.